feat: add createBrain E2E test

.frontend_env.example

@@ -6,6 +6,6 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=<change-me>
 NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY=<ignore-me-or-change-me>
 NEXT_PUBLIC_JUNE_API_KEY=<ignore-me-or-change-me>
 NEXT_PUBLIC_GROWTHBOOK_URL=<ignore-me-or-change-me>
-NEXT_PUBLIC_E2E_URL=<ignore-me-or-change-me>
+NEXT_PUBLIC_E2E_URL=http://localhost:3003
 NEXT_PUBLIC_E2E_EMAIL=<ignore-me-or-change-me>
 NEXT_PUBLIC_E2E_PASSWORD=<ignore-me-or-change-me>

frontend/app/(auth)/login/page.tsx

@@ -8,22 +8,24 @@ import { Divider } from "@/lib/components/ui/Divider";
 import Field from "@/lib/components/ui/Field";
 import PageHeading from "@/lib/components/ui/PageHeading";
 
+import { Suspense } from "react";
+import { useTranslation } from "react-i18next";
 import { GoogleLoginButton } from "./components/GoogleLogin";
 import { MagicLinkLogin } from "./components/MagicLinkLogin";
 import { PasswordForgotten } from "./components/PasswordForgotten";
 import { useLogin } from "./hooks/useLogin";
