How do I to test ngIf in cypress?-CodePudding

I have the code

<div  *ngIf="role$ | async">
    <button mat-button *ngIf="id !== 5" (click)="doSomething()">DO</button>
</div>

I am not sure *ngIf would invoke what attribute? display or visible or disabled? How do I to test it?

The following is the wrong code, I guess

cy.get('.project').then(($div) => {
     if ($div.is(':disabled')) {
     cy.log('Div is disabled!')
     return
  } else {
      cy.log('Div is enabled!')
     cy.wrap($div).click()
  }
 })

CodePudding user response：

You are looking for the existence of div.project, so a test would ideally know the value if role$

if (role$) {

  cy.get('div.project').should('not.exist')

} else {

  cy.get(`div.project`)
    .should('exist')
    .within(() => {

      // work on button
      if (id === 5) {
        cy.contains('button', 'DO').should('not.exist')
      } else {
        cy.contains('button', 'DO').click()
      }
    })
}

That's as much as I can tell you from the fragment of HTML.

Obviously you want to test the page based on features working or not working, so would need to know more about the app to improve the test.

CodePudding user response：

In case you get true or false in the logs you can apply an assertion like this:

cy.get('.project').should('have.attr', '*ngIf', 'true') //for true
cy.get('.project').should('have.attr', '*ngIf', 'false') //for false