feat: dsw-2308-radio-styles integration (#215)

* feat: dsw-2308-radio-styles * fix vanilla form test * use strong typing for test form data * add radio to visual tests --------- Co-authored-by: personal <[email protected]>
justeattakeaway · Oct 11, 2024 · e753385 · e753385
1 parent 3dd2bd0
commit e753385
Show file tree

Hide file tree

Showing 15 changed files with 310 additions and 150 deletions.
diff --git a/nextjs-app-v13/package.json b/nextjs-app-v13/package.json
@@ -16,7 +16,7 @@
     "@justeattakeaway/pie-cookie-banner": "0.26.5",
     "@justeattakeaway/pie-css": "0.13.0",
     "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-webc": "0.5.37",
+    "@justeattakeaway/pie-webc": "0.5.42",
     "@lit-labs/nextjs": "0.1.4",
     "@lit/react": "1.0.2",
     "next": "13.5.6",

diff --git a/nextjs-app-v13/src/pages/integrations/form.tsx b/nextjs-app-v13/src/pages/integrations/form.tsx
@@ -277,8 +277,8 @@ export default function Form() {
                     </PieCheckboxGroup>
 
                     <fieldset>
-                        <PieRadio value="radio-1" name="radio-group" onInput={handleRadioInput as any}>Radio 1</PieRadio>
-                        <PieRadio value="radio-2" name="radio-group" onInput={handleRadioInput as any}>Radio 2</PieRadio>
+                        <PieRadio value="radio-1" name="radioValue" onInput={handleRadioInput as any}>Radio 1</PieRadio>
+                        <PieRadio data-test-id="radio-2" value="radio-2" name="radioValue" onInput={handleRadioInput as any}>Radio 2</PieRadio>
                     </fieldset>
                 </div>
                 <div className="form-btns">

diff --git a/nextjs-app-v13/test/visual/nextjs.spec.js b/nextjs-app-v13/test/visual/nextjs.spec.js
@@ -19,6 +19,7 @@ describe('NextJS Aperture App', () => {
         { url: '/components/lottie-player.html', name: 'Lottie Player', pauseBeforeScreenshot: true },
         { url: '/components/modal.html', name: 'Modal' },
         { url: '/components/notification.html', name: 'Notification' },
+        { url: '/components/radio.html', name: 'Radio' },
         { url: '/components/spinner.html', name: 'Spinner' },
         { url: '/components/switch.html', name: 'Switch' },
         { url: '/components/tag.html', name: 'Tag' },

diff --git a/nextjs-app-v14/package.json b/nextjs-app-v14/package.json
@@ -17,7 +17,7 @@
     "@justeattakeaway/pie-cookie-banner": "0.26.5",
     "@justeattakeaway/pie-css": "0.13.0",
     "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-webc": "0.5.37",
+    "@justeattakeaway/pie-webc": "0.5.42",
     "@lit-labs/nextjs": "0.2.0",
     "@lit/react": "1.0.5",
     "next": "14.2.3",

diff --git a/nextjs-app-v14/src/app/integrations/form/form.tsx b/nextjs-app-v14/src/app/integrations/form/form.tsx
@@ -277,8 +277,8 @@ export default function Form() {
                     </PieCheckboxGroup>
 
                     <fieldset>
-                        <PieRadio value="radio-1" name="radio-group" onInput={handleRadioInput as any}>Radio 1</PieRadio>
-                        <PieRadio value="radio-2" name="radio-group" onInput={handleRadioInput as any}>Radio 2</PieRadio>
+                        <PieRadio value="radio-1" name="radioValue" onInput={handleRadioInput as any}>Radio 1</PieRadio>
+                        <PieRadio data-test-id="radio-2" value="radio-2" name="radioValue" onInput={handleRadioInput as any}>Radio 2</PieRadio>
                     </fieldset>
                 </div>
                 <div className='form-btns'>

diff --git a/nextjs-app-v14/test/visual/nextjs.spec.js b/nextjs-app-v14/test/visual/nextjs.spec.js
@@ -19,6 +19,7 @@ describe('NextJS Aperture App', () => {
         { url: '/components/lottie-player', name: 'Lottie Player', pauseBeforeScreenshot: true },
         { url: '/components/modal', name: 'Modal' },
         { url: '/components/notification', name: 'Notification' },
+        { url: '/components/radio', name: 'Radio' },
         { url: '/components/spinner', name: 'Spinner' },
         { url: '/components/switch', name: 'Switch' },
         { url: '/components/tag', name: 'Tag' },

diff --git a/nuxt-app/package.json b/nuxt-app/package.json
@@ -22,7 +22,7 @@
     "@justeattakeaway/pie-cookie-banner": "0.26.5",
     "@justeattakeaway/pie-css": "0.13.0",
     "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-webc": "0.5.37",
+    "@justeattakeaway/pie-webc": "0.5.42",
     "just-kebab-case": "4.2.0",
     "nuxt-ssr-lit": "1.6.16"
   },

diff --git a/nuxt-app/pages/integrations/form.vue b/nuxt-app/pages/integrations/form.vue
@@ -131,13 +131,14 @@
                 <fieldset>
                     <pie-radio
                         value="radio-1"
-                        name="radio-group"
+                        name="radioValue"
                         @change="radio = $event.target.value">
                         Radio 1
                     </pie-radio>
                     <pie-radio
+                        data-test-id="radio-2"
                         value="radio-2"
-                        name="radio-group"
+                        name="radioValue"
                         @change="radio = $event.target.value">
                         Radio 2
                     </pie-radio>
@@ -238,7 +239,7 @@ function handleSubmit() {
         email: email.value,
         tel: tel.value,
         url: url.value,
-        radio: radio.value,
+        radioValue: radio.value,
         password: password.value,
         approveSettings: approveSettings.value,
         enableNotifications: notifications.value,

diff --git a/nuxt-app/test/visual/nuxt.spec.js b/nuxt-app/test/visual/nuxt.spec.js
@@ -19,6 +19,7 @@ describe('Nuxt Aperture App', () => {
         { url: '/components/lottie-player.html', name: 'Lottie Player', pauseBeforeScreenshot: true },
         { url: '/components/modal.html', name: 'Modal' },
         { url: '/components/notification.html', name: 'Notification' },
+        { url: '/components/radio.html', name: 'Radio' },
         { url: '/components/spinner.html', name: 'Spinner' },
         { url: '/components/switch.html', name: 'Switch' },
         { url: '/components/tag.html', name: 'Tag' },

diff --git a/test/playwright/page-objects/form.page.ts b/test/playwright/page-objects/form.page.ts
@@ -1,6 +1,22 @@
 import { type Locator, type Page } from '@playwright/test';
 const { APP_NAME } = process.env;
 
+export type TestFormData = {
+    username: string;
+    favouriteNumber: string;
+    email: string;
+    url: string;
+    tel: string;
+    password: string;
+    radioValue: string;
+    approveSettings: boolean;
+    enableNotifications: boolean;
+    newsletterSignup: boolean;
+    description: string;
+    contactByEmail: boolean;
+    contactByPhone: boolean;
+};
+
 export class FormPage {
     readonly page: Page;
     readonly usernameField: Locator;
@@ -18,6 +34,7 @@ export class FormPage {
     readonly newsletterSignupCheckbox: Locator;
     readonly contactByEmailCheckbox: Locator;
     readonly contactByPhoneCheckbox: Locator;
+    readonly radioButton2: Locator;
 
     constructor(page: Page) {
         this.page = page;
@@ -33,6 +50,7 @@ export class FormPage {
         this.newsletterSignupCheckbox = page.getByTestId('newsletterSignup').getByTestId('checkbox-component');
         this.contactByEmailCheckbox = page.getByTestId('contactByEmail').getByTestId('checkbox-component');
         this.contactByPhoneCheckbox = page.getByTestId('contactByPhone').getByTestId('checkbox-component');
+        this.radioButton2 = page.getByTestId('radio-2').getByTestId('pie-radio');
         this.resetBtn = page.getByTestId('reset-btn');
         this.submitBtn = page.getByTestId('submit-btn');
 
@@ -45,34 +63,20 @@ export class FormPage {
         await this.page.goto(formattedUrl);
     }
 
-    async fillForm(formData: any) {
+    async fillForm(formData: TestFormData) {
         await this.usernameField.locator('input').fill(formData.username);
         await this.favouriteNumberField.locator('input').fill(formData.favouriteNumber);
         await this.emailField.locator('input').fill(formData.email);
         await this.urlField.locator('input').fill(formData.url);
         await this.telField.locator('input').fill(formData.tel);
         await this.passwordField.locator('input').fill(formData.password);
         await this.descriptionField.locator('textarea').fill(formData.description);
-
-        if (formData.approveSettings) {
-            await this.approveSettingsSwitch.click();
-        }
-
-        if (formData.enableNotifications) {
-            await this.enableNotificationsSwitch.click();
-        }
-
-        if (formData.newsletterSignup) {
-            await this.newsletterSignupCheckbox.click();
-        }
-
-        if (formData.contactByEmail) {
-            await this.contactByEmailCheckbox.click();
-        }
-
-        if (formData.contactByPhone) {
-            await this.contactByPhoneCheckbox.click();
-        }
+        await this.approveSettingsSwitch.click();
+        await this.enableNotificationsSwitch.click();
+        await this.newsletterSignupCheckbox.click();
+        await this.contactByEmailCheckbox.click();
+        await this.contactByPhoneCheckbox.click();
+        await this.radioButton2.click();
     }
 
     async submitForm() {

diff --git a/test/system/form.spec.ts b/test/system/form.spec.ts
@@ -1,17 +1,17 @@
 import { test, expect } from '@playwright/test';
-import { FormPage } from '../playwright/page-objects/form.page';
+import { FormPage, type TestFormData } from '../playwright/page-objects/form.page';
 
 test.describe(`Form Page - ${process.env.APP_NAME}`, () => {
     test('should submit the correct form data', async ({ page }) => {
         // Arrange
-        const expectFormData = {
+        const expectFormData: TestFormData = {
             username: 'John Doe',
             favouriteNumber: '42',
             email: '[email protected]',
             url: 'https://example.com',
             tel: '1234567890',
             password: 'foo',
-            radioValue: '',
+            radioValue: 'radio-2',
             approveSettings: true,
             enableNotifications: true,
             newsletterSignup: true,

diff --git a/vanilla-app/integrations/form.html b/vanilla-app/integrations/form.html
@@ -66,8 +66,8 @@ <h1>Vanilla - PIE Form Test Page</h1>
             </pie-checkbox-group>
 
             <fieldset>
-                <pie-radio name="radio-group" value="radio-1">Radio option 1</pie-radio>
-                <pie-radio name="radio-group" value="radio-2">Radio option 2</pie-radio>
+                <pie-radio name="radioValue" value="radio-1">Radio option 1</pie-radio>
+                <pie-radio data-test-id="radio-2" name="radioValue" value="radio-2">Radio option 2</pie-radio>
             </fieldset>
         </div>
         <div class="form-btns">

diff --git a/vanilla-app/package.json b/vanilla-app/package.json
@@ -21,7 +21,7 @@
     "@justeattakeaway/pie-cookie-banner": "0.26.5",
     "@justeattakeaway/pie-css": "0.13.0",
     "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-webc": "0.5.37"
+    "@justeattakeaway/pie-webc": "0.5.42"
   },
   "installConfig": {
     "hoistingLimits": "workspaces"

diff --git a/vanilla-app/test/visual/vanilla.spec.js b/vanilla-app/test/visual/vanilla.spec.js
@@ -19,6 +19,7 @@ describe('Vanilla Aperture App', () => {
         { url: '/components/lottie-player.html', name: 'Lottie Player', pauseBeforeScreenshot: true },
         { url: '/components/modal.html', name: 'Modal' },
         { url: '/components/notification.html', name: 'Notification' },
+        { url: '/components/radio.html', name: 'Radio' },
         { url: '/components/spinner.html', name: 'Spinner' },
         { url: '/components/switch.html', name: 'Switch' },
         { url: '/components/tag.html', name: 'Tag' },