From 32e212b5a52391df2d78fccaa2dd1d9db218ff0e Mon Sep 17 00:00:00 2001
From: Adrian Cowan <othrayte@gmail.com>
Date: Mon, 2 Jan 2023 17:59:03 +1100
Subject: [PATCH] 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.
---
 .../cypress/e2e/create/assistant_reply.cy.ts  | 26 +++++++++++++++++++
 website/cypress/e2e/create/user_reply.cy.ts   | 26 +++++++++++++++++++
 website/src/components/TaskInfo/TaskInfo.tsx  |  2 +-
 website/src/pages/create/assistant_reply.tsx  | 10 ++++---
 website/src/pages/create/user_reply.tsx       | 10 ++++---
 5 files changed, 67 insertions(+), 7 deletions(-)
 create mode 100644 website/cypress/e2e/create/assistant_reply.cy.ts
 create mode 100644 website/cypress/e2e/create/user_reply.cy.ts

diff --git a/website/cypress/e2e/create/assistant_reply.cy.ts b/website/cypress/e2e/create/assistant_reply.cy.ts
new file mode 100644
index 00000000..aa72b846
--- /dev/null
+++ b/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 {};
diff --git a/website/cypress/e2e/create/user_reply.cy.ts b/website/cypress/e2e/create/user_reply.cy.ts
new file mode 100644
index 00000000..c126e9c5
--- /dev/null
+++ b/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 {};
diff --git a/website/src/components/TaskInfo/TaskInfo.tsx b/website/src/components/TaskInfo/TaskInfo.tsx
index fa16615e..d32f7d9d 100644
--- a/website/src/components/TaskInfo/TaskInfo.tsx
+++ b/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>
diff --git a/website/src/pages/create/assistant_reply.tsx b/website/src/pages/create/assistant_reply.tsx
index 4350fe16..4941c106 100644
--- a/website/src/pages/create/assistant_reply.tsx
+++ b/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>
diff --git a/website/src/pages/create/user_reply.tsx b/website/src/pages/create/user_reply.tsx
index 8a5132e0..71794b23 100644
--- a/website/src/pages/create/user_reply.tsx
+++ b/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>