From 89c025a183b46069c5779f32ee4a0565fcc1cb51 Mon Sep 17 00:00:00 2001 From: Chiatiah Calson Date: Mon, 27 Nov 2023 11:53:30 +0100 Subject: [PATCH 01/10] test(QDialog): add QDialog tests --- .../dialog/__tests__/DialogWrapper.vue | 43 ++ .../components/dialog/__tests__/QDialog.cy.js | 391 ++++++++++++++++-- 2 files changed, 398 insertions(+), 36 deletions(-) create mode 100644 ui/src/components/dialog/__tests__/DialogWrapper.vue diff --git a/ui/src/components/dialog/__tests__/DialogWrapper.vue b/ui/src/components/dialog/__tests__/DialogWrapper.vue new file mode 100644 index 00000000000..7cb6b1ff8aa --- /dev/null +++ b/ui/src/components/dialog/__tests__/DialogWrapper.vue @@ -0,0 +1,43 @@ + + + diff --git a/ui/src/components/dialog/__tests__/QDialog.cy.js b/ui/src/components/dialog/__tests__/QDialog.cy.js index 089bee27a31..c3b21eabd2e 100644 --- a/ui/src/components/dialog/__tests__/QDialog.cy.js +++ b/ui/src/components/dialog/__tests__/QDialog.cy.js @@ -1,21 +1,82 @@ +import FieldWrapper from './DialogWrapper.vue' +import { ref } from 'vue' +import { vModelAdapter } from '@quasar/quasar-app-extension-testing-e2e-cypress' + +function mountQDialogWrapper (options) { + return cy.mount(FieldWrapper, options) +} + +function getHostElement () { + return cy.dataCy('dialog-card') +} + +function closeDialog () { + return cy.get('.q-dialog__backdrop').click({ force: true }) +} + describe('Dialog API', () => { describe('Props', () => { describe('Category: behavior', () => { describe('(prop): persistent', () => { - it.skip(' ', () => { - // + it('should display a persistent dialog', () => { + const model = ref(true) + mountQDialogWrapper({ + props: { + ...vModelAdapter(model), + persistent: false + } + }) + + cy.withinDialog(() => { + closeDialog() // Closes dialog by clicking backdrop + getHostElement().should('exist') + Cypress.vueWrapper.setProps({ persistent: false }) + closeDialog() + getHostElement().should('not.exist') + }) }) }) describe('(prop): no-esc-dismiss', () => { - it.skip(' ', () => { - // + it('should not allow closing the dialog with the escape key', () => { + const model = ref(true) + mountQDialogWrapper({ + props: { + ...vModelAdapter(model), + noEscDismiss: true + } + }) + + getHostElement().then(() => { + getHostElement().trigger('keydown', { keyCode: 27 }) + getHostElement().should('exist') + + Cypress.vueWrapper.setProps({ noEscDismiss: false }) + + cy.get('body').type('{esc}') + getHostElement().should('not.exist') + }) }) }) describe('(prop): no-backdrop-dismiss', () => { - it.skip(' ', () => { - // + it('should not close dialog with backdrop', () => { + const model = ref(true) + mountQDialogWrapper({ + props: { + ...vModelAdapter(model), + noBackDropClose: true + } + }) + + cy.withinDialog(() => { + closeDialog() + getHostElement().should('exist') + + Cypress.vueWrapper.setProps({ noBackDropClose: false }) + closeDialog() + getHostElement().should('not.exist') + }) }) }) @@ -26,66 +87,249 @@ describe('Dialog API', () => { }) describe('(prop): auto-close', () => { - it.skip(' ', () => { - // + it('should auto-close the dialog', () => { + const model = ref(true) + mountQDialogWrapper({ + props: { + ...vModelAdapter(model), + autoClose: true + } + }) + + cy.withinDialog(() => { + cy.dataCy('dialog-button').click() + getHostElement().should('not.exist') + }) }) }) describe('(prop): no-refocus', () => { - it.skip(' ', () => { - // + it('should not refocus on the DOM element that had focus', () => { + const model = ref(false) + + mountQDialogWrapper({ + props: { + ...vModelAdapter(model), + noRefocus: false + } + }) + + cy.dataCy('dialog-page').then(() => { + cy.dataCy('input-field').focus() + model.value = true + + cy.withinDialog(() => { + closeDialog() + }) + cy.dataCy('input-field').should('have.focus') + }) + + cy.dataCy('dialog-page').then(() => { + cy.dataCy('input-field').focus() + Cypress.vueWrapper.setProps({ noRefocus: true }) + model.value = true + + getHostElement().then(() => { + closeDialog() + cy.dataCy('input-field').should('not.have.focus') + }) + }) }) }) describe('(prop): no-focus', () => { - it.skip(' ', () => { - // + it('should not focus on dialog when switching to it', () => { + const model = ref(false) + mountQDialogWrapper({ + props: { + ...vModelAdapter(model) + } + }) + + cy.dataCy('dialog-page').then(() => { + model.value = true + + cy.withinDialog(() => { + cy.focused().should('exist').should('have.class', 'q-dialog__inner') + closeDialog() + }) + }) + + cy.dataCy('dialog-page').then(() => { + Cypress.vueWrapper.setProps({ noFocus: true }) + model.value = true + + cy.withinDialog(() => { + cy.focused().should('not.exist') + closeDialog() + }) + }) }) }) describe('(prop): no-shake', () => { - it.skip(' ', () => { - // + it('should not shake dialog', () => { + const model = ref(false) + mountQDialogWrapper({ + props: { + ...vModelAdapter(model), + persistent: true + } + }) + + cy.dataCy('dialog-page').then(() => { + model.value = true + + getHostElement().then(() => { + closeDialog() + cy.get('.q-dialog__inner').should('have.class', 'q-animate--scale') + + Cypress.vueWrapper.setProps({ noShake: true }) + closeDialog() + cy.get('.q-dialog__inner').should('not.have.class', 'q-animate--scale') + }) + }) }) }) }) describe('Category: content', () => { describe('(prop): seamless', () => { - it.skip(' ', () => { - // + it('should put the dialog in a seamless state', () => { + const model = ref(false) + mountQDialogWrapper({ + props: { + ...vModelAdapter(model), + persistent: true, + seamless: true + } + }) + + cy.dataCy('dialog-page').then(() => { + model.value = true + + getHostElement().then(() => { + cy.dataCy('dialog-form').should('have.class', 'q-dialog--seamless') + cy.dataCy('input-field').should('be.visible') + Cypress.vueWrapper.setProps({ seamless: false }) + cy.dataCy('dialog-form').should('not.have.class', 'q-dialog--seamless') + cy.dataCy('input-field').should('not.be.visible') + }) + }) }) }) describe('(prop): maximized', () => { - it.skip(' ', () => { - // + it('should maximize the dialog', () => { + const model = ref(false) + mountQDialogWrapper({ + props: { + ...vModelAdapter(model), + maximized: true + } + }) + + cy.dataCy('dialog-page').then(() => { + model.value = true + + getHostElement().then(() => { + cy.dataCy('dialog-form').get('.q-dialog__inner--maximized').should('exist') + cy.dataCy('input-field').should('not.be.visible') + Cypress.vueWrapper.setProps({ maximized: false }) + cy.dataCy('dialog-form').get('.q-dialog__inner--maximized').should('not.exist') + }) + }) }) }) describe('(prop): full-width', () => { - it.skip(' ', () => { - // + it('should use a full-width for the dialog', () => { + const model = ref(false) + mountQDialogWrapper({ + props: { + ...vModelAdapter(model), + fullWidth: true + } + }) + + cy.dataCy('dialog-page').then(() => { + model.value = true + + getHostElement().then(() => { + cy.dataCy('dialog-form').get('.q-dialog__inner--fullwidth').should('exist') + Cypress.vueWrapper.setProps({ fullWidth: false }) + cy.dataCy('dialog-form').get('.q-dialog__inner--fullwidth').should('not.exist') + }) + }) }) }) describe('(prop): full-height', () => { - it.skip(' ', () => { - // + it('should set the dialog to full-height', () => { + const model = ref(false) + mountQDialogWrapper({ + props: { + ...vModelAdapter(model), + fullHeight: true + } + }) + + cy.dataCy('dialog-page').then(() => { + model.value = true + + getHostElement().then(() => { + cy.dataCy('dialog-form').get('.q-dialog__inner--fullheight').should('exist') + Cypress.vueWrapper.setProps({ fullHeight: false }) + cy.dataCy('dialog-form').get('.q-dialog__inner--fullheight').should('not.exist') + }) + }) }) }) describe('(prop): position', () => { - it.skip(' ', () => { - // + it('should display the dialog at a specific position', () => { + const model = ref(false) + mountQDialogWrapper({ + props: { + ...vModelAdapter(model) + } + }) + + cy.dataCy('dialog-page').then(() => { + model.value = true + + const positions = [ 'top', 'right', 'bottom', 'left' ] + for (const position of positions) { + getHostElement().then(() => { + Cypress.vueWrapper.setProps({ position }) + cy.dataCy('dialog-form').get(`.q-dialog__inner--${ position }.fixed-${ position }`).should('exist') + }) + } + }) }) }) }) describe('Category: style', () => { describe('(prop): square', () => { - it.skip(' ', () => { - // + it('should use a square style for dialog', () => { + const model = ref(false) + mountQDialogWrapper({ + props: { + ...vModelAdapter(model), + square: true + } + }) + + cy.dataCy('dialog-page').then(() => { + model.value = true + + getHostElement().then(() => { + cy.dataCy('dialog-form').get('.q-dialog__inner--square').should('exist') + Cypress.vueWrapper.setProps({ square: false }) + cy.dataCy('dialog-form').get('.q-dialog__inner--square').should('not.exist') + }) + }) }) }) }) @@ -93,36 +337,111 @@ describe('Dialog API', () => { describe('Slots', () => { describe('(slot): default', () => { - it.skip(' ', () => { - // + it('should display a default slot', () => { + const model = ref(false) + mountQDialogWrapper({ + props: { + ...vModelAdapter(model) + } + }) + + cy.dataCy('dialog-page').then(() => { + model.value = true + + // Host element is the default slot, so let's simply test that it exists + getHostElement().should('exist') + }) }) }) }) describe('Events', () => { describe('(event): shake', () => { - it.skip(' ', () => { - // + it('should emit shake event', () => { + const fn = cy.stub() + const model = ref(true) + mountQDialogWrapper({ + props: { + ...vModelAdapter(model), + persistent: true, + onShake: fn + } + }) + + getHostElement().then(() => { + closeDialog() + cy.get('.q-dialog__inner').should('have.class', 'q-animate--scale').then(() => { + expect(fn).to.be.calledWith() + }) + }) }) }) describe('(event): escape-key', () => { - it.skip(' ', () => { - // + it('should emit escape-key event', () => { + const fn = cy.stub() + const model = ref(true) + mountQDialogWrapper({ + props: { + ...vModelAdapter(model), + onEscapeKey: fn + } + }) + + getHostElement().then(() => { + cy.get('body').type('{esc}') + getHostElement().should('not.exist').then(() => { + expect(fn).to.be.calledWith() + }) + }) }) }) }) describe('Methods', () => { describe('(method): focus', () => { - it.skip(' ', () => { - // + it('should use the focus method to focus on dialog', () => { + const model = ref(true) + mountQDialogWrapper({ + props: { + ...vModelAdapter(model), + seamless: true + } + }) + + cy.dataCy('dialog-page').then(() => { + getHostElement().should('be.visible').then(() => { + cy.focused().should('have.class', 'q-dialog__inner') + cy.dataCy('input-field').type('Hello') + cy.focused().should('not.have.class', 'q-dialog__inner') + }) + + getHostElement().should('be.visible').then(() => { + Cypress.vueWrapper.vm.focus() + cy.focused().should('have.class', 'q-dialog__inner') + }) + }) }) }) describe('(method): shake', () => { - it.skip(' ', () => { - // + it('should use the shake method to shake dialog', () => { + const model = ref(true) + mountQDialogWrapper({ + props: { + ...vModelAdapter(model), + persistent: true + } + }) + + getHostElement().should('be.visible').then(() => { + cy.get('.q-dialog__inner').should('not.have.class', 'q-animate--scale') + }) + + getHostElement().should('be.visible').then(() => { + Cypress.vueWrapper.vm.shake() + cy.get('.q-dialog__inner').should('have.class', 'q-animate--scale') + }) }) }) }) From 4331e4dfd74ac29eafc11a1ed0467230ec2db0c8 Mon Sep 17 00:00:00 2001 From: Chiatiah Calson Date: Tue, 28 Nov 2023 20:03:52 +0100 Subject: [PATCH 02/10] test(QDialog): improve test stability --- .../dialog/__tests__/DialogWrapper.vue | 2 - .../components/dialog/__tests__/QDialog.cy.js | 284 ++++++++++++------ 2 files changed, 186 insertions(+), 100 deletions(-) diff --git a/ui/src/components/dialog/__tests__/DialogWrapper.vue b/ui/src/components/dialog/__tests__/DialogWrapper.vue index 7cb6b1ff8aa..a717fdaca67 100644 --- a/ui/src/components/dialog/__tests__/DialogWrapper.vue +++ b/ui/src/components/dialog/__tests__/DialogWrapper.vue @@ -14,7 +14,6 @@ - @@ -28,7 +27,6 @@ export default defineComponent({ const dialogRef = ref(null) function focus () { - console.log(dialogRef.value.focus, 'Attempting to focus') dialogRef.value.focus() } diff --git a/ui/src/components/dialog/__tests__/QDialog.cy.js b/ui/src/components/dialog/__tests__/QDialog.cy.js index c3b21eabd2e..b6389a3c747 100644 --- a/ui/src/components/dialog/__tests__/QDialog.cy.js +++ b/ui/src/components/dialog/__tests__/QDialog.cy.js @@ -1,16 +1,16 @@ -import FieldWrapper from './DialogWrapper.vue' +import DialogWrapper from './DialogWrapper.vue' import { ref } from 'vue' import { vModelAdapter } from '@quasar/quasar-app-extension-testing-e2e-cypress' function mountQDialogWrapper (options) { - return cy.mount(FieldWrapper, options) + return cy.mount(DialogWrapper, options) } function getHostElement () { return cy.dataCy('dialog-card') } -function closeDialog () { +function closeDialogViaBackdrop () { return cy.get('.q-dialog__backdrop').click({ force: true }) } @@ -23,17 +23,20 @@ describe('Dialog API', () => { mountQDialogWrapper({ props: { ...vModelAdapter(model), - persistent: false + persistent: true } }) - cy.withinDialog(() => { - closeDialog() // Closes dialog by clicking backdrop - getHostElement().should('exist') - Cypress.vueWrapper.setProps({ persistent: false }) - closeDialog() - getHostElement().should('not.exist') - }) + getHostElement() + .should('exist') + .then(() => { + closeDialogViaBackdrop() + getHostElement() + .should('exist') + cy.get('body').type('{esc}') + getHostElement() + .should('exist') + }) }) }) @@ -47,14 +50,18 @@ describe('Dialog API', () => { } }) - getHostElement().then(() => { - getHostElement().trigger('keydown', { keyCode: 27 }) - getHostElement().should('exist') + cy.dataCy('dialog-page').then(() => { + getHostElement().then(() => { + cy.get('body').type('{esc}') + getHostElement() + .should('exist') - Cypress.vueWrapper.setProps({ noEscDismiss: false }) + Cypress.vueWrapper.setProps({ noEscDismiss: false }) - cy.get('body').type('{esc}') - getHostElement().should('not.exist') + cy.get('body').type('{esc}') + getHostElement() + .should('not.exist') + }) }) }) }) @@ -69,14 +76,19 @@ describe('Dialog API', () => { } }) - cy.withinDialog(() => { - closeDialog() - getHostElement().should('exist') + getHostElement() + .should('exist') + .then(() => { + closeDialogViaBackdrop() + getHostElement() + .should('exist') + .then(() => { + Cypress.vueWrapper.setProps({ noBackDropClose: false }) + }) - Cypress.vueWrapper.setProps({ noBackDropClose: false }) - closeDialog() - getHostElement().should('not.exist') - }) + closeDialogViaBackdrop() + getHostElement().should('not.exist') + }) }) }) @@ -115,24 +127,38 @@ describe('Dialog API', () => { }) cy.dataCy('dialog-page').then(() => { - cy.dataCy('input-field').focus() - model.value = true - - cy.withinDialog(() => { - closeDialog() - }) - cy.dataCy('input-field').should('have.focus') + cy.dataCy('input-field') + .type('Hello') + cy.dataCy('input-field') + .should('have.value', 'Hello').then(() => { + model.value = true + + cy.withinDialog(() => { + closeDialogViaBackdrop() + }) + getHostElement() + .should('not.exist').then(() => { + cy.dataCy('input-field') + .should('have.focus') + }) + }) }) cy.dataCy('dialog-page').then(() => { - cy.dataCy('input-field').focus() - Cypress.vueWrapper.setProps({ noRefocus: true }) - model.value = true - - getHostElement().then(() => { - closeDialog() - cy.dataCy('input-field').should('not.have.focus') - }) + cy.dataCy('input-field') + .type('Hello') + cy.dataCy('input-field') + .should('have.value', 'Hello') + .then(() => { + Cypress.vueWrapper.setProps({ noRefocus: true }) + model.value = true + + getHostElement().then(() => { + closeDialogViaBackdrop() + cy.dataCy('input-field') + .should('not.have.focus') + }) + }) }) }) }) @@ -150,8 +176,9 @@ describe('Dialog API', () => { model.value = true cy.withinDialog(() => { - cy.focused().should('exist').should('have.class', 'q-dialog__inner') - closeDialog() + cy.focused().should('exist') + .should('have.class', 'q-dialog__inner') + closeDialogViaBackdrop() }) }) @@ -161,7 +188,7 @@ describe('Dialog API', () => { cy.withinDialog(() => { cy.focused().should('not.exist') - closeDialog() + closeDialogViaBackdrop() }) }) }) @@ -180,14 +207,20 @@ describe('Dialog API', () => { cy.dataCy('dialog-page').then(() => { model.value = true - getHostElement().then(() => { - closeDialog() - cy.get('.q-dialog__inner').should('have.class', 'q-animate--scale') + getHostElement() + .should('exist').then(() => { + closeDialogViaBackdrop() + cy.get('.q-dialog__inner') + .should('have.class', 'q-animate--scale') + }) - Cypress.vueWrapper.setProps({ noShake: true }) - closeDialog() - cy.get('.q-dialog__inner').should('not.have.class', 'q-animate--scale') - }) + getHostElement() + .should('exist').then(() => { + Cypress.vueWrapper.setProps({ noShake: true }) + closeDialogViaBackdrop() + cy.get('.q-dialog__inner') + .should('not.have.class', 'q-animate--scale') + }) }) }) }) @@ -200,7 +233,6 @@ describe('Dialog API', () => { mountQDialogWrapper({ props: { ...vModelAdapter(model), - persistent: true, seamless: true } }) @@ -208,13 +240,23 @@ describe('Dialog API', () => { cy.dataCy('dialog-page').then(() => { model.value = true - getHostElement().then(() => { - cy.dataCy('dialog-form').should('have.class', 'q-dialog--seamless') - cy.dataCy('input-field').should('be.visible') - Cypress.vueWrapper.setProps({ seamless: false }) - cy.dataCy('dialog-form').should('not.have.class', 'q-dialog--seamless') - cy.dataCy('input-field').should('not.be.visible') - }) + getHostElement() + .should('exist') + .then(() => { + cy.dataCy('dialog-form') + .should('exist') + .should('have.class', 'q-dialog--seamless') + cy.dataCy('input-field') + .should('be.visible') + .then(() => { + Cypress.vueWrapper.setProps({ seamless: false }) + }) + + cy.dataCy('dialog-form') + .should('not.have.class', 'q-dialog--seamless') + cy.dataCy('input-field') + .should('not.be.visible') + }) }) }) }) @@ -233,10 +275,18 @@ describe('Dialog API', () => { model.value = true getHostElement().then(() => { - cy.dataCy('dialog-form').get('.q-dialog__inner--maximized').should('exist') - cy.dataCy('input-field').should('not.be.visible') - Cypress.vueWrapper.setProps({ maximized: false }) - cy.dataCy('dialog-form').get('.q-dialog__inner--maximized').should('not.exist') + cy.dataCy('dialog-form') + .get('.q-dialog__inner--maximized') + .should('exist') + cy.dataCy('input-field') + .should('not.be.visible') + .then(() => { + Cypress.vueWrapper.setProps({ maximized: false }) + }) + + cy.dataCy('dialog-form') + .get('.q-dialog__inner--maximized') + .should('not.exist') }) }) }) @@ -256,9 +306,15 @@ describe('Dialog API', () => { model.value = true getHostElement().then(() => { - cy.dataCy('dialog-form').get('.q-dialog__inner--fullwidth').should('exist') - Cypress.vueWrapper.setProps({ fullWidth: false }) - cy.dataCy('dialog-form').get('.q-dialog__inner--fullwidth').should('not.exist') + cy.dataCy('dialog-form') + .get('.q-dialog__inner--fullwidth') + .should('exist').then(() => { + Cypress.vueWrapper.setProps({ fullWidth: false }) + }) + + cy.dataCy('dialog-form') + .get('.q-dialog__inner--fullwidth') + .should('not.exist') }) }) }) @@ -278,9 +334,16 @@ describe('Dialog API', () => { model.value = true getHostElement().then(() => { - cy.dataCy('dialog-form').get('.q-dialog__inner--fullheight').should('exist') - Cypress.vueWrapper.setProps({ fullHeight: false }) - cy.dataCy('dialog-form').get('.q-dialog__inner--fullheight').should('not.exist') + cy.dataCy('dialog-form') + .get('.q-dialog__inner--fullheight') + .should('exist') + .then(() => { + Cypress.vueWrapper.setProps({ fullHeight: false }) + }) + + cy.dataCy('dialog-form') + .get('.q-dialog__inner--fullheight') + .should('not.exist') }) }) }) @@ -300,10 +363,14 @@ describe('Dialog API', () => { const positions = [ 'top', 'right', 'bottom', 'left' ] for (const position of positions) { - getHostElement().then(() => { - Cypress.vueWrapper.setProps({ position }) - cy.dataCy('dialog-form').get(`.q-dialog__inner--${ position }.fixed-${ position }`).should('exist') - }) + getHostElement() + .then(() => { + Cypress.vueWrapper.setProps({ position }) + + cy.dataCy('dialog-form') + .get(`.q-dialog__inner--${ position }.fixed-${ position }`) + .should('exist') + }) } }) }) @@ -325,9 +392,16 @@ describe('Dialog API', () => { model.value = true getHostElement().then(() => { - cy.dataCy('dialog-form').get('.q-dialog__inner--square').should('exist') - Cypress.vueWrapper.setProps({ square: false }) - cy.dataCy('dialog-form').get('.q-dialog__inner--square').should('not.exist') + cy.dataCy('dialog-form') + .get('.q-dialog__inner--square') + .should('exist') + .then(() => { + Cypress.vueWrapper.setProps({ square: false }) + }) + + cy.dataCy('dialog-form') + .get('.q-dialog__inner--square') + .should('not.exist') }) }) }) @@ -368,12 +442,15 @@ describe('Dialog API', () => { } }) - getHostElement().then(() => { - closeDialog() - cy.get('.q-dialog__inner').should('have.class', 'q-animate--scale').then(() => { - expect(fn).to.be.calledWith() + getHostElement() + .then(() => { + closeDialogViaBackdrop() + cy.get('.q-dialog__inner') + .should('have.class', 'q-animate--scale') + .then(() => { + expect(fn).to.be.calledWith() + }) }) - }) }) }) @@ -390,9 +467,11 @@ describe('Dialog API', () => { getHostElement().then(() => { cy.get('body').type('{esc}') - getHostElement().should('not.exist').then(() => { - expect(fn).to.be.calledWith() - }) + getHostElement() + .should('not.exist') + .then(() => { + expect(fn).to.be.calledWith() + }) }) }) }) @@ -410,16 +489,19 @@ describe('Dialog API', () => { }) cy.dataCy('dialog-page').then(() => { - getHostElement().should('be.visible').then(() => { - cy.focused().should('have.class', 'q-dialog__inner') - cy.dataCy('input-field').type('Hello') - cy.focused().should('not.have.class', 'q-dialog__inner') - }) + getHostElement() + .should('exist').then(() => { + cy.focused().should('have.class', 'q-dialog__inner') + cy.dataCy('input-field').type('Hello') + cy.focused().should('not.have.class', 'q-dialog__inner') + }) - getHostElement().should('be.visible').then(() => { - Cypress.vueWrapper.vm.focus() - cy.focused().should('have.class', 'q-dialog__inner') - }) + getHostElement() + .should('exist') + .then(() => { + Cypress.vueWrapper.vm.focus() + cy.focused().should('have.class', 'q-dialog__inner') + }) }) }) }) @@ -434,14 +516,20 @@ describe('Dialog API', () => { } }) - getHostElement().should('be.visible').then(() => { - cy.get('.q-dialog__inner').should('not.have.class', 'q-animate--scale') - }) + getHostElement() + .should('exist') + .then(() => { + cy.get('.q-dialog__inner') + .should('not.have.class', 'q-animate--scale') + }) - getHostElement().should('be.visible').then(() => { - Cypress.vueWrapper.vm.shake() - cy.get('.q-dialog__inner').should('have.class', 'q-animate--scale') - }) + getHostElement() + .should('exist') + .then(() => { + Cypress.vueWrapper.vm.shake() + cy.get('.q-dialog__inner') + .should('have.class', 'q-animate--scale') + }) }) }) }) From 352bc35846de17241b91e2705ee0c9067299ac9e Mon Sep 17 00:00:00 2001 From: Chiatiah Calson Date: Tue, 28 Nov 2023 20:11:18 +0100 Subject: [PATCH 03/10] test(use-model-toggle): improve test stability --- .../components/dialog/__tests__/QDialog.cy.js | 38 ++++++---- .../components/menu/__tests__/WrapperOne.vue | 8 +- .../private/__tests__/use-model-toggle.cy.js | 74 ++++++++++++------- 3 files changed, 76 insertions(+), 44 deletions(-) diff --git a/ui/src/components/dialog/__tests__/QDialog.cy.js b/ui/src/components/dialog/__tests__/QDialog.cy.js index b6389a3c747..c9cd88b38d0 100644 --- a/ui/src/components/dialog/__tests__/QDialog.cy.js +++ b/ui/src/components/dialog/__tests__/QDialog.cy.js @@ -71,24 +71,34 @@ describe('Dialog API', () => { const model = ref(true) mountQDialogWrapper({ props: { - ...vModelAdapter(model), - noBackDropClose: true + ...vModelAdapter(model) } }) - getHostElement() - .should('exist') - .then(() => { - closeDialogViaBackdrop() - getHostElement() - .should('exist') - .then(() => { - Cypress.vueWrapper.setProps({ noBackDropClose: false }) - }) + cy.dataCy('dialog-page').then(() => { + Cypress.vueWrapper.setProps({ noBackdropDismiss: false }) + model.value = true - closeDialogViaBackdrop() - getHostElement().should('not.exist') - }) + getHostElement() + .should('exist') + .then(() => { + closeDialogViaBackdrop() + getHostElement() + .should('not.exist') + }) + }) + cy.dataCy('dialog-page').then(() => { + Cypress.vueWrapper.setProps({ noBackdropDismiss: true }) + model.value = true + + getHostElement() + .should('exist') + .then(() => { + closeDialogViaBackdrop() + getHostElement() + .should('exist') + }) + }) }) }) diff --git a/ui/src/components/menu/__tests__/WrapperOne.vue b/ui/src/components/menu/__tests__/WrapperOne.vue index a543804ccf0..04583c98468 100644 --- a/ui/src/components/menu/__tests__/WrapperOne.vue +++ b/ui/src/components/menu/__tests__/WrapperOne.vue @@ -1,7 +1,10 @@