Spectator & MatRadioButton

[alixroyere]

Hello guys 👋
Is there a way to click / change a MatRadioButton with spectator ?
My use case is to click on a radio button and see that my form is valid.
I know that MatRadioButton have utility classes for tests https://material.angular.io/components/radio/api#material-radio-testing-classes, but I'm unable to use it with spectator.
Maybe there are some tips & tricks
Thanks !

[benelliott]

Hi, please can you share what you have tried so far and the error message(s) you're getting?

[alixroyere]

Hello,
I'm finally able to make it work, with something like that:

 it("validate button must be enabled when matching is selected", async () => {
      // arrange
      const validateButton: HTMLButtonElement = spectator.query(VALIDATE_BUTTON_SELECTOR);
      const loader = TestbedHarnessEnvironment.loader(spectator.fixture);
      const radioButton: MatRadioButtonHarness = await loader.getHarness(MatRadioButtonHarness);
      // act
      await radioButton.check();
      // assert
      expect(component.stopMatchingForm.get("matching").hasError("required")).toBe(false);
      expect(validateButton).not.toBeDisabled();
    });

It feels weird to mix TestBed (TestbedHarnessEnvironment) and Spectator, but that doesn't seem to exist within Spectator

[marco24690]

can you please share your entire solution?
This doesn't work for me

mycomponent.html

<mat-radio-group ngDefaultControl [(ngModel)]="tipoContattoSel">
  <mat-radio-button color="primary" [value]="1" (change)="radioChange($event)" style="margin-right: 28px;">
    <div class="radio-text">{{1}}</div>
  </mat-radio-button>
</mat-radio-group>

spec.ts

it('check the radio button and hide nome field', async () => {
        const  loader = TestbedHarnessEnvironment.loader(spectator.fixture);
        const radioButton = await loader.getHarness(MatRadioButtonHarness);
        
        await radioButton.check();
     
        expect(spectator.query(byTestId('nome'))).not.toExist();
    });

I have the following error, seems the .mat-radio-button doesn't exist
Error: Failed to find element matching one of the following queries:
(MatRadioButtonHarness with host element matching selector: ".mat-radio-button")

[alixroyere]

  const createComponent = createComponentFactory({
    component: MyFormComponent,
    imports: [MatRadioModule],
  });

  beforeEach(() => {
    spectator = createComponent();
    component = spectator.component;
  });

Have you imported MatRadioModule in your spectator factory?

[marco24690]

awesome!that was the problem