NgRx Cypress integration

[directcuteo]

Hi! I am trying to create integration tests using Cypress in my NgRx-Angular application.

So far I provided to Cypress the NgRx store using this in app.component.ts:

 constructor(private store: Store<State>) {
    if ((window as any).Cypress) {
      (window as any).store = this.store;
    }
  }

Accessing the store inside a test:

      cy.window()
        .its('store')
        .then((store) => {
          store.select('books').subscribe(books => {
              cy.get('.some-button').trigger('click');
              cy.get('.first-book')
                .then(book => {
                   cy.wrap(books[0].name).should('eq', book.textContent);
                });
          });
        });

The problem with this approach is that I oftentimes get an error saying:

Cypress detected that you returned a promise from a command while also invoking one or more cy commands in that promise.

The command that returned the promise was:

  > `cy.trigger()`

The cy command you invoked inside the promise was:

  > `cy.get()`

Does this has to do with the fact that inside the then() function of the window.its('store') I am calling a new Cypress promise-like function (get for example) ? There is no other cy command nesting inside my code.

[sod]

Subscriptions don't unsubscribe themself. Try adding a pipe(take(1)) before the subscribe. You can test the theory by adding console.log('hello') inside the subscription and see if the callback is called more then once.

[theEloise888]

Hi! I am trying to create integration tests using Cypress in my NgRx-Angular application.

So far I provided to Cypress the NgRx store using this in app.component.ts:

 constructor(private store: Store<State>) {
    if ((window as any).Cypress) {
      (window as any).store = this.store;
    }
  }

Accessing the store inside a test:

      cy.window()
        .its('store')
        .then((store) => {
          store.select('books').subscribe(books => {
              cy.get('.some-button').trigger('click');
              cy.get('.first-book')
                .then(book => {
                   cy.wrap(books[0].name).should('eq', book.textContent);
                });
          });
        });

The problem with this approach is that I oftentimes get an error saying:

Cypress detected that you returned a promise from a command while also invoking one or more cy commands in that promise.

The command that returned the promise was:

  > `cy.trigger()`

The cy command you invoked inside the promise was:

  > `cy.get()`

Does this has to do with the fact that inside the then() function of the window.its('store') I am calling a new Cypress promise-like function (get for example) ? There is no other cy command nesting inside my code.

Hi, did you manage to get this solution working?