Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proposal: new QDialog helper commands #355

Open
IlCallo opened this issue Dec 29, 2023 · 1 comment
Open

Proposal: new QDialog helper commands #355

IlCallo opened this issue Dec 29, 2023 · 1 comment

Comments

@IlCallo
Copy link
Member

IlCallo commented Dec 29, 2023

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(() => {
  // ...
})
@thevladisss
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants