Skip to content

Commit b2695f6

Browse files
brandyscarneybrandyscarney
committed
test(e2e): update e2e test for parts
1 parent 72e9135 commit b2695f6

File tree

1 file changed

+32
-66
lines changed

1 file changed

+32
-66
lines changed

‎core/src/components/select/test/bottom-content/select.e2e.ts‎

Lines changed: 32 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,16 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
2424
await expect(helperText).toHaveText('Helper text');
2525
await expect(errorText).toBeHidden();
2626
});
27-
test('input should have an aria-describedby attribute when helper text is present', async ({ page }) => {
27+
test('select should have an aria-describedby attribute when helper text is present', async ({ page }) => {
2828
await page.setContent(
2929
`<ion-select label="Label" helper-text="Helper text" error-text="Error text"></ion-select>`,
3030
config
3131
);
3232

33-
const input = page.locator('ion-select button');
33+
const select = page.locator('ion-select button');
3434
const helperText = page.locator('ion-select .helper-text');
3535
const helperTextId = await helperText.getAttribute('id');
36-
const ariaDescribedBy = await input.getAttribute('aria-describedby');
36+
const ariaDescribedBy = await select.getAttribute('aria-describedby');
3737

3838
expect(ariaDescribedBy).toBe(helperTextId);
3939
});
@@ -50,45 +50,47 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
5050
await expect(errorText).toHaveText('Error text');
5151
});
5252