-import { useTranslation } from "react-i18next";
-import { Suspense } from "react";
-
 
 function Main() {
   const { handleLogin, setEmail, setPassword, email, isPending, password } =
     useLogin();
-  const { t } = useTranslation(["translation","login"]);
+  const { t } = useTranslation(["translation", "login"]);
   return (
     <main>
       <section className="w-full min-h-[80vh] h-full outline-none flex flex-col gap-5 items-center justify-center p-6">
-        <PageHeading title={t("title",{ ns: 'login' })} subtitle={t("subtitle",{ ns: 'login' })} />
+        <PageHeading
+          title={t("title", { ns: "login" })}
+          subtitle={t("subtitle", { ns: "login" })}
+        />
         <Card className="max-w-md w-full p-5 sm:p-10 text-left">
           <form
             data-testid="sign-in-form"
@@ -51,12 +53,16 @@ function Main() {
             />
 
             <div className="flex flex-col items-center justify-center mt-2 gap-2">
-              <Button type="submit" isLoading={isPending}>
+              <Button
+                data-testid="submit-login"
+                type="submit"
+                isLoading={isPending}
+              >
                 {t("loginButton")}
               </Button>
               <PasswordForgotten setEmail={setEmail} email={email} />
 
-              <Link href="/signup">{t("signup",{ ns: 'login' })}</Link>
+              <Link href="/signup">{t("signup", { ns: "login" })}</Link>
             </div>
 
             <Divider text={t("or")} />
@@ -69,14 +75,13 @@ function Main() {
         </Card>
       </section>
     </main>
-  )
+  );
 }
 
 export default function Login() {
   return (
     <Suspense fallback="Loading...">
       <Main />
     </Suspense>
-
   );
 }

frontend/e2e/index.ts

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

frontend/e2e/tests/chat.ts

@@ -0,0 +1,13 @@
+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/createBrain.ts

@@ -0,0 +1,13 @@
+import { test } from "@playwright/test";
+
+import { login } from "../utils/login";
+
+export const createBrainTests = (): void => {
+  test("create brain", async ({ page }) => {
+    await login(page);
+    await page.getByTestId("brain-management-button").first().click();
+    await page.getByTestId("add-brain-button").click();
+    await page.getByTestId("brain-name").fill("Test brain");
+    await page.getByTestId("create-brain-submit-button").click();
+  });
+};

frontend/e2e/tests/upload.ts

@@ -0,0 +1,19 @@
+import { test } from "@playwright/test";
+
+import { login } from "../utils/login";
+
+export const uploadTests = (): void => {
+  test("upload", async ({ page }) => {
+    await login(page);
+    await page.goto("/chat");
+    await page.getByTestId("upload-button").click();
+    await page
+      .getByRole("button", {
+        name: "Drag and drop files here, or click to browse",
+      })
+      .click();
+    await page.getByPlaceholder("Insert website URL").click();
+    await page.getByPlaceholder("Insert website URL").fill("https://quivr.app");
+    await page.getByPlaceholder("Insert website URL").press("Enter");
+  });
+};

frontend/e2e/utils/login.ts

@@ -5,20 +5,20 @@ export const login = async (page: Page): Promise<void> => {
   const email = process.env.NEXT_PUBLIC_E2E_EMAIL;
   const password = process.env.NEXT_PUBLIC_E2E_PASSWORD;
 
-  if (frontendUrl == null) {
+  if (frontendUrl === undefined) {
     throw new Error("NEXT_PUBLIC_E2E_URL is not defined");
   }
-  if (email == null) {
+  if (email === undefined) {
     throw new Error("NEXT_PUBLIC_E2E_EMAIL is not defined");
   }
-  if (password == null) {
+  if (password === undefined) {
     throw new Error("NEXT_PUBLIC_E2E_PASSWORD is not defined");
   }
 
   await page.goto(frontendUrl);
-  await page.getByPlaceholder("Email").click();
-  await page.getByPlaceholder("Email").fill("");
-  await page.getByPlaceholder("Email").press("Tab");
-  await page.getByPlaceholder("Password").fill("");
-  await page.getByRole("button", { name: "Login", exact: true }).click();
+  await page.getByTestId("login-button").first().click();
+  await page.getByPlaceholder("Email").fill(email);
+  await page.getByPlaceholder("Password").fill(password);
+  await page.getByTestId("submit-login").click();
+  await page.waitForURL(/chat/);
 };

frontend/lib/components/AddBrainModal/AddBrainModal.tsx

@@ -36,6 +36,7 @@ export const AddBrainModal = (): JSX.Element => {
           onClick={() => void 0}
           variant={"tertiary"}
           className="border-0"
+          data-testid="add-brain-button"
         >
           {t("newBrain", { ns: "brain" })}
           <MdAdd className="text-xl" />
@@ -61,6 +62,7 @@ export const AddBrainModal = (): JSX.Element => {
           autoComplete="off"
           className="flex-1"
           required
+          data-testid="brain-name"
           {...register("name")}
         />
 
@@ -154,7 +156,12 @@ export const AddBrainModal = (): JSX.Element => {
           </label>
         </div>
 
-        <Button isLoading={isPending} className="mt-12 self-end" type="submit">
+        <Button
+          isLoading={isPending}
+          className="mt-12 self-end"
+          type="submit"
+          data-testid="create-brain-submit-button"
+        >
           {t("createButton")}
           <MdAdd className="text-xl" />
         </Button>

frontend/lib/components/NavBar/components/NavItems/components/AuthButtons.tsx

@@ -7,7 +7,7 @@ import Button from "@/lib/components/ui/Button";
 export const AuthButtons = (): JSX.Element => {
   const pathname = usePathname();
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const {t, i18n} = useTranslation();
+  const { t } = useTranslation();
 
   if (pathname === "/signup") {
     return (
@@ -16,19 +16,19 @@ export const AuthButtons = (): JSX.Element => {
       </Link>
     );
   }
-  else if (pathname === "/login") {
+  if (pathname === "/login") {
     return (
       <Link href={"/signup"}>
         <Button variant={"secondary"}>{t("signUpButton")}</Button>
       </Link>
-    )
-  } else {
-    return (
-      <Link href={"/login"}>
-        <Button variant={"secondary"}>{t("loginButton")}</Button>
-      </Link>
     );
   }
 
-
+  return (
+    <Link href={"/login"}>
+      <Button data-testid="login-button" variant={"secondary"}>
+        {t("loginButton")}
+      </Button>
+    </Link>
+  );
 };

frontend/lib/components/NavBar/components/NavItems/components/BrainManagementButton.tsx

@@ -13,6 +13,7 @@ export const BrainManagementButton = (): JSX.Element => {
         variant={"tertiary"}
         className="focus:outline-none text-2xl"
         aria-label="Settings"
+        data-testid="brain-management-button"
       >
         <FaBrain className="w-6 h-6" />
       </Button>

frontend/playwright.config.ts

@@ -1,12 +1,14 @@
 import { defineConfig, devices } from "@playwright/test";
-
+import dotenv from "dotenv";
+dotenv.config();
 export default defineConfig({
   testDir: "./e2e",
   fullyParallel: true,
   forbidOnly: !(process.env.CI == null),
   retries: process.env.CI != null ? 2 : 0,
-  workers: process.env.CI != null ? 1 : undefined,
+  workers: 1,
   reporter: "html",
+  testMatch: "e2e/index.ts",
   use: {
     trace: "on-first-retry",
   },
@@ -16,4 +18,10 @@ export default defineConfig({
       use: { ...devices["Desktop Chrome"] },
     },
   ],
+  webServer: {
+    command:
+      process.env.NODE_ENV === "production"
+        ? "yarn run build && yarn run start -p 3003"
+        : "yarn run dev -p 3003",
+  },
 });