react/e2e/components/ActionMenu.test.ts at 0b5a8762cd65666bfe654884e3e818f68b210e0c · primer/react · 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
import {test, expect} from '@playwright/test'
import {visit} from '../test-helpers/storybook'
import {themes} from '../test-helpers/themes'

const stories: Array<{
  title: string
  id: string
  buttonName?: string
  skipOpen?: boolean
}> = [
  {
    title: 'Default',
    id: 'components-actionmenu--default',
  },
  {
    title: 'Inactive Items',
    id: 'components-actionmenu-features--inactive-items',
  },
  {
    title: 'Links And Actions',
    id: 'components-actionmenu-features--links-and-actions',
  },
  {
    title: 'Loading Items',
    id: 'components-actionmenu-features--loading-items',
  },
  {
    title: 'Multi Select',
    buttonName: 'Display',
    id: 'components-actionmenu-features--multi-select',
  },
  {
    title: 'Single Select',
    buttonName: 'Options: fast Forward',
    id: 'components-actionmenu-features--single-select',
  },
  {
    title: 'Controlled Menu',
    id: 'components-actionmenu-examples--controlled-menu',
  },
  {
    title: 'Custom Anchor',
    skipOpen: true,
    id: 'components-actionmenu-examples--custom-anchor',
  },
  {
    title: 'Custom Overlay Props',
    skipOpen: true,
    id: 'components-actionmenu-examples--custom-overlay-props',
  },
  {
    title: 'Groups And Descriptions',
    skipOpen: true,
    id: 'components-actionmenu-examples--groups-and-descriptions',
  },
  {
    title: 'Dev: With Css',
    id: 'components-actionmenu-dev--with-css',
  },
] as const

const featureFlagVariants = [
  {flagEnabled: false, suffix: ''},
  {flagEnabled: true, suffix: '.css-anchor-positioning'},
] as const

test.describe('ActionMenu', () => {
  for (const story of stories) {
    test.describe(story.title, () => {
      for (const theme of themes) {
        test.describe(theme, () => {
          for (const {flagEnabled, suffix} of featureFlagVariants) {
            test(`default @vrt${suffix}`, async ({page}) => {
              await visit(page, {
                id: story.id,
                globals: {
                  colorScheme: theme,
                  featureFlags: {
                    primer_react_css_anchor_positioning: flagEnabled,
                  },
                },
              })

              const buttonName = story.buttonName ?? 'Open menu'

              // Default state
              // Open state

              if (!story.skipOpen) {
                await page.locator('button', {hasText: buttonName}).waitFor()
                await page.getByRole('button', {name: buttonName}).click()
              }
              expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
                `ActionMenu.${story.title}.${theme}${suffix}.png`,
              )
            })
          }
        })
      }
    })
  }
})