website: Add e2e tests of creating an assistant/prompter reply

These are intended to function as a minimal smoke test that the API interaction with the backend is functional.

website/cypress/e2e/create/assistant_reply.cy.ts

@@ -0,0 +1,26 @@
+import { faker } from "@faker-js/faker";
+
+describe("replying as the assistant", () => {
+  it("completes the current task on submit and on request shows a new task", () => {
+    cy.signInWithEmail("cypress@example.com");
+    cy.visit("/create/assistant_reply");
+
+    cy.get('[data-cy="task-id"').then((taskIdElement) => {
+      const taskId = taskIdElement.text();
+
+      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="next-task"]').click();
+
+      cy.get('[data-cy="task-id"').should((taskIdElement) => {
+        expect(taskIdElement.text()).not.to.eq(taskId);
+      });
+    });
+  });
+});
+
+export {};

website/cypress/e2e/create/user_reply.cy.ts

@@ -0,0 +1,26 @@
+import { faker } from "@faker-js/faker";
+
+describe("replying as the prompter", () => {
+  it("completes the current task on submit and on request shows a new task", () => {
+    cy.signInWithEmail("cypress@example.com");
+    cy.visit("/create/user_reply");
+
+    cy.get('[data-cy="task-id"').then((taskIdElement) => {
+      const taskId = taskIdElement.text();
+
+      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="next-task"]').click();
+
+      cy.get('[data-cy="task-id"').should((taskIdElement) => {
+        expect(taskIdElement.text()).not.to.eq(taskId);
+      });
+    });
+  });
+});
+
+export {};

website/src/components/TaskInfo/TaskInfo.tsx

@@ -2,7 +2,7 @@ export const TaskInfo = ({ id, output }: { id: string; output: string }) => {
   return (
     <div className="grid grid-cols-[min-content_auto] gap-x-2 text-gray-700">
       <b>Prompt</b>
-      <span>{id}</span>
+      <span data-cy="task-id">{id}</span>
       <b>Output</b>
       <span>{output}</span>
     </div>

website/src/pages/create/assistant_reply.tsx

@@ -63,7 +63,7 @@ const AssistantReply = () => {
           <p className="text-lg py-1">Given the following conversation, provide an adequate reply</p>
           <Messages messages={task.conversation.messages} post_id={task.id} />
         </>
-        <Textarea name="reply" placeholder="Reply..." ref={inputRef} />
+        <Textarea name="reply" data-cy="reply" placeholder="Reply..." ref={inputRef} />
       </TwoColumns>
 
       <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
@@ -72,9 +72,13 @@ const AssistantReply = () => {
         <Flex justify="center" ml="auto" gap={2}>
           <SkipButton>Skip</SkipButton>
           {endTask.task.type !== "task_done" ? (
-            <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
+            <SubmitButton data-cy="submit" onClick={() => submitResponse(tasks[0])}>
+              Submit
+            </SubmitButton>
           ) : (
-            <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
+            <SubmitButton data-cy="next-task" onClick={fetchNextTask}>
+              Next Task
+            </SubmitButton>
           )}
         </Flex>
       </section>

website/src/pages/create/user_reply.tsx

@@ -64,7 +64,7 @@ const UserReply = () => {
           <Messages messages={task.conversation.messages} post_id={task.id} />
           {task.hint && <p className="text-lg py-1">Hint: {task.hint}</p>}
         </>
-        <Textarea name="reply" placeholder="Reply..." ref={inputRef} />
+        <Textarea name="reply" data-cy="reply" placeholder="Reply..." ref={inputRef} />
       </TwoColumns>
 
       <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
@@ -72,9 +72,13 @@ const UserReply = () => {
         <Flex justify="center" ml="auto" gap={2}>
           <SkipButton>Skip</SkipButton>
           {endTask.task.type !== "task_done" ? (
-            <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
+            <SubmitButton data-cy="submit" onClick={() => submitResponse(tasks[0])}>
+              Submit
+            </SubmitButton>
           ) : (
-            <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
+            <SubmitButton data-cy="next-task" onClick={fetchNextTask}>
+              Next Task
+            </SubmitButton>
           )}
         </Flex>
       </section>