AAC-329 Setup accessibility testing and linting in Cypress (#874)

* Add cypress-axe and axe-core

Add cypress-axe as a yarn devDependency
Add axe-core as a yarn peerDependency of the cypress package

Add import 'cypress-axe' to the support file as it includes commands to be used in testing

* Added basic usage of checkA11y
Cypress test for sign in spec checks for accessibility issues on page visit

To do: Refactor so that we don't have to reproduce long task code on every spec

* Fix js linting issues

* Add Cypress command to log results to terminal

Add a terminal log command that logs cypress test results to the terminal.

Refactor code to move the function terminalLog into the above command.

Add initial rules to ignore the govuk-phase-banner accessiblity issue because it is Technial Debt

* Add accessiblity cypress checks on sign in

Add accessibility checks to the page load and dynamic changes on the page during the sign in cypress tests

* Added accessibility tests to cookie tests
Added axe a11y checks to cookie_settings and cookie_banner
Refactored runtime a11y checks into function composed of:
checkA11y and injectAxe for ease of use

* Added eslint for Javascript
Created config for eslint
Added Cypress eslint plugin
Linted all JS files in repo
Cleaned up test specs

* Changed validate:js command to ESLint
Ran linter on via command on app and cypress folder

* Update comment to ESLint from standardjs

* Upgrade ruby to 2.7.5

Upgrade ruby to 2.7.5 from 2.7.2

Upgrade circleci ruby docker imgae to 2.7.5 which comes with node version 16.13.0

This is so that the circleci docker image has the node of at least (^12.22.0, ^14.17.0, or >=16.0.0)  as described by ESlint.

This will allow for ESlint to be installed and work as our javascript linter

* Disable eslint error for cypress plugin/index.js

* Upgrade ruby to 2.7.5 in Dockerfile

* Fix bundle gems issue in docker

This is an issue with our docker alpine image and an older docker host. Keeping to apline3.13 fixes the below error
Fix for :
While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions for/usr/local/bundle

Solution:
docker-library/ruby#351

* Configure Cypress Axe impact
Disabled checks for minor and moderate issues (only check for serious or critical)
Modified custom a11yCheck command to handle config
Applied injectAxe to all a11yChecks to avoid losing the instantiation (calling the function multiple times has no impact)

Co-authored-by: ivanELEC <ivan.yohuno@digital.justice.gov.uk>

.circleci/config.yml

@@ -67,7 +67,7 @@ executors:
   test-executor:
     working_directory: ~/repo
     docker:
-      - image: circleci/ruby:2.7.2-node-browsers
+      - image: circleci/ruby:2.7.5-node-browsers
         environment:
           RAILS_ENV: test
           DATABASE_URL: postgres://postgres:circleci@127.0.0.1:5432/laa_court_data_ui_test

.eslintrc.json

@@ -0,0 +1,29 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "rules": {
+        "indent": [
+            "error",
+            "tab"
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "double"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+}

.git-hooks/pre-commit

@@ -25,7 +25,7 @@ fi
 
 
 ################################################################################
-# JavaScript linting using standardJS
+# JavaScript linting using ESlint
 #
 
 printf '\nLinting JavaScript files...\n'

.ruby-version

@@ -1 +1 @@
-ruby-2.7.2
+ruby-2.7.5

Dockerfile

@@ -1,4 +1,4 @@
-FROM ruby:2.7.2-alpine3.11
+FROM ruby:2.7.5-alpine3.13
 LABEL Ministry of Justice, LAA Get Paid <laa-get-paid@digital.justice.gov.uk>
 
 # fail early and print all commands

Gemfile

@@ -3,7 +3,7 @@
 source 'https://rubygems.org'
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
-ruby '2.7.2'
+ruby '2.7.5'
 
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', '>= 1.7.0', require: false

Gemfile.lock

@@ -527,7 +527,7 @@ DEPENDENCIES
   webpacker (~> 5.4)
 
 RUBY VERSION
-   ruby 2.7.2p137
+   ruby 2.7.5p203
 
 BUNDLED WITH
    2.2.15

app/webpack/packs/application.js

@@ -1,12 +1,13 @@
+/* eslint-disable no-undef */
 // This file is automatically compiled by Webpack, along with any other files
 // present in this directory. You're encouraged to place your actual application logic in
 // a relevant structure within app/javascript and only use these pack files to reference
 // that code so it'll be compiled.
 
-import '../stylesheets/application.scss'
-require('@rails/ujs').start()
-require('govuk-frontend').initAll()
-require.context('govuk-frontend/govuk/assets')
+import "../stylesheets/application.scss";
+require("@rails/ujs").start();
+require("govuk-frontend").initAll();
+require.context("govuk-frontend/govuk/assets");
 // require("@rails/activestorage").start();
 // require("channels");
 

app/webpack/packs/unlink.js

@@ -1,28 +1,29 @@
 function Unlinking () {
-  // rely on `name`` because id changes in error state
-  //
-  const unlinkReasonCode = document.getElementsByName('unlink_attempt[reason_code]')[0]
-  const unlinkOtherReasonText = document.getElementsByName('unlink_attempt[other_reason_text]')[0]
-  const otherReasonCode = '7'
+	// rely on `name`` because id changes in error state
+	//
+	const unlinkReasonCode = document.getElementsByName("unlink_attempt[reason_code]")[0];
+	const unlinkOtherReasonText = document.getElementsByName("unlink_attempt[other_reason_text]")[0];
+	const otherReasonCode = "7";
 
-  if (!unlinkReasonCode) { return false }
-  if (!unlinkReasonCode.value) { hide() }
-  if (unlinkReasonCode.value === otherReasonCode) { show() }
+	if (!unlinkReasonCode) { return false; }
+	if (!unlinkReasonCode.value) { hide(); }
+	if (unlinkReasonCode.value === otherReasonCode) { show(); }
 
-  // TODO: should really rely on a data-text-required flag ir similar set by backend
-  //
-  unlinkReasonCode.onchange = function () {
-    (this.value === otherReasonCode) ? show() : hide()
-  }
+	// TODO: should really rely on a data-text-required flag ir similar set by backend
+	//
+	unlinkReasonCode.onchange = function () {
+		(this.value === otherReasonCode) ? show() : hide();
+	};
 
-  function show () {
-    unlinkOtherReasonText.parentElement.classList.remove('govuk-select__conditional--hidden')
-    unlinkOtherReasonText.parentElement.removeAttribute('aria-hidden')
-  }
+	function show () {
+		unlinkOtherReasonText.parentElement.classList.remove("govuk-select__conditional--hidden");
+		unlinkOtherReasonText.parentElement.removeAttribute("aria-hidden");
+	}
 
-  function hide () {
-    unlinkOtherReasonText.parentElement.classList.add('govuk-select__conditional--hidden')
-    unlinkOtherReasonText.parentElement.setAttribute('aria-hidden', 'false')
-  }
+	function hide () {
+		unlinkOtherReasonText.parentElement.classList.add("govuk-select__conditional--hidden");
+		unlinkOtherReasonText.parentElement.setAttribute("aria-hidden", "false");
+	}
 }
-Unlinking()
+
+Unlinking();

cypress/.eslintrc

@@ -0,0 +1,8 @@
+{
+    "plugins": [
+      "cypress"
+    ],
+    "extends": [
+        "plugin:cypress/recommended"
+      ]
+}