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?

godhar · Accepted Answer · 2022-03-17 15:53:58Z

0

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.

answered Mar 17, 2022 at 15:53

godhar

1,4224 gold badges19 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gregor · Accepted Answer · 2023-02-01 10:48:12Z

0

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

edited Feb 1, 2023 at 10:48

Gregor

831 silver badge7 bronze badges

answered Mar 17, 2022 at 16:58

Alain Boudard

8937 silver badges17 bronze badges

Collectives™ on Stack Overflow

Change Radio button value Angular Jasmine Testing

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related