如何在cypress中测试ngIf ?

Question

我有代码

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

我不确定*ngIf会调用什么属性?是display还是visible还是disabled?我如何测试它?

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()
}
})

Answer 1

您正在寻找div.project的存在，因此测试应该知道变量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()
}
})
}

我只能从这段HTML中告诉你这么多。

显然，你想测试基于功能工作或不工作的页面，所以需要更多地了解应用程序来改进测试。

Answer 2

如果您在日志中得到true或false，您可以应用这样的断言:

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