brand/packages/react/src/Pagination/Pagination.visual.spec.ts at 05818ca4ecfc70eff51ce3cf7cf999579d641872 · 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/*
 * 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: Pagination', () => {
  test('Pagination / Default', async ({page}) => {
    await page.goto('http://localhost:6006/iframe.html?args=&id=components-pagination--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('Pagination / Playground', async ({page}) => {
    await page.goto('http://localhost:6006/iframe.html?args=&id=components-pagination--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('Pagination / Larger Page Count Margin', async ({page}) => {
    await page.goto(
      'http://localhost:6006/iframe.html?args=&id=components-pagination-features--larger-page-count-margin&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('Pagination / Hide Page Numbers', async ({page}) => {
    await page.goto(
      'http://localhost:6006/iframe.html?args=&id=components-pagination-features--hide-page-numbers&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 Page Numbers Hidden By Default', () => {
    test.use({viewport: {width: 360, height: 800}})
    test('Pagination / Narrow Page Numbers Hidden By Default', async ({page}) => {
      await page.goto(
        'http://localhost:6006/iframe.html?args=&id=components-pagination-features--narrow-page-numbers-hidden-by-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('Pagination / Higher Surrounding Page Count', async ({page}) => {
    await page.goto(
      'http://localhost:6006/iframe.html?args=&id=components-pagination-features--higher-surrounding-page-count&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('Pagination / Page Handlers', async ({page}) => {
    await page.goto(
      'http://localhost:6006/iframe.html?args=&id=components-pagination-features--page-handlers&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('Pagination / Custom Attribute Forwarding', async ({page}) => {
    await page.goto(
      'http://localhost:6006/iframe.html?args=&id=components-pagination-features--custom-attribute-forwarding&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('Pagination / Custom Labels', async ({page}) => {
    await page.goto(
      'http://localhost:6006/iframe.html?args=&id=components-pagination-features--custom-labels&viewMode=story',
      {waitUntil: 'networkidle'},
    )
    await page.locator('body.sb-show-main').waitFor({state: 'visible'})

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