From 5682eaf8ba8e278585b3309d31c1a9d6a838c8cc Mon Sep 17 00:00:00 2001 From: smastrom <60471784+smastrom@users.noreply.github.com> Date: Fri, 11 Aug 2023 12:33:44 +0200 Subject: [PATCH] update accessibility tests --- .../Notivue/__tests__/Accessibility.cy.ts | 46 ++----------------- .../Notivue/__tests__/Attributes.cy.ts | 12 ++++- .../Notivue/__tests__/pause-on-focus.cy.ts | 28 ----------- packages/notivue/core/notivue.ts | 10 +--- .../cypress/support/commands-notivue.ts | 21 ++++++--- 5 files changed, 31 insertions(+), 86 deletions(-) delete mode 100644 packages/notivue/Notivue/__tests__/pause-on-focus.cy.ts diff --git a/packages/notivue/Notivue/__tests__/Accessibility.cy.ts b/packages/notivue/Notivue/__tests__/Accessibility.cy.ts index c21dd3ac..31234cb1 100644 --- 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 index e579a012..26c1f259 100644 --- 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 deleted file mode 100644 index d18202a1..00000000 --- a/packages/notivue/Notivue/__tests__/pause-on-focus.cy.ts +++ /dev/null @@ -1,28 +0,0 @@ -import Notivue from './components/Notivue.vue' - -describe('Pause on focus', () => { - beforeEach(() => { - cy.throwIfDurationMismatch(6000) - }) - - it('Focus - Can pause and resume notifications', () => { - cy.mount(Notivue) - - .clickRandomStatic() - .wait(4000) // Remaining: 2000ms - - .get('.ClearButton') - .focus() - .wait(4000) // Any value greater than the remaining time - - .get('.Notification') - .should('exist') - - .get('.ClearButton') - .blur() - .wait(2000) - - .get('.Notification') - .should('not.exist') - }) -}) diff --git a/packages/notivue/core/notivue.ts b/packages/notivue/core/notivue.ts index daf57e13..eb7395f4 100644 --- a/packages/notivue/core/notivue.ts +++ b/packages/notivue/core/notivue.ts @@ -1,6 +1,6 @@ import { createStore, storeInjectionKey } from './createStore' -import type { App, Plugin } from 'vue' +import type { App } from 'vue' import type { NotivueConfig } from 'notivue' export const notivue = { @@ -8,11 +8,3 @@ export const notivue = { 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 index 2f43f009..b9dce0f8 100644 --- 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 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 clickAll(): Chainable getNotifications(): Chainable - getAriaLive(): Chainable + getContainer(): Chainable checkSlotAgainst(obj: Record): Chainable checkSlotPropsAgainst(obj: Record): Chainable 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) =>