spike(ava): Switch from mocha/chai

refact(visreg): Share one set of tests for both browsers

fix(visreg): Remove debugging 'exit(0)' statement

fix(visreg): Allow for informational messages again

fix(visreg): Use geckodriver

refact(visreg): Move tests out of util

chore(jest): Don't load browser context for visreg

test(jest): Outline 'functional' tests

refact(tests): Split each test type into dedicated directory

docs(util): Better document 'page object' and its future

style(testing): Avoid scientific notation for big numbers

fix(script): Update reference away from deleted script

fix(tsconfig): Include custom type hints

fix(visreg): Honor the actual screenshot directory

fix(visreg): Wrong path to visreg config file

fix(visreg): Refer to new npm run script

fix(jest): Don't spin up jsdom environment

fix(jest): Optimize for selenium

fix(visreg): Avoid large png files

chore(yarn): Switch to ava

test(ava): Convert to ava

style(visreg): Remove missing comment

style(visreg): Remove unused template literals

Author: Droogans

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.d.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/bin/visreg.ts

@@ -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/built/functional/hx-reveal.js.md

@@ -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/built/functional/hx-reveal.js.snap

@@ -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();
+});