tests: Last E2E component tests (#501)

* fix: Test interstitial page content + replace all whitespaces

* chore: remove empty line

* tests: validate warning component + button with entry reference

* chore: remove log command

* feat: inset text validator + slight refactor

* feat: Test nav link

* docs: update components done

tests/Dfe.PlanTech.Web.E2ETests/cypress/e2e/dynamic-page-validator-readme.md

@@ -8,23 +8,22 @@
 4. Place the `contentful.js` in the same folder as `dynamic-page-validator.cy.js`
 5. Remove the `skip` command on line 14.
 
-
 ### Components content validated
 
 - [x] Answer
-- [ ] ButtonWithEntryReference
+- [x] ButtonWithEntryReference
 - [x] ButtonWithLink
 - [x] Category
-- [ ] ComponentDropDown
+- [ ] ComponentDropDown; not currently used anywhere so unable to test.
 - [x] Headers
-- [ ] InsetText
-- [ ] NavigationLink
+- [x] InsetText
+- [x] NavigationLink
 - [x] Question
 - [x] RecommendationPage
 - [x] Section *
 - [x] TextBody *
 - [x] Titles
-- [ ] WarningComponent
+- [x] WarningComponent
 
 * Not fully complete. See below for notes.
 

tests/Dfe.PlanTech.Web.E2ETests/cypress/e2e/dynamic-page-validator.cy.js

@@ -2,6 +2,7 @@ import DataMapper from "../../../../contentful/export-processor/data-mapper";
 import { contentful } from "./contentful";
 import ValidatePage from "../helpers/content-validators/page-validator";
 import { selfAssessmentSlug } from "../helpers/page-slugs";
+import ValidateContent from "../helpers/content-validators/content-validator";
 
 describe("Pages should have content", () => {
   let dataMapper;
@@ -12,14 +13,29 @@ describe("Pages should have content", () => {
     }
   });
 
+  it.skip("Should render navigation links", () => {
+    if (dataMapper?.pages == null) {
+      console.log("Datamapper has not processed data correctly");
+      return;
+    }
+
+    const navigationLinks = dataMapper.contents["navigationLink"];
+
+    const indexPage = cy.visit("/");
+
+    for (const [id, navigationLink] of navigationLinks) {
+      ValidateContent(navigationLink);
+    }
+  });
+
   it.skip("Should work for unauthorised pages", () => {
     if (dataMapper?.pages == null) {
       console.log("Datamapper has not processed data correctly");
       return;
     }
 
     for (const [_, page] of dataMapper.pages) {
-      if (page.fields.requiresAuthorisation || page.fields.slug != "/") {
+      if (page.fields.requiresAuthorisation) {
         continue;
       }
 
@@ -36,12 +52,15 @@ describe("Pages should have content", () => {
     }
 
     cy.loginWithEnv(`${selfAssessmentSlug}`);
-
-    const selfAssessmentPage = FindPageForSlug({ slug, dataMapper });
+    const slug = selfAssessmentSlug.replace("/", "");
+    const selfAssessmentPage = FindPageForSlug({
+      slug,
+      dataMapper,
+    });
 
     if (!selfAssessmentPage) {
       throw new Error(
-        `Could not find self-assessment page; not found page with slug ${slug}`
+        `Could not find self-assessment page; not found page with slug ${selfAssessmentSlug}`
       );
     }
 
@@ -59,7 +78,11 @@ describe("Pages should have content", () => {
     const sections = dataMapper.mappedSections;
 
     for (const section of Object.values(sections)) {
-      validateSections(section, section.minimumPathsToNavigateQuestions);
+      validateSections(
+        section,
+        section.minimumPathsToNavigateQuestions,
+        dataMapper
+      );
     }
   });
 
@@ -77,7 +100,7 @@ describe("Pages should have content", () => {
       for (const [maturity, path] of Object.entries(
         section.minimumPathsForRecommendations
       )) {
-        validateSections(section, [path], () => {
+        validateSections(section, [path], dataMapper, () => {
           validateRecommendationForMaturity(section, maturity);
         });
       }
@@ -139,7 +162,7 @@ function validateRecommendationForMaturity(section, maturity) {
  * @param {Array} paths - the paths to navigate
  * @param {Function} validator - optional validation function to call at the end of every path
  */
-function validateSections(section, paths, validator) {
+function validateSections(section, paths, dataMapper, validator) {
   cy.visit(`/${selfAssessmentSlug}`);
 
   for (const path of paths) {
@@ -148,6 +171,12 @@ function validateSections(section, paths, validator) {
 
     cy.url().should("include", section.interstitialPage.fields.slug);
 
+    const interstitialPage = FindPageForSlug({
+      slug: section.interstitialPage.fields.slug,
+      dataMapper,
+    });
+    ValidatePage(section.interstitialPage.fields.slug, interstitialPage);
+
     cy.get("a.govuk-button.govuk-link").contains("Continue").click();
 
     navigateAndValidateQuestionPages(path, section);

tests/Dfe.PlanTech.Web.E2ETests/cypress/helpers/content-validators/button-validator.js

@@ -1,13 +1,44 @@
 function ValidateButtonWithLink(content) {
-  const classAssertion = content.fields.button.fields.isStartButton
+  const button = validateBaseButton(content);
+
+  button.should("have.attr", "href").and("include", content.fields.href);
+}
+
+function validateBaseButton(content) {
+  const classAssertion = getClassAssertion(content);
+
+  const button = cy
+    .get("a.govuk-button")
+    .contains(content.fields.button.fields.value);
+
+  button.should(classAssertion, "govuk-button--start");
+
+  return button;
+}
+
+function ValidateButtonWithEntryReference(content) {
+  const button = validateBaseButton(content);
+
+  button.should("have.attr", "href").then((href) => {
+    if (href.indexOf(content.fields.linkToEntry.fields.href) != -1) {
+      expect(href).to.include(content.fields.linkToEntry.fields.href);
+    } else if (href.indexOf("next-question") != -1) {
+      expect(href).to.include("next-question");
+    } else {
+      throw new Error(
+        `Could not find button with HREF ${content.fields.linkToEntry.fields.href}`
+      );
+    }
+  });
+}
+
+function getClassAssertion(content) {
+  return content.fields.button.fields.isStartButton
     ? "have.class"
     : "not.have.class";
-
-  cy.get("a.govuk-button")
-    .contains(content.fields.button.fields.value)
-    .and(classAssertion, "govuk-button--start");
 }
 
 export default {
   ValidateButtonWithLink,
+  ValidateButtonWithEntryReference,
 };

tests/Dfe.PlanTech.Web.E2ETests/cypress/helpers/content-validators/category-validator.js

@@ -19,7 +19,6 @@ function ValidateCategory({ fields, sys }) {
   const sections = fields.sections;
 
   appTaskList.find("li.app-task-list__item").then(($listItems) => {
-    console.log($listItems);
     expect($listItems).to.have.length(sections.length);
 
     for (let index = 0; index < sections.length; index++) {

tests/Dfe.PlanTech.Web.E2ETests/cypress/helpers/content-validators/content-validator.js

@@ -1,7 +1,13 @@
+import {
+  ValidateButtonWithLink,
+  ValidateButtonWithEntryReference,
+} from "./button-validator";
+import ValidateCategory from "./category-validator";
 import ValidateHeader from "./header-validator";
-import { ValidateButtonWithLink } from "./button-validator";
+import ValidateInsetTextContent from "./inset-text-validator";
+import ValidateNavigationLink from "./nav-link-validator";
 import ValidateRichTextContent from "./rich-text-content-validator";
-import ValidateCategory from "./category-validator";
+import ValidateWarningComponent from "./warning-validator";
 
 function ValidateContent(content) {
   switch (content.sys.contentType.sys.id) {
@@ -22,17 +28,21 @@ function ValidateContent(content) {
       break;
     }
     case "warningComponent": {
+      ValidateWarningComponent(content);
+      break;
+    }
+    case "buttonWithEntryReference": {
+      ValidateButtonWithEntryReference(content);
+      break;
+    }
+    case "insetText": {
+      ValidateInsetTextContent(content);
+      break;
+    }
+    case "navigationLink": {
+      ValidateNavigationLink(content);
       break;
     }
-    //ButtonWithReference
-
-    //Category
-
-    //Section??
-
-    //Question?Answer?
-
-    //Recommendation Page
     default: {
       console.log(content.sys.contentType.sys.id, content);
       break;

tests/Dfe.PlanTech.Web.E2ETests/cypress/helpers/content-validators/inset-text-validator.js

@@ -0,0 +1,7 @@
+import { ReplaceWhiteSpace } from "../text-helpers";
+
+export default function ValidateInsetTextContent({ fields }) {
+  cy.get("div.govuk-inset-text").contains(
+    ReplaceWhiteSpace(fields.text).trim()
+  );
+}

tests/Dfe.PlanTech.Web.E2ETests/cypress/helpers/content-validators/nav-link-validator.js

@@ -0,0 +1,8 @@
+export default function ValidateNavigationLink({ fields }) {
+  cy.get(
+    "ul.govuk-footer__inline-list li.govuk-footer__inline-list-item a.govuk-footer__link"
+  )
+    .contains(fields.displayText)
+    .should("have.attr", "href")
+    .and("include", fields.href);
+}

tests/Dfe.PlanTech.Web.E2ETests/cypress/helpers/content-validators/rich-text-content-validator.js

@@ -1,5 +1,6 @@
 import { parse } from "node-html-parser";
 import TableValidator from "./rich-text-validators/table-validator";
+import { ReplaceWhiteSpace } from "../text-helpers";
 
 const tableValidator = new TableValidator();
 
@@ -48,7 +49,8 @@ function validateParagraph(content) {
     const paragraphHtmls = Array.from(
       Array.from($paragraphs.map((i, el) => Cypress.$(el).html()))
         .map((paragraph) => {
-          const withoutWhitespaceEscaped = paragraph.replace(" ", " ");
+          const withoutWhitespaceEscaped = ReplaceWhiteSpace(paragraph).trim();
+
           return {
             original: withoutWhitespaceEscaped,
             parsed: parse(withoutWhitespaceEscaped),
@@ -62,9 +64,15 @@ function validateParagraph(content) {
         paragraph.original == expectedHtml ||
         paragraph.original.indexOf(expectedHtml) != -1 ||
         paragraph.parsed.innerHTML?.indexOf(parsedElement.innerHTML) != -1 ||
-        paragraph.parsed.innerText?.indexOf(parsedElement.innerText) != -1
+        paragraph.parsed.innerText
+          ?.trim()
+          .indexOf(parsedElement.innerText.trim()) != -1
     );
 
+    if (!anyMatches) {
+      console.error(`Could not find match for content`, expectedHtml, content);
+    }
+
     expect(anyMatches).to.exist;
   });
 }
@@ -93,5 +101,5 @@ function buildExpectedHtml(content) {
     }
   }
 
-  return html;
+  return ReplaceWhiteSpace(html).trim();
 }

tests/Dfe.PlanTech.Web.E2ETests/cypress/helpers/content-validators/warning-validator.js

@@ -0,0 +1,5 @@
+import ValidateRichTextContent from "./rich-text-content-validator";
+
+export default function ValidateWarningComponent({ fields, sys }) {
+  ValidateRichTextContent(fields.text.fields.richText);
+}

tests/Dfe.PlanTech.Web.E2ETests/cypress/helpers/text-helpers.js

@@ -1,3 +1,12 @@
 const ReplaceNonBreakingHyphen = (text) => text.replace("‑", "‑");
 
-export { ReplaceNonBreakingHyphen };
+const ReplaceWhiteSpace = (string) =>
+  string
+    .replace(/\s/g, " ")
+    .replace(/ /g, " ")
+    .replace(/\s/g, " ")
+    .replace(" ", " ")
+    .replace(" ", " ")
+    .replace(" ", " ");
+
+export { ReplaceNonBreakingHyphen, ReplaceWhiteSpace };