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">
<input
type="radio"
id={control.id}
id={control.id + '-' + index}
name={control.name}
value={option.value}
checked={option.value === control.value}
readonly={readOnly || null}
disabled={readOnly || null}
/>{' '}
{option.label}
/>
<label for={control.id + '-' + index}>{option.label}</label>
</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 () => {
const expectedResult = '<inputtype="radio"name="FAKENAME"value="two"checked="true">';
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 = '<inputtype="radio"name="FAKENAME"value="three"checked="true">';
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 () => {

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

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