mgr/dashboard: Add accessibility e2e tests for login page

This commit adds e2e accessibility checks for the login page using cypress-axe and axe-core to help access the level of compliance to
 WCAG2.1 accessibility standards

Fixes: https://tracker.ceph.com/issues/55820
Signed-off-by: nsedrickm <nsedrick101@gmail.com>

diff --git a/src/pybind/mgr/dashboard/frontend/cypress.json b/src/pybind/mgr/dashboard/frontend/cypress.json
index 0de1008cb54023183884024bbfa583f78cf958c1..545c3d41565bec237f037f4c9d3baca4050ee0ae 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/cypress.json
+++ b/src/pybind/mgr/dashboard/frontend/cypress.json
@@ -1,5 +1,5 @@
 {
-  "baseUrl": "http://localhost:4200/",
+  "baseUrl": "https://localhost:4200/",
   "ignoreTestFiles": [
     "*.po.ts",
     "**/orchestrator/**"

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/login.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/login.e2e-spec.ts
index 29c9e9e10bbb24fdf8e6aabe4a82d5b4a70e38c0..2b337e6341628fc325e8dc63aa7af4b6811c3b45 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/login.e2e-spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/login.e2e-spec.ts
@@ -14,4 +14,10 @@ describe('Login page', () => {
 
     login.doLogout();
   });
+
+  it('should have no accessibility violations', () => {
+    login.navigateTo();
+    cy.injectAxe();
+    cy.checkA11y();
+  });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/support/index.ts b/src/pybind/mgr/dashboard/frontend/cypress/support/index.ts
index f2307131aa6268a70b563d6922b1c152ab4e8527..9a7d668650826b8c302d5e776ef6dccbe802c82d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/cypress/support/index.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/support/index.ts
@@ -1,4 +1,5 @@
 import '@applitools/eyes-cypress/commands';
+import 'cypress-axe';
 
 import './commands';
 

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/tsconfig.json b/src/pybind/mgr/dashboard/frontend/cypress/tsconfig.json
index 90f899b57f639d643df7ae0d2eaf67b77ddf4c70..0d1f6b468206ef6ba4ce0215c4a75590c84b9429 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/cypress/tsconfig.json
+++ b/src/pybind/mgr/dashboard/frontend/cypress/tsconfig.json
@@ -9,6 +9,7 @@
     "sourceMap": false,
     "types": [
       "cypress",
+      "cypress-axe",
       "@applitools/eyes-cypress"
     ],
     "target": "es6"

diff --git a/src/pybind/mgr/dashboard/frontend/package-lock.json b/src/pybind/mgr/dashboard/frontend/package-lock.json
index a0827f0ef58e8b5831063616298579aae6d79f6f..da634518095801819744edd902f1949d5bb59782 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/package-lock.json
+++ b/src/pybind/mgr/dashboard/frontend/package-lock.json
@@ -6796,6 +6796,12 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "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==",
+      "dev": true
+    },
     "axios": {
       "version": "0.21.4",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
@@ -7258,6 +7264,16 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "dev": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -9856,6 +9872,12 @@
         }
       }
     },
+    "cypress-axe": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/cypress-axe/-/cypress-axe-0.14.0.tgz",
+      "integrity": "sha512-7Rdjnko0MjggCmndc1wECAkvQBIhuy+DRtjF7bd5YPZRFvubfMNvrxfqD8PWQmxm7MZE0ffS4Xr43V6ZmvLopg==",
+      "dev": true
+    },
     "cypress-cucumber-preprocessor": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/cypress-cucumber-preprocessor/-/cypress-cucumber-preprocessor-4.3.1.tgz",
@@ -11763,6 +11785,13 @@
       "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
       "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw=="
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -19200,6 +19229,13 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "nan": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.16.0.tgz",
+      "integrity": "sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==",
+      "dev": true,
+      "optional": true
+    },
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -27600,7 +27636,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",

diff --git a/src/pybind/mgr/dashboard/frontend/package.json b/src/pybind/mgr/dashboard/frontend/package.json
index 6a95f1fff02dc1a2f57879f6d129eb5d54291804..bb07fae85bac668d7e204a53e718f9fbfc8a4367 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/package.json
+++ b/src/pybind/mgr/dashboard/frontend/package.json
@@ -122,8 +122,10 @@
     "@types/node": "12.12.62",
     "@types/simplebar": "5.1.1",
     "@types/swagger-ui": "3.52.0",
+    "axe-core": "4.4.2",
     "codelyzer": "6.0.2",
     "cypress": "9.7.0",
+    "cypress-axe": "0.14.0",
     "cypress-cucumber-preprocessor": "4.3.1",
     "cypress-iframe": "1.0.1",
     "cypress-multi-reporters": "1.5.0",