build: Add Dockerfile for easily updating snapshots (#1071)

- Updated README to include new instructions on how to update snapshots
- Add snapshots for mac that weren't previously included
- Tested on M1 MacBook Pro
- Fixes #960

Author: mofojed

.dockerignore

@@ -0,0 +1,50 @@
+# Just copy the .gitignore file for files we don't want to copy to the docker image
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.project
+.settings/
+.eslintcache
+.stylelintcache
+lerna-debug.log
+Lerna-Profile-*.json
+
+/public/vs
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+src/**/*.css
+
+tsconfig.tsbuildinfo
+packages/*/package-lock.json
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+# Ignore Dockerfile as well, since we don't need to copy that into the snapshot container
+Dockerfile
+
+# Tests are copied to the docker container, as it modifies them
+/tests

README.md

@@ -114,45 +114,6 @@ npx source-map-explorer 'packages/code-studio/build/static/js/*.js'
 
 ## Updating Snapshots
 
-Snapshots are used by end-to-end tests to visually verify the output. Sometimes changes are made requiring snapshots to be updated. Since snapshots are platform dependent, you may need to use a docker image to [update snapshots for CI](https://playwright.dev/docs/test-snapshots). You mount the current directory into a docker image and re-run the tests from there.
+Snapshots are used by end-to-end tests to visually verify the output. Sometimes changes are made requiring snapshots to be updated. Run snapshots locally to update first, by running `npm run e2e:update-snapshots`.
 
-First start with a clean repo. `node_modules` and some other build output is platform dependent.
-
-```
-npm run clean
-```
-
-Next, start the docker image and open a bash shell inside of it:
-
-```
-docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.28.1-focal /bin/bash
-```
-
-Within the docker image shell, install some build tools that are not included with the image:
-
-```
-apt-get update
-apt-get install build-essential --yes
-```
-
-Next, use nvm to install and use the correct version of node:
-
-```
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
-export NVM_DIR="$HOME/.nvm"
-[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
-nvm install
-```
-
-Install npm dependencies and build the production app, pointing to an API running on your machine:
-
-```
-npm ci
-VITE_CORE_API_URL=http://host.docker.internal:10000/jsapi npm run build
-```
-
-Next, run the tests and update the snapshots:
-
-```
-npm run e2e:update-snapshots
-```
+Once you are satisfied with the snapshots and everything is passing locally, you need to use a docker image to [update snapshots for CI](https://playwright.dev/docs/test-snapshots) (unless you are running the same platform as CI (Ubuntu)). Run `npm run e2e:update-ci-snapshots` to mount the current directory into a docker image and re-run the tests from there. **Note:** You must have [Docker installed](https://docs.docker.com/get-docker/), and `deephaven-core` must already be running on port 10000 on your local machine.

package-lock.json

@@ -10,7 +10,7 @@
     "npm": ">=8"
   },
   "scripts": {
-    "postinstall": "run-s build:necessary",
+    "postinstall": "node ./skip.js || run-s build:necessary",
     "clean:build": "rimraf packages/*/dist packages/*/build",
     "postclean:build": "npm run clean:types",
     "clean:cache": "run-s clean:cache:*",
@@ -49,7 +49,8 @@
     "e2e:codegen": "playwright codegen http://localhost:4000",
     "e2e:headed": "playwright test --project=chromium --headed --debug",
     "e2e:update-snapshots": "playwright test --update-snapshots",
-    "version-bump": "lerna version --conventional-commits --create-release github"
+    "version-bump": "lerna version --conventional-commits --create-release github",
+    "e2e:update-ci-snapshots": "docker build --tag web-client-ui-ci-snapshots --file ./tests/update-ci-snapshots/Dockerfile . && docker run --rm --network host --volume $(pwd)/tests:/work/tests/ web-client-ui-ci-snapshots npm run e2e:update-snapshots -- --config=playwright-ci.config.ts"
   },
   "repository": "https://github.com/deephaven/web-client-ui",
   "devDependencies": {
@@ -67,7 +68,7 @@
     "@deephaven/stylelint-config": "file:../stylelint-config",
     "@deephaven/tsconfig": "file:../tsconfig",
     "@fortawesome/fontawesome-common-types": "^6.1.1",
-    "@playwright/test": "^1.28.1",
+    "@playwright/test": "^1.30.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^14.4.3",
@@ -119,7 +120,7 @@
     "karma-jasmine": "~0.1.5",
     "lerna": "^6.4.1",
     "npm-run-all": "^4.1.5",
-    "playwright": "^1.28.1",
+    "playwright": "^1.30.0",
     "prettier": "2.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

package.json

@@ -0,0 +1,8 @@
+import DefaultConfig from './playwright.config';
+
+const config: PlaywrightTestConfig = {
+  ...DefaultConfig,
+  snapshotDir: '/tests',
+};
+
+export default config;

playwright-ci.config.ts

@@ -0,0 +1,6 @@
+// Script will skip the postinstall script if `SKIP_POSTINSTALL` env variable is set
+if (process.env.SKIP_POSTINSTALL) {
+  process.exit(0);
+} else {
+  process.exit(1);
+}

skip.js

@@ -0,0 +1,70 @@
+# syntax=docker/dockerfile:1
+# Dockerfile for updating the snapshots.
+# Expects to be run with `web-client-ui` root dir mounted in the `/work/` directory, and with the `--network host` flag
+FROM mcr.microsoft.com/playwright:v1.30.0-focal
+WORKDIR /work/
+
+# Update packages list and install some build tools
+RUN set -eux; \
+    apt-get update; \
+    apt-get install build-essential --yes;
+
+# Copy just the .nvmrc first and install nvm/node/npm first as these will change the least often
+# https://docs.docker.com/build/cache/
+COPY .nvmrc .
+
+# Set the default shell so the correct node/npm is used after install
+# https://stackoverflow.com/a/60137919
+SHELL ["/bin/bash", "--login", "-i", "-c"]
+RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
+RUN source /root/.bashrc && nvm install
+SHELL ["/bin/bash", "--login", "-c"]
+
+# Next copy just the package.json and package-lock.json files over so we can install dependencies and cache at this layer
+# Doesn't seem to be an easy way to copy it with a glob and retain the directory structure.
+# Will need to add new packages here when they are created.
+# https://stackoverflow.com/questions/49939960/docker-copy-files-using-glob-pattern#comment106088784_49940132
+COPY package.json package-lock.json skip.js .
+COPY packages/babel-preset/package.json packages/babel-preset/
+COPY packages/chart/package.json packages/chart/
+COPY packages/embed-chart/package.json packages/embed-chart/
+COPY packages/embed-grid/package.json packages/embed-grid/
+COPY packages/filters/package.json packages/filters/
+COPY packages/golden-layout/package.json packages/golden-layout/
+COPY packages/mocks/package.json packages/mocks/
+COPY packages/prettier-config/package.json packages/prettier-config/
+COPY packages/react-hooks/package.json packages/react-hooks/
+COPY packages/tsconfig/package.json packages/tsconfig/
+COPY packages/utils/package.json packages/utils/
+COPY packages/storage/package.json packages/storage/
+COPY packages/dashboard/package.json packages/dashboard/
+COPY packages/stylelint-config/package.json packages/stylelint-config/
+COPY packages/components/package.json packages/components/
+COPY packages/dashboard-core-plugins/package.json packages/dashboard-core-plugins/
+COPY packages/eslint-config/package.json packages/eslint-config/
+COPY packages/jsapi-shim/package.json packages/jsapi-shim/
+COPY packages/iris-grid/package.json packages/iris-grid/
+COPY packages/icons/package.json packages/icons/
+COPY packages/log/package.json packages/log/
+COPY packages/pouch-storage/package.json packages/pouch-storage/
+COPY packages/file-explorer/package.json packages/file-explorer/
+COPY packages/redux/package.json packages/redux/
+COPY packages/jsapi-components/package.json packages/jsapi-components/
+COPY packages/code-studio/package.json packages/code-studio/
+COPY packages/jsapi-utils/package.json packages/jsapi-utils/
+COPY packages/console/package.json packages/console/
+COPY packages/grid/package.json packages/grid/
+
+# Disable the postinstall script, or npm ci will try and build and the files won't be there
+# We don't need the postinstall since we're going to rebuild right after
+# RUN npm pkg set scripts.postinstall="echo no-postinstall"
+RUN SKIP_POSTINSTALL=1 npm ci
+
+# Copy the web-client-ui src folder to the docker image
+# We do this last because the source files are the most likely to change
+# This requires the Dockerfile to be built in the context of the root of the web-client-ui repository
+# https://stackoverflow.com/a/34300129
+COPY . .
+
+# Now build the app. We only need the code-studio built for e2e tests.
+RUN VITE_CORE_API_URL=http://host.docker.internal:10000/jsapi npm run build:app