From f625b52d2034f5193a487c4bae4746fd0b7a2fab Mon Sep 17 00:00:00 2001 From: Kitty Giraudel Date: Sun, 14 Feb 2021 12:51:00 +0100 Subject: [PATCH] Improve tests --- cypress.json | 5 ++++- cypress/integration/alertDialog.js | 11 +++++----- cypress/integration/dialogElement.js | 5 +++-- cypress/integration/instance.js | 11 +++++----- cypress/integration/state.js | 32 +++++++++++++--------------- cypress/integration/utils.js | 31 +++++++++++++++++++++++++++ example/tests/base.html | 1 + 7 files changed, 64 insertions(+), 32 deletions(-) create mode 100644 cypress/integration/utils.js diff --git a/cypress.json b/cypress.json index 7022c4d9..bd8bf56d 100644 --- a/cypress.json +++ b/cypress.json @@ -1,4 +1,7 @@ { "video": false, - "baseUrl": "http://localhost:5000" + "baseUrl": "http://localhost:5000", + "ignoreTestFiles": [ + "**/utils.js" + ] } diff --git a/cypress/integration/alertDialog.js b/cypress/integration/alertDialog.js index 8116a4bc..a287490c 100644 --- a/cypress/integration/alertDialog.js +++ b/cypress/integration/alertDialog.js @@ -1,18 +1,17 @@ +import { shouldBeHidden, shouldBeVisible } from './utils' + describe('Alert Dialog', () => { before(() => cy.visit('/tests/alert-dialog')) it('should prevent closing the dialog with escape', () => { cy.get('[data-a11y-dialog-show="my-accessible-dialog"]').first().click() - cy.get('.dialog').should('not.have.attr', 'aria-hidden') - cy.get('.dialog-content').should('be.visible') + cy.get('.dialog').then(shouldBeVisible) cy.get('body').trigger('keydown', { keyCode: 27, which: 27 }) - cy.get('.dialog').should('not.have.attr', 'aria-hidden') - cy.get('.dialog-content').should('be.visible') + cy.get('.dialog').then(shouldBeVisible) }) it('should prevent closing by clicking the backdrop', () => { cy.get('.dialog-overlay').click({ force: true }) - cy.get('.dialog').should('not.have.attr', 'aria-hidden') - cy.get('.dialog-content').should('be.visible') + cy.get('.dialog').then(shouldBeVisible) }) }) diff --git a/cypress/integration/dialogElement.js b/cypress/integration/dialogElement.js index 29f8a140..3641c734 100644 --- a/cypress/integration/dialogElement.js +++ b/cypress/integration/dialogElement.js @@ -1,9 +1,10 @@ +import { shouldBeVisible } from './utils' + describe(' element', () => { before(() => cy.visit('/tests/dialog-element')) it('should handle the `open` attribute', () => { - cy.get('.dialog').should('not.have.attr', 'aria-hidden') - cy.get('dialog').should('be.visible') + cy.get('.dialog').then(shouldBeVisible) cy.get('.dialog-close').click() cy.get('dialog').should('not.have.attr', 'open') }) diff --git a/cypress/integration/instance.js b/cypress/integration/instance.js index 28df1eb9..4c35a174 100644 --- a/cypress/integration/instance.js +++ b/cypress/integration/instance.js @@ -1,3 +1,5 @@ +import { shouldBeHidden, shouldBeVisible } from './utils' + describe('Instance', () => { before(() => cy.visit('/tests/instance')) @@ -12,8 +14,7 @@ describe('Instance', () => { it('should expose a show method on the instance', () => { cy.window().its('instance').invoke('show') - cy.get('.dialog').should('not.have.attr', 'aria-hidden') - cy.get('.dialog-content').should('be.visible') + cy.get('.dialog').then(shouldBeVisible) }) it('should expose status on the instance', () => { @@ -22,8 +23,7 @@ describe('Instance', () => { it('should expose a hide method on the instance', () => { cy.window().its('instance').invoke('hide') - cy.get('.dialog').should('have.attr', 'aria-hidden', 'true') - cy.get('.dialog-overlay').should('not.be.visible') + cy.get('.dialog').then(shouldBeHidden) cy.window().its('instance').its('shown').should('eq', false) }) @@ -70,7 +70,6 @@ describe('Instance', () => { it('should be possible to handle dialog destroy', () => { cy.get('[data-a11y-dialog-show="my-accessible-dialog"]').click() - cy.get('.dialog').should('have.attr', 'aria-hidden', 'true') - cy.get('.dialog-overlay').should('not.be.visible') + cy.get('.dialog').then(shouldBeHidden) }) }) diff --git a/cypress/integration/state.js b/cypress/integration/state.js index 6ed8df63..dfe908a5 100644 --- a/cypress/integration/state.js +++ b/cypress/integration/state.js @@ -1,20 +1,21 @@ +import { shouldBeHidden, shouldBeVisible } from './utils' + describe('State', () => { before(() => cy.visit('/tests/base')) it('should hide the dialog by default', () => { - cy.get('.dialog').should('have.attr', 'aria-hidden', 'true') - cy.get('.dialog-overlay').should('not.be.visible') - cy.get('.dialog-content').should('not.be.visible') + cy.get('.dialog').then(shouldBeHidden) }) - it('should open when clicking an opener', () => { - cy.get('[data-a11y-dialog-show="my-accessible-dialog"]').first().click() - cy.get('.dialog').should('not.have.attr', 'aria-hidden') - cy.get('.dialog-content').should('be.visible') - cy.get('.dialog-content').should('have.attr', 'open') + it('should open the dialog when clicking an opener', () => { + cy.get('[data-a11y-dialog-show="something-else"]').click() + cy.get('.dialog').then(shouldBeHidden) + + cy.get('[data-a11y-dialog-show="my-accessible-dialog"]').click() + cy.get('.dialog').then(shouldBeVisible) }) - it('should toggle aria-hidden on siblings/targets', () => { + it('should toggle the `aria-hidden` attribute on siblings/targets', () => { cy.get('main').should('have.attr', 'aria-hidden', 'true') cy.get('#pre-hidden-sibling').should( 'have.attr', @@ -25,8 +26,7 @@ describe('State', () => { it('should close when clicking a closer', () => { cy.get('.dialog-close').click() - cy.get('.dialog').should('have.attr', 'aria-hidden', 'true') - cy.get('.dialog-content').should('not.be.visible') + cy.get('.dialog').then(shouldBeHidden) cy.get('#pre-hidden-sibling').should( 'not.have.attr', 'data-a11y-dialog-original-aria-hidden' @@ -34,16 +34,14 @@ describe('State', () => { }) it('should close when pressing ESC', () => { - cy.get('[data-a11y-dialog-show="my-accessible-dialog"]').first().click() + cy.get('[data-a11y-dialog-show="my-accessible-dialog"]').click() cy.get('body').trigger('keydown', { keyCode: 27, which: 27 }) - cy.get('.dialog').should('have.attr', 'aria-hidden', 'true') - cy.get('.dialog-content').should('not.be.visible') + cy.get('.dialog').then(shouldBeHidden) }) it('should close when clicking the backdrop', () => { - cy.get('[data-a11y-dialog-show="my-accessible-dialog"]').first().click() + cy.get('[data-a11y-dialog-show="my-accessible-dialog"]').click() cy.get('.dialog-overlay').click({ force: true }) - cy.get('.dialog').should('have.attr', 'aria-hidden', 'true') - cy.get('.dialog-content').should('not.be.visible') + cy.get('.dialog').then(shouldBeHidden) }) }) diff --git a/cypress/integration/utils.js b/cypress/integration/utils.js new file mode 100644 index 00000000..e5bd0705 --- /dev/null +++ b/cypress/integration/utils.js @@ -0,0 +1,31 @@ +export function shouldBeVisible($subject) { + Cypress.log({ + displayName: 'visible', + name: 'shouldBeVisible', + message: 'The dialog should be visible', + consoleProps: () => ({ $el: $subject }), + }) + + cy.wrap($subject, { log: false }).should('not.have.attr', 'aria-hidden') + cy.wrap($subject, { log: false }) + .find('.dialog-content', { log: false }) + .should('be.visible') + .and('have.attr', 'open') +} + +export function shouldBeHidden($subject) { + Cypress.log({ + displayName: 'hidden', + name: 'shouldBeHidden', + message: 'The dialog should be hidden', + consoleProps: () => ({ $el: $subject }), + }) + + cy.wrap($subject, { log: false }) + .should('have.attr', 'aria-hidden', 'true') + .find('.dialog-overlay', { log: false }) + .should('not.be.visible') + cy.wrap($subject, { log: false }) + .find('.dialog-content', { log: false }) + .should('not.be.visible') +} diff --git a/example/tests/base.html b/example/tests/base.html index 3d5da5c1..d03cfa4f 100644 --- a/example/tests/base.html +++ b/example/tests/base.html @@ -11,6 +11,7 @@

Tests — Base

+