Add Puppeteer snapshot testing

.eslintrc

@@ -20,6 +20,10 @@
     "es6": true,
     "jest": true
   },
+  "globals": {
+    "page": true,
+    "browser": true
+  },
   "rules": {
     "no-multiple-empty-lines": [
       "error",

config/jest.integration.js

@@ -0,0 +1,6 @@
+module.exports = {
+  displayName: "integration-test",
+  rootDir: "../",
+  preset: "jest-puppeteer",
+  testRegex: "\\.integration-test\\.js$"
+};

jest-puppeteer.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  server: {
+    // Note: We require the the build be run before these tests.
+    // TODO: Figure out how to get this command to run the buil.
+    command: "npm run serve",
+    port: 8080 // Jest Puppeteer will wait 5000ms for this port to come online.
+  }
+};

js/__tests__/baseline.integration-test.js

@@ -0,0 +1,17 @@
+const { toMatchImageSnapshot } = require("jest-image-snapshot");
+
+expect.extend({ toMatchImageSnapshot });
+
+beforeAll(async () => {
+  await page.goto(`http://localhost:8080/#{"disableMarquee":true}`);
+});
+
+it("should render the default skin", async () => {
+  expect(await page.screenshot()).toMatchImageSnapshot();
+});
+
+it("should render the Topaz skin", async () => {
+  expect(page).toUploadFile("#webamp-file-input", "./skins/TopazAmp1-2.wsz");
+  await new Promise(resolve => setTimeout(resolve, 200));
+  expect(await page.screenshot()).toMatchImageSnapshot();
+});

package.json

@@ -22,6 +22,7 @@
     "travis-tests": "npm run test && npm run build && npm run build-library",
     "tdd": "jest --projects config/jest.unit.js --watch",
     "format": "prettier --write experiments/**/*.js js/**/*.js css/**/*.css !css/**/*.min.css",
+    "integration-tests": "npm run build -- --display=errors-only && jest --projects config/jest.integration.js",
     "build-skin": "rm skins/base-2.91.wsz && cd skins/base-2.91 && zip -x .* -x 'Skining Updates.txt' -r ../base-2.91.wsz .",
     "build-skin-png": "rm skins/base-2.91-png.wsz && cd skins/base-2.91-png && zip -x .* -x 'Skining Updates.txt' -r ../base-2.91-png.wsz .",
     "compile-skin": "node scripts/compileSkin.js > css/base-skin.css",
@@ -78,6 +79,8 @@
     "invariant": "^2.2.3",
     "jest": "^23.0.0",
     "jest-mock-random": "^1.0.2",
+    "jest-image-snapshot": "^2.4.1",
+    "jest-puppeteer": "^3.0.1",
     "jest-runner-eslint": "^0.4.0",
     "jsmediatags": "^3.8.1",
     "jszip": "^3.1.3",