CKS-334 Scaffold chapter pages (#42)

* CKS-334 Scaffold chapter pages * CKS-334 Remove extra topic page content * CKS-334 Flatten topic menu until nested stacked nav * CKS-334 Set correct chapter heading * CKS-334 Rewrite chater content links * CKS-334 Remove HTML processing * CKS-334 Add comment for scss declaration * CKS-334 Refactors * CKS-334 Refactor chapter types * CKS-334 Fix test * CKS-334 Fix test * CKS-334 Update sub chapters sub nav indentation * CKS-334 Add key to topic menu fragment * CKS-334 Refactor chapter body * CKS-334 Add HTML utils tests * CKS-334 Ignore graphql fragments from coverage * CKS-334 Add chapter body tests * CKS-334 Add insertId tests * CKS-334 Add placeholder tests for the chapter template * CKS-334 Refactor chapter pages * CKS-334 Refactor chapter headings to correct level * CKS-334 Change home breadcrumb to NICE * CKS-334 Add level 1 chapter tests * CKS-334 Add chapter body tests * CKS-334 Remove unusde fragments * CKS-334 Remove grid from chapter body * CKS-334 Add comments and fix import path * CKS-334 Add split CSS plugin * CKS-334 Fix await in wrong place * CKS-334 Split CSS Reduces total build size and per-page size by including only the required CSS * CKS-334 Remove spacing modifiers Save A LOT of space in the final build size as ALL of the spacing modifiers CSS was being included in EVERY single chapter page of which there are 12000 or so * CKS-334 Update package lock * CKS-334 Update package lock * CKS-334 Fix topic summary link * CKS-334 Fix test * CKS-334 Fix gatsby-react-router-scroll version See gatsbyjs/gatsby#25778 (comment) * CKS-334 Fix type def for test * CKS-334 Fix flakey functional tests * CKS-334 Add Asthma topic page tests * CKS-334 Refactor breadcrumb step * CKS-334 Re-instate topic page a11y tests * CKS-334 Add chapter page functional tests * CKS-334 Use new 2 level stacked nav for topic menu * CKS-334 Fix tests * CKS-334 Increase test timeout * CKS-334 Add LangVersion to latest Avoids "Feature 'using declarations' is not available in C# 7.3. Please use language version 8.0 or greater." error * CKS-334 Refactor topic graphql query * CKS-334 Add topic chapters menu tests * CKS-334 Add chapter level 2 tests * CKS-334 Update design system version * CKS-334 Bump global nav commit * CKS-334 Update NDS version, exclude unused classes * CKS-334 Fix styling issues after NDS update Caused by the new max width on lists * CKS-334 Fix fake API not debugging * CKS-334 Fix HTML encoding in topic lead * CKS-334 Fix jest tests not outputting debug logs * CKS-334 Add topic page lead paragraph test * CKS-334 Refactor chapter level 1 tests * CKS-334 Increase test timeouts * CKS-334 Update design system package Gets new breadcrumbs update with wider max width
nice-digital · Jul 22, 2020 · d40489b · d40489b
1 parent 400aa9a
commit d40489b
Show file tree

Hide file tree

Showing 56 changed files with 4,564 additions and 3,277 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -91,6 +91,7 @@
         "..\\${relativeFile}"
       ],
       "console": "internalConsole",
+      "outputCapture": "std",
       "internalConsoleOptions": "openOnSessionStart",
       "disableOptimisticBPs": true,
       "windows": {
@@ -118,6 +119,7 @@
         "..\\${relativeFile}"
       ],
       "console": "internalConsole",
