Get Screenshot tests working in CI (#967)

* Use GitHub Actions only

This retires Travis, and starts upload screenshot diffs when integration
tests fail.

* Use screenshots that match CI font rendering

* Run tests on Node 12

.github/workflows/ia-integration-tests.yml

@@ -21,3 +21,8 @@ jobs:
           node ./index.js
         env:
           CI: true
+      - uses: actions/upload-artifact@v1
+        if: failure()
+        with:
+          name: error
+          path: experiments/archive-org-integration-tests/error.png

.github/workflows/nodejs.yml

@@ -3,7 +3,7 @@ name: CI
 on: [push]
 
 jobs:
-  build:
+  build-and-test:
     runs-on: ubuntu-latest
 
     strategy:
@@ -16,9 +16,35 @@ jobs:
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
-      - name: Run Tests
+      - name: Install Dependencies
+        run: yarn
+      - name: Lint
         run: |
-          yarn
-          yarn travis-tests
+          yarn lint
+          yarn type-check
+      - name: Build
+        run: |
+          yarn build
+          yarn build-library
+      - name: Run Unit Tests
+        run: yarn test
+      - name: Run Integration Tests
+        run: yarn integration-tests
         env:
           CI: true
+      - name: Upload Screenshot Diffs
+        if: failure()
+        uses: actions/upload-artifact@v1
+        with:
+          name: image_diffs
+          path: js/__tests__/__image_snapshots__/__diff_output__/
+      - name: Generate New Screenshots
+        if: failure()
+        run: |
+          yarn integration-tests -u
+      - name: Upload New Screenshots
+        if: failure()
+        uses: actions/upload-artifact@v1
+        with:
+          name: new_images
+          path: js/__tests__/__image_snapshots__/

.travis.yml

@@ -1,8 +0,0 @@
-language: node_js
-node_js:
-  # Don't use Node 12 while we wait for transitive dependencies to upgrade nan
-  # https://github.com/nodejs/nan/issues/849
-  - lts/*
-  - node
-script: >
-  npm run travis-tests

README.md

@@ -1,4 +1,4 @@
-[![Travis](https://img.shields.io/travis/captbaritone/webamp.svg)](https://travis-ci.org/captbaritone/webamp/) [![Codecov](https://img.shields.io/codecov/c/github/captbaritone/webamp.svg)]() [![Discord](https://img.shields.io/discord/434058775012311061.svg)](https://discord.gg/fBTDMqR)
+[![Discord](https://img.shields.io/discord/434058775012311061.svg)](https://discord.gg/fBTDMqR)
 
 # Webamp
 

js/__tests__/baseline.integration-test.js

@@ -8,7 +8,7 @@ const snapshotOptions = {
   // There are some font rendering issues which prevent us from pushing this lower right now.
   // We could setup some tests which don't render text and set the threshold lower.
   // Ideally we can resolve the font rendering issue.
-  failureThreshold: "0.01",
+  failureThreshold: "0.00",
   failureThresholdType: "percent",
 };
 

package.json

@@ -23,10 +23,9 @@
     "stats": "webpack --config=demo/config/webpack.prod.js --json > stats.json",
     "stats-library": "webpack --config=config/webpack.library.js --json > stats.json",
     "test": "jest --config=config/jest.unit.js",
-    "travis-tests": "npm run lint && npm run test && npm run test && npm run type-check && npm run build && npm run build-library && npm run integration-tests",
     "tdd": "jest --config=config/jest.unit.js --watch",
     "format": "prettier --write \"**/*.{js,ts,tsx,d.ts,css}\"",
-    "integration-tests": "npm run build -- --display=errors-only && jest --config=config/jest.integration.js --runInBand",
+    "integration-tests": "jest --config=config/jest.integration.js --runInBand",
     "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",

scripts/postcss-optimize-data-uri-pngs.test.js

@@ -4,7 +4,7 @@ const postcss = require("postcss");
 const plugin = require("./postcss-optimize-data-uri-pngs");
 
 const css = fs.readFileSync("./css/base-skin.css", "utf8");
-// This seems to timeout a lot on Travis
+// This seems to timeout a lot in CI
 it.skip("does something", async () => {
   const result = await postcss([plugin({})]).process(css);
   expect(result.css.length).toBeLessThan(css.length);