From 1c98e433849a07bfc740cf26a700a67fbef1cc5f Mon Sep 17 00:00:00 2001 From: nsedrickm Date: Sun, 7 Aug 2022 14:25:11 +0100 Subject: [PATCH] mgr/dashboard: add cypress e2e accessibility tests for navigation * Add cypress e2e accessibility tests * Log accessibility violations to console for quick debugging * Disable retries to avoid duplicate logs Signed-off-by: nsedrickm (cherry picked from commit 05c1b776c29795af6d015dd14aae2aa1f5d1b912) Conflicts: src/pybind/mgr/dashboard/frontend/cypress/support/commands.ts - Keep only the accessibility change there and remove the ceph2Login --- .../integration/a11y/navigation.e2e-spec.ts | 21 +++++++++++++ .../frontend/cypress/support/commands.ts | 31 +++++++++++++++++++ .../mgr/dashboard/frontend/package-lock.json | 6 ++-- .../mgr/dashboard/frontend/package.json | 3 +- .../navigation/navigation.component.ts | 2 +- src/pybind/mgr/dashboard/openapi.yaml | 2 +- 6 files changed, 59 insertions(+), 6 deletions(-) create mode 100644 src/pybind/mgr/dashboard/frontend/cypress/integration/a11y/navigation.e2e-spec.ts diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/a11y/navigation.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/a11y/navigation.e2e-spec.ts new file mode 100644 index 0000000000000..2a0c5c5a533f5 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/a11y/navigation.e2e-spec.ts @@ -0,0 +1,21 @@ +import { NavigationPageHelper } from '../ui/navigation.po'; + +describe('Navigation accessibility', { retries: 0 }, () => { + const shared = new NavigationPageHelper(); + + beforeEach(() => { + cy.login(); + Cypress.Cookies.preserveOnce('token'); + shared.navigateTo(); + }); + + it('top-nav should have no accessibility violations', () => { + cy.injectAxe(); + cy.checkAccessibility('.cd-navbar-top'); + }); + + it('sidebar should have no accessibility violations', () => { + cy.injectAxe(); + cy.checkAccessibility('nav[id=sidebar]'); + }); +}); diff --git a/src/pybind/mgr/dashboard/frontend/cypress/support/commands.ts b/src/pybind/mgr/dashboard/frontend/cypress/support/commands.ts index 6ff17f9d6978e..14b9f82acce94 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/support/commands.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/support/commands.ts @@ -4,6 +4,7 @@ declare global { login(): void; logToConsole(message: string, optional?: any): void; text(): Chainable; + checkAccessibility(subject: any, axeOptions?: any, skip?: boolean): void; } } } @@ -15,6 +16,7 @@ declare global { /* tslint:disable*/ import { CdHelperClass } from '../../src/app/shared/classes/cd-helper.class'; import { Permissions } from '../../src/app/shared/models/permissions'; +import { table } from 'table'; /* tslint:enable*/ let auth: any; @@ -57,3 +59,32 @@ Cypress.Commands.add('text', { prevSubject: true }, (subject: any) => { Cypress.Commands.add('logToConsole', (message: string, optional?: any) => { cy.task('log', { message: `(${new Date().toISOString()}) ${message}`, optional }); }); + +// Print cypress-axe violations to the terminal +function a11yErrorLogger(violations: any) { + const violationData = violations.flatMap(({ id, impact, description, nodes }: any) => { + return nodes.flatMap(({ html }: any) => { + return [ + ['Test', Cypress.currentTest.title], + ['Error', id], + ['Impact', impact], + ['Description', description], + ['Element', html], + ['', ''] + ]; + }); + }); + + cy.task('log', { + message: table(violationData, { + header: { + alignment: 'left', + content: Cypress.spec.relative + } + }) + }); +} + +Cypress.Commands.add('checkAccessibility', (subject: any, axeOptions?: any, skip?: boolean) => { + cy.checkA11y(subject, axeOptions, a11yErrorLogger, skip); +}); diff --git a/src/pybind/mgr/dashboard/frontend/package-lock.json b/src/pybind/mgr/dashboard/frontend/package-lock.json index 01456b53a5ca3..a1f57fb795484 100644 --- a/src/pybind/mgr/dashboard/frontend/package-lock.json +++ b/src/pybind/mgr/dashboard/frontend/package-lock.json @@ -6719,9 +6719,9 @@ "dev": true }, "axe-core": { - "version": "4.4.2", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.2.tgz", - "integrity": "sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA==", + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz", + "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w==", "dev": true }, "axios": { diff --git a/src/pybind/mgr/dashboard/frontend/package.json b/src/pybind/mgr/dashboard/frontend/package.json index 58db45c53ae69..df5b381e75ecd 100644 --- a/src/pybind/mgr/dashboard/frontend/package.json +++ b/src/pybind/mgr/dashboard/frontend/package.json @@ -122,7 +122,7 @@ "@types/node": "12.12.62", "@types/simplebar": "5.1.1", "@types/swagger-ui": "3.52.0", - "axe-core": "4.4.2", + "axe-core": "4.4.3", "codelyzer": "6.0.2", "cypress": "9.7.0", "cypress-axe": "0.14.0", @@ -148,6 +148,7 @@ "stylelint": "13.13.1", "stylelint-config-sass-guidelines": "7.1.0", "stylelint-declaration-use-variable": "1.7.3", + "table": "6.8.0", "transifex-i18ntool": "1.1.0", "ts-node": "9.0.0", "tslint": "6.1.3", diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts index 512feecef9d65..a7cc40f5a8235 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts @@ -87,7 +87,7 @@ export class NavigationComponent implements OnInit, OnDestroy { blockHealthColor() { if (this.summaryData && this.summaryData.rbd_mirroring) { if (this.summaryData.rbd_mirroring.errors > 0) { - return { color: '#d9534f' }; + return { color: '#f4926c' }; } else if (this.summaryData.rbd_mirroring.warnings > 0) { return { color: '#f0ad4e' }; } diff --git a/src/pybind/mgr/dashboard/openapi.yaml b/src/pybind/mgr/dashboard/openapi.yaml index e54c6ecdc62a6..ea0bed70e81fc 100644 --- a/src/pybind/mgr/dashboard/openapi.yaml +++ b/src/pybind/mgr/dashboard/openapi.yaml @@ -10663,7 +10663,7 @@ tags: name: Auth - description: Cephfs Management API name: Cephfs -- description: Get Cluster Details +- description: Get Ceph Users name: Cluster - description: Manage Cluster Configurations name: ClusterConfiguration -- 2.39.5