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();
+ });
});
});