+      "outputCapture": "std",
       "internalConsoleOptions": "openOnSessionStart",
       "disableOptimisticBPs": true,
       "windows": {

diff --git a/fake-api/package.json b/fake-api/package.json
@@ -7,7 +7,7 @@
   "scripts": {
     "test": "echo \"Error: no tests, this is just a fake API\" && exit 1",
     "start": "node index.js",
-    "debug": "node --nolazy --inspect-brk=9230 index.js"
+    "debug": "node --nolazy --inspect=9230 index.js"
   },
   "engines": {
     "node": ">=10",

diff --git a/functional-tests/features/aboutPage.feature b/functional-tests/features/aboutPage.feature
@@ -14,11 +14,11 @@ Feature: About Page
     Then the page should have no accessibility issues
 
   Scenario: NICE breadcrumb
-    When I click the "NICE" breadcrumb
+    When I click the NICE breadcrumb
     Then I expect that the url is "https://www.nice.org.uk/"
 
   Scenario: Homepage breadcrumb
-    When I click the "CKS" breadcrumb
+    When I click the CKS breadcrumb
     Then I expect that the path is "/"
 
   Scenario: Heading text

diff --git a/functional-tests/features/chapterPage.feature b/functional-tests/features/chapterPage.feature
@@ -0,0 +1,43 @@
+Feature: Chapter Page
+  As a user of CKS
+  I want to be able to use the CKS Chapter Page
+
+  Background:
+    Given I open the asthma have I got the right topic? page
+    And I have a screen that is 1366 by 768 pixels
+
+  Scenario: Detect accessibility issues
+    Then the page should have no accessibility issues
+
+  Scenario: Detect mobile accessibility issues
+    Given I have a screen that is 320 by 568 pixels
+    Then the page should have no accessibility issues
+
+  Scenario: NICE breadcrumb
+    When I click the NICE breadcrumb
+    Then I expect that the url is "https://www.nice.org.uk/"
+
+  Scenario: Homepage breadcrumb
+    When I click the CKS breadcrumb
+    Then I expect that the path is "/"
+
+  Scenario: Topics A to Z breadcrumb
+    When I click the Topics A to Z breadcrumb
+    Then I expect that the path is "/topics/"
+
+  Scenario: Asthma breadcrumb
+    When I click the Asthma breadcrumb
+    Then I expect that the path is "/topics/asthma/"
+
+  Scenario: Heading text
+    Then I expect that element "h1" contains the text "Have I got the right topic?"
+
+  Scenario: Chapter navigation
+    When I click the "Summary" link
+    And I expect that the path is "/topics/asthma/"
+
+  Scenario: Chapter body
+    Then I expect that element "main" contains the text "From age 1 month onwards"
+
+
+
diff --git a/functional-tests/features/developmentPage.feature b/functional-tests/features/developmentPage.feature
@@ -18,15 +18,15 @@ Feature: Development process page
     Then the page should have no accessibility issues
 
   Scenario: NICE breadcrumb
-    When I click the "NICE" breadcrumb
+    When I click the NICE breadcrumb
     Then I expect that the url is "https://www.nice.org.uk/"
 
   Scenario: Homepage breadcrumb
-    When I click the "CKS" breadcrumb
+    When I click the CKS breadcrumb
     Then I expect that the path is "/"
 
   Scenario: About breadcrumb
-    When I click the "About CKS" breadcrumb
+    When I click the About CKS breadcrumb
     Then I expect that the path is "/about/"
 
   Scenario: Heading text

diff --git a/functional-tests/features/specialitiesListPage.feature b/functional-tests/features/specialitiesListPage.feature
@@ -18,11 +18,11 @@ Feature: Specialities list page
     Then the page should have no accessibility issues
 
   Scenario: NICE breadcrumb
-    When I click the "NICE" breadcrumb
+    When I click the NICE breadcrumb
     Then I expect that the url is "https://www.nice.org.uk/"
 
   Scenario: Homepage breadcrumb
-    When I click the "CKS" breadcrumb
+    When I click the CKS breadcrumb
     Then I expect that the path is "/"
 
   Scenario: Heading text

diff --git a/functional-tests/features/specialityPage.feature b/functional-tests/features/specialityPage.feature
@@ -14,15 +14,15 @@ Feature: Speciality Page
     Then the page should have no accessibility issues
 
   Scenario: NICE breadcrumb
-    When I click the "NICE" breadcrumb
+    When I click the NICE breadcrumb
     Then I expect that the url is "https://www.nice.org.uk/"
 
   Scenario: Homepage breadcrumb
-    When I click the "CKS" breadcrumb
+    When I click the CKS breadcrumb
     Then I expect that the path is "/"
 
   Scenario: Specialities breadcrumb
-    When I click the "Specialities" breadcrumb
+    When I click the Specialities breadcrumb
     Then I expect that the path is "/specialities/"
 
   Scenario: Heading text

diff --git a/functional-tests/features/topicPage.feature b/functional-tests/features/topicPage.feature
@@ -3,11 +3,34 @@ Feature: Topic Page
   I want to be able to use the CKS Topic Page
 
   Background:
-    Given I open the achilles tendinopathy topic page
+    Given I open the asthma topic page
+    And I have a screen that is 1366 by 768 pixels
 
-  Scenario: Detect Topic page accessibility issues
+  Scenario: Detect accessibility issues
     Then the page should have no accessibility issues
 
-  Scenario: Detect mobile Topic page accessibility issues
+  Scenario: Detect mobile accessibility issues
     Given I have a screen that is 320 by 568 pixels
     Then the page should have no accessibility issues
+
+  Scenario: NICE breadcrumb
+    When I click the NICE breadcrumb
+    Then I expect that the url is "https://www.nice.org.uk/"
+
+  Scenario: Homepage breadcrumb
+    When I click the CKS breadcrumb
+    Then I expect that the path is "/"
+
+  Scenario: Topics A to Z breadcrumb
+    When I click the Topics A to Z breadcrumb
+    Then I expect that the path is "/topics/"
+
+  Scenario: Heading text
+    Then I expect that element "h1" matches the text "Asthma"
+
+  Scenario: Chapter navigation
+    When I click the "Have I got the right topic?" link
+    And I expect that the path is "/topics/asthma/have-i-got-the-right-topic/"
+
+
+
diff --git a/functional-tests/features/topicsListPage.feature b/functional-tests/features/topicsListPage.feature
@@ -14,11 +14,11 @@ Feature: Topics List Page
     Then the page should have no accessibility issues
 
   Scenario: NICE breadcrumb
-    When I click the "NICE" breadcrumb
+    When I click the NICE breadcrumb
     Then I expect that the url is "https://www.nice.org.uk/"
 
   Scenario: Homepage breadcrumb
-    When I click the "CKS" breadcrumb
+    When I click the CKS breadcrumb
     Then I expect that the path is "/"
 
   Scenario: Heading text

diff --git a/functional-tests/steps/given.js b/functional-tests/steps/given.js
@@ -6,12 +6,15 @@ import waitFor from "@nice-digital/wdio-cucumber-steps/lib/support/action/waitFo
 
 import closeGlobalNavCookieMessage from "../support/action/closeGlobalNavCookieMessage";
 import closeGlobalNavCovidMessage from "../support/action/closeGlobalNavCovidMessage";
+import waitForReact from "../support/action/waitForReact";
 
 import { getPath } from "../support/pagePaths";
 
 Given(/^I open the (.*) page$/, (pageName) => {
 	openWebsite("url", getPath(pageName));
 
+	waitForReact();
+
 	// We don't care about the global nav banners and they just add noise, so close them
 	closeGlobalNavCovidMessage();
 	closeGlobalNavCookieMessage();

diff --git a/functional-tests/steps/when.js b/functional-tests/steps/when.js
@@ -39,7 +39,7 @@ When(/^I click "([^"]*)" in the autocomplete options$/, (text) => {
 	);
 });
 
