From a0a20c33b2a5e36b76f6f705ed7581e98c369e1a Mon Sep 17 00:00:00 2001 From: Ayo Ayco Date: Sat, 12 Nov 2022 07:57:31 +0100 Subject: [PATCH] feat(form): add index to radio group item id (#193) * feat(form): add index to radio group item id * feat(form): radio-option label for prop * fe-test(form): update tests for radio group --- packages/form/components/controls/RadioGroup.astro | 8 ++++---- packages/form/test/RadioGroup.astro.test.js | 11 +++++++---- packages/form/test/utils/index.js | 2 +- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/form/components/controls/RadioGroup.astro b/packages/form/components/controls/RadioGroup.astro index 04e1006..ea90f94 100644 --- a/packages/form/components/controls/RadioGroup.astro +++ b/packages/form/components/controls/RadioGroup.astro @@ -23,18 +23,18 @@ const options = control.options.map((option: string | ControlOption) => { --- { - options.map((option: ControlOption) => ( + options.map((option: ControlOption, index: number) => (
{' '} - {option.label} + /> +
)) } diff --git a/packages/form/test/RadioGroup.astro.test.js b/packages/form/test/RadioGroup.astro.test.js index 741ad96..2b0e01a 100644 --- a/packages/form/test/RadioGroup.astro.test.js +++ b/packages/form/test/RadioGroup.astro.test.js @@ -34,7 +34,8 @@ describe('RadioGroup.astro test', () => { }); it('Should render a checked radio option from string[] correctly', async () => { - const expectedResult = ''; + const expectedResults = ['type="radio"', 'value="two"', 'checked="true"']; + const props = { control: { label: 'FAKE LABEL', @@ -49,13 +50,14 @@ describe('RadioGroup.astro test', () => { // act component = await getComponentOutput('./components/controls/RadioGroup.astro', props); const actualResult = cleanString(component.html); + const resultsMap = expectedResults.map((result) => actualResult.includes(result)); // assert - expect(actualResult).to.contain(expectedResult); + expect(resultsMap.every((result) => !!result)).to.equal(true); }); it('Should render a checked radio option from ControlOption[] correctly', async () => { - const expectedResult = ''; + const expectedResults = ['type="radio"', 'value="three"', 'checked="true"']; const props = { control: { label: 'FAKE LABEL', @@ -83,9 +85,10 @@ describe('RadioGroup.astro test', () => { // act component = await getComponentOutput('./components/controls/RadioGroup.astro', props); const actualResult = cleanString(component.html); + const resultsMap = expectedResults.map((result) => actualResult.includes(result)); // assert - expect(actualResult).to.contain(expectedResult); + expect(resultsMap.every((result) => !!result)).to.equal(true); }); it('Should render readonly attribute if the prop readOnly is passed as true', async () => { diff --git a/packages/form/test/utils/index.js b/packages/form/test/utils/index.js index fb97686..4eb9457 100644 --- a/packages/form/test/utils/index.js +++ b/packages/form/test/utils/index.js @@ -1,3 +1,3 @@ export function cleanString(str) { - return str.replace(/\s/g, ''); + return typeof str !== 'string' ? '' : str.replace(/\s/g, ''); }