build: added accessibility tests (CMC-1487) (#52)

.eslintignore

@@ -0,0 +1,3 @@
+*.min.js
+node_modules/*
+

.eslintrc.js

@@ -1,25 +1,26 @@
 module.exports = {
-  "plugins": [
-    "codeceptjs"
+  'plugins': [
+    'codeceptjs'
   ],
-  "env": {
-    "browser": true,
-    "commonjs": true,
-    "es2020": true,
-    "codeceptjs/codeceptjs": true
+  'env': {
+    'browser': true,
+    'commonjs': true,
+    'es2020': true,
+    'codeceptjs/codeceptjs': true,
+    'node': true
   },
-  "extends": "eslint:recommended",
-  "parserOptions": {
-    "ecmaVersion": 11
+  'extends': 'eslint:recommended',
+  'parserOptions': {
+    'ecmaVersion': 11
   },
-  "rules": {
-    "quotes": [
-      "error",
-      "single"
+  'rules': {
+    'quotes': [
+      'error',
+      'single'
     ],
-    "semi": [
-      "error",
-      "always"
+    'semi': [
+      'error',
+      'always'
     ]
   }
 };

codecept.conf.js

@@ -1,5 +1,3 @@
-/* global process */
-
 exports.config = {
   tests: './e2e/tests/*_test.js',
   output: './output',
@@ -17,6 +15,9 @@ exports.config = {
     PuppeteerHelpers: {
       require: './e2e/helpers/puppeteer_helper.js',
     },
+    GenerateReportHelper: {
+      require: './e2e/helpers/generate_report_helper.js'
+    },
   },
   include: {
     I: './e2e/steps_file.js',

e2e/config.js

@@ -1,5 +1,3 @@
-/*global process*/
-
 const defaultPassword = 'Password12!';
 
 module.exports = {
@@ -37,5 +35,7 @@ module.exports = {
   definition: {
     jurisdiction: 'CIVIL',
     caseType: 'CIVIL',
-  }
+  },
+  TestOutputDir: process.env.E2E_OUTPUT_DIR || './output',
+  TestForAccessibility: process.env.TESTS_FOR_ACCESSIBILITY === 'true',
 };

e2e/fragments/confirmDetails.page.js

@@ -10,6 +10,7 @@ module.exports = {
 
   async confirmReference() {
     I.waitForElement(this.fields.solicitorReferences.id);
+    await I.runAccessibilityTest();
     I.fillField(this.fields.solicitorReferences.id, 'Defendant Reference ++');
     await I.clickContinue();
   }

e2e/fragments/date.js

@@ -12,6 +12,7 @@ module.exports = {
 
   async enterDate(fieldId = '', plusDays = 28) {
     I.waitForElement(this.fields(fieldId).day);
+    await I.runAccessibilityTest();
     const date = new Date();
     date.setDate(date.getDate() + plusDays);
     I.fillField(this.fields(fieldId).day, date.getDate());

e2e/fragments/dq/disclosureOfElectrionicDocuments.page.js

@@ -24,6 +24,7 @@ module.exports = {
 
   async enterDisclosureOfElectronicDocuments(party) {
     I.waitForElement(this.fields(party).reachedAgreement.id);
+    await I.runAccessibilityTest();
     await within(this.fields(party).reachedAgreement.id, () => {
       I.click(this.fields(party).reachedAgreement.options.no);
     });

e2e/fragments/dq/disclosureOfNonElectrionicDocuments.page.js

@@ -24,6 +24,7 @@ module.exports = {
 
   async enterDirectionsProposedForDisclosure(party) {
     I.waitForElement(this.fields(party).directionsForDisclosureProposed.id);
+    await I.runAccessibilityTest();
     await within(this.fields(party).directionsForDisclosureProposed.id, () => {
       I.click(this.fields(party).directionsForDisclosureProposed.options.yes);
     });

e2e/fragments/dq/disclosureReport.page.js

@@ -24,6 +24,7 @@ module.exports = {
 
   async enterDisclosureReport(party) {
     I.waitForElement(this.fields(party).disclosureFormFiledAndServed.id);
+    await I.runAccessibilityTest();
     await within (this.fields(party).disclosureFormFiledAndServed.id, () => {
       I.click(this.fields(party).disclosureFormFiledAndServed.options.yes);
     });

e2e/fragments/dq/draftDirections.page.js

@@ -10,6 +10,7 @@ module.exports = {
 
   async upload(party, file) {
     I.waitForElement(this.fields(party).draftDirections);
+    await I.runAccessibilityTest();
     await I.attachFile(this.fields(party).draftDirections, file);
     await I.waitForInvisible(locate('.error-message').withText('Uploading...'));
 

e2e/fragments/dq/experts.page.js

@@ -39,6 +39,7 @@ module.exports = {
 
   async enterExpertInformation(party) {
     I.waitForElement(this.fields(party).expertRequired.id);
+    await I.runAccessibilityTest();
     await within(this.fields(party).expertRequired.id, () => {
       I.click(this.fields(party).expertRequired.options.yes);
     });

e2e/fragments/dq/fileDirectionsQuestionnaire.page.js

@@ -30,6 +30,7 @@ module.exports = {
 
   async fileDirectionsQuestionnaire(party) {
     I.waitForElement(this.fields(party).explainedToClient.id);
+    await I.runAccessibilityTest();
     I.checkOption(this.fields(party).explainedToClient.options.confirm);
 
     await within(this.fields(party).oneMonthStay.id, () => {

e2e/fragments/dq/furtherInformation.page.js

@@ -18,6 +18,7 @@ module.exports = {
 
   async enterFurtherInformation(party) {
     I.waitForElement(this.fields(party).futureApplications.id);
+    await I.runAccessibilityTest();
     await within(this.fields(party).futureApplications.id, () => {
       I.click(this.fields(party).futureApplications.options.yes);
     });

e2e/fragments/dq/hearing.page.js

@@ -34,6 +34,7 @@ module.exports = {
 
   async enterHearingInformation(party) {
     I.waitForElement(this.fields(party).hearingLength.id);
+    await I.runAccessibilityTest();
     await within(this.fields(party).hearingLength.id, () => {
       I.click(this.fields(party).hearingLength.options.lessThanOneDay);
     });

e2e/fragments/dq/hearingSupportRequirements.page.js

@@ -21,6 +21,7 @@ module.exports = {
 
   async selectRequirements(party) {
     I.waitForElement(this.fields(party).requirements.options.disabledAccess);
+    await I.runAccessibilityTest();
     I.checkOption(this.fields(party).requirements.options.signLanguage);
     I.checkOption(this.fields(party).requirements.options.languageInterpreter);
     I.checkOption(this.fields(party).requirements.options.other);

e2e/fragments/dq/language.page.js

@@ -27,6 +27,7 @@ module.exports = {
 
   async enterWelshLanguageRequirements(party) {
     I.waitForElement(this.fields(party).evidence.id);
+    await I.runAccessibilityTest();
 
     I.click(this.fields(party).evidence.options.welsh);
     I.click(this.fields(party).court.options.welsh);

e2e/fragments/dq/requestedCourt.page.js

@@ -18,6 +18,7 @@ module.exports = {
 
   async selectSpecificCourtForHearing(party) {
     I.waitForElement(this.fields(party).requestHearingAtSpecificCourt.id);
+    await I.runAccessibilityTest();
     await within(this.fields(party).requestHearingAtSpecificCourt.id, () => {
       I.click(this.fields(party).requestHearingAtSpecificCourt.options.yes);
     });

e2e/fragments/dq/witnesses.page.js

@@ -23,6 +23,7 @@ module.exports = {
 
   async enterWitnessInformation(party) {
     I.waitForElement(this.fields(party).witnessesToAppear.id);
+    await I.runAccessibilityTest();
     await within(this.fields(party).witnessesToAppear.id, () => {
       I.click(this.fields(party).witnessesToAppear.options.yes);
     });

e2e/fragments/event.js

@@ -7,6 +7,7 @@ module.exports = {
 
   async submit(buttonText, expectedMessage) {
     I.waitForText(buttonText);
+    await I.runAccessibilityTest();
     await I.retryUntilExists(() => I.click(buttonText), CONFIRMATION_HEADER);
     await within(CONFIRMATION_HEADER, () => {
       I.see(expectedMessage);

e2e/fragments/party.js

@@ -22,6 +22,7 @@ module.exports = {
 
   async enterParty(partyType, address) {
     I.waitForElement(this.fields(partyType).type.id);
+    await I.runAccessibilityTest();
     await within(this.fields(partyType).type.id, () => {
       I.click(this.fields(partyType).type.options.company);
     });

e2e/fragments/respondentDetails.page.js

@@ -10,6 +10,7 @@ module.exports = {
 
   async verifyDetails() {
     I.waitForElement(this.fields.respondentDetails.id);
+    await I.runAccessibilityTest();
     await I.see('Example company');
 
     await I.clickContinue();

e2e/fragments/servedDocument.js

@@ -3,6 +3,7 @@ const {I} = inject();
 module.exports = {
 
   async upload(file, documents) {
+    await I.runAccessibilityTest();
     for (const fileType of documents) {
       await within(fileType, async () => {
         I.click('Add new');

e2e/fragments/statementOfTruth.js

@@ -16,6 +16,7 @@ module.exports = {
 
   async enterNameAndRole(type = '', name = 'John Smith', role = 'Solicitor') {
     I.waitForElement(this.fields[type].name);
+    await I.runAccessibilityTest();
     I.fillField(this.fields[type].name, name);
     I.fillField(this.fields[type].role, role);
     await I.clickContinue();

e2e/helpers/accessibility/runner.js

@@ -0,0 +1,87 @@
+const HTMLCS = require('html_codesniffer');
+const fs = require('fs');
+const testConfig = require('../../config.js');
+
+const result = {
+  PASSED: 'passed',
+  FAILED: 'failed',
+};
+
+const resultObj = {
+  appName: 'Civil',
+  passCount: 0,
+  failCount: 0,
+  tests: [],
+};
+
+async function runAccessibility(url, page) {
+  //Add HMTL code sniffer script
+  await page.addScriptTag({
+    path: 'node_modules/html_codesniffer/build/HTMLCS.js',
+  });
+
+  const screenshotPath = testConfig.TestOutputDir + '/assets';
+  const screenshotName = Date.now() + '.png';
+  const screenshotReportRef = 'assets/' + screenshotName;
+
+  const accessibilityErrorsOnThePage = await page.evaluate(() => {
+    const processIssue = function(issue) {
+      return {
+        code: issue.code,
+        message: issue.msg,
+        type: 'error',
+        element: issue.element,
+        runner: 'htmlcs',
+      };
+    };
+
+    const STANDARD = 'WCAG2AA';
+    let messages;
+
+    HTMLCS.process(STANDARD, window.document, function () {
+      messages = HTMLCS
+        .getMessages()
+        .filter(function (m) {
+          return m.type === HTMLCS.ERROR;
+        })
+        .map(processIssue);
+    });
+    return messages;
+  });
+
+  try {
+    await page.screenshot({path: screenshotPath + '/' + screenshotName, fullPage: true});
+  } catch (err) {
+    fs.mkdirSync(screenshotPath, {recursive: true});
+    await page.screenshot({path: screenshotPath + '/' + screenshotName, fullPage: true});
+  }
+
+  updateResultObject(url, await page.title(), screenshotReportRef, accessibilityErrorsOnThePage);
+}
+
+function updateResultObject(url, pageTitle, screenshotReportRef, accessibilityErrorsOnThePage) {
+  const isPageAccessible = accessibilityErrorsOnThePage.length === 0 ? result.PASSED : result.FAILED;
+
+  const urlArr = url.split('/');
+
+  if (isPageAccessible === result.PASSED) {
+    resultObj.passCount += 1;
+  } else {
+    resultObj.failCount += 1;
+  }
+
+  resultObj.tests.push({
+    name: urlArr[urlArr.length -2] + '/' + urlArr[urlArr.length -1],
+    pageUrl: url,
+    documentTitle: pageTitle,
+    status: isPageAccessible,
+    screenshot: screenshotReportRef,
+    a11yIssues: accessibilityErrorsOnThePage,
+  });
+}
+
+function getAccessibilityTestResult() {
+  return resultObj;
+}
+
+module.exports = {runAccessibility, getAccessibilityTestResult};

e2e/helpers/generate_report_helper.js

@@ -0,0 +1,15 @@
+const {getAccessibilityTestResult} = require('./accessibility/runner');
+const {generateAccessibilityReport} = require('../reporters/accessibility-reporter/customReporter');
+const testConfig = require('../config.js');
+
+class Generate_report_helper extends Helper {
+
+  _finishTest() {
+    if (!testConfig.TestForAccessibility) {
+      return;
+    }
+    generateAccessibilityReport(getAccessibilityTestResult());
+  }
+
+}
+module.exports = Generate_report_helper;

e2e/helpers/puppeteer_helper.js

@@ -1,3 +1,6 @@
+const testConfig = require('../config.js');
+const {runAccessibility} = require('./accessibility/runner');
+
 module.exports = class PuppeteerHelpers extends Helper {
 
   /**
@@ -33,4 +36,14 @@ module.exports = class PuppeteerHelpers extends Helper {
       return undefined;
     }
   }
+
+  async runAccessibilityTest() {
+    if (!testConfig.TestForAccessibility) {
+      return;
+    }
+    const url = await this.helpers['Puppeteer'].grabCurrentUrl();
+    const {page} = await this.helpers['Puppeteer'];
+
+    runAccessibility(url, page);
+  }
 };

e2e/pages/acknowledgeClaim/responseIntention.page.js

@@ -19,6 +19,7 @@ module.exports = {
       throw new Error(`Response intention: ${responseIntention} does not exist`);
     }
     I.waitForElement(this.fields.responseIntention.id);
+    await I.runAccessibilityTest();
     await within(this.fields.responseIntention.id, () => {
       I.click(this.fields.responseIntention.options[responseIntention]);
     });

e2e/pages/addDefendantLitigationFriend/defendantLitigationDetails.page.js

@@ -4,6 +4,7 @@ const litigationFriend = require('../../fragments/litigationFriend');
 module.exports = {
 
   async enterLitigantFriendWithDifferentAddressToDefendant(address, file) {
+    await I.runAccessibilityTest();
     await litigationFriend.enterLitigantFriendWithDifferentAddressToLitigant('respondent1', address, file);
     await I.clickContinue();
   }

e2e/pages/caseProceedsInCaseman/caseProceedsInCaseman.page.js

@@ -20,6 +20,7 @@ module.exports = {
   },
 
   async enterTransferDate() {
+    await I.runAccessibilityTest();
     await date.enterDate(this.fields.transferredDate.id, -1);
     await within(this.fields.claimProceedsInCasemanReason.id, () => {
       I.click(this.fields.claimProceedsInCasemanReason.options.other);

e2e/pages/caseProceedsInCaseman/takeCaseOffline.page.js

@@ -4,6 +4,7 @@ module.exports = {
 
     async takeCaseOffline() {
       I.waitForText('Take offline');
+      await I.runAccessibilityTest();
       I.click('Take offline');
     }
 

e2e/pages/createClaim/chooseCourt.page.js

@@ -8,6 +8,7 @@ module.exports = {
 
   async enterCourt() {
     I.waitForElement(this.fields.courtLocation);
+    await I.runAccessibilityTest();
     I.fillField(this.fields.courtLocation, '344');
     await I.clickContinue();
   }