Skip to content

Commit 00398c9

Browse files
siggerzzBen Siggery
siggerzz
and
Ben Siggery
authored
refactor(pie-radio): DSW-2770 tests to use @playwright/test (#2188)
* refactor(pie-radio): DSW-2770 tests to use `@playwright/test` * remove uneeded test * improve prop labelling * improve prop labelling --------- Co-authored-by: Ben Siggery <[email protected]>
1 parent 924ec8e commit 00398c9

File tree

9 files changed

+540
-461
lines changed

9 files changed

+540
-461
lines changed

‎apps/pie-storybook/stories/testing/pie-radio.test.stories.ts

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
import { html } from 'lit';
2+
import { ifDefined } from 'lit/directives/if-defined.js';
3+
import { useArgs as UseArgs } from '@storybook/preview-api';
4+
import { type Meta } from '@storybook/web-components';
5+
6+
import '@justeattakeaway/pie-radio';
7+
import '@justeattakeaway/pie-button';
8+
import {
9+
defaultProps,
10+
statusTypes,
11+
type RadioProps as RadioBaseProps,
12+
} from '@justeattakeaway/pie-radio';
13+
14+
import { type SlottedComponentProps } from '../../types';
15+
import {
16+
createStory, createVariantStory, sanitizeAndRenderHTML, type PropDisplayOptions, type TemplateFunction,
17+
} from '../../utilities';
18+
19+
type RadioProps = SlottedComponentProps<RadioBaseProps>;
20+
type RadioStoryMeta = Meta<RadioProps>;
21+
22+
const defaultArgs: RadioProps = {
23+
...defaultProps,
24+
slot: 'Label',
25+
value: 'value',
26+
};
27+
28+
const radioStoryMeta: RadioStoryMeta = {
29+
title: 'Radio',
30+
component: 'pie-radio',
31+
argTypes: {
32+
checked: {
33+
control: 'boolean',
34+
defaultValue: {
35+
summary: defaultArgs.checked,
36+
},
37+
},
38+
39+
defaultChecked: {
40+
control: 'boolean',
41+
defaultValue: {
42+
summary: defaultArgs.defaultChecked,
43+
},
44+
},
45+
46+
disabled: {
47+
control: 'boolean',
48+
defaultValue: {
49+
summary: defaultArgs.disabled,
50+
},
51+
},
52+
53+
name: {
54+
control: 'text',
55+
defaultValue: {
56+
summary: defaultArgs.name,
57+
},
58+
},
59+
60+
required: {
61+
control: 'boolean',
62+
defaultValue: {
63+
summary: defaultArgs.required,
64+
},
65+
},
66+
67+
slot: {
68+
control: 'text',
69+
},
70+
value: {
71+
control: 'text',
72+
defaultValue: {
73+
summary: defaultArgs.value,
74+
},
75+
},
76+
status: {
77+
control: 'select',
78+
options: statusTypes,
79+
defaultValue: {
80+
summary: defaultProps.status,
81+
},
82+
},
83+
},
84+
args: defaultArgs,
85+
};
86+
87+
export default radioStoryMeta;
88+
89+
const onSubmit = (event: Event) => {
90+
event.preventDefault();
91+
const form = document.querySelector('#testForm') as HTMLFormElement;
92+
const output = document.querySelector('#formDataOutput') as HTMLDivElement;
93+
94+
console.log('form', form);
95+
const formData = new FormData(form);
96+
const formDataObj: { [key: string]: FormDataEntryValue } = {};
97+
formData.forEach((value, key) => {
98+
formDataObj[key] = value;
99+
});
100+
101+
output.innerText = JSON.stringify(formDataObj);
102+
};
103+
104+
const Template = ({
105+
checked,
106+
disabled,
107+
defaultChecked,
108+
name,
109+
required,
110+
slot,
111+
value,
112+
status,
113+
}: RadioProps) => {
114+
const [, updateArgs] = UseArgs();
115+
116+
const onChange = (event: InputEvent) => {
117+
const radioElement = event.target as HTMLInputElement;
118+
updateArgs({ checked: radioElement.checked });
119+
console.info(JSON.stringify(event));
120+
};
121+
122+
return html`
123+
<pie-radio
124+
?checked="${checked}"
125+
?disabled="${disabled}"
126+
?defaultChecked="${defaultChecked}"
127+
?required="${required}"
128+
name="${ifDefined(name)}"
129+
.value="${value}"
130+
status="${status}"
131+
@change="${onChange}"
132+
data-test-id="pie-radio">
133+
${sanitizeAndRenderHTML(slot)}
134+
</pie-radio>`;
135+
};
136+
137+
const ExampleFormTemplate: TemplateFunction<RadioProps> = ({
138+
value,
139+
name,
140+
checked,
141+
defaultChecked,
142+
disabled,
143+
required,
144+
slot,
145+
}: RadioProps) => {
146+
const [, updateArgs] = UseArgs();
147+
148+
const onChange = (event: InputEvent) => {
149+
const radioElement = event.target as HTMLInputElement;
150+
updateArgs({ checked: radioElement.checked });
151+
console.info('change event fired');
152+
};
153+
154+
return html`
155+
<style>
156+
pie-radio {
157+
display: block;
158+
margin-bottom: var(--dt-spacing-b);
159+
}
160+
</style>
161+
<form id="testForm" @submit="${onSubmit}">
162+
<pie-radio
163+
.value="${value}"
164+
name="${ifDefined(name)}"
165+
?checked="${checked}"
166+
?defaultChecked="${defaultChecked}"
167+
?disabled="${disabled}"
168+
?required="${required}"
169+
@change="${onChange}"
170+
data-test-id="pie-radio">
171+
${sanitizeAndRenderHTML(slot)}
172+
</pie-radio>
173+
<pie-button variant="secondary" type="reset">Reset</pie-button>
174+
<pie-button type="submit">Submit</pie-button>
175+
</form>
176+
<div id="formDataOutput"></div>`;
177+
};
178+
179+
export const Default = createStory<RadioProps>(Template, defaultArgs)();
180+
export const ExampleForm = createStory<RadioProps>(ExampleFormTemplate, defaultArgs)();
181+
182+
const shortLabel = 'Short label';
183+
const longLabel = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium quam eget dolor imperdiet placerat. Aliquam sollicitudin erat sed est lobortis sollicitudin. Nam vulputate, mi vel finibus convallis, mi dolor molestie arcu, vel pulvinar urna neque et sapien. Aenean euismod faucibus turpis et efficitur. Sed porttitor dui at justo cursus pulvinar. Sed scelerisque aliquet diam sed feugiat. Fusce id lorem finibus, tempor nulla tempor, tincidunt odio. Mauris consequat lectus ex, eget lacinia dui finibus sit amet. Phasellus maximus posuere sapien eget condimentum. Nunc viverra pharetra blandit.';
184+
185+
const radioPropsMatrix: Partial<Record<keyof RadioProps, unknown[]>> = {
186+
checked: [true, false],
187+
disabled: [true, false],
188+
slot: ['Label', longLabel],
189+
status: ['default', 'error'],
190+
};
191+
192+
const variantPropDisplayOptions: PropDisplayOptions<RadioProps> = {
193+
propLabels: {
194+
slot: {
195+
[longLabel]: 'With long content',
196+
[shortLabel]: 'With short content',
197+
},
198+
},
199+
};
200+
201+
export const Variations = createVariantStory<RadioProps>(Template, radioPropsMatrix, { ... variantPropDisplayOptions, multiColumn: true });

‎packages/components/pie-radio/playwright-lit-visual.config.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { defineConfig } from '@sand4rt/experimental-ct-web';
2-
import { getPlaywrightVisualConfig } from '@justeattakeaway/pie-components-config';
1+
import { defineConfig } from '@playwright/test';
2+
import { getPlaywrightNativeVisualConfig } from '@justeattakeaway/pie-components-config';
33

4-
export default defineConfig(getPlaywrightVisualConfig());
4+
export default defineConfig(getPlaywrightNativeVisualConfig());

‎packages/components/pie-radio/playwright-lit.config.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { defineConfig } from '@sand4rt/experimental-ct-web';
2-
import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config';
1+
import { defineConfig } from '@playwright/test';
2+
import { getPlaywrightNativeConfig } from '@justeattakeaway/pie-components-config';
33

4-
export default defineConfig(getPlaywrightConfig());
4+
export default defineConfig(getPlaywrightNativeConfig());

‎packages/components/pie-radio/src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ export class PieRadio extends FormControlMixin(RtlMixin(LitElement)) implements
154154
class="c-radio-input"
155155
type="radio"
156156
id="radioId"
157-
data-test-id="pie-radio"
157+
data-test-id="pie-radio-input"
158158
.checked="${live(checked)}"
159159
.value="${value}"
160160
name="${ifDefined(name)}"

‎packages/components/pie-radio/test/accessibility/pie-radio.spec.ts

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
1-
import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/webc-fixtures.ts';
2-
import { PieRadio, type RadioProps } from '../../src/index.ts';
1+
import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/playwright-fixtures.ts';
2+
import { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts';
33

44
test.describe('PieRadio - Accessibility tests', () => {
5-
test('a11y - should test the PieRadio component WCAG compliance', async ({ makeAxeBuilder, mount }) => {
6-
await mount(PieRadio, {
7-
props: {
8-
name: 'option-1',
9-
} as RadioProps,
10-
slots: {
11-
default: 'Label',
12-
},
13-
});
5+
test('a11y - should test the PieRadio component WCAG compliance', async ({ makeAxeBuilder, page }) => {
6+
const radioDefaultPage = await new BasePage(page, 'radio--default');
7+
await radioDefaultPage.load();
148

159
const results = await makeAxeBuilder().analyze();
1610

0 commit comments

Comments
 (0)