Skip to content

Commit ddb4fd9

Browse files
brandyscarneybrandyscarney
committed
test(radio): check radio buttons for screenshots
1 parent c9e3e28 commit ddb4fd9

File tree

1 file changed

+85
-18
lines changed

1 file changed

+85
-18
lines changed

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

Lines changed: 85 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,27 @@ import { configs, test } from '@utils/test/playwright';
77
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
88
test.describe(title('radio: bottom content functionality'), () => {
99
test('should not render bottom content if no hint is enabled', async ({ page }) => {
10-
await page.setContent(`<ion-radio>Label</ion-radio>`, config);
10+
await page.setContent(
11+
`
12+
<ion-radio-group value="1">
13+
<ion-radio value="1">Label</ion-radio>
14+
</ion-radio-group>
15+
`,
16+
config
17+
);
1118

1219
const bottomEl = page.locator('ion-radio .radio-bottom');
1320
await expect(bottomEl).toHaveCount(0);
1421
});
1522
test('helper text should be visible initially', async ({ page }) => {
16-
await page.setContent(`<ion-radio helper-text="Helper text" error-text="Error text">Label</ion-radio>`, config);
23+
await page.setContent(
24+
`
25+
<ion-radio-group value="1">
26+
<ion-radio value="1" helper-text="Helper text" error-text="Error text">Label</ion-radio>
27+
</ion-radio-group>
28+
`,
29+
config
30+
);
1731

1832
const helperText = page.locator('ion-radio .helper-text');
1933
const errorText = page.locator('ion-radio .error-text');
@@ -22,7 +36,14 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
2236
await expect(errorText).toBeHidden();
2337
});
2438
test('radio should have an aria-describedby attribute when helper text is present', async ({ page }) => {
25-
await page.setContent(`<ion-radio helper-text="Helper text" error-text="Error text">Label</ion-radio>`, config);
39+
await page.setContent(
40+
`
41+
<ion-radio-group value="1">
42+
<ion-radio value="1" helper-text="Helper text" error-text="Error text">Label</ion-radio>
43+
</ion-radio-group>
44+
`,
45+
config
46+
);
2647

2748
const radio = page.locator('ion-radio');
2849
const helperText = page.locator('ion-radio .helper-text');
@@ -33,7 +54,11 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
3354
});
3455
test('error text should be visible when radio is invalid', async ({ page }) => {
3556
await page.setContent(
36-
`<ion-radio class="ion-invalid ion-touched" helper-text="Helper text" error-text="Error text">Label</ion-radio>`,
57+
`
58+
<ion-radio-group value="1">
59+
<ion-radio value="1" class="ion-invalid ion-touched" helper-text="Helper text" error-text="Error text">Label</ion-radio>
60+
</ion-radio-group>
61+
`,
3762
config
3863
);
3964

@@ -46,7 +71,11 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
4671

4772
test('radio should have an aria-describedby attribute when error text is present', async ({ page }) => {
4873
await page.setContent(
49-
`<ion-radio class="ion-invalid ion-touched" helper-text="Helper text" error-text="Error text">Label</ion-radio>`,
74+
`
75+
<ion-radio-group value="1">
76+
<ion-radio value="1" class="ion-invalid ion-touched" helper-text="Helper text" error-text="Error text">Label</ion-radio>
77+
</ion-radio-group>
78+
`,
5079
config
5180
);
5281

@@ -59,7 +88,11 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
5988
});
6089
test('radio should have aria-invalid attribute when radio is invalid', async ({ page }) => {
6190
await page.setContent(
62-
`<ion-radio class="ion-invalid ion-touched" helper-text="Helper text" error-text="Error text">Label</ion-radio>`,
91+
`
92+
<ion-radio-group value="1">
93+
<ion-radio value="1" class="ion-invalid ion-touched" helper-text="Helper text" error-text="Error text">Label</ion-radio>
94+
</ion-radio-group>
95+
`,
6396
config
6497
);
6598

@@ -68,14 +101,28 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
68101
await expect(radio).toHaveAttribute('aria-invalid');
69102
});
70103
test('radio should not have aria-invalid attribute when radio is valid', async ({ page }) => {
71-
await page.setContent(`<ion-radio helper-text="Helper text" error-text="Error text">Label</ion-radio>`, config);
104+
await page.setContent(
105+
`
106+
<ion-radio-group value="1">
107+
<ion-radio value="1" helper-text="Helper text" error-text="Error text">Label</ion-radio>
108+
</ion-radio-group>
109+
`,
110+
config
111+
);
72112

73113
const radio = page.locator('ion-radio');
74114

75115
await expect(radio).not.toHaveAttribute('aria-invalid');
76116
});
77117
test('radio should not have aria-describedby attribute when no hint or error text is present', async ({ page }) => {
78-
await page.setContent(`<ion-radio>Label</ion-radio>`, config);
118+
await page.setContent(
119+
`
120+
<ion-radio-group value="1">
121+
<ion-radio value="1">Label</ion-radio>
122+
</ion-radio-group>
123+
`,
124+
config
125+
);
79126

80127
const radio = page.locator('ion-radio');
81128

@@ -95,9 +142,13 @@ configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screens
95142
labelPlacement ? `${labelPlacement} label - ` : ''
96143
}should not have visual regressions when rendering helper text`, async ({ page }) => {
97144
await page.setContent(
98-
`<ion-radio ${
99-
labelPlacement ? `label-placement="${labelPlacement}"` : ''
100-
} helper-text="Helper text">Label</ion-radio>`,
145+
`
146+
<ion-radio-group value="1">
147+
<ion-radio value="1" ${
148+
labelPlacement ? `label-placement="${labelPlacement}"` : ''
149+
} helper-text="Helper text">Label</ion-radio>
150+
</ion-radio-group>
151+
`,
101152
config
102153
);
103154

@@ -111,9 +162,13 @@ configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screens
111162
labelPlacement ? `${labelPlacement} label - ` : ''
112163
}should not have visual regressions when rendering helper text with wrapping text`, async ({ page }) => {
113164
await page.setContent(
114-
`<ion-radio ${
115-
labelPlacement ? `label-placement="${labelPlacement}"` : ''
116-
} helper-text="Helper text helper text helper text helper text helper text helper text helper text helper text helper text">Label</ion-radio>`,
165+
`
166+
<ion-radio-group value="1">
167+
<ion-radio value="1" ${
168+
labelPlacement ? `label-placement="${labelPlacement}"` : ''
169+
} helper-text="Helper text helper text helper text helper text helper text helper text helper text helper text helper text">Label</ion-radio>
170+
</ion-radio-group>
171+
`,
117172
config
118173
);
119174

@@ -128,7 +183,11 @@ configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screens
128183
test.describe(title('radio: error text rendering'), () => {
129184
test('should not have visual regressions when rendering error text', async ({ page }) => {
130185
await page.setContent(
131-
`<ion-radio class="ion-invalid ion-touched" error-text="Error text">Label</ion-radio>`,
186+
`
187+
<ion-radio-group value="1">
188+
<ion-radio value="1" class="ion-invalid ion-touched" error-text="Error text">Label</ion-radio>
189+
</ion-radio-group>
190+
`,
132191
config
133192
);
134193

@@ -137,7 +196,11 @@ configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screens
137196
});
138197
test('should not have visual regressions when rendering error text with a stacked label', async ({ page }) => {
139198
await page.setContent(
140-
`<ion-radio class="ion-invalid ion-touched" error-text="Error text" label-placement="stacked">Label</ion-radio>`,
199+
`
200+
<ion-radio-group value="1">
201+
<ion-radio value="1" class="ion-invalid ion-touched" error-text="Error text" label-placement="stacked">Label</ion-radio>
202+
</ion-radio-group>
203+
`,
141204
config
142205
);
143206

@@ -164,7 +227,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
164227
color: green;
165228
}
166229
</style>
167-
<ion-radio helper-text="Helper text">Label</ion-radio>
230+
<ion-radio-group value="1">
231+
<ion-radio value="1" helper-text="Helper text">Label</ion-radio>
232+
</ion-radio-group>
168233
`,
169234
config
170235
);
@@ -184,7 +249,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
184249
color: purple;
185250
}
186251
</style>
187-
<ion-radio class="ion-invalid ion-touched" error-text="Error text">Label</ion-radio>
252+
<ion-radio-group value="1">
253+
<ion-radio value="1" class="ion-invalid ion-touched" error-text="Error text">Label</ion-radio>
254+
</ion-radio-group>
188255
`,
189256
config
190257
);

0 commit comments

Comments
 (0)