Use docker for regression in dev

.circleci/config.yml

@@ -52,12 +52,11 @@ jobs:
 
   visual regression:
     docker:
-      - image: alekzonder/puppeteer:latest
-        user: pptruser
+      - image: docker/compose
     steps:
       - checkout
-      - run: yarn --frozen-lockfile
-      - run: yarn cosmos & (npx wait-on http://localhost:5000 && yarn run visual-regression)
+      - setup_remote_docker
+      - run: docker-compose run -e "CI=true" regression
       - store_artifacts:
           path: src/panel/__image_snapshots__/__diff_output__/
 

docker-compose.yml

@@ -0,0 +1,25 @@
+version: "3"
+services:
+  cosmos:
+    image: alekzonder/puppeteer:latest
+    working_dir: /app
+    volumes:
+      - .:/app
+      - node_modules:/app/node_modules
+    entrypoint: /bin/sh -c
+    command:
+      - yarn --frozen-lockfile && yarn cosmos
+  regression:
+    image: alekzonder/puppeteer:latest
+    working_dir: /app
+    volumes:
+      - .:/app
+      - node_modules:/app/node_modules
+    entrypoint: ["/bin/bash", "-c"]
+    command:
+      - npx wait-on http://cosmos:5000 && yarn run visual-regression-exec
+    depends_on:
+      - cosmos
+
+volumes:
+  node_modules:

package.json

@@ -10,7 +10,8 @@
     "lint": "eslint --ext .ts,.tsx src",
     "firefox:lint": "cd dist && web-ext lint",
     "test": "jest --testPathIgnorePatterns visual-regression",
-    "visual-regression": "jest visual-regression",
+    "visual-regression": "./regression.sh",
+    "visual-regression-exec": "jest visual-regression",
     "prettier-check": "prettier -c src/** README.md",
     "changelog": "docker run -it --rm -v \"$(pwd)\":/usr/local/src/your-app ferrarimarco/github-changelog-generator -u FormidableLabs -p urql-devtools"
   },

regression.sh

@@ -0,0 +1,2 @@
+#!/bin/sh
+docker-compose run regression "npx wait-on http://cosmos:5000 && yarn run visual-regression-exec $@"

src/panel/visual-regression.test.ts

@@ -7,32 +7,41 @@ let fixtures: { id: string; url: string }[];
 let browser: puppeteer.Browser;
 
 beforeAll(async () => {
-  browser = await puppeteer.launch({ args: ["--font-render-hinting=none"] });
-  fixtures = (await getFixtureUrls({ cosmosConfig: detectCosmosConfig() })).map(
-    url => ({
+  try {
+    browser = await puppeteer.launch({ args: ["--no-sandbox"] });
+    fixtures = (
+      await getFixtureUrls({ cosmosConfig: detectCosmosConfig() })
+    ).map(url => ({
       id: url.replace(/.*?fixtureId\=/, ""),
-      url: `http://${url.replace("?fixtureId", "_renderer.html?_fixtureId")}`
-    })
-  );
+      url: `http://${url
+        .replace("?fixtureId", "_renderer.html?_fixtureId")
+        .replace("localhost", "cosmos")}`
+    }));
+  } catch (err) {
+    console.error(err);
+  }
 
   jest.setTimeout(60000);
 });
 
 afterAll(async () => {
-  await browser.close();
+  browser && (await browser.close());
 });
 
 describe("Fixtures", () => {
   it("matches image snapshot", async () => {
     for (const { id, url } of fixtures) {
       const page = await browser.newPage();
       await page.goto(url, { waitUntil: "domcontentloaded" });
-      await page.evaluateHandle("document.fonts.ready");
+      await delay(200);
       const image = await page.screenshot();
       expect(image).toMatchImageSnapshot({
-        customSnapshotIdentifier: id
+        customSnapshotIdentifier: id,
+        failureThreshold: 0.01
       });
       await page.close();
     }
   }, 120000);
 });
+
+const delay = (t: number) => new Promise(resolve => setTimeout(resolve, t));