Add visual regression testing and a11y testing with Pa11y

.babelrc

@@ -1,6 +1,15 @@
 {
     "presets": [
-        "@babel/preset-env", "@babel/preset-react"
+        "@babel/preset-env",
+        "@babel/preset-react"
     ],
-    "plugins": ["babel-plugin-styled-components"]
+    "plugins": [
+        "babel-plugin-styled-components",
+        [
+            "@babel/plugin-transform-runtime",
+            {
+              "regenerator": true
+            }
+        ]
+    ]
 }

.gitignore

@@ -1,3 +1,11 @@
+# Built files
 dist
+
+# Node modules
 node_modules
-src/__snapshots__
+
+# Testing output
+coverage/
+src/__snapshots__
+__tests__/__snapshots__
+__tests__/__image_snapshots__

.pa11yci

@@ -0,0 +1,8 @@
+{
+  "defaults": {
+    "timeout": 5000
+  },
+  "urls": [
+    "http://localhost:8080"
+  ]
+}

__tests__/index.test.js

@@ -0,0 +1,24 @@
+/* eslint-env jest */
+import { setup, teardown, getFile } from '../jest/test.utils'
+
+let chromeless = null
+
+beforeAll(() => { chromeless = setup() })
+afterAll(async () => { await teardown(chromeless) })
+
+test('+++ home renders correctly (visual)', async () => {
+  const screenshotPath = await chromeless.goto(global.config.baseUrl).wait('button').screenshot()
+  const screenshot = await getFile(screenshotPath)
+  const customDiffConfig = {
+    composeLeftToRight: true,
+  }
+  expect(screenshot).toMatchImageSnapshot({ customDiffConfig })
+})
+
+test('+++ home renders correctly', async () => {
+  const html = await chromeless
+    .goto(global.config.baseUrl)
+    .wait('button')
+    .evaluate(() => document.querySelector('button').innerHTML)
+  expect(html).toMatchSnapshot()
+})

jest/setup.js

@@ -0,0 +1,6 @@
+global.config = {
+    chromeless: {
+      launch: false,
+    },
+    baseUrl: 'http://localhost:8080',
+}

jest/test.utils.js

@@ -0,0 +1,42 @@
+/* eslint-env jest */
+import { Chromeless } from 'chromeless'
+import { toMatchImageSnapshot } from 'jest-image-snapshot'
+import * as fs from 'fs'
+import request from 'request'
+
+export const setup = () => {
+  jest.setTimeout(10000)
+  expect.extend({ toMatchImageSnapshot })
+  return new Chromeless(global.config.chromeless)
+}
+
+export const teardown = async chromeless => {
+  try {
+    await chromeless.end()
+  } catch (err) {
+    console.log(err)
+  }
+}
+
+const download = uri =>
+  new Promise((resolve, reject) => {
+    request(
+      {
+        url: uri,
+        method: 'GET',
+        encoding: null,
+      },
+      (error, response, body) => {
+        if (!error && response.statusCode === 200) {
+          resolve(body)
+        } else {
+          reject(error)
+        }
+      },
+    )
+  })
+
+export const getFile = path => (path.startsWith('https://')
+  ? download(path)
+  : Promise.resolve(fs.readFileSync(path))
+)