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?
I think you can find a solution here :
Jasmine test for checkbox change handler function in angular 12
options[0].triggerEventHandler('change', { target: { checked: true } });
options[1].triggerEventHandler('change', { target: { checked: true } });
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.