/
FluidDropdown-test.avt.e2e.js
95 lines (88 loc) · 2.97 KB
/
FluidDropdown-test.avt.e2e.js
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
/**
* Copyright IBM Corp. 2016, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
'use strict';
const { expect, test } = require('@playwright/test');
const { visitStory } = require('../../test-utils/storybook');
test.describe('@avt FluidDropdown', () => {
test('@avt-default-state', async ({ page }) => {
await visitStory(page, {
component: 'FluidDropdown',
id: 'experimental-fluid-components-unstable-fluiddropdown--default',
globals: {
theme: 'white',
},
});
await expect(page).toHaveNoACViolations('FluidDropdown');
});
test('@avt-advanced-states condensed', async ({ page }) => {
await visitStory(page, {
component: 'FluidDropdown',
id: 'experimental-fluid-components-unstable-fluiddropdown--condensed',
globals: {
theme: 'white',
},
});
await expect(page).toHaveNoACViolations('FluidDropdown-condensed');
});
test('@avt-advanced-states skeleton', async ({ page }) => {
await visitStory(page, {
component: 'FluidDropdown',
id: 'experimental-fluid-components-unstable-fluiddropdown--skeleton',
globals: {
theme: 'white',
},
});
await expect(page).toHaveNoACViolations('FluidDropdown-skeleton');
});
test('@avt-keyboard-nav', async ({ page }) => {
await visitStory(page, {
component: 'Dropdown',
id: 'experimental-fluid-components-unstable-fluiddropdown--default',
globals: {
theme: 'white',
},
});
const toggleButton = page.getByRole('combobox');
const menu = page.getByRole('listbox');
await expect(toggleButton).toBeVisible();
// Tab and open the Dropdown with Arrow Down
await page.keyboard.press('Tab');
await expect(toggleButton).toBeFocused();
await page.keyboard.press('ArrowDown');
await expect(menu).toBeVisible();
// Close with Escape, retain focus, and open with Space
await page.keyboard.press('Escape');
await page.keyboard.press('Space');
await expect(menu).toBeVisible();
// Close with Escape, retain focus, and open with Enter
await page.keyboard.press('Escape');
await expect(menu).toBeHidden();
await expect(toggleButton).toBeFocused();
await page.keyboard.press('Enter');
// Should focus on selected item by default
await expect(
page.getByRole('option', {
name: 'Option 2',
})
).toHaveClass(
'cds--list-box__menu-item cds--list-box__menu-item--active cds--list-box__menu-item--highlighted'
);
// Navigation inside the menu
await page.keyboard.press('ArrowDown');
await expect(
page.getByRole('option', {
name: 'Option 4',
})
).toHaveClass(
'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
);
// select second option
await page.keyboard.press('Enter');
// focus comes back to the toggle button
await expect(toggleButton).toBeFocused();
});
});