Alternative to invoke if you need to assert a function that returns a promise

[n10v]

Hello Cypress team and community!
We are updating to Cypress v12 from v9. The migration process went mostly pretty smooth (thanks for awesome migration UI 🚀 ) except one thing.

We have some tests that assert that some IndexedDB databases are created:

  cy.window()
    .its('indexedDB')
    .invoke('databases')
    .should('deep.include', { name: 'MyDb', version: 1 })

It worked in v9 but it stopped working in v12. I assume that the reason for it is a breaking change where invoke throws an error if a function returns a promise (#24417). In this case indexedDB.databases() returns a promise with an array of DBs.

The PR suggests to use .then, so I rewrote a test with .then:

  cy.window()
    .then((win) => win.indexedDB.databases())
    .should('deep.include', { name: 'MyDb', version: 1 })

The problem here is that .then lacks retry-ability, but we need to retry here because MyDb is created after some time.

I also tried to use aliases .get, but it still can't find MyDb, even though it is actually there 🤷‍♂️

  cy.window()
    .then((win) => win.indexedDB.databases())
    .as('@dbs')

  cy.get('@dbs').should('deep.include', { name: 'MyDb', version: 1 })

I'm out of ideas here and I would really like to any solution that asserts a function that returns a promise 🙏

Tagging @BlueWinds here. Maybe you can help 🙏

[BlueWinds]

Yeah, we don't have any commands that currently support retry-ability and promises at the same time. A couple of options:

1. Hack together a workaround:

let result;

cy.wrap(null).should(() => {
  try {
    // If result is null or doesn't include the database, throw an on error
    expect(result).to.deep.include({ name: 'MyDb', version: 1 })
  } catch (e) {
    // If we had a result, null it out and start waiting on a new promise
    if (result) {
      result = null
      // Whenever this promise resolves, we'll assert on the result the next time .should() retries.
      win.indexedDB.databases().then(dbs => result = dbs)
    }
    throw e
  }

})

Not the cleanest thing, but something like this should work (I have not run the above code, probably contains mistakes).

[n10v]

Yaaay, it works with couple of adjustments, thank you!
I made some changes and simplified it:

  let dbs: IDBDatabaseInfo[] | undefined

  cy.window().should((win) => {
    try {
      // If dbs is undefined or doesn't include the database, throw an error.
      expect(dbs).to.deep.include({ name: 'MyDb', version: 1 })
    } catch (error) {
      // Whenever this promise resolves, we'll assert on the dbs the next time .should() retries.
      win.indexedDB.databases().then((actualDbs) => (dbs = actualDbs))
      throw error
    }
  })

Also I created a command to reuse it in our codebase and make different assertions:

Cypress.Commands.add('getIndexedDbDatabases', (callback) => {
  let dbs: IDBDatabaseInfo[] | undefined

  cy.window().should((win) => {
    try {
      // If dbs is undefined or the callback throws, throw an error.
      callback(dbs)
    } catch (error) {
      // Whenever this promise resolves, we'll assert on the dbs the next time .should() retries.
      win.indexedDB.databases().then((actualDbs) => (dbs = actualDbs))
      throw error
    }
  })
})

// Usage:
cy.getIndexedDbDatabases((dbs) => expect(dbs).to.deep.include({ name: 'MyDb', version: 1 }))

[BlueWinds]

So the thing to be aware of with this version is that it creates a new promise every time Cypress retries. This is probably fine for a very fast promise (like getting a list of indexdb from the browser) but imagine you had a promise that took 2s to resolve (a network request or something). You could do something like...

Retry 1: dbs is null, create promise A.
Retry 2: dbs is still null, create promise B.
Retry 3: dbs is still null, create promise C.
...
Retry 15: Promise B has finally resolved, dbs is not null, but the assertion still fails. Create promise N.
Retry 16: Promise A resolves, the assertion now passes.
...now, after the command is complete, assertion A, C, D, F and N will eventually resolve updating the data.

This is why in my initial version I kept track of "do we have a promise", to ensure we only had one promise pending at a time.

The simple version probably works for win.indexedDB.databases(), but something to keep in mind for anyone else coming across this discussion later.

[n10v]

Ahaa, I see. Good point, I missed it!
Indeed for win.indexedDB.databases() it should be okay, so I would keep it.
The reason why I removed if (result) check is because AFAIU it will be always falsey. There is no code that assigns initial value to result. So it should be like this:

let result;

cy.window().then((win) => win.indexedDB.databases()).then(dbs => result = dbs)
cy.window().should((win) => {
  try {
    // If result is null or doesn't include the database, throw an on error
    expect(result).to.deep.include({ name: 'MyDb', version: 1 })
  } catch (e) {
    // If we had a result, null it out and start waiting on a new promise
    if (result) {
      result = null
      // Whenever this promise resolves, we'll assert on the result the next time .should() retries.
      win.indexedDB.databases().then(dbs => result = dbs)
    }
    throw e
  }
})

[BlueWinds]

Yeah, I wrote the first version off the top of my head, didn't test it at all, not surprised it had issues. 🤣 Hopefully this is helpful for other people as well!