update accessibility tests

smastrom · Aug 11, 2023 · 5682eaf · 5682eaf
1 parent 00548b8
commit 5682eaf
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 86 deletions.
diff --git a/packages/notivue/Notivue/__tests__/Accessibility.cy.ts b/packages/notivue/Notivue/__tests__/Accessibility.cy.ts
@@ -9,43 +9,7 @@ it('All elements should be accessible', () => {
    cy.checkA11y('.Root')
 })
 
-it('All attributes are added properly', () => {
-   const config = defaultConfig.notifications
-
-   cy.mount(Notivue)
-
-      .get('.Success')
-      .click()
-      .getAriaLive()
-      .should('have.attr', 'aria-live', config.success.ariaLive)
-      .should('have.attr', 'role', config.success.ariaRole)
-
-      .get('.Error')
-      .click()
-      .getAriaLive()
-      .should('have.attr', 'aria-live', config.error.ariaLive)
-      .should('have.attr', 'role', config.error.ariaRole)
-
-      .get('.Info')
-      .click()
-      .getAriaLive()
-      .should('have.attr', 'aria-live', config.info.ariaLive)
-      .should('have.attr', 'role', config.info.ariaRole)
-
-      .get('.Warning')
-      .click()
-      .getAriaLive()
-      .should('have.attr', 'aria-live', config.warning.ariaLive)
-      .should('have.attr', 'role', config.warning.ariaRole)
-
-      .get('.Promise')
-      .click()
-      .getAriaLive()
-      .should('have.attr', 'aria-live', config.promise.ariaLive)
-      .should('have.attr', 'role', config.promise.ariaRole)
-})
-
-describe('Aria live content', () => {
+describe('Aria label', () => {
    it('Message is always renderd', () => {
       cy.mount(Notivue, {
          config: {
@@ -56,8 +20,8 @@ describe('Aria live content', () => {
       })
 
          .clickRandomStatic()
-         .getAriaLive()
-         .should('have.text', 'This is a message')
+         .getContainer()
+         .should('have.attr', 'aria-label', 'This is a message')
    })
 
    it('Title is rendered along with the message if defined', () => {
@@ -70,7 +34,7 @@ describe('Aria live content', () => {
       })
 
          .clickRandomStatic()
-         .getAriaLive()
-         .should('have.text', 'This is a title: This is a message')
+         .getContainer()
+         .should('have.attr', 'aria-label', 'This is a title: This is a message')
    })
 })
diff --git a/packages/notivue/Notivue/__tests__/Attributes.cy.ts b/packages/notivue/Notivue/__tests__/Attributes.cy.ts
@@ -12,12 +12,20 @@ it('Notivue attributes are added correctly', () => {
    )
 
       .clickRandomStatic()
+
       .get('ol')
       .should('have.class', 'CustomClass')
+      .invoke('attr', 'data-notivue-align')
+      .should('exist')
+
       .get('li')
+      .and('have.attr', 'tabindex', '-1')
       .invoke('attr', 'data-notivue-id')
+
+      .get('li > div')
+      .invoke('attr', 'data-notivue-container')
       .should('exist')
-      .get('ol')
-      .invoke('attr', 'data-notivue-align')
+      .get('li > div')
+      .invoke('attr', 'tabindex')
       .should('exist')
 })
diff --git a/packages/notivue/Notivue/__tests__/pause-on-focus.cy.ts b/packages/notivue/Notivue/__tests__/pause-on-focus.cy.ts
diff --git a/packages/notivue/core/notivue.ts b/packages/notivue/core/notivue.ts
@@ -1,18 +1,10 @@
 import { createStore, storeInjectionKey } from './createStore'
 
-import type { App, Plugin } from 'vue'
+import type { App } from 'vue'
 import type { NotivueConfig } from 'notivue'
 
 export const notivue = {
    install(app: App, config: NotivueConfig = {}) {
       app.provide(storeInjectionKey, createStore(config))
    },
 }
-
-export function notivueCypress(config: NotivueConfig = {}): Plugin {
-   return {
-      install(app) {
-         app.provide(storeInjectionKey, createStore(config))
-      },
-   }
-}
diff --git a/packages/notivue/cypress/support/commands-notivue.ts b/packages/notivue/cypress/support/commands-notivue.ts
@@ -2,15 +2,24 @@
 
 import { mount } from 'cypress/vue'
 
-import { notivueCypress } from '@/core/notivue'
 import { DEFAULT_DURATION } from '@/core/constants'
+import { createStore, storeInjectionKey } from '@/core/createStore'
 import { parseText } from './utils'
 
-import type { NotivueConfig } from 'index'
+import type { Plugin } from 'vue'
+import type { NotivueConfig } from 'notivue'
 
 type MountParams = Parameters<typeof mount>
 type OptionsParam = MountParams[1]
 
+function notivue(config: NotivueConfig = {}): Plugin {
+   return {
+      install(app) {
+         app.provide(storeInjectionKey, createStore(config))
+      },
+   }
+}
+
 declare global {
    namespace Cypress {
       interface Chainable {
@@ -25,7 +34,7 @@ declare global {
          clickAllStatic(): Chainable<any>
          clickAll(): Chainable<any>
          getNotifications(): Chainable<any>
-         getAriaLive(): Chainable<any>
+         getContainer(): Chainable<any>
          checkSlotAgainst(obj: Record<string, any>): Chainable<any>
          checkSlotPropsAgainst(obj: Record<string, any>): Chainable<any>
          checkAnimations(
@@ -43,7 +52,7 @@ Cypress.Commands.add(
    (component, notivueOptions: { config: NotivueConfig } = { config: {} }, options = {}) => {
       options.global = options.global || {}
       options.global.plugins = options.global.plugins || []
-      options.global.plugins.push(notivueCypress(notivueOptions.config))
+      options.global.plugins.push(notivue(notivueOptions.config))
 
       return mount(component, options).then(({ wrapper }) => {
          return cy.wrap(wrapper).as('vue')
@@ -88,8 +97,8 @@ Cypress.Commands.add('clickAll', () => {
 
 Cypress.Commands.add('getNotifications', () => cy.get('li > div > div:first-of-type'))
 
-Cypress.Commands.add('getAriaLive', () => {
-   return cy.get('li > div > div:last-of-type')
+Cypress.Commands.add('getContainer', () => {
+   return cy.get('li > div')
 })
 
 Cypress.Commands.add('checkSlotAgainst', (obj: Record<string, any>) =>