devtools: config and scripts for frontend testing

Adds dependencies, configuration, and scripts for frontend
e2e and unit testing. Test examples to follow this change.

Change-Id: Ia3d246abfcc1411d5b00ca7e23829f1ede6e7207
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/280600
Reviewed-by: Jonathan Amsterdam <jba@google.com>
Reviewed-by: Julie Qiu <julie@golang.org>
Trust: Jamal Carvalho <jamal@golang.org>

devtools/config/Dockerfile.npm

@@ -4,6 +4,26 @@
 
 FROM node:14.15.1
 
+# Install latest chrome dev package and fonts to support major charsets (Chinese, Japanese, Arabic,
+# Hebrew, Thai and a few others)
+# Note: this installs the necessary libs to make the bundled version of Chromium that Puppeteer
+# installs, work.
+RUN apt-get update \
+  && apt-get install -y wget gnupg \
+  && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
+  && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
+  && apt-get update \
+  && apt-get install -y \
+  google-chrome-stable \
+  fonts-ipafont-gothic \
+  fonts-wqy-zenhei \
+  fonts-thai-tlwg \
+  fonts-kacst \
+  fonts-freefont-ttf \
+  libxss1 \
+  --no-install-recommends \
+  && rm -rf /var/lib/apt/lists/*
+
 WORKDIR /pkgsite
 
 ENTRYPOINT [ "npm" ]

devtools/config/docker-compose.yaml

@@ -8,11 +8,13 @@ services:
     build:
       context: ../../
       dockerfile: devtools/config/Dockerfile.npm
+    environment:
+      FRONTEND_URL: http://host.docker.internal:8080
     image: pkgsite_npm
     init: true
     volumes:
       - ../..:/pkgsite
       # Mounts empty volumes in place of git directories so they can't
-      # be written to during npm package installs. 
+      # be written to during npm package installs.
       - /pkgsite/.git
       - /pkgsite/private/.git

devtools/config/jest.config.js

@@ -0,0 +1,6 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+  preset: 'ts-jest',
+  rootDir: '../../',
+  testEnvironment: 'node',
+};

package.json

@@ -7,24 +7,35 @@
   "private": true,
   "scripts": {
     "lint": "run-s --continue-on-error \"lint-* -- {1}\" -- ",
-    "lint-js": "eslint . --ext .ts,.js",
+    "lint-js": "eslint . --ext .ts",
     "lint-css": "stylelint **/*.css",
-    "license-check": "jsgl --local ."
+    "license-check": "jsgl --local .",
+    "test-typecheck": "tsc --noEmit",
+    "test-unit": "jest --config devtools/config/jest.config.js content",
+    "test-e2e": "jest --config devtools/config/jest.config.js e2e",
+    "test": "run-s test-*"
   },
   "dependencies": {
+    "@types/jest": "26.0.16",
+    "@types/jest-image-snapshot": "4.1.3",
+    "@types/puppeteer": "5.4.0",
     "@typescript-eslint/eslint-plugin": "4.5.0",
     "@typescript-eslint/parser": "4.5.0",
     "eslint": "7.12.0",
     "eslint-config-prettier": "6.14.0",
-    "eslint-plugin-jest": "^24.1.3",
-    "eslint-plugin-prettier": "^3.3.0",
-    "js-green-licenses": "^2.0.1",
+    "eslint-plugin-jest": "24.1.3",
+    "eslint-plugin-prettier": "3.3.0",
+    "jest": "26.6.3",
+    "jest-image-snapshot": "4.2.0",
+    "js-green-licenses": "2.0.1",
     "npm-run-all": "4.1.5",
     "prettier": "2.1.2",
+    "puppeteer": "5.5.0",
     "stylelint": "13.8.0",
     "stylelint-config-prettier": "8.0.2",
     "stylelint-config-recommended": "3.0.0",
     "stylelint-prettier": "1.1.2",
+    "ts-jest": "26.4.4",
     "typescript": "4.0.3"
   }
 }