How do I to test ngIf in cypress?

Issue

I have the code

<div class="project" *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()
  }
 })

Solution

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.

Answered By - Fody