cy.clock() and cy.tick() with Rxjs polling pattern using exhaustMap()

[muratkeremozcan]

In our other Angular apps we have used cy.clock() and tick() successfully.

We have a new Angular app in which we are polling an endpoint at 20 sec intervals using a Rxjs polling pattern. This value is set at environment.ts and read into a service. The polling pattern looks as such:

export class OurService implements OnDestroy {
  private pollingFrequency: number;
  private stopPollingSubject$ = new Subject();

  constructor( ....
  ) {
    this.pollingFrequency = aConstantFromEnvironmentTSFile;
    combineLatest([source$, source2$])
      .pipe(
        filter((results) => !!results[0] && !!results[1]),
        take(1)
      )
      .subscribe((results) => {
        this.startPolling(results[0].id, results[1].id);
      });
  }

  private startPolling(s1Id: string, s2Id: string) {
    timer(0, this.pollingFrequency)
      .pipe(
        exhaustMap(() =>
          // get some stuff
          this.stopPollingSubject$.next();
          ...
        ),
        map(....),
        tap(....),
        share(),
        takeUntil(this.stopPollingSubject$)
      )
      .subscribe();
  }

Here are our attempts at testing the above polling code.

 
    it('should test 20 sec polling', () => {
      cy.visit('...');
      // (works) in the simple version of the test, we would just wait 20 seconds. The challenge is that we do not want to spend the time waiting. 

      // assume there is an alias already set...
      cy.wait('@equipmentWithPoints-stub', { timeout: 20000 }
    });


    it('should test 20 sec polling', () => {
      // (hangs) cy.clock attempt

      cy.clock();
      cy.visit('..')

      // Our app hangs and does not fully load the component, the network request we want to check for does not go out

      cy.tick(20000);
      cy.wait('@equipmentWithPoints-stub', { timeout: 20000 });
    });


    it('should test 20 sec polling', () => {
      cy.visit('..');

      // (works) We do not want to have to do this, instead want to use cy.clock and tick

      // since Cypress has access to the code with if(window.Cypress), we can access the properties
      cy.window()
        .should('have.property', 'OurService')
        .should('have.property', 'pollingFrequency')
        .should('eq', 20000);
    });

[hkarambizi]

I was recently sent this and it may help:

So I have seen this before - cy.clock stops everything and dynamic events libraries like rx are stopped too. I don’t know what exactly they need to do but maybe call cy tick a few times to let the rx turn a few cycles and get to good state

If we can actually get a simple reproducible example of this polling behavior, we can try to find and document a solution.

[muratkeremozcan]

Thank you.

I will follow up when / if there is a deployment of the app - we cannot share the source code but test code is ok.

For the time being, inspired by this blog post we created a helper function to let Cypress have component access to the Angular app, without having to resort to changing the source code with this:

// your Angular component file
constructor( /* ... */ ) {
  // if running inside Cypress tests, set the component
  // @ts-ignore 
  if (window.Cypress) {
   window.yourComponent = this;
   }
 }

Instead we utilize a helper function like this:

Cypress.Commands.add('component', (componentSelector: string) => {
  let angular!: any;
  return cy
    .window()
    .then((win) => (angular = (win as any).ng))
    .then(() => cy.document())
    .then((doc) => angular.getComponent(doc.querySelector(componentSelector)))
    .then((component) => component)
    .should('exist');
});

And then use it like this the test:

cy.component('your-component-selector').its('OurService.pollingFrequency').should('eq', 20000);

After cy.component('your-component-selector') you can do anything with the component.

[bahmutov]

Hi Murat, i think the problem is our “freezing” of the clock when loading the page which stops the rxjs from working - if there were a demo page showing the problem during a test like this it would be so good to debug this

…

Sent from my iPhone

On Feb 2, 2021, at 15:02, Murat K Ozcan ***@***.***> wrote:  Thank you. I will follow up when / if there is a deployment of the app - we cannot share the source code but test code is ok. For the time being, inspired by this blog post we created a helper function to let Cypress have component access to the Angular app, without having to resort to changing the source code with this: // your Angular component file constructor( /* ... */ ) { // if running inside Cypress tests, set the component // @ts-ignore if (window.Cypress) { window.yourComponent = this; } } Instead we utilize a helper function like this: Cypress.Commands.add('component', (componentSelector: string) => { let angular!: any; return cy .window() .then((win) => (angular = (win as any).ng)) .then(() => cy.document()) .then((doc) => angular.getComponent(doc.querySelector(componentSelector))) .then((component) => component) .should('exist'); }); And then use it like this the test: cy.component('your-component-selector').its('OurService.pollingFrequency').should('eq', 20000); After cy.component('your-component-selector') you can do anything with the component. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[amirrustam]

Sidenote: @kevinold this type of scenario (polling backends from the frontend) would be an interesting addition to the RWA.