All files / demo/e2e/vrt app.vrt.ts

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
94
95
96
97
98
99
100
101
102
103
104
105
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { test, expect, mockFeatureFlags, waitForAppReady } from '../fixtures'

test.describe('Visual Regression Tests', () => {
  test('default state - flags loaded', async ({ page, mockFlags, mockCounter }) => {
    await page.goto('/')
    await waitForAppReady(page)

    // Verify flags are displayed
    await expect(page.locator('text=dark_mode')).toBeVisible()
    await expect(page.locator('text=new_checkout')).toBeVisible()
    await expect(page.locator('text=beta_features')).toBeVisible()

    await page.screenshot({
      path: 'screenshots/home-default.png',
      fullPage: true,
    })
  })

  test('loading state', async ({ page }) => {
    // Mock the counter API
    await page.route('**/api/count', async (route) => {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ count: 0 }),
      })
    })

    // Intercept and delay the flags response
    await page.route('**/flags/features.json', async (route) => {
      // Don't fulfill - leave the request pending to capture loading state
      await new Promise((resolve) => setTimeout(resolve, 100))
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify(mockFeatureFlags),
      })
    })

    await page.goto('/')

    // Capture while loading is visible
    await page.waitForSelector('text=Loading flags...', { state: 'visible', timeout: 5000 })

    await page.screenshot({
      path: 'screenshots/home-loading.png',
      fullPage: true,
    })
  })

  test('error state', async ({ page }) => {
    // Mock the counter API
    await page.route('**/api/count', async (route) => {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ count: 0 }),
      })
    })

    // Mock a failed flags response
    await page.route('**/flags/features.json', async (route) => {
      await route.fulfill({
        status: 500,
        contentType: 'application/json',
        body: JSON.stringify({ error: 'Internal Server Error' }),
      })
    })

    await page.goto('/')

    // Wait for error message to appear
    await page.waitForSelector('text=Error:', { state: 'visible', timeout: 5000 })

    await page.screenshot({
      path: 'screenshots/home-error.png',
      fullPage: true,
    })
  })

  test('counter interaction state', async ({ page, mockFlags, mockCounter }) => {
    await page.goto('/')
    await waitForAppReady(page)

    // Verify counter starts at 0
    const counterButton = page.locator('button:has-text("Count is")')
    await expect(counterButton).toHaveText('Count is 0')

    // Click the counter button multiple times
    await counterButton.click()
    await expect(counterButton).toHaveText('Count is 1')

    await counterButton.click()
    await expect(counterButton).toHaveText('Count is 2')

    await counterButton.click()
    await expect(counterButton).toHaveText('Count is 3')

    await page.screenshot({
      path: 'screenshots/home-counter.png',
      fullPage: true,
    })
  })
})