File size: 2,932 Bytes
06bd1d1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7286745
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
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();
});