website: Add e2e tests of ranking replies and prompts

Like the previous commit, these are intended to function as a minimal smoke test that the API interaction with the backend is functional.

website/cypress/e2e/evaluate/rank_assistant_replies.cy.ts

@@ -0,0 +1,30 @@
+describe("ranking prompter replies", () => {
+  it("completes the current task on submit and on request shows a new task", () => {
+    cy.signInWithEmail("cypress@example.com");
+    cy.visit("/evaluate/rank_user_replies");
+
+    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="submit"]').click();
+
+      cy.get('[data-cy="next-task"]').click();
+
+      cy.get('[data-cy="task-id"').should((taskIdElement) => {
+        expect(taskIdElement.text()).not.to.eq(taskId);
+      });
+    });
+  });
+});
+
+export {};

website/cypress/e2e/evaluate/rank_initial_prompts.cy.ts

@@ -0,0 +1,30 @@
+describe("ranking initial prompts", () => {
+  it("completes the current task on submit and on request shows a new task", () => {
+    cy.signInWithEmail("cypress@example.com");
+    cy.visit("/evaluate/rank_initial_prompts");
+
+    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="submit"]').click();
+
+      cy.get('[data-cy="next-task"]').click();
+
+      cy.get('[data-cy="task-id"').should((taskIdElement) => {
+        expect(taskIdElement.text()).not.to.eq(taskId);
+      });
+    });
+  });
+});
+
+export {};

website/cypress/e2e/evaluate/rank_user_replies.cy.ts

@@ -0,0 +1,30 @@
+describe("ranking assistant replies", () => {
+  it("completes the current task on submit and on request shows a new task", () => {
+    cy.signInWithEmail("cypress@example.com");
+    cy.visit("/evaluate/rank_assistant_replies");
+
+    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="submit"]').click();
+
+      cy.get('[data-cy="next-task"]').click();
+
+      cy.get('[data-cy="task-id"').should((taskIdElement) => {
+        expect(taskIdElement.text()).not.to.eq(taskId);
+      });
+    });
+  });
+});
+
+export {};

website/src/pages/evaluate/rank_assistant_replies.tsx

@@ -78,11 +78,13 @@ const RankAssistantReplies = () => {
           <Flex justify="center" ml="auto" gap={2}>
             <SkipButton>Skip</SkipButton>
             {endTask.task.type !== "task_done" ? (
-              <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
+              <SubmitButton data-cy="submit" onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
                 Submit
               </SubmitButton>
             ) : (
-              <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
+              <SubmitButton data-cy="next-task" onClick={fetchNextTask}>
+                Next Task
+              </SubmitButton>
             )}
           </Flex>
         </section>

website/src/pages/evaluate/rank_initial_prompts.tsx

@@ -77,11 +77,13 @@ const RankInitialPrompts = () => {
           <Flex justify="center" ml="auto" gap={2}>
             <SkipButton>Skip</SkipButton>
             {endTask.task.type !== "task_done" ? (
-              <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
+              <SubmitButton data-cy="submit" onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
                 Submit
               </SubmitButton>
             ) : (
-              <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
+              <SubmitButton data-cy="next-task" onClick={fetchNextTask}>
+                Next Task
+              </SubmitButton>
             )}
           </Flex>
         </section>

website/src/pages/evaluate/rank_user_replies.tsx

@@ -78,11 +78,13 @@ const RankUserReplies = () => {
           <Flex justify="center" ml="auto" gap={2}>
             <SkipButton>Skip</SkipButton>
             {endTask.task.type !== "task_done" ? (
-              <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
+              <SubmitButton data-cy="submit" onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
                 Submit
               </SubmitButton>
             ) : (
-              <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
+              <SubmitButton data-cy="next-task" onClick={fetchNextTask}>
+                Next Task
+              </SubmitButton>
             )}
           </Flex>
         </section>