test: add visual regression tests (#6)

.travis.yml

@@ -13,3 +13,4 @@ script:
 - npm run size
 - npm run lint
 - npm test
+- npm run test:visual

package.json

@@ -50,7 +50,9 @@
     "size": "npm run build && size-limit",
     "start": "web-dev-server --app-index dist/index.html --open",
     "styles": "node ./scripts/build-styles.js",
-    "test": "wtr src/test/*.ts",
+    "test": "wtr src/test/*.ts --coverage",
+    "test:visual": "wtr src/test/visual/*.ts",
+    "test:update": "UPDATE_REFS=true wtr src/test/visual/*.ts",
     "watch": "tsc-watch"
   },
   "husky": {
@@ -101,13 +103,14 @@
     "@open-wc/testing-helpers": "~1.7.2",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@size-limit/preset-small-lib": "^4.5.7",
+    "@types/sinon": "^9.0.5",
     "@typescript-eslint/eslint-plugin": "^4.0.1",
     "@typescript-eslint/parser": "^4.0.1",
-    "@types/sinon": "^9.0.5",
-    "@web/dev-server-esbuild": "^0.2.4",
     "@web/dev-server": "^0.0.5",
+    "@web/dev-server-esbuild": "^0.2.4",
     "@web/rollup-plugin-copy": "^0.1.1",
     "@web/test-runner": "^0.7.17",
+    "@web/test-runner-visual-regression": "^0.1.5",
     "eslint": "^7.8.1",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",

src/test/visual/visual.test.ts

@@ -0,0 +1,28 @@
+import { visualDiff } from '@web/test-runner-visual-regression';
+import { fixture } from '@open-wc/testing-helpers';
+import '../../hex-color-picker.js';
+import '../../hsl-color-picker.js';
+import '../../hsl-string-color-picker.js';
+import '../../hsv-color-picker.js';
+import '../../rgb-color-picker.js';
+import '../../rgb-string-color-picker.js';
+
+describe('visual tests', () => {
+  let picker: HTMLElement;
+
+  ['hex', 'hsl', 'hsl-string', 'hsv', 'rgb', 'rgb-string'].forEach((type) => {
+    describe(`${type}-color-picker`, () => {
+      beforeEach(async () => {
+        picker = await fixture(`
+          <div style="display: flex; justify-content: center; width: 216px; padding: 8px">
+            <${type}-color-picker></${type}-color-picker>
+          </div>
+        `);
+      });
+
+      it('should match screenshot', async () => {
+        await visualDiff(picker, type);
+      });
+    });
+  });
+});

web-test-runner.config.js

@@ -1,9 +1,15 @@
 const { esbuildPlugin } = require('@web/dev-server-esbuild');
+const { visualRegressionPlugin } = require('@web/test-runner-visual-regression/plugin');
 
 module.exports = {
   nodeResolve: true,
-  plugins: [esbuildPlugin({ ts: true })],
-  coverage: true,
+  plugins: [
+    esbuildPlugin({ ts: true }),
+    visualRegressionPlugin({
+      baseDir: 'src/test/visual/screenshots',
+      update: process.env.UPDATE_REFS === 'true'
+    })
+  ],
   coverageConfig: {
     threshold: {
       statements: 99,