Skip to content

Commit 315642c

Browse files
brandyscarneybrandyscarney
committed
test(checkbox): add bottom content tests
1 parent 2aaf9e4 commit 315642c

File tree

3 files changed

+539
-0
lines changed

3 files changed

+539
-0
lines changed

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

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
import { expect } from '@playwright/test';
2+
import { configs, test } from '@utils/test/playwright';
3+
4+
/**
5+
* Functionality is the same across modes & directions
6+
*/
7+
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
8+
test.describe(title('checkbox: bottom content functionality'), () => {
9+
test('should not render bottom content if no hint is enabled', async ({ page }) => {
10+
await page.setContent(`<ion-checkbox>Label</ion-checkbox>`, config);
11+
12+
const bottomEl = page.locator('ion-checkbox .checkbox-bottom');
13+
await expect(bottomEl).toHaveCount(0);
14+
});
15+
test('helper text should be visible initially', async ({ page }) => {
16+
await page.setContent(
17+
`<ion-checkbox helper-text="Helper text" error-text="Error text">Label</ion-checkbox>`,
18+
config
19+
);
20+
21+
const helperText = page.locator('ion-checkbox .helper-text');
22+
const errorText = page.locator('ion-checkbox .error-text');
23+
await expect(helperText).toBeVisible();
24+
await expect(helperText).toHaveText('Helper text');
25+
await expect(errorText).toBeHidden();
26+
});
27+
test('input should have an aria-describedby attribute when helper text is present', async ({ page }) => {
28+
await page.setContent(
29+
`<ion-checkbox helper-text="Helper text" error-text="Error text">Label</ion-checkbox>`,
30+
config
31+
);
32+
33+
const input = page.locator('ion-checkbox input[type=checkbox]');
34+
const helperText = page.locator('ion-checkbox .helper-text');
35+
const helperTextId = await helperText.getAttribute('id');
36+
const ariaDescribedBy = await input.getAttribute('aria-describedby');
37+
38+
expect(ariaDescribedBy).toBe(helperTextId);
39+
});
40+
test('error text should be visible when checkbox is invalid', async ({ page }) => {
41+
await page.setContent(
42+
`<ion-checkbox class="ion-invalid ion-touched" helper-text="Helper text" error-text="Error text">Label</ion-checkbox>`,
43+
config
44+
);
45+
46+
const helperText = page.locator('ion-checkbox .helper-text');
47+
const errorText = page.locator('ion-checkbox .error-text');
48+
await expect(helperText).toBeHidden();
49+
await expect(errorText).toBeVisible();
50+
await expect(errorText).toHaveText('Error text');
51+
});
52+
53+
test('input should have an aria-describedby attribute when error text is present', async ({ page }) => {
54+
await page.setContent(
55+
`<ion-checkbox class="ion-invalid ion-touched" helper-text="Helper text" error-text="Error text">Label</ion-checkbox>`,
56+
config
57+
);
58+
59+
const input = page.locator('ion-checkbox input[type=checkbox]');
60+
const errorText = page.locator('ion-checkbox .error-text');
61+
const errorTextId = await errorText.getAttribute('id');
62+
const ariaDescribedBy = await input.getAttribute('aria-describedby');
63+
64+
expect(ariaDescribedBy).toBe(errorTextId);
65+
});
66+
test('input should have aria-invalid attribute when input is invalid', async ({ page }) => {
67+
await page.setContent(
68+
`<ion-checkbox class="ion-invalid ion-touched" helper-text="Helper text" error-text="Error text">Label</ion-checkbox>`,
69+
config
70+
);
71+
72+
const input = page.locator('ion-checkbox input[type=checkbox]');
73+
74+
await expect(input).toHaveAttribute('aria-invalid');
75+
});
76+
test('input should not have aria-invalid attribute when input is valid', async ({ page }) => {
77+
await page.setContent(
78+
`<ion-checkbox helper-text="Helper text" error-text="Error text">Label</ion-checkbox>`,
79+
config
80+
);
81+
82+
const input = page.locator('ion-checkbox input[type=checkbox]');
83+
84+
await expect(input).not.toHaveAttribute('aria-invalid');
85+
});
86+
test('input should not have aria-describedby attribute when no hint or error text is present', async ({
87+
page,
88+
}) => {
89+
await page.setContent(`<ion-checkbox>Label</ion-checkbox>`, config);
90+
91+
const input = page.locator('ion-checkbox input[type=checkbox]');
92+
93+
await expect(input).not.toHaveAttribute('aria-describedby');
94+
});
95+
});
96+
});
97+
98+
/**
99+
* Rendering is different across modes
100+
*/
101+
configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
102+
test.describe(title('checkbox: helper text rendering'), () => {
103+
test('should not have visual regressions when rendering helper text', async ({ page }) => {
104+
await page.setContent(`<ion-checkbox helper-text="Helper text">Label</ion-checkbox>`, config);
105+
106+
const bottomEl = page.locator('ion-checkbox');
107+
await expect(bottomEl).toHaveScreenshot(screenshot(`checkbox-bottom-content-helper`));
108+
});
109+
test('should not have visual regressions when rendering helper text with wrapping text', async ({ page }) => {
110+
await page.setContent(`<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>`, config);
111+
112+
const bottomEl = page.locator('ion-checkbox');
113+
await expect(bottomEl).toHaveScreenshot(screenshot(`checkbox-bottom-content-helper-wrapping`));
114+
});
115+
test('should not have visual regressions when rendering helper text with a stacked label', async ({ page }) => {
116+
await page.setContent(`<ion-checkbox label-placement="stacked" helper-text="Helper text">Label</ion-checkbox>`, config);
117+
118+
const bottomEl = page.locator('ion-checkbox');
119+
await expect(bottomEl).toHaveScreenshot(screenshot(`checkbox-bottom-content-helper-label-stacked`));
120+
});
121+
test('should not have visual regressions when rendering helper text with a stacked label and wrapping text', async ({ page }) => {
122+
await page.setContent(`<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>`, config);
123+
124+
const bottomEl = page.locator('ion-checkbox');
125+
await expect(bottomEl).toHaveScreenshot(screenshot(`checkbox-bottom-content-helper-label-stacked-wrapping`));
126+
});
127+
});
128+
129+
test.describe(title('checkbox: error text rendering'), () => {
130+
test('should not have visual regressions when rendering error text', async ({ page }) => {
131+
await page.setContent(
132+
`<ion-checkbox class="ion-invalid ion-touched" error-text="Helper text">Label</ion-checkbox>`,
133+
config
134+
);
135+
136+
const bottomEl = page.locator('ion-checkbox');
137+
await expect(bottomEl).toHaveScreenshot(screenshot(`checkbox-bottom-content-error`));
138+
});
139+
test('should not have visual regressions when rendering error text with a stacked label', async ({ page }) => {
140+
await page.setContent(
141+
`<ion-checkbox class="ion-invalid ion-touched" error-text="Helper text" label-placement="stacked">Label</ion-checkbox>`,
142+
config
143+
);
144+
145+
const bottomEl = page.locator('ion-checkbox');
146+
await expect(bottomEl).toHaveScreenshot(screenshot(`checkbox-bottom-content-error-label-stacked`));
147+
});
148+
test('should not have visual regressions when rendering error text with a custom color', async ({ page }) => {
149+
await page.setContent(
150+
`
151+
<style>
152+
ion-checkbox.custom-checkbox {
153+
--highlight-color-invalid: purple;
154+
}
155+
</style>
156+
<ion-checkbox class="ion-invalid ion-touched custom-checkbox" error-text="Error text">Label</ion-checkbox>
157+
`,
158+
config
159+
);
160+
161+
const errorText = page.locator('ion-checkbox');
162+
await expect(errorText).toHaveScreenshot(screenshot(`checkbox-bottom-content-error-custom`));
163+
});
164+
});
165+
});

