Create visual regression tests (ovidiuch#93)

.circleci/config.yml

@@ -0,0 +1,23 @@
+version: 2.1
+jobs:
+  test:
+    docker:
+      - image: buildkite/puppeteer:v3.0.4
+    steps:
+      - run: apt-get update && apt-get install -y curl
+      - run: curl -s https://packagecloud.io/install/repositories/github/git-lfs/script.deb.sh | bash && apt-get install -y git-lfs
+      - checkout
+      - run: yarn --frozen-lockfile
+      - run: yarn flow
+      - run: yarn lint
+      - run: yarn test --maxWorkers=2
+      - run:
+          command: yarn cosmos
+          background: true
+      - run: yarn test:visual --maxWorkers=2
+      - store_artifacts:
+          path: web/__image_snapshots__/__diff_output__
+workflows:
+  flatris:
+    jobs:
+      - test

.eslintrc.js

@@ -9,7 +9,8 @@ module.exports = {
   plugins: ['react', 'flowtype'],
   env: {
     es6: true,
-    'shared-node-browser': true
+    'shared-node-browser': true,
+    jest: true
   },
   settings: {
     'import/resolver': {
@@ -18,7 +19,11 @@ module.exports = {
   },
   globals: {
     global: true,
-    process: true
+    process: true,
+    page: true,
+    browser: true,
+    context: true,
+    jestPuppeteer: true
   },
   rules: {
     'no-console': 'off',
@@ -29,7 +34,9 @@ module.exports = {
       files: [
         '.eslintrc.js',
         'babel.config.js',
+        'jest-puppeteer.config.js',
         'jest.config.js',
+        'jest.visual.config.js',
         'jest.framework-setup.js',
         'web/next.config.js',
         'server/**/*.js'
@@ -56,7 +63,11 @@ module.exports = {
       }
     },
     {
-      files: ['**/__fixtures__/**/*.js']
+      files: ['web/visualtest.js'],
+      env: {
+        browser: true,
+        node: true
+      }
     }
   ]
 };

.gitattributes

@@ -0,0 +1 @@
+web/__image_snapshots__/*.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,6 +1,6 @@
 [![Flatris](flatris.png)](https://flatris.space/)
 
-[![Build Status](https://travis-ci.org/skidding/flatris.svg?branch=master)](https://travis-ci.org/skidding/flatris)
+[![CircleCI Status](https://circleci.com/gh/skidding/flatris.svg?style=shield)](https://circleci.com/gh/skidding/flatris)
 
 > **Work in progress:** Flatris has been recently redesigned from the ground up and turned into a multiplayer game with both UI and server components. This has been an interesting journey and I plan to document the architecture in depth. **[Stay tuned](https://twitter.com/skidding)**.
 

docker-compose.yml

@@ -0,0 +1,25 @@
+version: '3'
+services:
+  cosmos:
+    image: buildkite/puppeteer:v3.0.4
+    working_dir: /app
+    volumes:
+      - .:/app
+      - node_modules:/app/node_modules/
+    entrypoint: /bin/sh -c
+    command:
+      - yarn --frozen-lockfile && yarn cosmos
+  regression:
+    image: buildkite/puppeteer:v3.0.4
+    working_dir: /app
+    volumes:
+      - .:/app
+      - node_modules:/app/node_modules
+    entrypoint: /bin/sh -c
+    command:
+      - npx wait-on http://cosmos:5000 && COSMOS_HOSTNAME=cosmos yarn test:visual
+    depends_on:
+      - cosmos
+
+volumes:
+  node_modules: