Тест Angular 7: изменение параметров переключателей материала в Cypress.io

Question

Я пишу тест Cypress.io для страницы, содержащей радиокнопки Angular Material. Я могу прочитать выбранную опцию и, казалось бы, изменить выбранную радиокнопку, но мое приложение не распознает ее как измененную.

Я проверил документацию, но не вижу ничего, что помогло бы справиться с этим конкретным сценарием. Я пытался использовать .check () и .click (), и они оба приводят к одной и той же проблеме.

Я пишу, что, похоже, это сработало, потому что в пользовательском интерфейсе тестового бегуна выбрана правильная радиокнопка. Однако я знаю, что в Angular это ничего не вызывало, потому что опция не была изменена в БД.

Вот тест. Он правильно определяет, какая кнопка выбрана в начале, но на самом деле не меняет, какая кнопка выбрана.

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

Answer 1

Кажется, что работает с демонстрационной страницей Angular Material https://material.angular.io/components/radio/examples.

Однако я не смог найти атрибут ng-reflect-checked, поэтому использовал класс mat-radio-checked. Если вы смотрите DOM при нажатии на опции, этот класс изменится - по крайней мере, на этой странице примера.

Это тест, который я провел

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

  })

})