GitHub Action to test generated template changes

.github/workflows/test-template-changes.yml

@@ -0,0 +1,51 @@
+######################################
+## Custom Web Almanac GitHub action ##
+######################################
+#
+# This Action generated the dynamic templates. It also then takes a copy
+# of the templates folder, and then checks out main branch and regenerates the
+# templates and compares the two. If run from a pull request it adds a comment
+# showing the diffs.
+#
+# Note it does not run a full test of the website as that will be completed by
+# the test_website.yml GitHub Action.
+#
+# This Action is useful to check impact of dependency upgrades (e.g. if
+# prettier version change results in different HTML being generated), since we
+# do not store generated templates in Git and so cannot otherwise see these
+# changes. Changes can then be accepted or investigated further before merging.
+#
+name: Test Template Changes
+on:
+  workflow_dispatch:
+  pull_request:
+    paths:
+      - '**/package.json'
+      - '**/package-lock.json'
+jobs:
+  build:
+    name: Build and Test Template Changes
+    runs-on: ubuntu-latest
+    if: github.repository == 'HTTPArchive/almanac.httparchive.org'
+    steps:
+    - name: Checkout branch
+      uses: actions/[email protected]
+      with:
+        fetch-depth: 0
+    - name: Setup Node.js for use with actions
+      uses: actions/[email protected]
+      with:
+        node-version: 12.x
+    - name: Test Template Changes
+      id: test-template-changes
+      run: ./src/tools/scripts/test_template_changes.sh
+    - name: 'Comment PR'
+      uses: actions/[email protected]
+      if: github.event_name == 'pull_request' && env.PR_COMMENT != ''
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        script: |
+          const { issue: { number: issue_number }, repo: { owner, repo }  } = context;
+          // Unescape any escaped comments so code blocks appear correctly
+          const pr_comment = process.env.PR_COMMENT.replace(/%0A/g,'\n').replace(/%0D/g,'\r').replace(/%25/g,'%');
+          github.issues.createComment({ issue_number, owner, repo, body: pr_comment });

src/package.json

@@ -20,14 +20,14 @@
     "deploy": "./tools/scripts/deploy.sh"
   },
   "devDependencies": {
-    "ejs": "^3.1.5",
-    "fs-extra": "^9.0.1",
-    "jsdom": "^16.4.0",
-    "prettier": "^2.1.1",
-    "recursive-readdir": "^2.2.2",
-    "showdown": "^1.9.1",
-    "web-vitals": "^0.2.4",
-    "node-fetch": "^2.6.0",
-    "xml-js": "^1.6.11"
+    "ejs": "3.1.5",
+    "fs-extra": "9.0.1",
+    "jsdom": "16.4.0",
+    "prettier": "2.1.1",
+    "recursive-readdir": "2.2.2",
+    "showdown": "1.9.1",
+    "web-vitals": "0.2.4",
+    "node-fetch": "2.6.0",
+    "xml-js": "1.6.11"
   }
 }

src/tools/scripts/test_template_changes.sh

@@ -0,0 +1,69 @@
+#!/bin/bash
+
+######################################
+## Custom Web Almanac script        ##
+######################################
+#
+# This script installs all the required dependencies needed to run the
+# Web Almanac website providing you have python and node installed.
+#
+# It also runs our tests to ensure the website is working for all pages.
+#
+# It is used by various GitHub actions to build and test the site.
+#
+
+# exit when any command fails instead of trying to continue on
+set -e
+
+TEMP_TEMPLATES_DIRECTORY=templates_new
+DIFF_FILENAME=/tmp/template_differences.txt
+
+# This script must be run from src directory
+if [ -d "src" ]; then
+  cd src
+fi
+
+if [ -d "${TEMP_TEMPLATES_DIRECTORY}" ]; then
+  echo "${TEMP_TEMPLATES_DIRECTORY} already exists. Exiting"
+  exit 1
+fi
+
+echo "Installing node modules"
+npm install
+
+echo "Building website"
+npm run generate
+
+echo "Backing up templates"
+cp -r templates "${TEMP_TEMPLATES_DIRECTORY}"
+
+echo "Checkout main branch"
+git checkout main
+
+echo "Reinstalling node modules"
+rm -rf node_modules
+npm install
+
+echo "Building website"
+npm run generate
+
+echo "Diff the two folders"
+#Don't fail if there are differences so turn that check off that temporarily
+set +e
+diff -r templates "${TEMP_TEMPLATES_DIRECTORY}" > "${DIFF_FILENAME}"
+set -e
+
+echo "Differences:"
+cat "${DIFF_FILENAME}"
+
+NUM_DIFFS=$(wc -l < "${DIFF_FILENAME}")
+if [ "${NUM_DIFFS}" -ne "0" ]; then
+  ESCAPED_OUTPUT=$(sed -e ':a' -e 'N' -e '$!ba' -e 's/\n/%0A/g' -e 's/\r/%0D/g' -e 's/\%/%25/g' "${DIFF_FILENAME}")
+  PR_COMMENT="Please note, that the following diffs happen in the templates on this branch compared to main:%0A\`\`\`%0A${ESCAPED_OUTPUT}%0A\`\`\`%0A"
+  echo "::set-env name=PR_COMMENT::${PR_COMMENT}"
+fi
+
+echo "Removing templates backup"
+rm -rf "${TEMP_TEMPLATES_DIRECTORY}"
+
+echo "Comparison complete"