53-
test('input should have an aria-describedby attribute when error text is present', async ({ page }) => {
53+
test('select should have an aria-describedby attribute when error text is present', async ({ page }) => {
5454
await page.setContent(
5555
`<ion-select label="Label" class="ion-invalid ion-touched" helper-text="Helper text" error-text="Error text"></ion-select>`,
5656
config
5757
);
5858

59-
const input = page.locator('ion-select button');
59+
const select = page.locator('ion-select button');
6060
const errorText = page.locator('ion-select .error-text');
6161
const errorTextId = await errorText.getAttribute('id');
62-
const ariaDescribedBy = await input.getAttribute('aria-describedby');
62+
const ariaDescribedBy = await select.getAttribute('aria-describedby');
6363

6464
expect(ariaDescribedBy).toBe(errorTextId);
6565
});
66-
test('input should have aria-invalid attribute when input is invalid', async ({ page }) => {
66+
test('select should have aria-invalid attribute when select is invalid', async ({ page }) => {
6767
await page.setContent(
6868
`<ion-select label="Label" class="ion-invalid ion-touched" helper-text="Helper text" error-text="Error text"></ion-select>`,
6969
config
7070
);
7171

72-
const input = page.locator('ion-select button');
72+
const select = page.locator('ion-select button');
7373

74-
await expect(input).toHaveAttribute('aria-invalid');
74+
await expect(select).toHaveAttribute('aria-invalid');
7575
});
76-
test('input should not have aria-invalid attribute when input is valid', async ({ page }) => {
76+
test('select should not have aria-invalid attribute when select is valid', async ({ page }) => {
7777
await page.setContent(
7878
`<ion-select label="Label" helper-text="Helper text" error-text="Error text"></ion-select>`,
7979
config
8080
);
8181

82-
const input = page.locator('ion-select button');
82+
const select = page.locator('ion-select button');
8383

84-
await expect(input).not.toHaveAttribute('aria-invalid');
84+
await expect(select).not.toHaveAttribute('aria-invalid');
8585
});
86-
test('input should not have aria-describedby attribute when no hint or error text is present', async ({ page }) => {
86+
test('select should not have aria-describedby attribute when no hint or error text is present', async ({
87+
page,
88+
}) => {
8789
await page.setContent(`<ion-select label="Label"></ion-select>`, config);
8890

89-
const input = page.locator('ion-select button');
91+
const select = page.locator('ion-select button');
9092

91-
await expect(input).not.toHaveAttribute('aria-describedby');
93+
await expect(select).not.toHaveAttribute('aria-describedby');
9294
});
9395
});
9496
});
@@ -149,105 +151,69 @@ configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screens
149151
/**
150152
* Customizing supporting text is the same across modes and directions
151153
*/
152-
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
154+
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
153155
test.describe(title('select: supporting text customization'), () => {
154-
test('should not have visual regressions when rendering helper text with a custom color via css parts', async ({
156+
test('should not have visual regressions when rendering helper text with custom css', async ({
155157
page,
156158
}) => {
157159
await page.setContent(
158160
`
159161
<style>
160-
ion-select.custom-select::part(supporting-text) {
162+
ion-select::part(supporting-text) {
161163
font-size: 20px;
162164
}
163165
164-
ion-select.custom-select::part(helper-text) {
166+
ion-select::part(helper-text) {
165167
color: green;
166168
}
167169
</style>
168-
<ion-select label="Label" class="custom-select" helper-text="Helper text"></ion-select>
169-
`,
170-
config
171-
);
172-
173-
const errorText = page.locator('ion-select');
174-
await expect(errorText).toHaveScreenshot(screenshot(`select-helper-text-custom-parts`));
175-
});
176-
test('should not have visual regressions when rendering helper text with a custom color via css var', async ({
177-
page,
178-
}) => {
179-
await page.setContent(
180-
`
181-
<style>
182-
ion-select.custom-select {
183-
--helper-text-color: green;
184-
}
185-
</style>
186-
<ion-select class="custom-select" label="Label" helper-text="Helper text"></ion-select>
170+
<ion-select label="Label" helper-text="Helper text"></ion-select>
187171
`,
188172
config
189173
);
190174

191175
const helperText = page.locator('ion-select');
192-
await expect(helperText).toHaveScreenshot(screenshot(`select-helper-text-custom-color-var`));
176+
await expect(helperText).toHaveScreenshot(screenshot(`select-helper-text-custom-css`));
193177
});
194-
test('should not have visual regressions when rendering error text with a custom color via css parts', async ({
178+
test('should not have visual regressions when rendering error text with custom css', async ({
195179
page,
196180
}) => {
197181
await page.setContent(
198182
`
199183
<style>
200-
ion-select.custom-select::part(supporting-text) {
184+
ion-select::part(supporting-text) {
201185
font-size: 20px;
202186
}
203187
204-
ion-select.custom-select::part(error-text) {
188+
ion-select::part(error-text) {
205189
color: purple;
206190
}
207191
</style>
208-
<ion-select label="Label" class="ion-invalid ion-touched custom-select" error-text="Error text"></ion-select>
209-
`,
210-
config
211-
);
212-
213-
const errorText = page.locator('ion-select');
214-
await expect(errorText).toHaveScreenshot(screenshot(`select-error-text-custom-parts`));
215-
});
216-
test('should not have visual regressions when rendering error text with a custom color via css var', async ({
217-
page,
218-
}) => {
219-
await page.setContent(
220-
`
221-
<style>
222-
ion-select.custom-select {
223-
--error-text-color: purple;
224-
}
225-
</style>
226-
<ion-select class="ion-invalid ion-touched custom-select" label="Label" error-text="Error text"></ion-select>
192+
<ion-select class="ion-invalid ion-touched" label="Label" error-text="Error text"></ion-select>
227193
`,
228194
config
229195
);
230196

231197
const errorText = page.locator('ion-select');
232-
await expect(errorText).toHaveScreenshot(screenshot(`select-error-text-custom-color-var`));
198+
await expect(errorText).toHaveScreenshot(screenshot(`select-error-text-custom-css`));
233199
});
234-
test('should not have visual regressions when rendering error text with a custom color via css highlight var', async ({
200+
test('should not have visual regressions when rendering error text with a custom css variable', async ({
235201
page,
236202
}) => {
237203
await page.setContent(
238204
`
239205
<style>
240-
ion-select.custom-select {
206+
ion-select {
241207
--highlight-color-invalid: purple;
242208
}
243209
</style>
244-
<ion-select class="ion-invalid ion-touched custom-select" label="Label" error-text="Error text"></ion-select>
210+
<ion-select class="ion-invalid ion-touched" label="Label" error-text="Error text"></ion-select>
245211
`,
246212
config
247213
);
248214

249215
const errorText = page.locator('ion-select');
250-
await expect(errorText).toHaveScreenshot(screenshot(`select-error-text-custom-highlight-var`));
216+
await expect(errorText).toHaveScreenshot(screenshot(`select-error-text-custom-css-var`));
251217
});
252218
});
253219
});

0 commit comments

Comments
 (0)