update form tests to use radio group (#226)

justeattakeaway · Nov 28, 2024 · bd53472 · bd53472
1 parent 6dacb08
commit bd53472
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 27 deletions.
diff --git a/nextjs-app-v14/src/app/integrations/form/form.tsx b/nextjs-app-v14/src/app/integrations/form/form.tsx
@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import NavigationLayout from '@/app/layout/navigation';
 import { PieFormLabel } from '@justeattakeaway/pie-webc/react/form-label.js';
 import { PieRadio } from '@justeattakeaway/pie-webc/react/radio.js';
+import { PieRadioGroup } from '@justeattakeaway/pie-webc/react/radio-group.js';
 import { PieSwitch } from '@justeattakeaway/pie-webc/react/switch.js';
 import { PieButton } from '@justeattakeaway/pie-webc/react/button.js';
 import { PieTextInput } from '@justeattakeaway/pie-webc/react/text-input.js';
@@ -27,6 +28,7 @@ export default function Form() {
     const [favouriteNumber, setFavouriteNumber] = useState('');
     const [favouriteNumberValidationMessage, setFavouriteNumberValidationMessage] = useState('');
     const [radioValue, setRadioValue] = useState('');
+    const [favouriteTakeaway, setFavouriteTakeaway] = useState('');
 
     const [formDataDisplay, setFormDataDisplay] = useState<string | null>(null);
 
@@ -104,6 +106,11 @@ export default function Form() {
         setContactByEmail(current => !current);
     };
 
+    const handleFavouriteTakeaway = (event: InputEvent) => {
+        const newFavourite = (event.target as HTMLInputElement).value;
+        setFavouriteTakeaway(newFavourite);
+    }
+
     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
         const data = {
@@ -118,7 +125,7 @@ export default function Form() {
             url,
             tel,
             password,
-            radioValue,
+            favouriteTakeaway,
             description,
         };
 
@@ -276,10 +283,11 @@ export default function Form() {
                         </PieCheckbox>
                     </PieCheckboxGroup>
 
-                    <fieldset>
-                        <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>
+                    <PieRadioGroup name="favouriteTakeaway" onChange={handleFavouriteTakeaway as any}>
+                        <PieFormLabel slot="label">Choose a radio button:</PieFormLabel>
+                        <PieRadio value="chinese">Chinese</PieRadio>
+                        <PieRadio data-test-id="shawarma" value="shawarma">Shawarma</PieRadio>
+                    </PieRadioGroup>
                 </div>
                 <div className='form-btns'>
                     <PieButton className="form-btn" data-test-id="reset-btn" variant="secondary" type="reset">Reset</PieButton>

diff --git a/nuxt-app/pages/integrations/form.vue b/nuxt-app/pages/integrations/form.vue
@@ -128,21 +128,20 @@
                     Receive discounts, loyalty offers and other updates via email
                 </pie-checkbox>
 
-                <fieldset>
+                <pie-radio-group name="favouriteTakeaway" @change="favouriteTakeaway = $event.target.value">
+                    <pie-form-label>
+                    Your favourite takeaway
+                    </pie-form-label>
                     <pie-radio
-                        value="radio-1"
-                        name="radioValue"
-                        @change="radio = $event.target.value">
-                        Radio 1
+                        value="chinese">
+                        Chinese
                     </pie-radio>
                     <pie-radio
-                        data-test-id="radio-2"
-                        value="radio-2"
-                        name="radioValue"
-                        @change="radio = $event.target.value">
-                        Radio 2
+                        data-test-id="shawarma"
+                        value="shawarma">
+                        Shawarma
                     </pie-radio>
-                </fieldset>
+                </pie-radio-group>
 
                 <pie-checkbox-group>
                     <pie-form-label slot="label">Choose the way we can contact you:</pie-form-label>
@@ -186,6 +185,7 @@ import '@justeattakeaway/pie-webc/components/form-label.js';
 import '@justeattakeaway/pie-webc/components/text-input.js';
 import '@justeattakeaway/pie-webc/components/textarea.js';
 import '@justeattakeaway/pie-webc/components/radio.js';
+import '@justeattakeaway/pie-webc/components/radio-group.js';
 import '@justeattakeaway/pie-webc/components/switch.js';
 import '@justeattakeaway/pie-webc/components/checkbox.js';
 import '@justeattakeaway/pie-webc/components/checkbox-group.js';
@@ -211,7 +211,7 @@ const favouriteNumber = ref('');
 const favouriteNumberValidationMessage = ref('');
 const newsletter = ref(false);
 const description = ref('');
-const radio = ref('');
+const favouriteTakeaway = ref('');
 
 const contactByEmail = ref(false);
 const contactByPhone = ref(false);
@@ -239,7 +239,7 @@ function handleSubmit() {
         email: email.value,
         tel: tel.value,
         url: url.value,
-        radioValue: radio.value,
+        favouriteTakeaway: favouriteTakeaway.value,
         password: password.value,
         approveSettings: approveSettings.value,
         enableNotifications: notifications.value,

diff --git a/test/playwright/page-objects/form.page.ts b/test/playwright/page-objects/form.page.ts
@@ -8,7 +8,7 @@ export type TestFormData = {
     url: string;
     tel: string;
     password: string;
-    radioValue: string;
+    favouriteTakeaway: string;
     approveSettings: boolean;
     enableNotifications: boolean;
     newsletterSignup: boolean;
@@ -34,7 +34,7 @@ export class FormPage {
     readonly newsletterSignupCheckbox: Locator;
     readonly contactByEmailCheckbox: Locator;
     readonly contactByPhoneCheckbox: Locator;
-    readonly radioButton2: Locator;
+    readonly favouriteTakeaway: Locator;
 
     constructor(page: Page) {
         this.page = page;
@@ -50,7 +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.favouriteTakeaway = page.getByTestId('shawarma').getByTestId('pie-radio');
         this.resetBtn = page.getByTestId('reset-btn');
         this.submitBtn = page.getByTestId('submit-btn');
 
@@ -74,7 +74,7 @@ export class FormPage {
         await this.approveSettingsSwitch.click();
         await this.enableNotificationsSwitch.click();
         await this.newsletterSignupCheckbox.click();
-        await this.radioButton2.click();
+        await this.favouriteTakeaway.click();
         await this.contactByEmailCheckbox.click();
         await this.contactByPhoneCheckbox.click();
     }

diff --git a/test/system/form.spec.ts b/test/system/form.spec.ts
@@ -11,7 +11,7 @@ test.describe(`Form Page - ${process.env.APP_NAME}`, () => {
             url: 'https://example.com',
             tel: '1234567890',
             password: 'foo',
-            radioValue: 'radio-2',
+            favouriteTakeaway: 'shawarma',
             approveSettings: true,
             enableNotifications: true,
             newsletterSignup: true,

diff --git a/vanilla-app/integrations/form.html b/vanilla-app/integrations/form.html
@@ -65,10 +65,11 @@ <h1>Vanilla - PIE Form Test Page</h1>
                 <pie-checkbox id="contactByPhone" name="contactByPhone" data-test-id="contactByPhone">Contact By Phone</pie-checkbox>
             </pie-checkbox-group>
 
-            <fieldset>
-                <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>
+            <pie-radio-group>
+                <pie-form-label slot="label">Favourite takeaway:</pie-form-label>
+                <pie-radio name="favouriteTakeaway" value="chinese">Chinese</pie-radio>
+                <pie-radio name="favouriteTakeaway" data-test-id="shawarma" value="shawarma">Shawarma</pie-radio>
+            </pie-radio-group>
         </div>
         <div class="form-btns">
             <pie-button class="form-btn" data-test-id="reset-btn" variant="secondary" type="reset">Reset</pie-button>

diff --git a/vanilla-app/js/form.js b/vanilla-app/js/form.js
@@ -2,6 +2,7 @@ import '@justeattakeaway/pie-webc/components/button.js';
 import '@justeattakeaway/pie-webc/components/text-input.js';
 import '@justeattakeaway/pie-webc/components/textarea.js';
 import '@justeattakeaway/pie-webc/components/radio.js';
+import '@justeattakeaway/pie-webc/components/radio-group.js';
 import '@justeattakeaway/pie-webc/components/switch.js';
 import '@justeattakeaway/pie-webc/components/checkbox.js';
 import '@justeattakeaway/pie-webc/components/checkbox-group.js';