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]>
justeattakeaway · Feb 6, 2025 · 00398c9 · 00398c9
1 parent 924ec8e
commit 00398c9
Show file tree

Hide file tree

Showing 9 changed files with 540 additions and 461 deletions.
diff --git a/apps/pie-storybook/stories/testing/pie-radio.test.stories.ts b/apps/pie-storybook/stories/testing/pie-radio.test.stories.ts
@@ -0,0 +1,201 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { useArgs as UseArgs } from '@storybook/preview-api';
+import { type Meta } from '@storybook/web-components';
+
+import '@justeattakeaway/pie-radio';
+import '@justeattakeaway/pie-button';
+import {
+    defaultProps,
+    statusTypes,
+    type RadioProps as RadioBaseProps,
+} from '@justeattakeaway/pie-radio';
+
+import { type SlottedComponentProps } from '../../types';
+import {
+    createStory, createVariantStory, sanitizeAndRenderHTML, type PropDisplayOptions, type TemplateFunction,
+} from '../../utilities';
+
+type RadioProps = SlottedComponentProps<RadioBaseProps>;
+type RadioStoryMeta = Meta<RadioProps>;
+
+const defaultArgs: RadioProps = {
+    ...defaultProps,
+    slot: 'Label',
+    value: 'value',
+};
+
+const radioStoryMeta: RadioStoryMeta = {
+    title: 'Radio',
+    component: 'pie-radio',
+    argTypes: {
+        checked: {
+            control: 'boolean',
+            defaultValue: {
+                summary: defaultArgs.checked,
+            },
+        },
+
+        defaultChecked: {
+            control: 'boolean',
+            defaultValue: {
+                summary: defaultArgs.defaultChecked,
+            },
+        },
+
+        disabled: {
+            control: 'boolean',
+            defaultValue: {
+                summary: defaultArgs.disabled,
+            },
+        },
+
+        name: {
+            control: 'text',
+            defaultValue: {
+                summary: defaultArgs.name,
+            },
+        },
+
+        required: {
+            control: 'boolean',
+            defaultValue: {
+                summary: defaultArgs.required,
+            },
+        },
+
+        slot: {
+            control: 'text',
+        },
+        value: {
+            control: 'text',
+            defaultValue: {
+                summary: defaultArgs.value,
+            },
+        },
+        status: {
+            control: 'select',
+            options: statusTypes,
+            defaultValue: {
+                summary: defaultProps.status,
+            },
+        },
+    },
+    args: defaultArgs,
+};
+
+export default radioStoryMeta;
+
+const onSubmit = (event: Event) => {
+    event.preventDefault();
+    const form = document.querySelector('#testForm') as HTMLFormElement;
+    const output = document.querySelector('#formDataOutput') as HTMLDivElement;
+
+    console.log('form', form);
+    const formData = new FormData(form);
+    const formDataObj: { [key: string]: FormDataEntryValue } = {};
+    formData.forEach((value, key) => {
+        formDataObj[key] = value;
+    });
+
+    output.innerText = JSON.stringify(formDataObj);
+};
+
+const Template = ({
+    checked,
+    disabled,
+    defaultChecked,
+    name,
+    required,
+    slot,
+    value,
+    status,
+}: RadioProps) => {
+    const [, updateArgs] = UseArgs();
+
+    const onChange = (event: InputEvent) => {
+        const radioElement = event.target as HTMLInputElement;
+        updateArgs({ checked: radioElement.checked });
+        console.info(JSON.stringify(event));
+    };
+
+    return html`
+        <pie-radio
+            ?checked="${checked}"
+            ?disabled="${disabled}"
+            ?defaultChecked="${defaultChecked}"
+            ?required="${required}"
+            name="${ifDefined(name)}"
+            .value="${value}"
+            status="${status}"
+            @change="${onChange}"
+            data-test-id="pie-radio">
+            ${sanitizeAndRenderHTML(slot)}
+        </pie-radio>`;
+};
+
+const ExampleFormTemplate: TemplateFunction<RadioProps> = ({
+    value,
+    name,
+    checked,
+    defaultChecked,
+    disabled,
+    required,
+    slot,
+}: RadioProps) => {
+    const [, updateArgs] = UseArgs();
+
+    const onChange = (event: InputEvent) => {
+        const radioElement = event.target as HTMLInputElement;
+        updateArgs({ checked: radioElement.checked });
+        console.info('change event fired');
+    };
+
+    return html`
+        <style>
+            pie-radio {
+                display: block;
+                margin-bottom: var(--dt-spacing-b);
+            }
+        </style>
+        <form id="testForm" @submit="${onSubmit}">
+            <pie-radio
+                .value="${value}"
+                name="${ifDefined(name)}"
+                ?checked="${checked}"
+                ?defaultChecked="${defaultChecked}"
+                ?disabled="${disabled}"
+                ?required="${required}"
+                @change="${onChange}"
+                data-test-id="pie-radio">
+                ${sanitizeAndRenderHTML(slot)}
+            </pie-radio>
+            <pie-button variant="secondary" type="reset">Reset</pie-button>
+            <pie-button type="submit">Submit</pie-button>
+        </form>
+        <div id="formDataOutput"></div>`;
+};
+
+export const Default = createStory<RadioProps>(Template, defaultArgs)();
+export const ExampleForm = createStory<RadioProps>(ExampleFormTemplate, defaultArgs)();
+
+const shortLabel = 'Short label';
+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.';
+
+const radioPropsMatrix: Partial<Record<keyof RadioProps, unknown[]>> = {
+    checked: [true, false],
+    disabled: [true, false],
+    slot: ['Label', longLabel],
+    status: ['default', 'error'],
+};
+
+const variantPropDisplayOptions: PropDisplayOptions<RadioProps> = {
+  propLabels: {
+      slot: {
+          [longLabel]: 'With long content',
+          [shortLabel]: 'With short content',
+      },
+  },
+};
+
+export const Variations = createVariantStory<RadioProps>(Template, radioPropsMatrix, { ... variantPropDisplayOptions, multiColumn: true });
diff --git a/packages/components/pie-radio/playwright-lit-visual.config.ts b/packages/components/pie-radio/playwright-lit-visual.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig } from '@sand4rt/experimental-ct-web';
-import { getPlaywrightVisualConfig } from '@justeattakeaway/pie-components-config';
+import { defineConfig } from '@playwright/test';
+import { getPlaywrightNativeVisualConfig } from '@justeattakeaway/pie-components-config';
 
