quasarframework / quasar-testing

Testing Harness App Extensions for the Quasar Framework 2.0+
https://testing.quasar.dev
MIT License
179 stars 66 forks source link

Proposal: new QDialog helper commands #355

Open IlCallo opened 6 months ago

IlCallo commented 6 months ago

We're considering adding some new helper commands related to QDialog

function closeDialogViaEscKey () {
  // Official way to escape `within` context
  // https://docs.cypress.io/api/commands/within#Temporarily-escape
  return cy.root().closest('body').type('{esc}')
}

Limitation: this only works in withinDialog context, as when using it outside it .root() will yeld "html" tag and Cypress won't be able to find anything with .closest('body') since it only searches upwards

We should find a way to make it work both inside and outside a within context I tried with cy.window() and cy.document() already, which I recalled worked fine in the past, but it seems like they changed that behavior

Maybe by using the Cypress.$('body') shortcut that we already use in portal-related commands? Even if it's an internal and undocumented feature AFAIK

function closeDialogViaBackdrop () {
  return cy.get('.q-dialog__backdrop').click({ force: true })
}
function assertPersistentDialogExists () {
  cy.get('.q-dialog').should('not.have.attr', 'aria-modal', 'false')
}

This should be called automatically after the callback function of withinDialog completes, if persistent is set to true Unluckily, this actually doesn't work all the times and has a few limitations we need to address In particular, it doesn't address seamless dialogs use case (which always have 'aria-modal' equal to false) and dialogs without backdrop, which are equally not considered modals, and thus have 'aria-modal' equal to false

We should find a more reliable way to check for persistent dialogs, possibly even add a custom dedicated class into Quasar core for QDialog

Just a convenience method to avoid the more verbose form of withinDialog

Before

cy.withinDialog({
  persistent: true,
  fn: () => {
    // ...
  }
})

After

cy.withinPersistentDialog(() => {
  // ...
})
thevladisss commented 3 months ago

As to making it work within both within context and without it in my experience I actually use cy.root().closest("html") as even it finds HTML closest still works on itself and it can go no further as this is the root node.