Change Radio button value Angular Jasmine Testing

Question

I have two radio buttons, first one checked. Now, in my test file, I want to check the second radio button and then continue testing further. I am not finding a way to do so.

Following is my radio button:

<div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="RadioButton" (change)="some_func(true)" checked>
      <label class="form-check-label" for="inlineRadio1">Radio1</label>
 </div>
 <div class="form-check form-check-inline">
       <input class="form-check-input" type="radio" name="RadioButton" (change)="some_func(false)">
       <label class="form-check-label" for="inlineRadio2">Radio2</label>
</div>

I tried the following to change my radio button value, but it doesn't work :

let options: DebugElement[] = fixture.debugElement.queryAll(By.css('input[type="radio"]'));
options[1].triggerEventHandler('change', { target: options[1].nativeElement });

Can someone help me here, how can I make the second radio button checked?

Answer 1

Cypress has its own api for interacting with elements link

        <div
            class="form-check form-check-inline"
            data-cy="form-check-label"
          >
            <input type="checkbox" />
...

cy.get('[data-cy=form-check-label]').find('input').check()

Imagine div wrapped your input, you would use find() on its child input and call check(). Use data-cy=some_name to give your elements cypress specific selectors, then you know if element attributes change e.g class your tests won't be affected.

Answer 2

I think you can find a solution here :

Jasmine test for checkbox change handler function in angular 12

• You would need to run detectChanges()
• You can access both your radio with :

options[0].triggerEventHandler('change', { target: { checked: true } });

options[1].triggerEventHandler('change', { target: { checked: true } });