feat(e2e): add playright config and createBrain e2e test

.frontend_env.example

@@ -6,3 +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=http:https://localhost:3003
+NEXT_PUBLIC_E2E_EMAIL=<ignore-me-or-change-me>
+NEXT_PUBLIC_E2E_PASSWORD=<ignore-me-or-change-me>

frontend/.gitignore

@@ -36,3 +36,6 @@ next-env.d.ts
 
 # Sentry Auth Token
 .sentryclirc
+/test-results/
+/playwright-report/
+/playwright/.cache/

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

@@ -0,0 +1,24 @@
+import { Page } from "@playwright/test";
+
+export const login = async (page: Page): Promise<void> => {
+ const frontendUrl = process.env.NEXT_PUBLIC_E2E_URL;
+ const email = process.env.NEXT_PUBLIC_E2E_EMAIL;
+ const password = process.env.NEXT_PUBLIC_E2E_PASSWORD;
+
+ if (frontendUrl === undefined) {
+ throw new Error("NEXT_PUBLIC_E2E_URL is not defined");
+ }
+ if (email === undefined) {
+ throw new Error("NEXT_PUBLIC_E2E_EMAIL is not defined");
+ }
+ if (password === undefined) {
+ throw new Error("NEXT_PUBLIC_E2E_PASSWORD is not defined");
+ }
+
+ await page.goto(frontendUrl);
+ 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/package.json

@@ -9,6 +9,7 @@
  "lint": "next lint",
  "lint-fix": "eslint --fix .",
  "test-unit": "vitest run",
+ "test-e2e": "npx playwright test",
  "test-type": "tsc --noEmit --emitDeclarationOnly false",
  "test": "yarn test-type",
  "precommit": "yarn lint && yarn test",
@@ -78,6 +79,7 @@
  "victory": "^36.6.10"
  },
  "devDependencies": {
+ "@playwright/test": "^1.38.0",
  "@tailwindcss/typography": "^0.5.9",
  "@testing-library/react": "^14.0.0",
  "@vitejs/plugin-react": "^4.0.1",
@@ -87,4 +89,4 @@
  "react-icons": "^4.8.0",
  "vitest": "^0.32.2"
  }
-}
+}

frontend/playwright.config.ts

@@ -0,0 +1,27 @@
+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: 1,
+ reporter: "html",
+ testMatch: "e2e/index.ts",
+ use: {
+ trace: "on-first-retry",
+ },
+ projects: [
+ {
+ name: "chromium",
+ use: { ...devices["Desktop Chrome"] },
+ },
+ ],
+ webServer: {
+ command:
+ process.env.NODE_ENV === "production"
+ ? "yarn run build && yarn run start -p 3003"
+ : "yarn run dev -p 3003",
+ },
+});