From 19e58c04a595567f4e25f12fee587bebfc333e39 Mon Sep 17 00:00:00 2001
From: Adrian Cowan <othrayte@gmail.com>
Date: Sat, 14 Jan 2023 02:11:16 +1100
Subject: [PATCH] website: make e2e tests actually test the tasks work

Prior to this change the tests didn't handle any task types as the detection of the task type was failing.
---
 website/cypress/e2e/tasks/random.cy.ts        | 96 ++++++++++---------
 .../src/components/Sortable/SortableItem.tsx  |  1 +
 website/src/components/Tasks/LabelTask.tsx    |  7 +-
 3 files changed, 59 insertions(+), 45 deletions(-)

diff --git a/website/cypress/e2e/tasks/random.cy.ts b/website/cypress/e2e/tasks/random.cy.ts
index 2ab3bf40..ef970123 100644
--- a/website/cypress/e2e/tasks/random.cy.ts
+++ b/website/cypress/e2e/tasks/random.cy.ts
@@ -5,56 +5,64 @@ describe("handles random tasks", () => {
     cy.signInWithEmail("cypress@example.com");
     cy.visit("/tasks/random");
 
-    // Check all create tasks.
-    cy.get('[data-cy="task"]').then((createTaskElement) => {
-      if (createTaskElement.find('[data-task-type="create-task"]').length) {
-        cy.get('[data-cy="task-id"]').then((taskIdElement) => {
-          const taskId = taskIdElement.text();
+    // Do some tasks
+    for (let taskNum = 0; taskNum < 10; taskNum++) {
+      cy.get('[data-cy="task"]')
+        .invoke("attr", "data-task-type")
+        .then((type) => {
+          cy.log("Task type", type);
 
-          const reply = faker.lorem.sentence();
-          cy.log("reply", reply);
-          cy.get('[data-cy="reply"]').type(reply);
+          cy.get('[data-cy="task-id"]').then((taskIdElement) => {
+            const taskId = taskIdElement.text();
 
-          cy.get('[data-cy="review"]').click();
+            switch (type) {
+              case "create-task": {
+                const reply = faker.lorem.sentence();
+                cy.log("reply", reply);
+                cy.get('[data-cy="reply"]').type(reply);
 
-          cy.get('[data-cy="submit"]').click();
+                cy.get('[data-cy="review"]').click();
 
-          cy.get('[data-cy="task-id]"').should((taskIdElement) => {
-            expect(taskIdElement.text()).not.to.eq(taskId);
+                cy.get('[data-cy="submit"]').click();
+                break;
+              }
+              case "evaluate-task": {
+                // Rank an item using the keyboard so that the submit button is enabled
+                cy.get('[aria-roledescription="sortable"]')
+                  .first()
+                  .click()
+                  .type("{enter}")
+                  .wait(100)
+                  .type("{downArrow}")
+                  .wait(100)
+                  .type("{enter}");
+
+                cy.get('[data-cy="review"]').click();
+
+                cy.get('[data-cy="submit"]').click();
+
+                break;
+              }
+              case "label-task": {
+                // Clicking on the slider will set the value to about the middle where it clicks
+                cy.get('[aria-roledescription="slider"]').first().click();
+
+                cy.get('[data-cy="review"]').click();
+
+                cy.get('[data-cy="submit"]').click();
+
+                break;
+              }
+              default:
+                throw new Error(`Unexpected task type: ${type}`);
+            }
+
+            cy.get('[data-cy="task-id"]').should((taskIdElement) => {
+              expect(taskIdElement.text()).not.to.eq(taskId);
+            });
           });
         });
-      }
-
-      // Check all Evaluate tasks.
-      if (createTaskElement.find('[data-task-type="evaluate-task"]').length) {
-        cy.get('[data-cy="task-id"]').then((taskIdElement) => {
-          const taskId = taskIdElement.text();
-
-          // Rank an item using the keyboard so that the submit button is enabled
-          cy.get('button[aria-roledescription="sortable"]')
-            .first()
-            .click()
-            .type("{enter}")
-            .wait(100)
-            .type("{downArrow}")
-            .wait(100)
-            .type("{enter}");
-
-          cy.get('[data-cy="review"]').click();
-
-          cy.get('[data-cy="submit"]').click();
-
-          cy.get('[data-cy="task-id"]').should((taskIdElement) => {
-            expect(taskIdElement.text()).not.to.eq(taskId);
-          });
-        });
-      }
-
-      if (createTaskElement.find('[data-task-type="label-task"]').length) {
-      }
-
-      // TODO(#623): Figure out how to fail the test if none of the checks above pass.
-    });
+    }
   });
 });
 
diff --git a/website/src/components/Sortable/SortableItem.tsx b/website/src/components/Sortable/SortableItem.tsx
index 56722694..ca6176c1 100644
--- a/website/src/components/Sortable/SortableItem.tsx
+++ b/website/src/components/Sortable/SortableItem.tsx
@@ -34,6 +34,7 @@ export const SortableItem = ({
       p="4"
       color={textColor}
       cursor={isEditable ? (grabbing ? "grabbing" : "grab") : "auto"}
+      aria-roledescription="sortable"
       onMouseDown={() => {
         setGrabbing(true);
       }}
diff --git a/website/src/components/Tasks/LabelTask.tsx b/website/src/components/Tasks/LabelTask.tsx
index fe508600..dd66b572 100644
--- a/website/src/components/Tasks/LabelTask.tsx
+++ b/website/src/components/Tasks/LabelTask.tsx
@@ -118,7 +118,12 @@ function CheckboxSliderItem(props: {
         {/* TODO: display real text instead of just the id */}
         <span className={labelTextClass}>{props.labelId}</span>
       </label>
-      <Slider defaultValue={0} isDisabled={!props.isEditable} onChangeEnd={(val) => props.sliderHandler(val / 100)}>
+      <Slider
+        aria-roledescription="slider"
+        defaultValue={0}
+        isDisabled={!props.isEditable}
+        onChangeEnd={(val) => props.sliderHandler(val / 100)}
+      >
         <SliderTrack>
           <SliderFilledTrack />
           <SliderThumb />