Skip to content

Commit 3b16e46

Browse files
DroogansDroogans
authored
Merge pull request #75 from rackerlabs/more-visreg-tests-squashed
test(*): More functional and visreg tests
2 parents d32098f + ae4dd62 commit 3b16e46

File tree

13 files changed

+248
-50
lines changed

13 files changed

+248
-50
lines changed

‎test/.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
.github-token
22
bin/visreg.config.ts
3-
built/
3+
built/*
4+
!built/functional/
5+
built/functional/*
46
!built/functional/*.js.snap
57
!built/functional/*.js.md
68
screenshots

‎test/bin/util.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,20 @@ export const f = "./.github-token";
2121
export const repoUrl = url.parse(`https://${config.githubHostname}/${config.githubName}/${config.repo}`);
2222
export const hasCommitRegex = /\[.*([0-9a-f]{7})] Checking in screenshots.../;
2323

24+
export function validateVPN(githubHostname: string) {
25+
if (githubHostname === "github.rackspace.com") {
26+
process.stdout.write("Checking connection to VPN...");
27+
try {
28+
child_process.execSync("ping -t 3 -c 1 rax.io").toString().match(/1 packets transmitted, 1 packets received/);
29+
} catch (e) {
30+
console.log(" ✘");
31+
console.log("Check your VPN connection and try again.");
32+
throw new Error(e);
33+
}
34+
console.log(" ✔");
35+
}
36+
}
37+
2438
export async function checkConfig() {
2539
const javascriptConfig = "./built/bin/visreg.config.js";
2640
const typescriptConfig = "./bin/visreg.config.ts";

‎test/bin/visreg.ts‎

Lines changed: 52 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,16 @@ import * as child_process from "child_process";
22
import * as fs from "fs";
33
import * as url from "url";
44

5-
import * as opn from "opn"
5+
import * as opn from "opn";
66

77
import * as util from "./util";
88

99
import {config, IConfig} from "./visreg.config";
1010
const screenshotsDirectory = "visreg/screenshots";
11+
const repoUrl = url.parse(`https://${config.githubHostname}/${config.githubName}/${config.repo}`);
1112

12-
async function visreg(
13-
currentBranch: string,
14-
targetBranch?: string,
15-
): Promise<void> {
16-
if (config.githubHostname === "github.rackspace.com") {
17-
process.stdout.write("Checking connection to VPN...");
18-
try {
19-
child_process.execSync("ping -t 3 -c 1 rax.io").toString().match(/1 packets transmitted, 1 packets received/);
20-
} catch (e) {
21-
console.log(" ✘");
22-
console.log("Check your VPN connection and try again.");
23-
throw new Error(e);
24-
}
25-
console.log(" ✔");
26-
}
27-
28-
const branch = await util.getBranchName(targetBranch);
29-
const token = await util.validateToken(await util.getGithubToken());
30-
const repoUrl = url.parse(`https://${config.githubHostname}/${config.githubName}/${config.repo}`);
13+
async function prepareRepository(token: string) {
14+
util.validateVPN(config.githubHostname);
3115

3216
util.resetRepository(screenshotsDirectory);
3317
if (!util.repositoryExists(token, repoUrl)) {
@@ -38,6 +22,15 @@ async function visreg(
3822
if (!fs.existsSync(`${screenshotsDirectory}/.git`)) {
3923
util.cloneRepo(token, screenshotsDirectory, repoUrl);
4024
}
25+
}
26+
27+
async function visreg(
28+
currentBranch: string,
29+
targetBranch?: string,
30+
): Promise<void> {
31+
const token = await util.validateToken(await util.getGithubToken());
32+
await prepareRepository(token);
33+
const branch = await util.getBranchName(targetBranch);
4134

4235
const anonymousBranch = `anon-${new Date().valueOf()}`;
4336
console.log("Creating a new baseline...");
@@ -50,15 +43,46 @@ async function visreg(
5043
opn(remoteUrl);
5144
}
5245

46+
/*
47+
* This exists as a way of generating a one-off baseline. Why?
48+
* So you can share the current state of a given branch easily.
49+
* Run this with `yarn run visreg share`. It'll commit just the current screenshots,
50+
* and push them up as a singular commit reference and open the commit in your browser.
51+
*/
52+
async function visregNoDiff(currentBranch: string) {
53+
const token = await util.validateToken(await util.getGithubToken());
54+
await prepareRepository(token);
55+
56+
const anonymousBranch = `anon-${new Date().valueOf()}`;
57+
console.log("Creating a new baseline...");
58+
const baseCommit = util.createBaseline(token, anonymousBranch, screenshotsDirectory, currentBranch);
59+
60+
util.pushBranch(token, repoUrl, anonymousBranch, screenshotsDirectory);
61+
const remoteUrl = `${repoUrl.href}/commit/${baseCommit}`;
62+
console.log(`Opening remote screenshot diff located at: ${remoteUrl}`);
63+
opn(remoteUrl);
64+
}
65+
5366
if (require.main === module) {
54-
const branch = Array.prototype.slice.call(process.argv, 2)[0];
67+
const arg = Array.prototype.slice.call(process.argv, 2)[0];
5568
const currentBranch = child_process.execSync("git rev-parse --abbrev-ref HEAD").toString().trim();
69+
let share = "share".indexOf(arg) === 0;
70+
71+
if (share) {
72+
visregNoDiff(currentBranch).then(() => { process.exit(0); })
73+
.catch(err => {
74+
console.log(err.message);
75+
process.exit(1);
76+
});
77+
} else {
78+
const branch = arg;
5679

57-
visreg(currentBranch, branch)
58-
.then(() => { process.exit(0); })
59-
.catch(err => {
60-
child_process.execSync(`git checkout ${currentBranch} > /dev/null 2>&1`);
61-
console.log(err.message);
62-
process.exit(1);
63-
});
80+
visreg(currentBranch, branch)
81+
.then(() => { process.exit(0); })
82+
.catch(err => {
83+
child_process.execSync(`git checkout ${currentBranch} > /dev/null 2>&1`);
84+
console.log(err.message);
85+
process.exit(1);
86+
});
87+
}
6488
};

