Skip to content

Commit 262f5f9

Browse files
clintcsclintcs
authored
Add more :hover and :active visual tests (#760)
1 parent d826c00 commit 262f5f9

10 files changed

+134
-15
lines changed

‎src/button-group.test.visuals.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ for (const story of stories['Button Group']) {
88
test.describe(story.id, () => {
99
for (const theme of story.themes) {
1010
test.describe(theme, () => {
11-
test('hover', async ({ page }, test) => {
11+
test(':hover', async ({ page }, test) => {
1212
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
1313
await page.locator('glide-core-button-group-button').nth(1).hover();
1414

‎src/button.test.visuals.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ for (const story of stories.Button) {
2121
);
2222
});
2323

24-
test.describe('hover', () => {
24+
test.describe(':active', () => {
2525
test('disabled', async ({ page }, test) => {
2626
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
2727

@@ -32,6 +32,7 @@ for (const story of stories.Button) {
3232
});
3333

3434
await page.locator('glide-core-button').hover();
35+
await page.mouse.down();
3536

3637
await expect(page).toHaveScreenshot(
3738
`${test.titlePath.join('.')}.png`,
@@ -41,6 +42,7 @@ for (const story of stories.Button) {
4142
test('variant="primary"', async ({ page }, test) => {
4243
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
4344
await page.locator('glide-core-button').hover();
45+
await page.mouse.down();
4446

4547
await expect(page).toHaveScreenshot(
4648
`${test.titlePath.join('.')}.png`,
@@ -57,6 +59,7 @@ for (const story of stories.Button) {
5759
});
5860

5961
await page.locator('glide-core-button').hover();
62+
await page.mouse.down();
6063

6164
await expect(page).toHaveScreenshot(
6265
`${test.titlePath.join('.')}.png`,
@@ -73,14 +76,15 @@ for (const story of stories.Button) {
7376
});
7477

7578
await page.locator('glide-core-button').hover();
79+
await page.mouse.down();
7680

7781
await expect(page).toHaveScreenshot(
7882
`${test.titlePath.join('.')}.png`,
7983
);
8084
});
8185
});
8286

83-
test.describe('press', () => {
87+
test.describe(':hover', () => {
8488
test('disabled', async ({ page }, test) => {
8589
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
8690

@@ -91,7 +95,6 @@ for (const story of stories.Button) {
9195
});
9296

9397
await page.locator('glide-core-button').hover();
94-
await page.mouse.down();
9598

9699
await expect(page).toHaveScreenshot(
97100
`${test.titlePath.join('.')}.png`,
@@ -101,7 +104,6 @@ for (const story of stories.Button) {
101104
test('variant="primary"', async ({ page }, test) => {
102105
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
103106
await page.locator('glide-core-button').hover();
104-
await page.mouse.down();
105107

106108
await expect(page).toHaveScreenshot(
107109
`${test.titlePath.join('.')}.png`,
@@ -118,7 +120,6 @@ for (const story of stories.Button) {
118120
});
119121

120122
await page.locator('glide-core-button').hover();
121-
await page.mouse.down();
122123

123124
await expect(page).toHaveScreenshot(
124125
`${test.titlePath.join('.')}.png`,
@@ -135,7 +136,6 @@ for (const story of stories.Button) {
135136
});
136137

137138
await page.locator('glide-core-button').hover();
138-
await page.mouse.down();
139139

140140
await expect(page).toHaveScreenshot(
141141
`${test.titlePath.join('.')}.png`,

‎src/checkbox.test.visuals.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ for (const story of stories.Checkbox) {
4949
);
5050
});
5151

52-
test.describe('hover', () => {
52+
test.describe(':hover', () => {
5353
test('disabled', async ({ page }, test) => {
5454
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
5555

‎src/dropdown.test.visuals.ts

+9
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,15 @@ for (const story of stories.Dropdown) {
6767
);
6868
});
6969

70+
test(':hover', async ({ page }, test) => {
71+
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
72+
await page.locator('glide-core-dropdown').hover();
73+
74+
await expect(page).toHaveScreenshot(
75+
`${test.titlePath.join('.')}.png`,
76+
);
77+
});
78+
7079
test('open', async ({ page }, test) => {
7180
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
7281

‎src/icon-button.test.visuals.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ for (const story of stories['Icon Button']) {
2121
);
2222
});
2323

24-
test.describe('hover', () => {
24+
test.describe(':active', () => {
2525
test('disabled', async ({ page }, test) => {
2626
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
2727

@@ -32,6 +32,7 @@ for (const story of stories['Icon Button']) {
3232
});
3333

3434
await page.locator('glide-core-icon-button').hover();
35+
await page.mouse.down();
3536

3637
await expect(page).toHaveScreenshot(
3738
`${test.titlePath.join('.')}.png`,
@@ -41,6 +42,7 @@ for (const story of stories['Icon Button']) {
4142
test('variant="primary"', async ({ page }, test) => {
4243
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
4344
await page.locator('glide-core-icon-button').hover();
45+
await page.mouse.down();
4446

4547
await expect(page).toHaveScreenshot(
4648
`${test.titlePath.join('.')}.png`,
@@ -57,6 +59,7 @@ for (const story of stories['Icon Button']) {
5759
});
5860

5961
await page.locator('glide-core-icon-button').hover();
62+
await page.mouse.down();
6063

6164
await expect(page).toHaveScreenshot(
6265
`${test.titlePath.join('.')}.png`,
@@ -73,14 +76,15 @@ for (const story of stories['Icon Button']) {
7376
});
7477

7578
await page.locator('glide-core-icon-button').hover();
79+
await page.mouse.down();
7680

7781
await expect(page).toHaveScreenshot(
7882
`${test.titlePath.join('.')}.png`,
7983
);
8084
});
8185
});
8286

83-
test.describe('press', () => {
87+
test.describe(':hover', () => {
8488
test('disabled', async ({ page }, test) => {
8589
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
8690

@@ -91,7 +95,6 @@ for (const story of stories['Icon Button']) {
9195
});
9296

9397
await page.locator('glide-core-icon-button').hover();
94-
await page.mouse.down();
9598

9699
await expect(page).toHaveScreenshot(
97100
`${test.titlePath.join('.')}.png`,
@@ -101,7 +104,6 @@ for (const story of stories['Icon Button']) {
101104
test('variant="primary"', async ({ page }, test) => {
102105
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
103106
await page.locator('glide-core-icon-button').hover();
104-
await page.mouse.down();
105107

106108
await expect(page).toHaveScreenshot(
107109
`${test.titlePath.join('.')}.png`,
@@ -118,7 +120,6 @@ for (const story of stories['Icon Button']) {
118120
});
119121

120122
await page.locator('glide-core-icon-button').hover();
121-
await page.mouse.down();
122123

123124
await expect(page).toHaveScreenshot(
124125
`${test.titlePath.join('.')}.png`,
@@ -135,7 +136,6 @@ for (const story of stories['Icon Button']) {
135136
});
136137

137138
await page.locator('glide-core-icon-button').hover();
138-
await page.mouse.down();
139139

140140
await expect(page).toHaveScreenshot(
141141
`${test.titlePath.join('.')}.png`,

‎src/input.test.visuals.ts

+9
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,15 @@ for (const story of stories.Input) {
5151
);
5252
});
5353

54+
test(':hover', async ({ page }, test) => {
55+
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
56+
await page.locator('glide-core-input').hover();
57+
58+
await expect(page).toHaveScreenshot(
59+
`${test.titlePath.join('.')}.png`,
60+
);
61+
});
62+
5463
test('max-length', async ({ page }, test) => {
5564
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
5665

‎src/radio-group.test.visuals.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ for (const story of stories['Radio Group']) {
2222
);
2323
});
2424

25-
test('hover', async ({ page }, test) => {
25+
test(':hover', async ({ page }, test) => {
2626
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
2727
await page.locator('glide-core-radio-group').waitFor();
2828
await page.locator('glide-core-radio-group-radio').nth(1).hover();

‎src/split-button.test.visuals.ts

+83
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,29 @@ for (const story of stories['Split Button']) {
7474
`${test.titlePath.join('.')}.png`,
7575
);
7676
});
77+
78+
test('<glide-core-split-button-primary-link>:active', async ({
79+
page,
80+
}, test) => {
81+
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
82+
await page.locator('glide-core-split-button-primary-link').hover();
83+
await page.mouse.down();
84+
85+
await expect(page).toHaveScreenshot(
86+
`${test.titlePath.join('.')}.png`,
87+
);
88+
});
89+
90+
test('<glide-core-split-button-primary-link>:hover', async ({
91+
page,
92+
}, test) => {
93+
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
94+
await page.locator('glide-core-split-button-primary-link').hover();
95+
96+
await expect(page).toHaveScreenshot(
97+
`${test.titlePath.join('.')}.png`,
98+
);
99+
});
77100
} else {
78101
test('<glide-core-split-button-primary-button>.disabled', async ({
79102
page,
@@ -90,6 +113,36 @@ for (const story of stories['Split Button']) {
90113
`${test.titlePath.join('.')}.png`,
91114
);
92115
});
116+
117+
test('<glide-core-split-button-primary-button>:active', async ({
118+
page,
119+
}, test) => {
120+
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
121+
122+
await page
123+
.locator('glide-core-split-button-primary-button')
124+
.hover();
125+
126+
await page.mouse.down();
127+
128+
await expect(page).toHaveScreenshot(
129+
`${test.titlePath.join('.')}.png`,
130+
);
131+
});
132+
133+
test('<glide-core-split-button-primary-button>:hover', async ({
134+
page,
135+
}, test) => {
136+
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
137+
138+
await page
139+
.locator('glide-core-split-button-primary-button')
140+
.hover();
141+
142+
await expect(page).toHaveScreenshot(
143+
`${test.titlePath.join('.')}.png`,
144+
);
145+
});
93146
}
94147

95148
test('<glide-core-split-button-secondary-button>.disabled', async ({
@@ -108,6 +161,36 @@ for (const story of stories['Split Button']) {
108161
);
109162
});
110163

164+
test('<glide-core-split-button-secondary-button>:active', async ({
165+
page,
166+
}, test) => {
167+
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
168+
169+
await page
170+
.locator('glide-core-split-button-secondary-button')
171+
.hover();
172+
173+
await page.mouse.down();
174+
175+
await expect(page).toHaveScreenshot(
176+
`${test.titlePath.join('.')}.png`,
177+
);
178+
});
179+
180+
test('<glide-core-split-button-secondary-button>:hover', async ({
181+
page,
182+
}, test) => {
183+
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
184+
185+
await page
186+
.locator('glide-core-split-button-secondary-button')
187+
.hover();
188+
189+
await expect(page).toHaveScreenshot(
190+
`${test.titlePath.join('.')}.png`,
191+
);
192+
});
193+
111194
test('<glide-core-split-button-secondary-button>[menu-placement="bottom-end"]', async ({
112195
page,
113196
}, test) => {

‎src/tab.group.test.visuals.ts

+9
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,15 @@ for (const story of stories['Tab Group']) {
4747
`${test.titlePath.join('.')}.png`,
4848
);
4949
});
50+
51+
test('<glide-core-tab>:hover', async ({ page }, test) => {
52+
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
53+
await page.locator('glide-core-tab').first().hover();
54+
55+
await expect(page).toHaveScreenshot(
56+
`${test.titlePath.join('.')}.png`,
57+
);
58+
});
5059
});
5160
}
5261
});

‎src/textarea.test.visuals.ts

+9
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,15 @@ for (const story of stories.Textarea) {
3535
);
3636
});
3737

38+
test(':hover', async ({ page }, test) => {
39+
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
40+
await page.locator('glide-core-textarea').hover();
41+
42+
await expect(page).toHaveScreenshot(
43+
`${test.titlePath.join('.')}.png`,
44+
);
45+
});
46+
3847
test('max-length', async ({ page }, test) => {
3948
await page.goto(`?id=${story.id}&globals=theme:${theme}`);
4049

0 commit comments

Comments
 (0)