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 <nsedrick101@gmail.com>
(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

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 (file)
index 0000000..2a0c5c5
--- /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 6ff17f9d6978e11f35787a657e2c02ad6222ca59..14b9f82acce9410d5ef5c9a1848355b1704fbfb1 100644 (file)
--- 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<string>;
+      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 01456b53a5ca3126f4969a5ad11b4ba77fa9592a..a1f57fb7954846a9ab4007b072c8d3bb5f233951 100644 (file)
--- 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 58db45c53ae69d78ba10fb2eace2abe08e3544a5..df5b381e75ecddeffc27261bd02485ac9f0cbc3b 100644 (file)
--- 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 512feecef9d659e0777ecf36021a6501d927c800..a7cc40f5a8235a0648b183f866c948e5d3796929 100644 (file)
--- 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 e54c6ecdc62a60cbb2fe77b593831cb62ae1c9e3..ea0bed70e81fc64efc5ee050f8f022d3d3259cfd 100644 (file)
--- 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