From 0f9867c542a8f93de2460d327437df21f31e3297 Mon Sep 17 00:00:00 2001
From: rsandb <me@rileysandb.org>
Date: Wed, 11 Jan 2023 22:28:20 -0600
Subject: [PATCH] added data-cy divs to Task components

---
 website/src/components/Tasks/CreateTask.tsx   | 62 ++++++++++---------
 website/src/components/Tasks/EvaluateTask.tsx | 34 +++++-----
 website/src/components/Tasks/LabelTask.tsx    | 60 +++++++++---------
 3 files changed, 81 insertions(+), 75 deletions(-)

diff --git a/website/src/components/Tasks/CreateTask.tsx b/website/src/components/Tasks/CreateTask.tsx
index f0480ee4..e3f8f897 100644
--- a/website/src/components/Tasks/CreateTask.tsx
+++ b/website/src/components/Tasks/CreateTask.tsx
@@ -18,35 +18,37 @@ export const CreateTask = ({ task, taskType, onReplyChanged }: TaskSurveyProps<{
   };
 
   return (
-    <TwoColumnsWithCards>
-      <>
-        <Stack spacing="1">
-          <Text fontSize="xl" fontWeight="bold" color={titleColor}>
-            {taskType.label}
-          </Text>
-          <Text fontSize="md" color={labelColor}>
-            {taskType.overview}
-          </Text>
-        </Stack>
-        {task.conversation ? (
-          <Box mt="4">
-            <Messages messages={task.conversation.messages} post_id={task.id} />
-          </Box>
-        ) : null}
-      </>
-      <>
-        <Stack spacing="4">
-          <Text fontSize="xl" fontWeight="bold" color={titleColor}>
-            {taskType.instruction}
-          </Text>
-          <TrackedTextarea
-            text={inputText}
-            onTextChange={textChangeHandler}
-            thresholds={{ low: 20, medium: 40, goal: 50 }}
-            textareaProps={{ placeholder: "Write your prompt here..." }}
-          />
-        </Stack>
-      </>
-    </TwoColumnsWithCards>
+    <div data-cy="task" data-task-type="create-task">
+      <TwoColumnsWithCards>
+        <>
+          <Stack spacing="1">
+            <Text fontSize="xl" fontWeight="bold" color={titleColor}>
+              {taskType.label}
+            </Text>
+            <Text fontSize="md" color={labelColor}>
+              {taskType.overview}
+            </Text>
+          </Stack>
+          {task.conversation ? (
+            <Box mt="4">
+              <Messages messages={task.conversation.messages} post_id={task.id} />
+            </Box>
+          ) : null}
+        </>
+        <>
+          <Stack spacing="4">
+            <Text fontSize="xl" fontWeight="bold" color={titleColor}>
+              {taskType.instruction}
+            </Text>
+            <TrackedTextarea
+              text={inputText}
+              onTextChange={textChangeHandler}
+              thresholds={{ low: 20, medium: 40, goal: 50 }}
+              textareaProps={{ placeholder: "Write your prompt here..." }}
+            />
+          </Stack>
+        </>
+      </TwoColumnsWithCards>
+    </div>
   );
 };
diff --git a/website/src/components/Tasks/EvaluateTask.tsx b/website/src/components/Tasks/EvaluateTask.tsx
index a6a43776..a85e9abd 100644
--- a/website/src/components/Tasks/EvaluateTask.tsx
+++ b/website/src/components/Tasks/EvaluateTask.tsx
@@ -32,21 +32,23 @@ export const EvaluateTask = ({ task, onReplyChanged }: TaskSurveyProps<{ ranking
   const sortables = task.replies ? "replies" : "prompts";
 
   return (
-    <Box mb="4">
-      <SurveyCard>
-        <Stack spacing="1">
-          <Text fontSize="xl" fontWeight="bold" color={titleColor}>
-            Instructions
-          </Text>
-          <Text fontSize="md" color={labelColor}>
-            Given the following {sortables}, sort them from best to worst, best being first, worst being last.
-          </Text>
-        </Stack>
-        <Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
-          <MessageTable messages={messages} />
-        </Box>
-        <Sortable items={task[sortables]} onChange={onRank} className="my-8" />
-      </SurveyCard>
-    </Box>
+    <div data-cy="task" data-task-type="evaluate-task">
+      <Box mb="4">
+        <SurveyCard>
+          <Stack spacing="1">
+            <Text fontSize="xl" fontWeight="bold" color={titleColor}>
+              Instructions
+            </Text>
+            <Text fontSize="md" color={labelColor}>
+              Given the following {sortables}, sort them from best to worst, best being first, worst being last.
+            </Text>
+          </Stack>
+          <Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
+            <MessageTable messages={messages} />
+          </Box>
+          <Sortable items={task[sortables]} onChange={onRank} className="my-8" />
+        </SurveyCard>
+      </Box>
+    </div>
   );
 };
diff --git a/website/src/components/Tasks/LabelTask.tsx b/website/src/components/Tasks/LabelTask.tsx
index d3c40452..637715c9 100644
--- a/website/src/components/Tasks/LabelTask.tsx
+++ b/website/src/components/Tasks/LabelTask.tsx
@@ -35,36 +35,38 @@ export const LabelTask = ({
   const labelColor = useColorModeValue("gray.600", "gray.400");
 
   return (
-    <TwoColumnsWithCards>
-      <>
-        <Text fontSize="xl" fontWeight="bold" color={titleColor}>
-          {taskType.label}
-        </Text>
-        <Text fontSize="md" color={labelColor}>
-          {taskType.overview}
-        </Text>
+    <div data-cy="task" data-task-type="label-task">
+      <TwoColumnsWithCards>
+        <>
+          <Text fontSize="xl" fontWeight="bold" color={titleColor}>
+            {taskType.label}
+          </Text>
+          <Text fontSize="md" color={labelColor}>
+            {taskType.overview}
+          </Text>
 
-        {task.conversation ? (
-          <Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
-            <MessageTable
-              messages={[
-                ...(task.conversation ? task.conversation.messages : []),
-                {
-                  text: task.reply,
-                  is_assistant: task.type === TaskType.label_assistant_reply,
-                  message_id: task.message_id,
-                },
-              ]}
-            />
-          </Box>
-        ) : (
-          <Box mt="4">
-            <MessageView text={task.prompt} is_assistant={false} message_id={task.message_id} />
-          </Box>
-        )}
-      </>
-      <LabelSliderGroup labelIDs={task.valid_labels} onChange={onSliderChange} />
-    </TwoColumnsWithCards>
+          {task.conversation ? (
+            <Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
+              <MessageTable
+                messages={[
+                  ...(task.conversation ? task.conversation.messages : []),
+                  {
+                    text: task.reply,
+                    is_assistant: task.type === TaskType.label_assistant_reply,
+                    message_id: task.message_id,
+                  },
+                ]}
+              />
+            </Box>
+          ) : (
+            <Box mt="4">
+              <MessageView text={task.prompt} is_assistant={false} message_id={task.message_id} />
+            </Box>
+          )}
+        </>
+        <LabelSliderGroup labelIDs={task.valid_labels} onChange={onSliderChange} />
+      </TwoColumnsWithCards>
+    </div>
   );
 };