organize fe tests

.github/workflows/pr-chromatic-tests.yml

@@ -111,6 +111,7 @@ jobs:
           cd deployment/docker_compose
           ENABLE_PAID_ENTERPRISE_EDITION_FEATURES=true \
           AUTH_TYPE=basic \
+          GEN_AI_API_KEY=${{ secrets.OPENAI_API_KEY }} \
           REQUIRE_EMAIL_VERIFICATION=false \
           DISABLE_TELEMETRY=true \
           IMAGE_TAG=test \

deployment/docker_compose/docker-compose.dev.yml

@@ -47,6 +47,7 @@ services:
       - LITELLM_EXTRA_HEADERS=${LITELLM_EXTRA_HEADERS:-}
       - BING_API_KEY=${BING_API_KEY:-}
       - DISABLE_LLM_DOC_RELEVANCE=${DISABLE_LLM_DOC_RELEVANCE:-}
+      - GEN_AI_API_KEY=${GEN_AI_API_KEY:-}
       # if set, allows for the use of the token budget system
       - TOKEN_BUDGET_GLOBALLY_ENABLED=${TOKEN_BUDGET_GLOBALLY_ENABLED:-}
       # Enables the use of bedrock models
@@ -141,6 +142,7 @@ services:
       - GENERATIVE_MODEL_ACCESS_CHECK_FREQ=${GENERATIVE_MODEL_ACCESS_CHECK_FREQ:-}
       - DISABLE_LITELLM_STREAMING=${DISABLE_LITELLM_STREAMING:-}
       - LITELLM_EXTRA_HEADERS=${LITELLM_EXTRA_HEADERS:-}
+      - GEN_AI_API_KEY=${GEN_AI_API_KEY:-}
       - BING_API_KEY=${BING_API_KEY:-}
       # Query Options
       - DOC_TIME_DECAY=${DOC_TIME_DECAY:-} # Recency Bias for search results, decay at 1 / (1 + DOC_TIME_DECAY * x years)

web/playwright.config.ts

@@ -16,7 +16,7 @@ export default defineConfig({
     {
       // dependency for admin workflows
       name: "admin_setup",
-      testMatch: /.*\admin_auth.setup\.ts/,
+      testMatch: /.*\admin_auth\.setup\.ts/,
     },
     {
       // tests admin workflows

web/src/app/admin/assistants/AssistantEditor.tsx

@@ -595,13 +595,15 @@ export function AssistantEditor({
                 tooltip="Used to identify the Assistant in the UI."
                 label="Name"
                 placeholder="e.g. 'Email Assistant'"
+                aria-label="assistant-name-input"
               />
 
               <TextFormField
                 tooltip="Used for identifying assistants and their use cases."
                 name="description"
                 label="Description"
                 placeholder="e.g. 'Use this Assistant to help draft professional emails'"
+                data-testid="assistant-description-input"
               />
 
               <TextFormField
@@ -610,9 +612,7 @@ export function AssistantEditor({
                 label="Instructions"
                 isTextArea={true}
                 placeholder="e.g. 'You are a professional email writing assistant that always uses a polite enthusiastic tone, emphasizes action items, and leaves blanks for the human to fill in when you have unknowns'"
-                onChange={(e) => {
-                  setFieldValue("system_prompt", e.target.value);
-                }}
+                data-testid="assistant-instructions-input"
               />
 
               <div>

web/src/components/admin/connectors/Field.tsx

@@ -241,6 +241,7 @@ export function TextFormField({
           as={isTextArea ? "textarea" : "input"}
           type={type}
           defaultValue={value}
+          data-testid={name}
           name={name}
           id={name}
           className={`

web/tests/e2e/admin_chat.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from "@playwright/test";
+test(
+  `test - admin chat`,
+  {
+    tag: "@admin",
+  },
+  async ({ page }) => {
+    await page.goto("http://localhost:3000/assistants/new");
+    await expect(page).toHaveURL("http://localhost:3000/assistants/new");
+    await page.screenshot({
+      path: `screenshots/create_assistant_page.png`,
+    });
+    await page.getByTestId("name").click();
+    await page.getByTestId("name").fill("Test");
+    await page.getByTestId("description").click();
+    await page.getByTestId("description").fill("Test");
+    await page.getByTestId("system_prompt").click();
+    await page.getByTestId("system_prompt").fill("Test");
+    await page
+      .getByRole("button", { name: "Logo GPT 4o", exact: true })
+      .click();
+    await page.getByRole("button", { name: "Create!" }).click();
+    // Wait for the page URL to change to the chat page
+    await page.waitForURL(/^http:\/\/localhost:3000\/chat(\?.*)?$/);
+    await expect(page.url()).toContain("http://localhost:3000/chat");
+    await page.screenshot({
+      path: `screenshots/chat_page_after_create.png`,
+    });
+    await page.getByPlaceholder("Send a message or try using").fill("Hello");
+    await page.keyboard.press("Enter");
+    await page.waitForSelector("#danswer-ai-message", { state: "visible" });
+  }
+);

web/tests/e2e/admin_pages.spec.ts

@@ -0,0 +1,52 @@
+import { test, expect } from "@playwright/test";
+import chromaticSnpashots from "./chromaticSnpashots.json";
+import type { Page } from "@playwright/test";
+
+async function verifyAdminPageNavigation(
+  page: Page,
+  path: string,
+  pageTitle: string,
+  options?: {
+    paragraphText?: string | RegExp;
+    buttonName?: string;
+    subHeaderText?: string;
+  }
+) {
+  await page.goto(`http://localhost:3000/admin/${path}`);
+  await expect(page.locator("h1.text-3xl")).toHaveText(pageTitle);
+
+  if (options?.paragraphText) {
+    await expect(page.locator("p.text-sm").nth(0)).toHaveText(
+      options.paragraphText
+    );
+  }
+
+  if (options?.buttonName) {
+    await expect(
+      page.getByRole("button", { name: options.buttonName })
+    ).toHaveCount(1);
+  }
+
+  if (options?.subHeaderText) {
+    await expect(page.locator("h1.text-lg").nth(0)).toHaveText(
+      options.subHeaderText
+    );
+  }
+}
+
+for (const chromaticSnapshot of chromaticSnpashots) {
+  test(
+    `Admin - ${chromaticSnapshot.name}`,
+    {
+      tag: "@admin",
+    },
+    async ({ page }) => {
+      await verifyAdminPageNavigation(
+        page,
+        chromaticSnapshot.path,
+        chromaticSnapshot.pageTitle,
+        chromaticSnapshot.options
+      );
+    }
+  );
+}