add test

justeattakeaway · Jan 21, 2025 · 29fa8eb · 29fa8eb
1 parent abcae7d
commit 29fa8eb
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/apps/pie-storybook/stories/testing/pie-radio-group.test.stories.ts b/apps/pie-storybook/stories/testing/pie-radio-group.test.stories.ts
@@ -48,7 +48,7 @@ export default radioGroupStoryMeta;
 const KeyboardNavigationTemplate = () => html`
     <h2>Radio group 1</h2>
     <p><pie-button size="small-productive" data-test-id="btn-1">Button 1</pie-button></p>
-    <pie-radio-group data-test-id="radio-group-1">
+    <pie-radio-group name="radio-group-1" data-test-id="radio-group-1">
         <pie-radio data-test-id="radio-1" value="chinese">Chinese</pie-radio>
         <pie-radio data-test-id="radio-2" value="shawarma">Shawarma</pie-radio>
         <pie-radio data-test-id="radio-3" value="pizza">Pizza</pie-radio>

diff --git a/packages/components/pie-radio-group/test/component/pie-radio-group-new.spec.ts b/packages/components/pie-radio-group/test/component/pie-radio-group-new.spec.ts
@@ -59,6 +59,22 @@ const expectFocusedRadioToBeChecked = async (page: Page, expect: Expect): Promis
 test.describe('PieRadioGroup - Component tests new', () => {
     let pageObject;
 
+    test.describe('props', () => {
+        test.describe('Name', () => {
+            test('Name prop is passed down to all slotted radio buttons', async ({ page }) => {
+                const expectedName = 'radio-group-1';
+                const radioSelectors = Object.keys(selectors.radioGroup1.radios);
+
+                await Promise.all(radioSelectors.map(async (radioSelector) => {
+                    const radio = page.getByTestId(radioSelector);
+                    const radioName = await radio.getAttribute('name');
+
+                    expect(radioName).toStrictEqual(expectedName);
+                }));
+            });
+        });
+    });
+
     test.describe('Keyboard navigation', () => {
         test.describe('Tab', () => {
             test.beforeEach(async ({ page }) => {