ayo/astro-reactive-form
ayo/astro-reactive-form
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(form): add index to radio group item id (#193)

Browse source 
* feat(form): add index to radio group item id

* feat(form): radio-option label for prop

* fe-test(form): update tests for radio group
This commit is contained in:
Ayo Ayco 2022-11-12 07:57:31 +01:00 committed by GitHub
parent 061cec876e
commit a0a20c33b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/form/components/controls/RadioGroup.astro
View file

@ -23,18 +23,18 @@ const options = control.options.map((option: string | ControlOption) => {
--- ---
{ {
options.map((option: ControlOption) => ( options.map((option: ControlOption, index: number) => (
<div class="radio-option"> <div class="radio-option">
<input <input
type="radio" type="radio"
id={control.id} id={control.id + '-' + index}
name={control.name} name={control.name}
value={option.value} value={option.value}
checked={option.value === control.value} checked={option.value === control.value}
readonly={readOnly || null} readonly={readOnly || null}
disabled={readOnly || null} disabled={readOnly || null}
/>{' '} />
{option.label} <label for={control.id + '-' + index}>{option.label}</label>
</div> </div>
)) ))
} }

11
packages/form/test/RadioGroup.astro.test.js
View file

@ -34,7 +34,8 @@ describe('RadioGroup.astro test', () => {
}); });
it('Should render a checked radio option from string[] correctly', async () => { it('Should render a checked radio option from string[] correctly', async () => {
const expectedResult = '<inputtype="radio"name="FAKENAME"value="two"checked="true">'; const expectedResults = ['type="radio"', 'value="two"', 'checked="true"'];
const props = { const props = {
control: { control: {
label: 'FAKE LABEL', label: 'FAKE LABEL',
@ -49,13 +50,14 @@ describe('RadioGroup.astro test', () => {
// act // act
component = await getComponentOutput('./components/controls/RadioGroup.astro', props); component = await getComponentOutput('./components/controls/RadioGroup.astro', props);
const actualResult = cleanString(component.html); const actualResult = cleanString(component.html);
const resultsMap = expectedResults.map((result) => actualResult.includes(result));
// assert // 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 () => { it('Should render a checked radio option from ControlOption[] correctly', async () => {
const expectedResult = '<inputtype="radio"name="FAKENAME"value="three"checked="true">'; const expectedResults = ['type="radio"', 'value="three"', 'checked="true"'];
const props = { const props = {
control: { control: {
label: 'FAKE LABEL', label: 'FAKE LABEL',
@ -83,9 +85,10 @@ describe('RadioGroup.astro test', () => {
// act // act
component = await getComponentOutput('./components/controls/RadioGroup.astro', props); component = await getComponentOutput('./components/controls/RadioGroup.astro', props);
const actualResult = cleanString(component.html); const actualResult = cleanString(component.html);
const resultsMap = expectedResults.map((result) => actualResult.includes(result));
// assert // 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 () => { it('Should render readonly attribute if the prop readOnly is passed as true', async () => {

2
packages/form/test/utils/index.js
View file

@ -1,3 +1,3 @@
export function cleanString(str) { export function cleanString(str) {
return str.replace(/\s/g, ''); return typeof str !== 'string' ? '' : str.replace(/\s/g, '');
} }