quasar-testing
quasar-testing copied to clipboard
Proposal: new QDialog helper commands
We're considering adding some new helper commands related to QDialog
-
closeDialogViaEscKey
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
-
closeDialogViaBackdrop
function closeDialogViaBackdrop () {
return cy.get('.q-dialog__backdrop').click({ force: true })
}
-
assertPersistentDialogExists
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
-
withinPersistentDialog
Just a convenience method to avoid the more verbose form of withinDialog
Before
cy.withinDialog({
persistent: true,
fn: () => {
// ...
}
})
After
cy.withinPersistentDialog(() => {
// ...
})
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.