Change Radio button value Angular Jasmine Testing-CodePudding

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 >
      <input  type="radio" name="RadioButton" (change)="some_func(true)" checked>
      <label  for="inlineRadio1">Radio1</label>
 </div>
 <div >
       <input  type="radio" name="RadioButton" (change)="some_func(false)">
       <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?

CodePudding user response：

Cypress has its own api for interacting with elements link

        <div
            
            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.

CodePudding user response：

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