-export default defineConfig(getPlaywrightVisualConfig());
+export default defineConfig(getPlaywrightNativeVisualConfig());
diff --git a/packages/components/pie-radio/playwright-lit.config.ts b/packages/components/pie-radio/playwright-lit.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig } from '@sand4rt/experimental-ct-web';
-import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config';
+import { defineConfig } from '@playwright/test';
+import { getPlaywrightNativeConfig } from '@justeattakeaway/pie-components-config';
 
-export default defineConfig(getPlaywrightConfig());
+export default defineConfig(getPlaywrightNativeConfig());
diff --git a/packages/components/pie-radio/src/index.ts b/packages/components/pie-radio/src/index.ts
@@ -154,7 +154,7 @@ export class PieRadio extends FormControlMixin(RtlMixin(LitElement)) implements
                 class="c-radio-input"
                 type="radio"
                 id="radioId"
-                data-test-id="pie-radio"
+                data-test-id="pie-radio-input"
                 .checked="${live(checked)}"
                 .value="${value}"
                 name="${ifDefined(name)}"

diff --git a/packages/components/pie-radio/test/accessibility/pie-radio.spec.ts b/packages/components/pie-radio/test/accessibility/pie-radio.spec.ts
@@ -1,16 +1,10 @@
-import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/webc-fixtures.ts';
-import { PieRadio, type RadioProps } from '../../src/index.ts';
+import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/playwright-fixtures.ts';
+import { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts';
 
 test.describe('PieRadio - Accessibility tests', () => {
-    test('a11y - should test the PieRadio component WCAG compliance', async ({ makeAxeBuilder, mount }) => {
-        await mount(PieRadio, {
-            props: {
-                name: 'option-1',
-            } as RadioProps,
-            slots: {
-                default: 'Label',
-            },
-        });
+    test('a11y - should test the PieRadio component WCAG compliance', async ({ makeAxeBuilder, page }) => {
+        const radioDefaultPage = await new BasePage(page, 'radio--default');
+        await radioDefaultPage.load();
 
         const results = await makeAxeBuilder().analyze();