test: add chat e2e tests (#1344)

- Brain selection
- Chat deletion
- Unplug chat
- Plug chat

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionItem.tsx

@@ -14,11 +14,15 @@ export const MentionItem = ({
   trigger,
 }: MentionItemProps): JSX.Element => {
   return (
-    <div className="relative inline-block w-fit-content">
+    <div
+      className="relative inline-block w-fit-content"
+      data-testid="mention-item"
+    >
       <div className="flex items-center bg-gray-300 mr-2 text-gray-600 rounded-2xl py-1 px-2">
         <span className="flex-grow">{`${trigger ?? ""}${text}`}</span>
         <MdRemoveCircleOutline
           className="cursor-pointer absolute top-0 right-0 mt-0 mr-0"
+          data-testid="remove-mention"
           onClick={onRemove}
         />
       </div>

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx

@@ -41,7 +41,7 @@ export const ChatInput = ({
             <Button
               className="p-0"
               variant={"tertiary"}
-              data-testid="upload-button"
+              data-testid="feed-button"
               type="button"
               onClick={() => setShouldDisplayFeedCard(true)}
               tooltip={t("add_content_card_button_tooltip")}

frontend/app/chat/components/ChatsList/components/ChatsListItem/ChatsListItem.tsx

@@ -58,6 +58,7 @@ export const ChatsListItem = ({ chat }: ChatsListItemProps): JSX.Element => {
           className="p-5 hover:text-red-700"
           type="button"
           onClick={() => void deleteChat()}
+          data-testid="delete-chat-button"
         >
           <FiTrash2 />
         </button>

frontend/e2e/index.ts

@@ -1,11 +1,11 @@
 import { test } from "@playwright/test";
 
 import { chatTests } from "./tests/chat";
+import { crawlTests } from "./tests/crawl";
 import { createBrainTests } from "./tests/createBrain";
-import { uploadTests } from "./tests/upload";
 
 test.describe(createBrainTests);
 
-test.describe(uploadTests);
+test.describe(crawlTests);
 
-test.describe.skip(chatTests);
+test.describe(chatTests);

frontend/e2e/tests/chat.ts

@@ -1,13 +0,0 @@
-import { test } from "@playwright/test";
-
-import { login } from "../utils/login";
-
-export const chatTests = (): void => {
-  test("chat", async ({ page }) => {
-    await login(page);
-    await page.goto("/chat");
-    await page.getByRole("combobox").locator("div").nth(2).click();
-    await page.getByRole("combobox").fill("Hello");
-    await page.getByTestId("submit-button").click();
-  });
-};

frontend/e2e/tests/chat/chat.ts

@@ -0,0 +1,17 @@
+import { test } from "@playwright/test";
+
+import { testChat } from "./utils/testChat";
+import { testDeleteChats } from "./utils/testDeleteChats";
+import { testSelectBrain } from "./utils/testSelectBrain";
+import { testUnplugChat } from "./utils/testUnplugChat";
+import { login } from "../../utils/login";
+
+export const chatTests = (): void => {
+  test("chat", async ({ page }) => {
+    await login(page);
+    await testChat(page);
+    await testUnplugChat(page);
+    await testSelectBrain(page);
+    await testDeleteChats(page);
+  });
+};

frontend/e2e/tests/chat/index.ts

@@ -0,0 +1 @@
+export * from "./chat";

frontend/e2e/tests/chat/utils/getEditor.ts

@@ -0,0 +1,10 @@
+import { Locator, Page } from "@playwright/test";
+
+export const getEditor = (page: Page): Locator => {
+  const chatInputEditor = page.locator('[data-testid="chat-input"]');
+  const contentEditableDiv = chatInputEditor.locator(
+    'div[contentEditable="true"]'
+  );
+
+  return contentEditableDiv;
+};

frontend/e2e/tests/chat/utils/testChat.ts

@@ -0,0 +1,18 @@
+import { Page } from "@playwright/test";
+
+import { getEditor } from "./getEditor";
+
+export const testChat = async (page: Page): Promise<void> => {
+  const randomMessage = Math.random().toString(36).substring(7);
+
+  const editor = getEditor(page);
+
+  await editor.fill(randomMessage);
+
+  await page.getByTestId("submit-button").click();
+
+  await page
+    .getByTestId("chat-message-text")
+    .getByText(`${randomMessage}`)
+    .isVisible();
+};

frontend/e2e/tests/chat/utils/testDeleteChats.ts

@@ -0,0 +1,11 @@
+import { expect, Page } from "@playwright/test";
+
+export const testDeleteChats = async (page: Page): Promise<void> => {
+  const deleteChatButtons = await page.getByTestId("delete-chat-button").all();
+
+  for (const button of deleteChatButtons) {
+    await button.click();
+  }
+
+  expect((await page.getByTestId("chats-list-item").all()).length === 0);
+};

frontend/e2e/tests/chat/utils/testSelectBrain.ts

@@ -0,0 +1,23 @@
+import { Page } from "@playwright/test";
+import { getEditor } from "./getEditor";
+
+export const testSelectBrain = async (page: Page): Promise<void> => {
+  const randomMessage = Math.random().toString(36).substring(7);
+
+  const editor = getEditor(page);
+
+  await editor.fill("@");
+
+  await page.getByText("Test brain").first().click();
+
+  await editor.fill(randomMessage);
+
+  await page.getByTestId("submit-button").click();
+
+  await page
+    .getByTestId("chat-message-text")
+    .getByText(`${randomMessage}`)
+    .isVisible();
+
+  await page.getByTestId("brain-tags").getByText("Test brain").isVisible();
+};

frontend/e2e/tests/chat/utils/testUnplugChat.ts

@@ -0,0 +1,20 @@
+import { Page } from "@playwright/test";
+import { getEditor } from "./getEditor";
+
+export const testUnplugChat = async (page: Page): Promise<void> => {
+  await page.getByTestId("remove-mention").click();
+  await page.getByTestId("mention-input").isHidden();
+
+  const randomMessage = Math.random().toString(36).substring(7);
+
+  const editor = getEditor(page);
+
+  await editor.fill(randomMessage);
+
+  await page.getByTestId("submit-button").click();
+
+  await page
+    .getByTestId("chat-message-text")
+    .getByText(`${randomMessage}`)
+    .isVisible();
+};

frontend/e2e/tests/crawl.ts

@@ -2,10 +2,10 @@ import { test } from "@playwright/test";
 
 import { login } from "../utils/login";
 
-export const uploadTests = (): void => {
+export const crawlTests = (): void => {
   test("it should be able to add url to crawl", async ({ page }) => {
     await login(page);
-    await page.getByTestId("upload-button").click();
+    await page.getByTestId("feed-button").click();
     await page.getByTestId("feed-card").isVisible();
     await page.getByTestId("urlToCrawlInput").click();
     await page.getByTestId("urlToCrawlInput").fill("https://quivr.app");