Question

针对我的角度应用程序运行赛普拉斯测试时，我遇到了一个有趣的问题。

我看到的问题是，当我运行赛普拉斯测试时，DOM对可观察值或组件值的更改没有响应。

这是我所见事物的一个非常简单的例子。

在我的组件中，我有以下内容。

component.html

<button
  mat-raised-button
  color="primary"
  (click)="toggleGemVersion()"
  data-cy="serverspecs-hide-show-current-gem-version-btn">
  Toggle Version
</button>

<div *ngIf="!hideGem">
  <p data-cy="serverspecs-current-gem-version">{{ gemVersion$ | async }}</p>
</div>

component.ts


hideGem = true;
gemVersion$: Observable<string> = this.store.pipe(select(getGemVersion));

toggleGemVersion() {
  this.hideGem = !this.hideGem;
}

cypress.spec.ts

it('should toggle the current gem version when the show/hide button is clicked', () => {
  // Click the show/hide current gem version button
  cy.get('[data-cy=serverspecs-hide-show-current-gem-version-btn]')
    .should('be.visible')
    .click();

  // Cypress test fails here saying this element doesn't exist
  cy.get('[data-cy=serverspecs-current-gem-version]')
    .should('exist')
    .should('have.value', '2.175.0');

  // Click the show/hide current gem version button
  cy.get('[data-cy=serverspecs-hide-show-current-gem-version-btn]')
    .should('be.visible')
    .click();

  // Verify current gem version is not showing
  cy.get('[data-cy=serverspecs-current-gem-version]').should('not.exist');
});

当我在console.log函数中this.hideGem的值toggleGemVersion时，我在cypress窗口控制台中看到了正确的值，但是在dom中却看不到那些变化。

在运行cypress测试时，我需要在我的角度配置中做一些事情来使DOM发生变化吗？

另一个有趣的注意事项是，我向ChangeDetectorRef变量公开了window服务，并且在cypress win.cd.detectChanges();事件通过测试后从cypress测试运行click()。

Answer 1

我有同样的问题。就我而言，我将changeDetection: ChangeDetectionStrategy.OnPush用于组件，而不使用ChangeDetectorRef。

要修复此问题，必须将ChangeDetectorRef注入组件并更新toggleGemVersion方法：

toggleGemVersion() {
  this.hideGem = !this.hideGem;
  this.changeDetectorRef.detectChanges();
}

运行cypress测试时，Angular应用无法检测到变化

1 个答案: