Improve tests

cypress.json

@@ -1,4 +1,7 @@
 {
   "video": false,
-  "baseUrl": "http://localhost:5000"
+  "baseUrl": "http://localhost:5000",
+  "ignoreTestFiles": [
+    "**/utils.js"
+  ]
 }

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)
   })
 })

cypress/integration/dialogElement.js

@@ -1,9 +1,10 @@
+import { shouldBeVisible } from './utils'
+
 describe('<dialog> 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')
   })

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)
   })
 })

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,25 +26,22 @@ 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'
     )
   })
 
   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)
   })
 })

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')
+}

example/tests/base.html

@@ -11,6 +11,7 @@
   <main class="main" id="main" aria-label="Content">
     <h1>Tests — Base</h1>
     <button class="link-like" data-a11y-dialog-show="my-accessible-dialog">Open the dialog window</button>
+    <button class="link-like" data-a11y-dialog-show="something-else">Open the dialog window</button>
   </main>
 
   <div class="dialog" id="my-accessible-dialog" data-a11y-dialog>