AssertionError with tests in Angular using clock/tick with intercept

[halbekanne]

As I am very new to Cypress, I'm not sure if this is a (known) bug or if I'm doing something wrong.

Consider the following scenario. My component:

1. Fetches data from a server
2. Displays that data
3. Fetches the data again after 1 second (using rxjs interval(1000))
4. Displays the new data (and so on)

Now in the test I mocked calls to the backend that return something different after each call to test that the webpage gets updated with new data if its available on the server.

I did this using cy.clock()and cy.tick(1000) in order to control and pass time. This is a minimal example test:

import { AppComponent } from './app.component';

describe('App', () => {
  it('displays data from the server twice', () => {
    cy.clock();

    cy.intercept('GET', 'https://yesno.wtf/api', {
      body: {
        answer: 'Apple',
      }
    }).as('apple');
    cy.mount(AppComponent);
    cy.get('.container').contains('Apple');

    cy.intercept('GET', 'https://yesno.wtf/api', {
      body: {
        answer: 'Banana',
      }
    }).as('banana');
    cy.tick(1000);
    cy.get('.container').contains('Banana');
  });
});

When I run this test with Chrome, I get the following error: "AssertionError: Timed out retrying after 4000ms: Expected to find content: 'Banana' within the element: <div.container> but never did."

When I open Cypress in Chrome I can see that the request has been correctly mocked and is returning 'Banana' with the second call, at least it seems that way. The viewport still displays "Apple".
It's probably a problem with my thinking and inexperience with Cypress that I can't get behind why this isn't working.
A minimal example repository can be found here.

[jordanpowell88]

@halbekanne thanks for posting your question. You should not need to use cy.clock() or cy.ticket() in this example. Because Cypress runs in the browser and it has automatic waiting, it will automatically wait for requests to finish like in your example above. You can always wait for a specific request as well (see the example below).

import { AppComponent } from './app.component';

describe('App', () => {
  it('displays data from the server twice', () => {
    cy.intercept('GET', 'https://yesno.wtf/api', {
      body: {
        answer: 'Apple',
      }
    }).as('apple');
    cy.mount(AppComponent);
    cy.get('.container').contains('Apple');

    cy.intercept('GET', 'https://yesno.wtf/api', {
      body: {
        answer: 'Banana',
      }
    }).as('banana');
   // you can also wait for requests to resolve by using `cy.wait()` and the `intercept` `alias`.
    cy.wait('@apple') 
    cy.wait('@banana')
    cy.get('.container').contains('Banana');
  });
});

[halbekanne]

Thank you for your response. Yes that is a good solution. However with this question I was mostly interested in why my method wasn't working so I can understand about how my thinking here was flawed and learn from it.

The situation I constructed is practically identical to the one in this Cypress blog post from 2021 where clock and tick has been used so I'm trying to figure out what the difference is: https://www.cypress.io/blog/2021/02/23/cy-intercept-and-cy-clock/

Once difference is that rxjs' interval() has been used in my example, so maybe clock and tick do not work with it, do you know if that is the case?