‎core/src/components/checkbox/test/bottom-content/index.html‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Checkbox - Bottom Content</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
<style>
16+
.grid {
17+
display: grid;
18+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
19+
grid-row-gap: 20px;
20+
grid-column-gap: 20px;
21+
}
22+
h2 {
23+
font-size: 12px;
24+
font-weight: normal;
25+
26+
color: #6f7378;
27+
28+
margin-top: 10px;
29+
}
30+
ion-checkbox.custom-error-color {
31+
--highlight-color-invalid: purple;
32+
}
33+
</style>
34+
</head>
35+
36+
<body>
37+
<ion-app>
38+
<ion-header>
39+
<ion-toolbar>
40+
<ion-title>Checkbox - Bottom Content</ion-title>
41+
</ion-toolbar>
42+
</ion-header>
43+
44+
<ion-content id="content" class="ion-padding">
45+
<div class="grid">
46+
<div class="grid-item">
47+
<h2>No Hint</h2>
48+
<ion-checkbox>Label</ion-checkbox>
49+
</div>
50+
51+
<div class="grid-item">
52+
<h2>No Hint: Stacked</h2>
53+
<ion-checkbox label-placement="stacked">Label</ion-checkbox>
54+
</div>
55+
56+
<div class="grid-item">
57+
<h2>Helper Text: Label Start</h2>
58+
<ion-checkbox helper-text="Helper text">Label</ion-checkbox>
59+
</div>
60+
61+
<div class="grid-item">
62+
<h2>Helper Text: Label End</h2>
63+
<ion-checkbox label-placement="end" helper-text="Helper text">Label</ion-checkbox>
64+
</div>
65+
66+
<div class="grid-item">
67+
<h2>Helper Text: Label Stacked</h2>
68+
<ion-checkbox label-placement="stacked" helper-text="Helper text">Label</ion-checkbox>
69+
</div>
70+
71+
<div class="grid-item">
72+
<h2>Helper Text: Label Fixed</h2>
73+
<ion-checkbox label-placement="fixed" helper-text="Helper text">Label</ion-checkbox>
74+
</div>
75+
76+
<div class="grid-item">
77+
<h2>Error Text: Label Start</h2>
78+
<ion-checkbox error-text="Error text">Label</ion-checkbox>
79+
</div>
80+
81+
<div class="grid-item">
82+
<h2>Error Text: Label End</h2>
83+
<ion-checkbox label-placement="end" error-text="Error text">Label</ion-checkbox>
84+
</div>
85+
86+
<div class="grid-item">
87+
<h2>Error Text: Label Stacked</h2>
88+
<ion-checkbox label-placement="stacked" error-text="Error text">Label</ion-checkbox>
89+
</div>
90+
91+
<div class="grid-item">
92+
<h2>Error Text: Label Fixed</h2>
93+
<ion-checkbox label-placement="fixed" error-text="Error text">Label</ion-checkbox>
94+
</div>
95+
96+
<div class="grid-item">
97+
<h2>Helper & Error Text: Label Start</h2>
98+
<ion-checkbox helper-text="Helper text" error-text="Error text">Label</ion-checkbox>
99+
</div>
100+
101+
<div class="grid-item">
102+
<h2>Helper & Error Text: Label End</h2>
103+
<ion-checkbox label-placement="end" helper-text="Helper text" error-text="Error text">Label</ion-checkbox>
104+
</div>
105+
106+
<div class="grid-item">
107+
<h2>Helper & Error Text: Label Stacked</h2>
108+
<ion-checkbox label-placement="stacked" helper-text="Helper text" error-text="Error text">Label</ion-checkbox>
109+
</div>
110+
111+
<div class="grid-item">
112+
<h2>Helper & Error Text: Label Fixed</h2>
113+
<ion-checkbox label-placement="fixed" helper-text="Helper text" error-text="Error text">Label</ion-checkbox>
114+
</div>
115+
</div>
116+
117+
<button onclick="toggleValid()" class="expand">Toggle error</button>
118+
119+
<script>
120+
const checkboxes = document.querySelectorAll('ion-checkbox');
121+
122+
function toggleValid() {
123+
checkboxes.forEach(checkbox => {
124+
checkbox.classList.toggle('ion-invalid');
125+
checkbox.classList.toggle('ion-touched');
126+
});
127+
}
128+
</script>
129+
</ion-content>
130+
</ion-app>
131+
</body>
132+
</html>

0 commit comments

Comments
 (0)