Angular Radio Group [(ngModel)] value not updating in jasmine test

Question

I have this html code in my component

<mat-radio-group aria-label="Select an option" [(ngModel)]="searchType" (change)="changeSearchType()" class="form-row">
        <mat-radio-button [value]="searchByUserType" class="mr-5 max-w-1/2 flex-1">{{'CONTENT.Search by User' | translate
            }}</mat-radio-button>
        <mat-radio-button [value]="searchByRegType" class="max-w-1/2 flex-1">{{'CONTENT.Search by Reg' | translate
            }}</mat-radio-button>
    </mat-radio-group>

and this test

it('should select the correct value for the radio buttons', () => {
      const radioGroupDebugElement = fixture.debugElement.query(By.css('mat-radio-group'));
      const radioButtons = radioGroupDebugElement.queryAll(By.css('mat-radio-button'));
  
      // Simulate user selecting the first radio button
      radioButtons[0].nativeElement.click();
      console.log(radioButtons[0].nativeElement.value);
      fixture.detectChanges();
  
      // Manually dispatch a change event
      radioGroupDebugElement.nativeElement.dispatchEvent(new Event('change'));
      fixture.detectChanges();
      expect(component.searchType).toBe(component.searchByUserType);
  
      // Simulate user selecting the second radio button
      radioButtons[1].nativeElement.click();
      fixture.detectChanges();
  
      // Manually dispatch a change event
      radioGroupDebugElement.nativeElement.dispatchEvent(new Event('change'));
      fixture.detectChanges();
      expect(component.searchType).toBe(component.searchByRegType);
  
    });

and I'm getting failed tests with "Expected undefined to be 'SearchByUser'." and "Expected undefined to be 'SearchByReg'."

The value of the radio button is not captured in the test.

What am I missing here?

Thanks

Answer 1

We can use the demo code from the angular material website where we use getAllHarnesses

  it('should select the correct value for the radio buttons', async () => {
    const childLoader = await loader.getChildLoader('mat-radio-group');
    const buttons = await childLoader.getAllHarnesses(MatRadioButtonHarness);
    // Simulate user selecting the first radio button

    // Manually dispatch a change event
    await buttons[0].check();
    fixture.detectChanges();
    expect(component.searchType).toBe(component.searchByUserType);

    // Simulate user selecting the second radio button
    buttons[1].check();
    fixture.detectChanges();

    // Manually dispatch a change event
    await buttons[1].check();
    fixture.detectChanges();
    expect(component.searchType).toBe(component.searchByRegType);
  });

Stackblitz Demo

Answer 2

I have found the solution, you have to target the input of the radio button not the the radio button itself.

it('should select the correct value for the radio buttons and display corresponding form', () => {

      // Simulate user selecting the first radio button
      selectSearch(radioButtons, 0, fixture);

      // Check the component's searchType value
      expect(component.searchType).toBe(component.searchByUserType);

      // Simulate user selecting the second radio button
      selectSearch(radioButtons, 1, fixture);

      // Check the component's searchType value
      expect(component.searchType).toBe(component.searchByRegType);

    });

const selectSearch = (radioButtons: DebugElement[], index: number, fixture): void => {
  const firstRadioInput = radioButtons[index].nativeElement.querySelector('input[type="radio"]');
  firstRadioInput.click();
  firstRadioInput.dispatchEvent(new Event('change'));
  fixture.detectChanges();
}