Parallell visual regression (#142)

* Add parralelization * Add cosmos export to build steps * Add env variables for host and port cosmos * Try chmod for node_modules * Try chmod for cosmos-export * Set working dir to /tmp * use workspace for persistence * Revoke workspace (for now) * Add run with cosmos build in parallel * Opt for build and deploy in parallel * Remove chmod * Remove cosmos cache * Try ramdisk * Ramdisk everything * Use root for build process * Try exclusively using root * Wait on for visual regression * Use alpine image
urql-graphql · May 11, 2020 · 5034916 · 5034916
1 parent 74704a2
commit 5034916
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 36 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,92 +1,118 @@
 version: 2
 
-.node_env: &node_env
-  docker:
-    - image: node:13
+.variables:
+  # Cache keys
+  - &node_modules_cache_key node-cache-{{ checksum "yarn.lock" }}-{{ checksum ".circleci/config.yml" }}
+  - &build_cache_key build-cache-{{ .Revision }}
 
-.node_modules_cache: &node_modules_cache
-  restore_cache:
-    keys:
-      - node-cache-{{ checksum "yarn.lock" }}-{{ checksum ".circleci/config.yml" }}
+  # Restore cache
+  - &restore_node_modules_cache
+    restore_cache:
+      keys:
+        - *node_modules_cache_key
+  - &restore_build_cache
+    restore_cache:
+      keys:
+        - *build_cache_key
 
-.build_cache: &build_cache
-  restore_cache:
-    keys:
-      - build-cache-{{ .Revision }}
+  # Environments
+  - &node_image node:13
+  - &ramdisk
+    working_directory: /mnt/ramdisk
+  - &node_env
+    docker:
+      - image: node:13-alpine
+        user: node
 
 jobs:
   install:
     <<: *node_env
+    <<: *ramdisk
     steps:
       - checkout
-      - *node_modules_cache
+      - *restore_node_modules_cache
       - run:
           name: Check for dependencies
           command: "([[ -d node_modules ]] && circleci-agent step halt) || exit 0"
       - run: yarn install --frozen-lockfile
       - save_cache:
-          key: node-cache-{{ checksum "yarn.lock" }}-{{ checksum ".circleci/config.yml" }}
+          key: *node_modules_cache_key
           paths:
-            - "node_modules"
+            - node_modules
 
   lint:
     <<: *node_env
+    <<: *ramdisk
     steps:
       - checkout
-      - *node_modules_cache
+      - *restore_node_modules_cache
       - run: yarn run lint
 
   prettier:
     <<: *node_env
+    <<: *ramdisk
     steps:
       - checkout
-      - *node_modules_cache
+      - *restore_node_modules_cache
       - run: yarn run lint:prettier
 
   test:
     <<: *node_env
+    <<: *ramdisk
     steps:
       - checkout
-      - *node_modules_cache
+      - *restore_node_modules_cache
       - run: TZ=Europe/London yarn run test --coverage
 
   visual regression:
-    machine:
-      image: ubuntu-1604:201903-01
+    <<: *ramdisk
+    docker:
+      - image: alekzonder/puppeteer:latest
+        user: node
+        environment:
+          COSMOS_HOST: localhost
+          COSMOS_PORT: 5000
+    parallelism: 4
     steps:
       - checkout
-      - run: ./scripts/regression.sh --ci
+      - *restore_node_modules_cache
+      - run:
+          command: yarn cosmos
+          background: true
+      - run: sleep 5 && yarn run visual-regression:exec
       - store_artifacts:
           path: src/panel/__image_snapshots__/__diff_output__/
 
   build:
     <<: *node_env
+    <<: *ramdisk
     steps:
       - checkout
-      - *node_modules_cache
-      - run: apt-get update && apt-get -y install zip
+      - *restore_node_modules_cache
       - run: yarn run build
       - run: yarn run bundle
       - save_cache:
-          key: build-cache-{{ .Revision }}
+          key: *build_cache_key
           paths:
-            - "dist"
-            - "extension.zip"
+            - dist
+            - extension.zip
       - store_artifacts:
           path: extension.zip
       - store_artifacts:
           path: dist/electron
 
   lint firefox:
     <<: *node_env
+    <<: *ramdisk
     steps:
       - checkout
-      - *node_modules_cache
-      - *build_cache
+      - *restore_node_modules_cache
+      - *restore_build_cache
       - run: yarn run lint:firefox
 
   verify version:
     <<: *node_env
+    <<: *ramdisk
     steps:
       - checkout
       - run:
@@ -95,11 +121,12 @@ jobs:
             (sed -n '3p' CHANGELOG.md | grep -i $CIRCLE_TAG) && echo "Version documented in changelog" || (echo "Version not documented in changelog" && exit 1)
 
   deploy chrome:
+    <<: *ramdisk
     docker:
       - image: cibuilds/chrome-extension
     steps:
       - checkout
-      - *build_cache
+      - *restore_build_cache
       - run:
           command: |
             ACCESS_TOKEN=$(curl --fail "https://www.googleapis.com/oauth2/v4/token" -d "client_id=${CLIENT_ID}&client_secret=${CLIENT_SECRET}&refresh_token=${REFRESH_TOKEN}&grant_type=refresh_token" | jq -r .access_token)
@@ -108,10 +135,11 @@ jobs:
 
   deploy firefox:
     <<: *node_env
+    <<: *ramdisk
     steps:
       - checkout
-      - *node_modules_cache
-      - *build_cache
+      - *restore_node_modules_cache
+      - *restore_build_cache
       - run:
           command: |
             cd dist/extension
@@ -120,10 +148,11 @@ jobs:
 
   deploy npm:
     <<: *node_env
+    <<: *ramdisk
     steps:
       - checkout
-      - *node_modules_cache
-      - *build_cache
+      - *restore_node_modules_cache
+      - *restore_build_cache
       - run:
           command: |
             npm config set "//registry.npmjs.org/:_authToken" "$npm_TOKEN"

diff --git a/.env b/.env
@@ -1 +1,3 @@
-TZ=Europe/London
+TZ=Europe/London
+COSMOS_HOST=cosmos
+COSMOS_PORT=5000
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -18,8 +18,9 @@ services:
       - .:/app
       - node_modules:/app/node_modules
     environment:
-      - TARGET_HOST=cosmos:5000
       - USER=root
+      - CIRCLE_NODE_TOTAL
+      - CIRCLE_NODE_INDEX
     entrypoint: ["/bin/bash", "-c"]
     command:
       - npx wait-on http://cosmos:5000 && yarn jest --clearCache && yarn run visual-regression:exec

diff --git a/src/panel/visual-regression.test.ts b/src/panel/visual-regression.test.ts
@@ -4,7 +4,8 @@ expect.extend({ toMatchImageSnapshot });
 
 const fixtures = getFixtures2({
   ...detectCosmosConfig(),
-  hostname: "cosmos",
+  hostname: process.env.COSMOS_HOST,
+  port: Number(process.env.COSMOS_PORT),
 }).reduce<[string, FixtureApi][]>(
   (p, c) => [...p, [`${c.fileName} - ${c.name}`, c]],
   []
@@ -15,7 +16,27 @@ beforeAll(async () => {
   jest.setTimeout(60000);
 });
 
-describe.each(fixtures)("%s", (id, { rendererUrl }) => {
+/** Parallelize for CircleCI */
+const parallelize = (arr: any[]) => {
+  try {
+    if (!process.env.CIRCLE_NODE_TOTAL) {
+      throw Error();
+    }
+
+    const total = parseInt(process.env.CIRCLE_NODE_TOTAL);
+    const index = parseInt(process.env.CIRCLE_NODE_INDEX);
+    const interval = Math.round((arr.length * 1) / total);
+
+    const start = index * interval;
+    const end = index === total - 1 ? arr.length + 1 : interval * (index + 1);
+
+    return arr.slice(start, end);
+  } catch (err) {
+    return arr;
+  }
+};
+
+describe.each(parallelize(fixtures))("%s", (id, { rendererUrl }) => {
   it("matches snapshot", async () => {
     await page.goto(rendererUrl, { waitUntil: "load" });
     await page.mouse.move(0, 0);