Skip to content

Commit 662d1ff

Browse files
brandyscarneybrandyscarney
committed
test(checkbox): update e2e test
1 parent 54da960 commit 662d1ff

File tree

1 file changed

+64
-41
lines changed

1 file changed

+64
-41
lines changed

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

Lines changed: 64 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
6363

6464
expect(ariaDescribedBy).toBe(errorTextId);
6565
});
66-
test('input should have aria-invalid attribute when input is invalid', async ({ page }) => {
66+
test('input should have aria-invalid attribute when checkbox is invalid', async ({ page }) => {
6767
await page.setContent(
6868
`<ion-checkbox class="ion-invalid ion-touched" helper-text="Helper text" error-text="Error text">Label</ion-checkbox>`,
6969
config
@@ -73,7 +73,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
7373

7474
await expect(input).toHaveAttribute('aria-invalid');
7575
});
76-
test('input should not have aria-invalid attribute when input is valid', async ({ page }) => {
76+
test('input should not have aria-invalid attribute when checkbox is valid', async ({ page }) => {
7777
await page.setContent(
7878
`<ion-checkbox helper-text="Helper text" error-text="Error text">Label</ion-checkbox>`,
7979
config
@@ -98,77 +98,100 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
9898
*/
9999
configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
100100
test.describe(title('checkbox: helper text rendering'), () => {
101-
test('should not have visual regressions when rendering helper text', async ({ page }) => {
102-
await page.setContent(`<ion-checkbox helper-text="Helper text">Label</ion-checkbox>`, config);
103-
104-
const bottomEl = page.locator('ion-checkbox');
105-
await expect(bottomEl).toHaveScreenshot(screenshot(`checkbox-bottom-content-helper`));
101+
// Check the default label placement, end, and stacked
102+
[undefined, 'end', 'stacked'].forEach((labelPlacement) => {
103+
test(`${labelPlacement ? `${labelPlacement} label - ` : ''}should not have visual regressions when rendering helper text`, async ({ page }) => {
104+
await page.setContent(
105+
`<ion-checkbox ${labelPlacement ? `label-placement="${labelPlacement}"` : ''} helper-text="Helper text">Label</ion-checkbox>`,
106+
config
107+
);
108+
109+
const bottomEl = page.locator('ion-checkbox');
110+
await expect(bottomEl).toHaveScreenshot(
111+
screenshot(`checkbox-helper-text${labelPlacement ? `-${labelPlacement}` : ''}`)
112+
);
113+
});
114+
115+
test(`${labelPlacement ? `${labelPlacement} label - ` : ''}should not have visual regressions when rendering helper text with wrapping text`, async ({ page }) => {
116+
await page.setContent(
117+
`<ion-checkbox ${labelPlacement ? `label-placement="${labelPlacement}"` : ''} helper-text="Helper text helper text helper text helper text helper text helper text helper text helper text helper text">Label</ion-checkbox>`,
118+
config
119+
);
120+
121+
const bottomEl = page.locator('ion-checkbox');
122+
await expect(bottomEl).toHaveScreenshot(
123+
screenshot(`checkbox-helper-text${labelPlacement ? `-${labelPlacement}` : ''}-wrapping`)
124+
);
125+
});
106126
});
107-
test('should not have visual regressions when rendering helper text with wrapping text', async ({ page }) => {
108-
await page.setContent(
109-
`<ion-checkbox helper-text="Helper text helper text helper text helper text helper text helper text helper text helper text helper text">Label</ion-checkbox>`,
110-
config
111-
);
127+
});
112128

113-
const bottomEl = page.locator('ion-checkbox');
114-
await expect(bottomEl).toHaveScreenshot(screenshot(`checkbox-bottom-content-helper-wrapping`));
115-
});
116-
test('should not have visual regressions when rendering helper text with a stacked label', async ({ page }) => {
129+
test.describe(title('checkbox: error text rendering'), () => {
130+
test('should not have visual regressions when rendering error text', async ({ page }) => {
117131
await page.setContent(
118-
`<ion-checkbox label-placement="stacked" helper-text="Helper text">Label</ion-checkbox>`,
132+
`<ion-checkbox class="ion-invalid ion-touched" error-text="Error text">Label</ion-checkbox>`,
119133
config
120134
);
121135

122136
const bottomEl = page.locator('ion-checkbox');
123-
await expect(bottomEl).toHaveScreenshot(screenshot(`checkbox-bottom-content-helper-label-stacked`));
137+
await expect(bottomEl).toHaveScreenshot(screenshot(`checkbox-error-text`));
124138
});
125-
test('should not have visual regressions when rendering helper text with a stacked label and wrapping text', async ({
126-
page,
127-
}) => {
139+
test('should not have visual regressions when rendering error text with a stacked label', async ({ page }) => {
128140
await page.setContent(
129-
`<ion-checkbox label-placement="stacked" helper-text="Helper text helper text helper text helper text helper text helper text helper text helper text helper text">Label</ion-checkbox>`,
141+
`<ion-checkbox class="ion-invalid ion-touched" error-text="Error text" label-placement="stacked">Label</ion-checkbox>`,
130142
config
131143
);
132144

133145
const bottomEl = page.locator('ion-checkbox');
134-
await expect(bottomEl).toHaveScreenshot(screenshot(`checkbox-bottom-content-helper-label-stacked-wrapping`));
146+
await expect(bottomEl).toHaveScreenshot(screenshot(`checkbox-error-text-stacked-label`));
135147
});
136148
});
149+
});
137150

138-
test.describe(title('checkbox: error text rendering'), () => {
139-
test('should not have visual regressions when rendering error text', async ({ page }) => {
151+
/**
152+
* Customizing supporting text is the same across modes and directions
153+
*/
154+
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
155+
test.describe(title('checkbox: supporting text customization'), () => {
156+
test('should not have visual regressions when rendering helper text with custom css', async ({ page }) => {
140157
await page.setContent(
141-
`<ion-checkbox class="ion-invalid ion-touched" error-text="Helper text">Label</ion-checkbox>`,
142-
config
143-
);
158+
`
159+
<style>
160+
ion-checkbox::part(supporting-text) {
161+
font-size: 20px;
162+
}
144163
145-
const bottomEl = page.locator('ion-checkbox');
146-
await expect(bottomEl).toHaveScreenshot(screenshot(`checkbox-bottom-content-error`));
147-
});
148-
test('should not have visual regressions when rendering error text with a stacked label', async ({ page }) => {
149-
await page.setContent(
150-
`<ion-checkbox class="ion-invalid ion-touched" error-text="Helper text" label-placement="stacked">Label</ion-checkbox>`,
164+
ion-checkbox::part(helper-text) {
165+
color: green;
166+
}
167+
</style>
168+
<ion-checkbox helper-text="Helper text">Label</ion-checkbox>
169+
`,
151170
config
152171
);
153172

154-
const bottomEl = page.locator('ion-checkbox');
155-
await expect(bottomEl).toHaveScreenshot(screenshot(`checkbox-bottom-content-error-label-stacked`));
173+
const helperText = page.locator('ion-checkbox');
174+
await expect(helperText).toHaveScreenshot(screenshot(`checkbox-helper-text-custom-css`));
156175
});
157-
test('should not have visual regressions when rendering error text with a custom color', async ({ page }) => {
176+
test('should not have visual regressions when rendering error text with custom css', async ({ page }) => {
158177
await page.setContent(
159178
`
160179
<style>
161-
ion-checkbox.custom-checkbox {
162-
--highlight-color-invalid: purple;
180+
ion-checkbox::part(supporting-text) {
181+
font-size: 20px;
182+
}
183+
184+
ion-checkbox::part(error-text) {
185+
color: purple;
163186
}
164187
</style>
165-
<ion-checkbox class="ion-invalid ion-touched custom-checkbox" error-text="Error text">Label</ion-checkbox>
188+
<ion-checkbox class="ion-invalid ion-touched" error-text="Error text">Label</ion-checkbox>
166189
`,
167190
config
168191
);
169192

170193
const errorText = page.locator('ion-checkbox');
171-
await expect(errorText).toHaveScreenshot(screenshot(`checkbox-bottom-content-error-custom`));
194+
await expect(errorText).toHaveScreenshot(screenshot(`checkbox-error-text-custom-css`));
172195
});
173196
});
174197
});

0 commit comments

Comments
 (0)