Merge pull request #407 from NoRedInk/add-percy

Add percy

Makefile

@@ -5,6 +5,7 @@ test: node_modules
 	npx elm-test
 	npx elm-verify-examples --run-tests
 	make axe-report
+	make percy-tests
 
 tests/axe-report.json: public script/run-axe.sh script/axe-puppeteer.js
 	script/run-axe.sh > $@
@@ -13,6 +14,10 @@ tests/axe-report.json: public script/run-axe.sh script/axe-puppeteer.js
 axe-report: tests/axe-report.json script/format-axe-report.sh script/axe-report.jq
 	script/format-axe-report.sh $<
 
+.PHONY: percy-tests
+percy-tests:
+	script/percy-tests.sh
+
 .PHONY: checks
 checks:
 	script/check-exposed.py

package.json

@@ -26,6 +26,7 @@
   },
   "homepage": "https://github.com/NoRedInk/NoRedInk-ui#readme",
   "devDependencies": {
+    "@percy/script": "^1.0.2",
     "browserify": "16.2.3",
     "elm": "^0.19.0-no-deps",
     "elm-format": "0.8.1",

script/percy-tests.js

@@ -0,0 +1,49 @@
+const PercyScript = require('@percy/script')
+
+PercyScript.run(async (page, percySnapshot) => {
+  await page.goto('http://localhost:8000/')
+  // ensure the page has loaded before capturing a snapshot
+  await page.waitFor('#categories')
+
+  await page.goto('http://localhost:8000/#category/Animations')
+  await percySnapshot('Animations')
+
+  await page.goto('http://localhost:8000/#category/Buttons')
+  await percySnapshot('Buttons')
+
+  await page.goto('http://localhost:8000/#category/Colors')
+  await percySnapshot('Colors')
+
+  await page.goto('http://localhost:8000/#category/Icons')
+  await percySnapshot('Icons')
+
+  await page.goto('http://localhost:8000/#category/Inputs')
+  await percySnapshot('Inputs')
+
+  await page.goto('http://localhost:8000/#category/Layout')
+  await percySnapshot('Layout')
+
+  await page.goto('http://localhost:8000/#category/Modals')
+  await percySnapshot('Modals')
+  await page.click('#launch-info-modal')
+  await percySnapshot('Full Info Modal')
+  await page.click('[aria-label="Close modal"]')
+  await page.click('#launch-warning-modal')
+  await percySnapshot('Full Warning Modal')
+  await page.click('[aria-label="Close modal"]')
+
+  await page.goto('http://localhost:8000/#category/Pages')
+  await percySnapshot('Pages')
+
+  await page.goto('http://localhost:8000/#category/Tables')
+  await percySnapshot('Tables')
+
+  await page.goto('http://localhost:8000/#category/Text')
+  await percySnapshot('Text')
+
+  await page.goto('http://localhost:8000/#category/Widgets')
+  await percySnapshot('Widgets')
+
+  await page.goto('http://localhost:8000/#category/Messaging')
+  await percySnapshot('Messaging')
+})

script/percy-tests.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+# start a web server in the background and tear it down when exiting
+./script/serve.sh public &
+SERVER_PID=$!
+cleanup() {
+    kill "$SERVER_PID"
+}
+trap cleanup EXIT INT
+
+npx percy exec -- node script/percy-tests.js

styleguide-app/View.elm

@@ -128,7 +128,7 @@ navigation route =
         , top (px 150)
         , flexShrink zero
         ]
-        []
+        [ id "categories" ]
         [ Heading.h4 [] [ Html.text "Categories" ]
         , (categoryLink (route == Routes.All) "#" "All"
             :: List.map