-When(/^I click the "([^"]*)" breadcrumb$/, (breadcrumbText) => {
+When(/^I click the ([^"]*) breadcrumb$/, (breadcrumbText) => {
 	const pageTitle = browser.getTitle(),
 		breadcrumbsListSelector = getSelector("breadcrumbs list");
 

diff --git a/functional-tests/support/action/closeGlobalNavCovidMessage.js b/functional-tests/support/action/closeGlobalNavCovidMessage.js
@@ -1,6 +1,9 @@
 module.exports = (text) => {
 	const aside = $("aside");
 	if (aside.isExisting("button=Close")) {
-		aside.$("button=Close").click();
+		// Avoid "Element is not clickable at point" errors by calling click in the browser directly
+		browser.execute(() => {
+			document.querySelector("aside button").click();
+		});
 	}
 };
diff --git a/functional-tests/support/action/waitForReact.js b/functional-tests/support/action/waitForReact.js
@@ -0,0 +1,16 @@
+/**
+ * Waits for the client side React code to be downloaded, parsed and executed by
+ * checking for an attribute rendered by react-helmet.
+ *
+ * Use this method to wait for the page to be interactive.
+ */
+module.exports = (timeoutMs = 5000) => {
+	browser.waitUntil(
+		() =>
+			browser.execute(
+				() => !!document.documentElement.getAttribute("data-react-helmet")
+			).value,
+		timeoutMs,
+		"JavaScript React bundle not loaded"
+	);
+};
diff --git a/functional-tests/support/action/waitForScrollToElement.js b/functional-tests/support/action/waitForScrollToElement.js
@@ -9,7 +9,7 @@ import windowIsScrolledToBottom from "./windowIsScrolledToBottom";
  * @param {String} selector
  * @param {Number} timeoutMs Timeout for waiting, in milliseconds
  */
-module.exports = (selector, timeoutMs = 2000) => {
+module.exports = (selector, timeoutMs = 5000) => {
 	browser.waitUntil(
 		() => isAtTopOfScreen(selector) || windowIsScrolledToBottom(),
 		timeoutMs,

diff --git a/functional-tests/support/action/waitForTitleToChange.js b/functional-tests/support/action/waitForTitleToChange.js
@@ -1,3 +1,7 @@
-module.exports = (oldTitle) => {
-	browser.waitUntil(() => browser.getTitle() !== oldTitle);
+module.exports = (oldTitle, timeoutMs = 5000) => {
+	browser.waitUntil(
+		() => browser.getTitle() !== oldTitle,
+		timeoutMs,
+		`Page title was still '${oldTitle}' after ${timeoutMs}ms`
+	);
 };
diff --git a/functional-tests/support/pagePaths.js b/functional-tests/support/pagePaths.js
@@ -7,6 +7,9 @@ export const pagePaths = {
 	"allergies speciality": "/specialities/allergies/",
 	"what's new": "/whats-new/",
 	"topics list": "/topics/",
+	"asthma topic": "/topics/asthma/",
+	"asthma have I got the right topic?":
+		"/topics/asthma/have-i-got-the-right-topic/",
 	"achilles tendinopathy topic": "/topics/achilles-tendinopathy/",
 };
 

diff --git a/gatsby/gatsby-config.js b/gatsby/gatsby-config.js
@@ -46,6 +46,9 @@ module.exports = {
 				],
 			},
 		},
+		// Gatsby loads a single CSS bundle by default (see https://github.com/gatsbyjs/gatsby/issues/11072#issue-399193885).
+		// But we want per-page chunks to minimize size, so use this plugin to split into separate chunks:
+		"gatsby-plugin-split-css",
 		{
 			resolve: `gatsby-source-cks`,
 			options: {

diff --git a/gatsby/jest.config.js b/gatsby/jest.config.js
@@ -4,7 +4,11 @@ module.exports = {
 	},
 	preset: "ts-jest",
 	collectCoverage: process.env.TEAMCITY_VERSION ? true : false,
-	collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}", "!**/node_modules/**"],
+	collectCoverageFrom: [
+		"src/**/*.{js,jsx,ts,tsx}",
+		"!**/node_modules/**",
+		"!src/graphql-fragments/**",
+	],
 	testResultsProcessor: "jest-teamcity-reporter",
 	moduleFileExtensions: ["js", "jsx", "ts", "tsx"],
 	moduleDirectories: ["node_modules", "utils", __dirname],