Skip to content

Commit f516311

Browse files
JoshuaNg2332JoshuaNg2332
authored
refactor(pie-switch): DSW-2382 refactored Switch to use @playwright/test (#2189)
* refactor(pie-switch): DSW-2382 refactored Switch to use playwright/test * refactor(pie-switch): DSW-2382 removed unneeded storybook controls from testing stories * refactor(pie-switch): DSW-2382 updated storybook submit actions and tests * refactor(pie-switch): DSW-2382 added constants file for event string handling
1 parent 5758ba2 commit f516311

File tree

9 files changed

+460
-342
lines changed

9 files changed

+460
-342
lines changed

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

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
import { html, nothing } from 'lit';
2+
import { type Meta } from '@storybook/web-components';
3+
4+
import '@justeattakeaway/pie-switch';
5+
import { type SwitchProps, labelPlacements, defaultProps } from '@justeattakeaway/pie-switch';
6+
import '@justeattakeaway/pie-icons-webc/dist/IconCheck.js';
7+
8+
import { EXPECTED_EVENT_MESSAGE } from '@justeattakeaway/pie-switch/test/helpers/constants';
9+
import { createStory, createVariantStory, type TemplateFunction } from '../../utilities';
10+
11+
type SwitchStoryMeta = Meta<SwitchProps>;
12+
13+
const defaultArgs: SwitchProps = {
14+
...defaultProps,
15+
label: 'Label',
16+
aria: {
17+
label: 'switch label',
18+
describedBy: 'switch description',
19+
},
20+
name: 'switch',
21+
value: 'switchValue',
22+
};
23+
24+
const switchStoryMeta: SwitchStoryMeta = {
25+
title: 'Switch',
26+
component: 'pie-switch',
27+
argTypes: {
28+
checked: {
29+
control: 'boolean',
30+
defaultValue: {
31+
summary: defaultProps.checked,
32+
},
33+
},
34+
disabled: {
35+
control: 'boolean',
36+
defaultValue: {
37+
summary: defaultProps.disabled,
38+
},
39+
},
40+
label: {
41+
description: 'The label text for the switch',
42+
control: {
43+
type: 'text',
44+
defaultValue: {
45+
summary: 'Label',
46+
},
47+
},
48+
},
49+
labelPlacement: {
50+
control: 'select',
51+
if: { arg: 'label', truthy: true },
52+
options: labelPlacements,
53+
defaultValue: {
54+
summary: defaultProps.labelPlacement,
55+
},
56+
},
57+
aria: {
58+
control: 'object',
59+
},
60+
name: {
61+
control: {
62+
type: 'text',
63+
defaultValue: {
64+
summary: 'switch',
65+
},
66+
},
67+
},
68+
value: {
69+
control: {
70+
type: 'text',
71+
defaultValue: {
72+
summary: defaultProps.value,
73+
},
74+
},
75+
},
76+
required: {
77+
control: 'boolean',
78+
defaultValue: {
79+
summary: defaultProps.required,
80+
},
81+
},
82+
},
83+
args: defaultArgs,
84+
};
85+
86+
export default switchStoryMeta;
87+
const changeAction = () => console.info(EXPECTED_EVENT_MESSAGE);
88+
const submitAction = (event: Event) => {
89+
event.preventDefault(); // Prevent the actual submission
90+
91+
const formLog = document.querySelector('#formLog') as HTMLElement;
92+
93+
// Display a success message to the user when they submit the form
94+
formLog.innerHTML = 'Form submitted!';
95+
formLog.style.display = 'block';
96+
97+
// Reset the success message after roughly 8 seconds
98+
setTimeout(() => {
99+
formLog.innerHTML = '';
100+
formLog.style.display = 'none';
101+
}, 8000);
102+
};
103+
104+
const submitActionTestForm = (event: Event) => {
105+
event.preventDefault(); // Prevent the actual submission
106+
107+
const form = document.querySelector('#testForm') as HTMLFormElement;
108+
109+
// Serialize form data
110+
const formData = new FormData(form);
111+
const formDataObj: Record<string, unknown> = {};
112+
113+
// Serialize form data into an object
114+
formData.forEach((value, key) => { formDataObj[key] = value; });
115+
116+
// Append serialized form data as JSON to a hidden element
117+
const dataHolder = document.createElement('div');
118+
dataHolder.id = 'formDataJson';
119+
dataHolder.textContent = JSON.stringify(formDataObj);
120+
dataHolder.style.display = 'none';
121+
document.body.appendChild(dataHolder);
122+
};
123+
124+
const Template : TemplateFunction<SwitchProps> = (props) => {
125+
const {
126+
aria,
127+
checked,
128+
disabled,
129+
label,
130+
labelPlacement,
131+
name,
132+
value,
133+
required,
134+
} = props;
135+
136+
return html`
137+
<pie-switch
138+
id="pie-switch"
139+
name="${name || nothing}"
140+
value="${value || nothing}"
141+
label="${label || nothing}"
142+
labelPlacement="${label && labelPlacement ? labelPlacement : nothing}"
143+
.aria="${aria}"
144+
?required="${required}"
145+
?checked="${checked}"
146+
?disabled="${disabled}"
147+
@change="${changeAction}">
148+
</pie-switch>`;
149+
};
150+
151+
const FormTemplate: TemplateFunction<SwitchProps> = (props: SwitchProps) => html`
152+
<p id="formLog" style="display: none; font-size: 2rem; color: var(--dt-color-support-positive);"></p>
153+
<form id="testForm" @submit="${submitAction}">
154+
155+
<section>
156+
${Template({
157+
...props,
158+
})}
159+
</section>
160+
<button id="submitButton" type="submit"">Submit</button>
161+
</form>
162+
`;
163+
164+
const TestFormTemplate: TemplateFunction<SwitchProps> = (props: SwitchProps) => html`
165+
<p id="formLog" style="display: none; font-size: 2rem; color: var(--dt-color-support-positive);"></p>
166+
<form id="testForm" @submit="${submitActionTestForm}" action="/default-endpoint" method="POST">
167+
168+
<section>
169+
${Template({
170+
...props,
171+
})}
172+
</section>
173+
<button id="submitButton" type="submit">Submit</button>
174+
</form>
175+
`;
176+
177+
const createSwitchStory = createStory(Template, defaultArgs);
178+
179+
const createSwitchStoryWithForm = createStory<SwitchProps>(FormTemplate, defaultArgs);
180+
181+
const createSwitchTestStoryWithForm = createStory<SwitchProps>(TestFormTemplate, defaultArgs);
182+
183+
const formIntegrationOnly = {
184+
table: {
185+
readonly: true,
186+
},
187+
};
188+
189+
export const Default = createSwitchStory({}, {
190+
argTypes: {
191+
name: formIntegrationOnly,
192+
required: formIntegrationOnly,
193+
value: formIntegrationOnly,
194+
},
195+
});
196+
197+
export const FormIntegration = createSwitchStoryWithForm();
198+
199+
export const TestFormIntegration = createSwitchTestStoryWithForm();
200+
201+
const baseSharedPropsMatrix: Partial<Record<keyof SwitchProps, unknown[]>> = {
202+
checked: [true, false],
203+
label: ['Label', ''],
204+
labelPlacement: ['leading', 'trailing'],
205+
disabled: [true, false],
206+
};
207+
208+
export const Variations = createVariantStory<SwitchProps>(Template, baseSharedPropsMatrix);

‎packages/components/pie-switch/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-switch/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-switch/test/accessibility/pie-switch.spec.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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';
3+
4+
test.describe('PieSwitch - Accessibility tests', () => {
5+
test('a11y - should test the PieSwitch component WCAG compliance', async ({ makeAxeBuilder, page }) => {
6+
const switchPage = new BasePage(page, 'switch');
7+
8+
await switchPage.load();
9+
10+
const results = await makeAxeBuilder().analyze();
11+
12+
expect(results.violations).toEqual([]);
13+
});
14+
});

0 commit comments

Comments
 (0)