Use percy/cli

Shakefile.hs

@@ -101,7 +101,7 @@ main = do
             writeFileChanged out "Skipped running Percy tests, PERCY_TOKEN not set."
           Just _ -> do
             need ["log/npm-install.txt", "log/public.txt"]
-            cmd (WithStdout True) (FileStdout out) "script/percy-tests.js"
+            cmd (WithStdout True) (FileStdout out) "script/percy-tests.sh"
 
       "log/axe-report.json" %> \out -> do
         need ["log/npm-install.txt", "script/run-axe.sh", "script/axe-puppeteer.js", "log/public.txt"]

package.json

@@ -26,12 +26,16 @@
   },
   "homepage": "https://github.com/NoRedInk/NoRedInk-ui#readme",
   "devDependencies": {
-    "@percy/script": "^1.0.2",
+    "@percy/cli": "^1.0.0-beta.73",
+    "@percy/puppeteer": "^2.0.0",
     "browserify": "16.2.3",
+    "puppeteer": "^3.3.0",
     "request": "^2.88.0"
   },
   "dependencies": {
     "axe-core": "3.5.6",
-    "puppeteer": "3.3.0"
+    "expect": "^27.4.6",
+    "http-server": "^14.1.0",
+    "mocha": "^9.1.4"
   }
 }

script/percy-tests.js

@@ -1,38 +1,82 @@
-const PercyScript = require('@percy/script')
+const expect = require('expect');
+const puppeteer = require('puppeteer');
+const httpServer = require('http-server');
+const percySnapshot = require('@percy/puppeteer');
+
+const platform = require('os').platform();
+// We need to change the args passed to puppeteer based on the platform they're using
+const puppeteerArgs = /^win/.test(platform) ? [] : ['--single-process'];
+const PORT = process.env.PORT_NUMBER || 8000;
+
+describe('Visual tests', function () {
+  this.timeout(30000);
+  let page;
+  let server;
+  let browser;
+
+  before(async () => {
+    server = httpServer.createServer({ root: `${__dirname}/../public` });
+    server.listen(PORT);
+
+    browser = await puppeteer.launch({
+      headless: true,
+      timeout: 10000,
+      args: puppeteerArgs
+    });
+  });
+
+  after(() => {
+    server.close();
+  });
 
-PercyScript.run(async (page, percySnapshot) => {
   const defaultProcessing = async (name, location) => {
     await page.goto(location)
     await page.waitFor(`#${name}`)
-    await percySnapshot(name)
+    await percySnapshot(page, name)
     console.log(`Snapshot complete for ${name}`)
   }
+
   const specialProcessing = {
     'Modal': async (name, location) => {
-      await defaultProcessing(name, location)
+      await page.goto(location)
+      await page.waitFor(`#${name}`)
       await page.click('#launch-modal')
       await page.waitFor('[role="dialog"]')
-      await percySnapshot('Full Info Modal')
+      await percySnapshot(page, 'Full Info Modal')
       await page.click('[aria-label="Close modal"]')
       await page.select('select', 'warning')
       await page.click('#launch-modal')
       await page.waitFor('[role="dialog"]')
-      await percySnapshot('Full Warning Modal')
+      await percySnapshot(page, 'Full Warning Modal')
       await page.click('[aria-label="Close modal"]')
-    }
+    },
+    'Text.Writing': () => {}
   }
-  await page.goto('http://localhost:8000')
-  await page.waitFor('.module-example__doodad-link')
-  let links = await page.evaluate(() => {
-      let nodes = Array.from(document.querySelectorAll('.module-example__doodad-link'));
-      return nodes.map(node => [node["dataset"]["percyName"], node.href])
+
+  it('All', async function () {
+    page = await browser.newPage();
+    await page.goto(`http://localhost:${PORT}`);
+    await page.$('#maincontent');
+    await percySnapshot(page, this.test.fullTitle());
+    page.close();
   });
 
-  await links.reduce((acc, [name, location]) => {
-    return acc.then(() => {
-        let handler = specialProcessing[name] || defaultProcessing
-        return handler(name, location)
-      }
-    )
-  }, Promise.resolve())
-})
+  it('Doodads', async function () {
+    page = await browser.newPage();
+    await page.goto(`http://localhost:${PORT}`);
+
+    await page.$('#maincontent');
+    let links = await page.evaluate(() => {
+      let nodes = Array.from(document.querySelectorAll("[data-nri-description='doodad-link']"));
+      return nodes.map(node => [node.text, node.href])
+    })
+
+    await links.reduce((acc, [name, location]) => {
+      return acc.then(() => {
+          let handler = specialProcessing[name] || defaultProcessing
+          return handler(name, location)
+        }
+      )
+    }, Promise.resolve())
+  })
+});

script/percy-tests.sh

@@ -1,12 +1,3 @@
 #!/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
+npx percy exec -- mocha script/percy-tests.js --exit

styleguide-app/Example.elm

@@ -116,6 +116,7 @@ preview_ navigate example =
             (ClickableText.link example.name
                 [ ClickableText.href (exampleHref example)
                 , ClickableText.css [ Css.marginBottom (Css.px 10) ]
+                , ClickableText.nriDescription "doodad-link"
                 ]
                 :: [ Html.div
                         [ Attributes.css
@@ -197,11 +198,6 @@ exampleLink example =
         [ ClickableText.link (fullName example)
             [ ClickableText.href (exampleHref example)
             , ClickableText.large
-            , ClickableText.custom
-                [ -- this data attribute is used to name the Percy screenshots
-                  String.replace "." "-" example.name
-                    |> Attributes.attribute "data-percy-name"
-                ]
             ]
         ]