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);
+}