tests/e2e/index.spec.ts

import {
  EXAMPLES,
  EXECUTE_CODE_FAILURE_TITLE,
  EXECUTE_CODE_SUCCESS_TITLE,
  PLAN_TITLE,
  TOOLS_TITLE,
} from '@/lib/constants';
import { test, expect, type Page } from '@playwright/test';

test.beforeEach(async ({ page }) => {
  // https://vercel.com/docs/security/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-automation
  await page.setExtraHTTPHeaders({
    'x-vercel-protection-bypass':
      process.env.VERCEL_AUTOMATION_BYPASS_SECRET ?? 'unknown',
  });
});

test('Main page can be opened', async ({ page }) => {
  await page.goto('/');

  await expect(
    page.getByRole('heading', { name: 'Vision Agent' }),
  ).toBeVisible();

  await page.getByText(EXAMPLES[0].title).click();
  await expect(page.getByPlaceholder('Message Vision Agent')).toHaveText(
    EXAMPLES[0].prompt,
  );
});

const TEST_EXAMPLE_1_CHAT_ID_1 = 'jN6q4YK';
const TEST_EXAMPLE_1_CHAT_ID_2 = 'w5ad73s';

const checkMainElementVisible = async (page: Page, hasFailingCase = false) => {
  await expect(page.getByText(EXAMPLES[0].prompt)).toBeVisible();
  await expect(
    page.locator(`img[alt*="${EXAMPLES[0].mediaUrl}"]`),
  ).toBeVisible();

  await expect(page.getByText(PLAN_TITLE)).toBeVisible();
  await expect(page.getByText(TOOLS_TITLE)).toBeVisible();
  if (hasFailingCase) {
    await expect(page.getByText(EXECUTE_CODE_FAILURE_TITLE)).toBeVisible();
  }
  await expect(page.getByText(EXECUTE_CODE_SUCCESS_TITLE)).toBeVisible();

  await expect(page.locator(`img[alt="result-image-0"]`).first()).toBeVisible();

  const resultDisplayContainer = await page
    .getByTestId('code-result-display-container')
    .locator('visible=true');
  await expect(resultDisplayContainer).toBeVisible();

  await resultDisplayContainer
    .getByTestId('open-final-test-code-dialog-button')
    .click();
  const dialog = await page.getByRole('dialog');
  await expect(
    dialog.getByRole('heading', { name: 'Test code' }),
  ).toBeVisible();
  await dialog
    .getByRole('button')
    .filter({
      hasText: 'Close',
    })
    .click();
  await resultDisplayContainer
    .getByTestId('view-all-result-images-button')
    .click();
  await expect(page.locator(`img[alt="detail-result-image-0"]`)).toBeVisible();
};

test.describe('Page with example 1 can be opened', () => {
  test('Page with old data structiure can be opened', async ({ page }) => {
    await page.goto(`/chat/${TEST_EXAMPLE_1_CHAT_ID_1}`);

    await checkMainElementVisible(page, true);
  });

  test('Page with new data structiure can be opened', async ({ page }) => {
    await page.goto(`/chat/${TEST_EXAMPLE_1_CHAT_ID_2}`);

    await checkMainElementVisible(page);
  });
});

const TEST_FINAL_ERROR_CHAT_ID_1 = '6bLzMKS';
test('Page with final error in response can be opened', async ({ page }) => {
  await page.goto(`/chat/${TEST_FINAL_ERROR_CHAT_ID_1}`);

  await expect(page.getByText('❌ StreamingError')).toBeVisible();
});