quasarframework / quasarframework/quasar-testing
Proposal: new QDialog helper commands
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 184
- Forks
- 67
- Avg merge
- 20h 53m
- Merged PRs (30d)
- 5
Description
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(() => {
// ...
})
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the existing withinDialog entry point and the portal-related commands that use Cypress.$('body'). Check how Cypress resolves cy.root(), cy.window(), and cy.document() inside and outside within contexts. Done means the proposed dialog helpers cover escape, backdrop, persistent, and convenience use cases, including seamless and backdrop-free dialogs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cypress, typescript
- Domain
- testing-qa
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100