CODEWITHSUNDEEP
angularangular7cypress
beachCode
beachCode

Reputation: 3510

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

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

Upvotes: 4

Views: 3874

Answers (1)

Richard Matsen
Richard Matsen

Reputation: 23483

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')

  })

})

Upvotes: 5

Related Questions