‎test/built/functional/button.js.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Snapshot report for `built/functional/button.js`
2+
3+
The actual snapshot is saved in `button.js.snap`.
4+
5+
Generated by [AVA](https://ava.li).
6+
7+
## states
8+
9+
> Snapshot 1
10+
11+
`<section data-visreg="button-states">␊
12+
<h2 class="hxSectionTitle" id="button-states">Button States</h2>␊
13+
<table class="table">␊
14+
<tbody>␊
15+
<tr>␊
16+
<td>Default</td>␊
17+
<td><button class="hxBtn">Normal</button></td>␊
18+
<td><button class="hxBtn pseudo-hover">Hover</button></td>␊
19+
<td><button class="hxBtn pseudo-active">Pressed</button></td>␊
20+
<td><button class="hxBtn" disabled="">Disabled</button></td>␊
21+
</tr>␊
22+
<tr>␊
23+
<td>Primary</td>␊
24+
<td><button class="hxBtn hxBtn--primary">Normal</button></td>␊
25+
<td><button class="hxBtn hxBtn--primary pseudo-hover">Hover</button></td>␊
26+
<td><button class="hxBtn hxBtn--primary pseudo-active">Pressed</button></td>␊
27+
<td><button class="hxBtn hxBtn--primary" disabled="">Disabled</button></td>␊
28+
</tr>␊
29+
<tr>␊
30+
<td>Link</td>␊
31+
<td><button class="hxBtn hxBtn--link">Normal</button></td>␊
32+
<td><button class="hxBtn hxBtn--link pseudo-hover">Hover</button></td>␊
33+
<td><button class="hxBtn hxBtn--link pseudo-active">Pressed</button></td>␊
34+
<td><button class="hxBtn hxBtn--link" disabled="">Disabled</button></td>␊
35+
</tr>␊
36+
</tbody>␊
37+
</table>␊
38+
</section>`

‎test/built/functional/button.js.snap‎

370 Bytes
Binary file not shown.

‎test/built/functional/checkbox.js.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# Snapshot report for `built/functional/checkbox.js`
2+
3+
The actual snapshot is saved in `checkbox.js.snap`.
4+
5+
Generated by [AVA](https://ava.li).
6+
7+
## states
8+
9+
> Snapshot 1
10+
11+
`<section data-visreg="checkbox-states">␊
12+
<h2 class="hxSectionTitle" id="checkbox-states">Checkbox States</h2>␊
13+
<table class="hxTable">␊
14+
<thead>␊
15+
<tr>␊
16+
<th></th>␊
17+
<th>Unchecked</th>␊
18+
<th>Checked</th>␊
19+
<th>Indeterminate Unchecked</th>␊
20+
<th>Indeterminate Checked</th>␊
21+
</tr>␊
22+
</thead>␊
23+
<tbody>␊
24+
<tr>␊
25+
<td>Default</td>␊
26+
<td><hx-checkbox role="checkbox" tabindex="0"></hx-checkbox></td>␊
27+
<td><hx-checkbox checked="" aria-checked="true" role="checkbox" tabindex="0"></hx-checkbox></td>␊
28+
<td><hx-checkbox indeterminate="" aria-checked="mixed" role="checkbox" tabindex="0"></hx-checkbox></td>␊
29+
<td><hx-checkbox checked="" indeterminate="" aria-checked="mixed" role="checkbox" tabindex="0"></hx-checkbox></td>␊
30+
</tr>␊
31+
<tr>␊
32+
<td>Invalid</td>␊
33+
<td><hx-checkbox invalid="" role="checkbox" tabindex="0"></hx-checkbox></td>␊
34+
<td><hx-checkbox invalid="" checked="" aria-checked="true" role="checkbox" tabindex="0"></hx-checkbox></td>␊
35+
<td><hx-checkbox invalid="" indeterminate="" aria-checked="mixed" role="checkbox" tabindex="0"></hx-checkbox></td>␊
36+
<td><hx-checkbox invalid="" checked="" indeterminate="" aria-checked="mixed" role="checkbox" tabindex="0"></hx-checkbox></td>␊
37+
</tr>␊
38+
<tr>␊
39+
<td>Disabled</td>␊
40+
<td><hx-checkbox disabled="" aria-disabled="true" role="checkbox"></hx-checkbox></td>␊
41+
<td><hx-checkbox disabled="" checked="" aria-disabled="true" aria-checked="true" role="checkbox"></hx-checkbox></td>␊
42+
<td><hx-checkbox disabled="" indeterminate="" aria-disabled="true" aria-checked="mixed" role="checkbox"></hx-checkbox></td>␊
43+
<td><hx-checkbox disabled="" checked="" indeterminate="" aria-disabled="true" aria-checked="mixed" role="checkbox"></hx-checkbox></td>␊
44+
</tr>␊
45+
</tbody>␊
46+
</table>␊
47+
</section>`

‎test/built/functional/checkbox.js.snap‎

434 Bytes
Binary file not shown.

‎test/common/util.ts‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
11
/*
2-
* Helper functions for the tests in `index.ts`.
2+
* Helper functions for the tests in `../visreg/` and `../functional/`.
33
*/
4-
import {By, ISize, ThenableWebDriver, WebDriver, WebElementPromise} from "selenium-webdriver";
4+
import {By, ISize, WebDriver, WebElementPromise} from "selenium-webdriver";
5+
6+
import {TestContext} from "ava";
7+
8+
export const baseUrl = "http://localhost:3000/helix-ui";
9+
10+
export async function go(driver: WebDriver, component: string) {
11+
await driver.get(`${baseUrl}/components/${component}`);
12+
}
13+
14+
export async function snapshot(t: TestContext, element: WebElementPromise) {
15+
t.snapshot(await element.getAttribute("outerHTML"));
16+
}
517

618
export async function setViewportSize (
7-
driver: ThenableWebDriver,
19+
driver: WebDriver,
820
size: ISize,
921
) {
1022
const jsGetPadding: string = `return {
@@ -20,7 +32,7 @@ export async function setViewportSize (
2032
}
2133

2234
export function $x(
23-
driver: ThenableWebDriver,
35+
driver: WebDriver,
2436
xpath: string,
2537
byText = "",
2638
) {
@@ -39,4 +51,5 @@ export function $x(
3951
*/
4052
export var selectors = {
4153
nav: ".hxApp__nav",
54+
visreg: "*[data-visreg]",
4255
}

‎test/functional/button.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import {$, snap, Snappit, IConfig} from "snappit-visual-regression";
2+
import {WebDriver, WebElementPromise} from "selenium-webdriver";
3+
4+
import {test} from "ava";
5+
6+
import * as util from "../common/util";
7+
8+
let snappit: Snappit;
9+
let driver: WebDriver;
10+
let reveal: WebElementPromise;
11+
12+
test.before(async () => {
13+
const config: IConfig = {
14+
browser: "chrome",
15+
serverUrl: "http://localhost:4444/wd/hub",
16+
};
17+
18+
snappit = new Snappit(config);
19+
driver = await snappit.start();
20+
await util.go(driver, "button");
21+
});
22+
23+
test("states", async t => {
24+
await util.snapshot(t, $(util.selectors.visreg));
25+
});
26+
27+
test.after.always(async () => {
28+
await snappit.stop();
29+
});

‎test/functional/checkbox.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import {$, snap, Snappit, IConfig} from "snappit-visual-regression";
2+
import {WebDriver, WebElementPromise} from "selenium-webdriver";
3+
4+
import {test} from "ava";
5+
6+
import * as util from "../common/util";
7+
8+
let snappit: Snappit;
9+
let driver: WebDriver;
10+
let reveal: WebElementPromise;
11+
12+
test.before(async () => {
13+
const config: IConfig = {
14+
browser: "chrome",
15+
serverUrl: "http://localhost:4444/wd/hub",
16+
};
17+
18+
snappit = new Snappit(config);
19+
driver = await snappit.start();
20+
await util.go(driver, "checkbox");
21+
});
22+
23+
test("states", async t => {
24+
await util.snapshot(t, $(util.selectors.visreg));
25+
});
26+
27+
test.after.always(async () => {
28+
await snappit.stop();
29+
});

0 commit comments

Comments
 (0)