quasarframework / quasarframework/quasar-testing

Proposal: new QDialog helper commands

Open
#355 1 comment 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.