Angular 7 test: changing material radio buttons options in Cypress.io

user_3026206 0
Viewed 2877

I'm writing a Cypress.io test for a page that has Angular material radio buttons. I can read the selected option, and seemingly change the selected radio button, but my app does not recognize it as having been changed.

I've checked the documentation, but I don't see anything to help deal with this particular scenario. I've tried using .check() and .click() and they both result in the same issue.

I write that it seems to have worked because the right radio button is selected in the test runner UI. However, I know it hasn't triggered anything in Angular because the option hasn't been changed in the DB.

Here's the test. It correctly identifies which button is selected at the start, but does not actually change which button is selected.

it('Should change radio button', function() {
    cy.get('#mat-radio-3').should('have.attr', 'ng-reflect-checked', 'true');
    cy.get('[type="radio"]').first().check({force: true});
    cy.get('#mat-radio-2').should('have.attr', 'ng-reflect-checked', 'true');
})
angular7 angular cypress
1 Answers

It seems to work with the Angular Material demo page https://material.angular.io/components/radio/examples.

However, I could not find the attribute ng-reflect-checked so used class mat-radio-checked instead. If you watch the DOM when clicking the options, this class changes - at least on this example page.

This is the test I ran

describe('clicking angular material radio', () => {

  it('Should change radio button', function() {
    cy.visit('https://material.angular.io/components/radio/examples')

    cy.get('[type="radio"]').first().check({force: true});
    cy.get('#mat-radio-2').should('have.class', 'mat-radio-checked');
    cy.contains('.example-selected-value', 'Your favorite season is: Winter')

    cy.get('[type="radio"]').eq(1).check({force: true});
    cy.get('#mat-radio-3').should('have.class', 'mat-radio-checked');
    cy.contains('.example-selected-value', 'Your favorite season is: Spring')

    cy.get('[type="radio"]').eq(2).check({force: true});
    cy.get('#mat-radio-4').should('have.class', 'mat-radio-checked');
    cy.contains('.example-selected-value', 'Your favorite season is: Summer')

    cy.get('[type="radio"]').eq(3).check({force: true});
    cy.get('#mat-radio-5').should('have.class', 'mat-radio-checked');
    cy.contains('.example-selected-value', 'Your favorite season is: Autumn')

  })

})
user_47162450
Related