brand/packages/react/src/SectionIntroStacked/SectionIntroStacked.visual.spec.ts at 4daf8e9ffbee1f7bb6ae58338d61b885930fca14 · primer/brand · GitHub

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
/*
 * Do not modify this file directly.
 * This file was generated by: playwright.generate-tests.ts.
 * Regenerate using: npm run test:visual:generate
 */
import {test, expect} from '@playwright/test'

// eslint-disable-next-line i18n-text/no-en
test.describe('Visual Comparison: SectionIntroStacked', () => {
  test('SectionIntroStacked / Default', async ({page}) => {
    await page.goto(
      'http://localhost:6006/iframe.html?args=&id=components-sectionintrostacked--default&viewMode=story',
      {waitUntil: 'networkidle'},
    )
    await page.locator('body.sb-show-main').waitFor({state: 'visible'})

    await page.waitForTimeout(500)
    await expect(page).toHaveScreenshot({fullPage: true})
  })

  test('SectionIntroStacked / Playground', async ({page}) => {
    await page.goto(
      'http://localhost:6006/iframe.html?args=&id=components-sectionintrostacked--playground&viewMode=story',
      {waitUntil: 'networkidle'},
    )
    await page.locator('body.sb-show-main').waitFor({state: 'visible'})

    await page.waitForTimeout(500)
    await expect(page).toHaveScreenshot({fullPage: true})
  })

  test('SectionIntroStacked / With Emphasized Text', async ({page}) => {
    await page.goto(
      'http://localhost:6006/iframe.html?args=&id=components-sectionintrostacked-features--with-emphasized-text&viewMode=story',
      {waitUntil: 'networkidle'},
    )
    await page.locator('body.sb-show-main').waitFor({state: 'visible'})

    await page.waitForTimeout(500)
    await expect(page).toHaveScreenshot({fullPage: true})
  })

  test('SectionIntroStacked / In Grid', async ({page}) => {
    await page.goto(
      'http://localhost:6006/iframe.html?args=&id=components-sectionintrostacked-features--in-grid&viewMode=story',
      {waitUntil: 'networkidle'},
    )
    await page.locator('body.sb-show-main').waitFor({state: 'visible'})

    await page.waitForTimeout(500)
    await expect(page).toHaveScreenshot({fullPage: true})
  })

  // eslint-disable-next-line i18n-text/no-en
  test.describe('Mobile viewport test for Narrow view, menu closed (mobile)', () => {
    test.use({viewport: {width: 360, height: 800}})
    test('SectionIntroStacked / Narrow view, menu closed (mobile)', async ({page}) => {
      await page.goto(
        'http://localhost:6006/iframe.html?args=&id=components-sectionintrostacked-features--in-grid-narrow&viewMode=story',
        {waitUntil: 'networkidle'},
      )
      await page.locator('body.sb-show-main').waitFor({state: 'visible'})

      await page.waitForTimeout(500)
      await expect(page).toHaveScreenshot({fullPage: true})
    })
  })
  test('SectionIntroStacked / Gridline', async ({page}) => {
    await page.goto(
      'http://localhost:6006/iframe.html?args=&id=components-sectionintrostacked-features--gridline&viewMode=story',
      {waitUntil: 'networkidle'},
    )
    await page.locator('body.sb-show-main').waitFor({state: 'visible'})

    await page.waitForTimeout(500)
    await expect(page).toHaveScreenshot({fullPage: true})
  })

  // eslint-disable-next-line i18n-text/no-en
  test.describe('Tablet viewport test for Gridline (tablet)', () => {
    test.use({viewport: {width: 834, height: 1112}})
    test('SectionIntroStacked / Gridline (tablet)', async ({page}) => {
      await page.goto(
        'http://localhost:6006/iframe.html?args=&id=components-sectionintrostacked-features--gridline-tablet&viewMode=story',
        {waitUntil: 'networkidle'},
      )
      await page.locator('body.sb-show-main').waitFor({state: 'visible'})

      await page.waitForTimeout(500)
      await expect(page).toHaveScreenshot({fullPage: true})
    })
  })
})