Changes from peer review

Author: xander-marjoram

apps/pie-storybook/stories/pie-radio.stories.ts

@@ -7,7 +7,7 @@ import { type RadioProps as RadioBaseProps, defaultProps } from '@justeattakeawa
 
 import { type SlottedComponentProps } from '../types';
 
-import { createStory } from '../utilities';
+import { createStory, sanitizeAndRenderHTML } from '../utilities';
 
 type RadioProps = SlottedComponentProps<RadioBaseProps>;
 type RadioStoryMeta = Meta<RadioProps>;
@@ -96,7 +96,7 @@ const Template = ({
         ?required="${required}"
         name="${ifDefined(name)}"
         .value="${value}">
-        ${slot}
+        ${sanitizeAndRenderHTML(slot)}
     </pie-radio>
 `;
 

packages/components/pie-radio/test/component/pie-radio.spec.ts

@@ -1,4 +1,3 @@
-
 import { test, expect } from '@sand4rt/experimental-ct-web';
 import { PieRadio } from '../../src/index.ts';
 import { type RadioProps } from '../../src/defs.ts';
@@ -167,9 +166,11 @@ test.describe('PieRadio - Component tests', () => {
                 // Act
                 await component.locator(inputSelector).click();
                 const isValid = await page.evaluate(() => document.querySelector('pie-radio')?.validity.valid);
+                const isValueMissing = await page.evaluate(() => document.querySelector('pie-radio')?.validity.valueMissing);
 
                 // Assert
                 expect(isValid).toBe(true);
+                expect(isValueMissing).toBe(false);
             });
 
             test('should be in an invalid state if the radio is required but unchecked', async ({ mount, page }) => {
@@ -184,9 +185,11 @@ test.describe('PieRadio - Component tests', () => {
 
                 // Act
                 const isValid = await page.evaluate(() => document.querySelector('pie-radio')?.validity.valid);
+                const isValueMissing = await page.evaluate(() => document.querySelector('pie-radio')?.validity.valueMissing);
 
                 // Assert
                 expect(isValid).toBe(false);
+                expect(isValueMissing).toBe(true);
             });
 
             test('should be in a valid state if the radio is checked but not required', async ({ mount, page }) => {
@@ -201,9 +204,11 @@ test.describe('PieRadio - Component tests', () => {
 
                 // Act
                 const isValid = await page.evaluate(() => document.querySelector('pie-radio')?.validity.valid);
+                const isValueMissing = await page.evaluate(() => document.querySelector('pie-radio')?.validity.valueMissing);
 
                 // Assert
                 expect(isValid).toBe(true);
+                expect(isValueMissing).toBe(false);
             });
 
             test('should be in a valid state if the radio is unchecked and not required', async ({ mount, page }) => {
@@ -218,9 +223,11 @@ test.describe('PieRadio - Component tests', () => {
 
                 // Act
                 const isValid = await page.evaluate(() => document.querySelector('pie-radio')?.validity.valid);
+                const isValueMissing = await page.evaluate(() => document.querySelector('pie-radio')?.validity.valueMissing);
 
                 // Assert
                 expect(isValid).toBe(true);
+                expect(isValueMissing).toBe(false);
             });
         });
     });