diff --git a/projects/ion/src/lib/radio-group/radio-group.component.html b/projects/ion/src/lib/radio-group/radio-group.component.html index 2980ffbc8..9626cd08b 100644 --- a/projects/ion/src/lib/radio-group/radio-group.component.html +++ b/projects/ion/src/lib/radio-group/radio-group.component.html @@ -2,10 +2,10 @@
{{ option.label }}
diff --git a/projects/ion/src/lib/radio-group/radio-group.component.spec.ts b/projects/ion/src/lib/radio-group/radio-group.component.spec.ts index 3c5942a89..eca0d61a1 100644 --- a/projects/ion/src/lib/radio-group/radio-group.component.spec.ts +++ b/projects/ion/src/lib/radio-group/radio-group.component.spec.ts @@ -1,10 +1,12 @@ -import { render, screen } from '@testing-library/angular'; +import { render, screen, fireEvent } from '@testing-library/angular'; import { IonRadioGroupComponent } from './radio-group.component'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import userEvent from '@testing-library/user-event'; -import { ComponentFixture } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { RadioOptions } from '../core/types/radio-group'; +import { NgModule, Component } from '@angular/core'; +import { IonRadioGroupModule } from './radio-group.module'; const radioGroupName = 'group'; const radioGroupValue = ''; @@ -55,18 +57,18 @@ describe('IonRadioGroup', () => { )('radio option $index', ({ label, value, index }) => { let radio: HTMLElement; beforeEach(() => { - radio = document.getElementById(`radio-${index}`); + radio = document.getElementById(`${radioGroupName}-radio-${index}`); }); - it(`should render a radio with id as radio-${index}`, () => { + it(`should render a radio with id as ${radioGroupName}-radio-${index}`, () => { expect(radio).toBeInTheDocument(); }); it(`should render a radio with label ${label}`, () => { expect(screen.getByLabelText(label)).toBeInTheDocument(); }); - it(`should render radio-${index} with radio group name`, () => { + it(`should render ${radioGroupName}-radio-${index} with radio group name`, () => { expect(radio).toHaveAttribute('name', radioGroupName); }); - it(`should render radio-${index} with value '${value}'`, () => { + it(`should render ${radioGroupName}-radio-${index} with value '${value}'`, () => { expect(radio).toHaveAttribute('value', value.toString()); }); it('should be unchecked by default', () => { @@ -78,8 +80,8 @@ describe('IonRadioGroup', () => { }); }); it('only one radio in the group should be checked', () => { - const firstOption = document.getElementById('radio-0'); - const secondOption = document.getElementById('radio-1'); + const firstOption = document.getElementById(`${radioGroupName}-radio-0`); + const secondOption = document.getElementById(`${radioGroupName}-radio-1`); userEvent.click(firstOption); expect(firstOption).toBeChecked(); @@ -91,7 +93,7 @@ describe('IonRadioGroup', () => { }); it('should change value', () => { const spyEmit = jest.spyOn(fixture.componentInstance.valueChange, 'emit'); - const firstOption = document.getElementById('radio-0'); + const firstOption = document.getElementById(`${radioGroupName}-radio-0`); userEvent.click(firstOption); expect(spyEmit).toHaveBeenCalled(); @@ -99,6 +101,117 @@ describe('IonRadioGroup', () => { }); it('should render option disabled', () => { rerender({ options: [{ ...options[0], disabled: true }] }); - expect(document.getElementById('radio-0')).toBeDisabled(); + expect(document.getElementById(`${radioGroupName}-radio-0`)).toBeDisabled(); + }); +}); + +@Component({ + template: ` +
+
+

Please select your preferred contact method:

+ +
+ +
+

Please select your favorite Web language:

+ +
+
+ `, +}) +class RadioGroupTestComponent { + contactMethod = { + name: 'contact-mathod', + options: [ + { + label: 'Email', + value: 'email', + }, + { + label: 'Phone', + value: 'phone', + }, + { + label: 'Mail', + value: 'mail', + }, + ], + }; + languages = { + name: 'language', + options: [ + { + label: 'HTML', + value: 'html', + }, + { + label: 'CSS', + value: 'css', + }, + { + label: 'Javascript', + value: 'javascript', + }, + ], + }; +} + +@NgModule({ + declarations: [RadioGroupTestComponent], + imports: [CommonModule, IonRadioGroupModule], +}) +class RadioGroupTestModule {} + +describe('IonRadioGroup - selecting an option when there are several ion-radio-group', () => { + let component: RadioGroupTestComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + TestBed.configureTestingModule({ + imports: [RadioGroupTestModule], + }).compileComponents(); + fixture = TestBed.createComponent(RadioGroupTestComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + afterEach(async () => { + fixture.destroy(); + }); + + it('should select the option by clicking on the HTML text and should not select any other option', () => { + const languageOptions = [ + document.getElementById(`${component.languages.name}-radio-0`), + document.getElementById(`${component.languages.name}-radio-1`), + document.getElementById(`${component.languages.name}-radio-2`), + ]; + + const contactMethodOptions = [ + document.getElementById(`${component.contactMethod.name}-radio-0`), + document.getElementById(`${component.contactMethod.name}-radio-1`), + document.getElementById(`${component.contactMethod.name}-radio-2`), + ]; + + const optionToSelect = languageOptions[0]; + const htmlOption = screen.getByLabelText( + component.languages.options[0].label + ); + fireEvent.click(htmlOption); + expect(optionToSelect).toBeChecked(); + + languageOptions.slice(1).forEach((option) => { + expect(option).not.toBeChecked(); + }); + + contactMethodOptions.forEach((option) => { + expect(option).not.toBeChecked(); + }); }); });