Jest spike

test/.gitignore

@@ -1,6 +1,6 @@
 .github-token
-bin/*.js
 bin/visreg.config.ts
 built/
-index.js
-screenshots
+!built/functional/*.js.snap
+!built/functional/*.js.md
+screenshots

test/bin/util.ts

@@ -104,7 +104,7 @@ export function createBaseline(
         "git commit --allow-empty -m \"Baseline.\"",
         "cd -"
     ].join('; '));
-    cmd(`git checkout ${targetBranch}; npm test`);
+    cmd(`git checkout ${targetBranch}; npm run test:visreg`);
 
     const commit = commitScreenshots(token, screenshotsDirectory, "before").toString();
     const baseCommitMatch = commit.match(hasCommitRegex);
@@ -118,7 +118,7 @@ export function createBaseline(
 }
 
 export function createDiff(token: string, currentBranch: string, screenshotsDirectory: string) {
-    cmd(`git checkout ${currentBranch}; npm test`);
+    cmd(`git checkout ${currentBranch}; npm run test:visreg`);
     const afterCommitData = commitScreenshots(token, screenshotsDirectory, "after").toString();
     const afterCommitMatch = afterCommitData.match(hasCommitRegex);
     const afterCommit = afterCommitMatch && afterCommitMatch[1];
@@ -251,7 +251,7 @@ export function resetRepository(screenshotsDirectory: string) {
 export function cloneRepo(token: string, screenshotsDirectory: string, repoUrl: url.Url) {
     let cloneUrl = `https://${token}@${repoUrl.host}${repoUrl.path}.git`;
     console.log(`Cloning a screenshots project into "${path.resolve(screenshotsDirectory)}"`);
-    safeExecSync(token, `git clone ${cloneUrl} screenshots/ > /dev/null`)
+    safeExecSync(token, `git clone ${cloneUrl} ${screenshotsDirectory}/ > /dev/null`)
 
     console.log(`Cloned a screenshots project into "${path.resolve(screenshotsDirectory)}"`);
 };

test/bin/visreg.ts

@@ -7,7 +7,7 @@ import * as opn from "opn"
 import * as util from "./util";
 
 import {config, IConfig} from "./visreg.config";
-const screenshotsDirectory = "screenshots";
+const screenshotsDirectory = "visreg/screenshots";
 
 async function visreg(
     currentBranch: string,
@@ -29,8 +29,6 @@ async function visreg(
     const token = await util.validateToken(await util.getGithubToken());
     const repoUrl = url.parse(`https://${config.githubHostname}/${config.githubName}/${config.repo}`);
 
-    process.exit(0);
-
     util.resetRepository(screenshotsDirectory);
     if (!util.repositoryExists(token, repoUrl)) {
         console.log(`Creating a new screenshots repository at ${repoUrl.href}`);

test/built/functional/hx-reveal.js.md

@@ -0,0 +1,23 @@
+# Snapshot report for `built/functional/hx-reveal.js`
+
+The actual snapshot is saved in `hx-reveal.js.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## should not be open
+
+> Snapshot 1
+
+    `<hx-reveal>␊
+          <span slot="summary">Click me to show content</span>␊
+          <p>You can't see me.</p>␊
+        </hx-reveal>`
+
+## should open
+
+> Snapshot 1
+
+    `<hx-reveal open="">␊
+          <span slot="summary">Click me to show content</span>␊
+          <p>You can't see me.</p>␊
+        </hx-reveal>`

test/util.ts → test/common/util.ts

@@ -2,6 +2,7 @@
  * Helper functions for the tests in `index.ts`.
  */
 import {By, ISize, ThenableWebDriver, WebDriver, WebElementPromise} from "selenium-webdriver";
