tests: Add category and sections to programatic tests

contentful/user-journey-scripts/.gitignore

@@ -0,0 +1,2 @@
+output/*.json
+*.json

tests/Dfe.PlanTech.Web.E2ETests/.gitignore

@@ -3,4 +3,6 @@ screenshots/
 videos/
 public/
 cypress/results/
-index.json
+index.json
+
+cypress.env.*.json

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

@@ -14,19 +14,24 @@
 - [ ] Answer
 - [ ] ButtonWithEntryReference
 - [x] ButtonWithLink
-- [ ] Category
+- [x] Category
 - [ ] ComponentDropDown
 - [x] Headers
 - [ ] InsetText
 - [ ] NavigationLink
 - [ ] Question
 - [ ] RecommendationPage
-- [ ] Section
+- [x] Section *
 - [x] TextBody *
 - [x] Titles
 - [ ] WarningComponent
 
-* Haven't completed; missing certain validations.
+* Not fully complete. See below for notes.
+
+| Content Type | Status Notes                                                                                                                        |
+| ------------ | ----------------------------------------------------------------------------------------------------------------------------------- |
+| Section      | Haven't added functionality to test current section status                                                                          |
+| TextBody     | Haven't added validations for all element types (e.g. hyperlinks, strong, italics, etc.), haven't validated classes for most things |
 
 ### Page routing validated
 
@@ -41,6 +46,10 @@
 
 - [ ] Do not fail if one error; run entire tests for issues.
 - [ ] Split tests up; not just one `it` function
+- [ ] Complete documentation:
+   - [ ] Merge with documentation in `contentful-helpers`
+- [ ] Make a Node project for the `contentful-helpers` to allow re-use, and prevent the fact that the code is copied and pasted into two places
+
 
 #### Integrate with CI/CD Pipeline
 

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

@@ -1,39 +1,48 @@
 import DataMapper from "../helpers/contentful-helpers/data-mapper";
-
 import { contentful } from "./contentful";
-import ValidateContent from "../helpers/content-validators/content-validator";
-import ValidateTitle from "../helpers/content-validators/title-validator";
+import ValidatePage from "../helpers/content-validators/page-validator";
 
 describe("Pages should have content", () => {
-  before(() => {});
+  let dataMapper;
 
-  it.skip("Should work for unauthorised pages", () => {
-    const dataMapper = new DataMapper(contentful);
+  before(() => {
+    dataMapper = new DataMapper(contentful);
+  });
 
+  it.skip("Should work for unauthorised pages", () => {
     for (const [pageId, page] of dataMapper.pages) {
       if (page.fields.requiresAuthorisation) {
         continue;
       }
 
       const slug = `/${page.fields.slug.replace("/", "")}`;
       cy.visit(slug);
-      ShouldMatchUrl(slug);
+      ValidatePage(slug, page);
+    }
+  });
 
-      if (page.fields.title) {
-        ValidateTitle(page.fields.title);
-      }
+  it("Should validate self-assessment page", () => {
+    const slug = "self-assessment";
+    cy.loginWithEnv(`/${slug}`);
 
-      const contents = page.fields.content;
+    const selfAssessmentPage = FindPageForSlug({ slug, dataMapper });
 
-      for (const content of contents) {
-        ValidateContent(content);
-      }
+    if (!selfAssessmentPage) {
+      throw new Error(
+        `Could not find self-assessment page; not found page with slug ${slug}`
+      );
     }
+
+    ValidatePage(slug, selfAssessmentPage);
   });
 });
 
-function ShouldMatchUrl(url) {
-  cy.location().should((loc) => {
-    expect(loc.pathname).to.equal(url);
-  });
+function FindPageForSlug({ slug, dataMapper }) {
+  for (const [id, page] of dataMapper.pages) {
+    if (page.fields.slug == slug) {
+      return page;
+    }
+  }
+
+  return null;
 }

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

@@ -0,0 +1,13 @@
+function ValidateButtonWithLink(content) {
+  const classAssertion = 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,
+};

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

@@ -0,0 +1,34 @@
+import ValidateHeader from "./header-validator";
+import ValidateSection from "./section-validator";
+
+function ValidateCategory({ fields, sys }) {
+  const header = fields.header;
+
+  const headerTest = ValidateHeader(header);
+
+  const progressHeaderTest = headerTest.parent().next().contains("Progress");
+
+  const progressTest = progressHeaderTest
+    .next("p")
+    .contains("You have completed");
+
+  const appTaskList = progressTest
+    .next("ul.app-task-list__items")
+    .should("exist");
+
+  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++) {
+      const section = sections[index];
+      const listItem = $listItems[index];
+
+      ValidateSection(section, listItem);
+    }
+  });
+}
+
+export default ValidateCategory;

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

@@ -1,6 +1,7 @@
 import ValidateHeader from "./header-validator";
 import { ValidateButtonWithLink } from "./button-validator";
 import ValidateRichTextContent from "./rich-text-content-validator";
+import ValidateCategory from "./category-validator";
 
 function ValidateContent(content) {
   switch (content.sys.contentType.sys.id) {
@@ -16,6 +17,10 @@ function ValidateContent(content) {
       ValidateRichTextContent(content.fields.richText);
       break;
     }
+    case "category": {
+      ValidateCategory(content);
+      break;
+    }
     //ButtonWithReference
 
     //Category

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

@@ -1,8 +1,15 @@
+import { ReplaceNonBreakingHyphen } from "../text-helpers.js";
+
 function ValidateHeader(content) {
   const tag = content.fields.tag;
   const expectedClass = GetExpectedClass(content.fields.size.toLowerCase());
 
-  cy.get(tag).contains(content.fields.text).should("have.class", expectedClass);
+  const expectedText = ReplaceNonBreakingHyphen(content.fields.text);
+
+  return cy
+    .get(`header-component ${tag}`)
+    .contains(expectedText)
+    .should("have.class", expectedClass);
 }
 
 function GetExpectedClass(size) {

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

@@ -0,0 +1,26 @@
+import ValidateContent from "./content-validator";
+import ValidateTitle from "./title-validator";
+
+function ValidatePage(slug, page) {
+  if (!page.fields.requiresAuthorisation) {
+    ShouldMatchUrl(slug);
+  }
+
+  if (page.fields.title) {
+    ValidateTitle(page.fields.title);
+  }
+
+  const contents = page.fields.content;
+
+  for (const content of contents) {
+    ValidateContent(content);
+  }
+}
+
+function ShouldMatchUrl(url) {
+  cy.location().should((loc) => {
+    expect(loc.pathname).to.equal(url);
+  });
+}
+
+export default ValidatePage;

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

@@ -0,0 +1,9 @@
+function ValidateSection(section, listItem) {
+  cy.wrap(listItem)
+    .find("span.app-task-list__task-name")
+    .contains(section.fields.name);
+
+  cy.wrap(listItem).find("strong.govuk-tag").should("exist"); //TODO: Validate actual status of section
+}
+
+export default ValidateSection;

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

@@ -1,7 +1,8 @@
+import { ReplaceNonBreakingHyphen } from "../text-helpers";
 function ValidateTitle(title) {
-  cy.get("h1.govuk-heading-xl")
-    .should("exist")
-    .and("have.text", title.fields.text);
+  const expectedText = ReplaceNonBreakingHyphen(title.fields.text);
+
+  cy.get("h1.govuk-heading-xl").should("exist").and("have.text", expectedText);
 }
 
 export default ValidateTitle;

tests/Dfe.PlanTech.Web.E2ETests/cypress/helpers/contentful-helpers/data-mapper.js

@@ -1,5 +1,4 @@
 import { Section } from "./section";
-import fs from "fs";
 import ContentType from "./content-type";
 
 /**

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

@@ -0,0 +1,3 @@
+const ReplaceNonBreakingHyphen = (text) => text.replace("‑", "‑");
+
+export { ReplaceNonBreakingHyphen };