title: Angular app not detecting changes when running cypress tests
body: <p>I have an interesting problem while running Cypress tests against my angular app.</p>
  
  <p>The issue I am seeing is that DOM is not responding to changes from observables or component values when I am running my cypress tests.</p>
  
  <p>Here is a really simple example of what I am seeing.</p>
  
  <p>In my component I have the following.</p>
  
  <p>component.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button
    mat-raised-button
    color="primary"
    (click)="toggleGemVersion()"
    data-cy="serverspecs-hide-show-current-gem-version-btn"&gt;
    Toggle Version
  &lt;/button&gt;
  
  &lt;div *ngIf="!hideGem"&gt;
    &lt;p data-cy="serverspecs-current-gem-version"&gt;{{ gemVersion$ | async }}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>component.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>
  hideGem = true;
  gemVersion$: Observable&lt;string&gt; = this.store.pipe(select(getGemVersion));
  
  toggleGemVersion() {
    this.hideGem = !this.hideGem;
  }
  
  </code></pre>
  
  <p>cypress.spec.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>it('should toggle the current gem version when the show/hide button is clicked', () =&gt; {
    // 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');
  });
  </code></pre>
  
  <p>When I <code>console.log</code> the value of <code>this.hideGem</code> in the <code>toggleGemVersion</code> function I am seeing the correct value displayed in the cypress window console but I am not seeing those changes reflected in the dom.</p>
  
  <p>Is there something I need to do in my angular config to get DOM changes to happen when running a cypress test?</p>
  
  <p>Another interesting note, I exposed the <code>ChangeDetectorRef</code> service to the <code>window</code> variable and when I run <code>win.cd.detectChanges();</code> from the cypress tests after the cypress <code>click()</code> events the tests pass.</p>