Cypress: Rxjs debounce prevents data being saved

Created on 14 Jan 2019  路  2Comments  路  Source: cypress-io/cypress

Current behaviour:

When I use rxjs to debounce user inputs, data doesn't get saved, suggesting that events are not being passed through somehow because Cypress suspends or delays events coming from the UI. Possibly related to #2432

Desired behavior:

Ideally data will get saved to the DB when running tests using Cypress. Right now tests run and complete successfully, but my database is empty

Steps to reproduce: (app code and test code)

Setup code, run once:

// Registering observable
    const s$ = new Rx.Subject()
      .debounceTime(3000)
      .do(update => {
        if (update !== 0) { // Don't update on the initial value of 0
          debug(`Saving data: `,update)
          this.saveSurvey(update);  // Simple database save
          return update._id
        }
      })
    s$.startWith(0).subscribe()
  }

This code is called every time the user types a character - hence the need for debouncing, so that it doesn't thrash the database. Just set up a simple text input with an onChange handler to call this

  updateSurvey = (result) => {
    debug('update survey',result)
    s$.next(result)
  }

Versions

Cypress 3.1.4, MacOS High Sierra, Chrome, Meteor

Most helpful comment

To bypass debounceTime you can use cy.clock

cy.clock()
// call your observable ...
cy.clock().then((clock) => {
     clock.tick(3000)
     // test expected result
})

https://docs.cypress.io/api/commands/clock.html#No-Args

All 2 comments

Hey @mikkelking, could you provide the test code also that is failing? Ideally something that is reproducible that we could run through Cypress locally. Thanks!

To bypass debounceTime you can use cy.clock

cy.clock()
// call your observable ...
cy.clock().then((clock) => {
     clock.tick(3000)
     // test expected result
})

https://docs.cypress.io/api/commands/clock.html#No-Args

Was this page helpful?
0 / 5 - 0 ratings