+
 export async function setViewportSize (
     driver: ThenableWebDriver,
     size: ISize,
@@ -30,7 +31,12 @@ export function $x(
     return driver.findElement(By.xpath(xpath));
 }
 
-// "page object"
-export var $ = {
+/* A "starter page object" until there's a greater need for something more robust.
+ * For now this only contains common CSS selectors used throughout tests in the
+ * visreg/functional directories, but may also contain functions in the future.
+ *
+ * Once that happens, pull this out of `util.ts` and move it someplace more page-object-y.
+ */
+export var selectors = {
     nav: ".hxApp__nav",
 }

test/functional/hx-reveal.ts

@@ -0,0 +1,40 @@
+import {$, snap, Snappit, IConfig} from "snappit-visual-regression";
+import {WebDriver, WebElementPromise} from "selenium-webdriver";
+
+import {test, TestContext} from "ava";
+
+const baseUrl = "http://localhost:3000/helix-ui";
+const snapshot = async (t: TestContext, element: WebElementPromise) => {
+    t.snapshot(await element.getAttribute("outerHTML"));
+};
+
+let snappit: Snappit;
+let driver: WebDriver;
+let reveal: WebElementPromise;
+
+test.before(async () => {
+    const config: IConfig = {
+        browser: "chrome",
+        serverUrl: "http://localhost:4444/wd/hub",
+    };
+
+    snappit = new Snappit(config);
+    driver = await snappit.start();
+    await driver.get(`${baseUrl}/components/reveal`);
+    reveal = $(".demo hx-reveal");
+});
+
+test("should not be open", async t => {
+    t.is(await reveal.getAttribute("open"), null);
+    await snapshot(t, reveal);
+});
+
+test("should open", async t => {
+    await reveal.click();
+    t.is(await reveal.getAttribute("open"), "true");
+    await snapshot(t, reveal);
+});
+
+test.after.always(async () => {
+    await snappit.stop();
+});

test/package.json

@@ -1,17 +1,14 @@
 {
   "dependencies": {
-    "@types/chai": "^4.0.4",
     "@types/lodash": "^4.14.74",
-    "@types/mocha": "^2.2.43",
     "@types/node": "^8.0.28",
     "@types/opn": "^3.0.28",
     "@types/reflect-metadata": "^0.0.5",
     "@types/selenium-webdriver": "^3.0.7",
-    "chai": "^4.1.2",
+    "ava": "^0.23.0",
     "inquirer-promise": "^1.0.0",
     "inquirer-shortcuts": "^1.1.0",
     "lodash": "^4.17.4",
-    "mocha": "^3.5.3",
     "opn": "^5.1.0",
     "selenium-webdriver": "^3.5.0",
     "snappit-visual-regression": "^0.6.4",
@@ -20,15 +17,21 @@
   },
   "scripts": {
     "build": "tsc",
-    "clean": "npm run clean:js && npm run clean:screenshots",
-    "clean:screenshots": "rm -rf screenshots",
-    "clean:js": "rm -rf built/",
-    "lint": "tslint index.ts",
-    "test": "npm run build && mocha --timeout 15000 built/index.js",
-    "previsreg": "[ -f ./bin/visreg.config.ts ] || cp bin/visreg{.example,}.config.ts",
-    "visreg": "npm run clean:js && npm run build && node ./built/bin/util.js && node ./built/bin/visreg.js",
+    "clean": "npm run clean:visreg && npm run clean:func",
+    "clean:func": "find built/functional -mindepth 1 \\( ! -path 'built/functional/*.js.snap' ! -path 'built/functional/*.js.md' \\) -delete",
+    "clean:visreg": "rm -rf visreg/screenshots built/visreg",
+    "lint": "tslint -c tslint.json visreg/ functional/",
+    "test:func": "npm run build && ava built/functional/*.js",
+    "test:visreg": "npm run build && ava built/visreg/{chrome,firefox}.js --verbose",
+    "postinstall": "[ -f bin/visreg.config.ts ] || cp bin/visreg{.example,}.config.ts",
+    "previsreg": "npm run clean:visreg",
+    "visreg": "npm run build && node built/bin/util.js && node built/bin/visreg.js",
     "webdriver": "npm run webdriver:update && npm run webdriver:start",
-    "webdriver:update": "scripts/webdriver-update",
-    "webdriver:start": "scripts/webdriver-start"
+    "webdriver:start": "scripts/webdriver-start",
+    "webdriver:update": "scripts/webdriver-update"
+  },
+  "ava": {
+    "snapshotLocation": "~/code/js/helix-ui/test/snapshots",
+    "failWithoutAssertions": false
   }
 }

test/tsconfig.json

@@ -12,22 +12,19 @@
         "types": [
             "reflect-metadata",
             "node",
-            "mocha"
+            "ava"
         ],
         "baseUrl": ".",
         "paths": {
             "*": ["types/*"]
         },
-        "outDir": "./built"
+        "outDir": "built"
     },
+    "exclude": ["node_modules"],
     "include": [
-        "index.ts",
-        "bin/util.ts",
-        "bin/visreg.ts",
-        "bin/util.ts",
-        "bin/visreg.config.ts"
-    ],
-    "exclude": [
-        "node_modules"
+        "common/*.ts",
+        "functional/*.ts",
+        "visreg/*.ts",
+        "bin/*.ts"
     ]
 }

test/visreg/chrome.ts

@@ -0,0 +1,3 @@
+import * as visreg from "./visreg";
+
+visreg.suite("chrome");

test/visreg/firefox.ts

@@ -0,0 +1,3 @@
+import * as visreg from "./visreg";
+
+visreg.suite("firefox");

test/visreg/visreg.ts

@@ -0,0 +1,48 @@
+import {$, snap, Snappit, IConfig} from "snappit-visual-regression";
+
+import * as util from "../common/util";
+import {test} from "ava";
+
+export function suite(browserName: string) {
+    let snappit: Snappit;
+    let driver: any;
+
+    test.before(async () => {
+        const config: IConfig = {
+            browser: browserName,
+            screenshotsDir: "visreg/screenshots",
+            logException: [
+                "MISMATCH",
+                "NO_BASELINE",
+                "SIZE_DIFFERENCE",
+            ],
+            threshold: 0.1,
+            // serverUrl: "http://localhost:4444/wd/hub",
+            useDirect: true,
+            useGeckoDriver: (browserName === "firefox"),
+        };
+
+        snappit = new Snappit(config);
+        driver = await snappit.start();
+        await util.setViewportSize(driver, { width: 1366, height: 768 });
+        driver.get("http://localhost:3000/");
+    });
+
+    test(`nav`, async () => {
+        await snap("{browserName}/nav", $(util.selectors.nav));
+    });
+
+    test(`guides`, async () => {
+        await util.$x(driver, "//nav/hx-reveal//header", "Guides").click();
+        await snap("{browserName}/nav/guides", $(util.selectors.nav));
+    });
+
+    test(`components`, async () => {
+        await util.$x(driver, "//nav/hx-reveal//header", "Components").click();
+        await snap("{browserName}/nav/componenets", $(util.selectors.nav));
+    });
+
+    test.after.always(async () => {
+        await snappit.stop();
+    });
+}