test(saucelabs): Run travis tests on saucelabs.

IE, Edge, Firefox browsers on Windows 10. Chrome and safari on Mac.

Author: Ryan A. Johnson

.travis.yml

@@ -6,8 +6,8 @@ node_js:
 notifications:
   email: false
 addons:
-  firefox: '60.0'
-  chrome: stable
+  firefox: '61.0'
+  sauce_connect: true
 branch:
   only:
   - master

docs/components/tabs/index.html

@@ -13,7 +13,7 @@
   <section>
     <h2 id="basic-tabset">Basic Tabset</h2>
     <div class="example">
-      <div class="tabs-demo" data-visreg="tabs">
+      <div class="tabs-demo">
         <hx-tabset id="android-desserts">
           <hx-tablist>
             <hx-tab>Cupcake Ipsum</hx-tab>

test/common/util.ts

@@ -1,5 +1,5 @@
 /*
- * Helper functions for the tests in `../visreg/`.
+ * Helper functions for the tests in `../behavioral/`.
  */
 import {By, ISize, WebDriver, WebElement, WebElementPromise} from "snappit-visual-regression";
 import {TestContext} from "ava";
@@ -24,10 +24,7 @@ export async function webComponentsReady(driver: WebDriver) {
 }
 
 export async function snapshot(t: TestContext, element: WebElement) {
-    if (process.env.TRAVIS) {
-        await webComponentsReady(element.getDriver());
-    }
-
+    await webComponentsReady(element.getDriver());
     t.snapshot(await element.getAttribute("outerHTML"));
 }
 
@@ -55,7 +52,7 @@ export async function getElementsText(
 
 /* 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 directory, but may also contain functions in the future.
+ * behavioral directory, 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.
  */

test/dom-snapshots/components-checkboxes-MicrosoftEdge.js.md

@@ -0,0 +1,79 @@
+# Snapshot report for `built/dom-snapshots/components-checkboxes-MicrosoftEdge.js`
+
+The actual snapshot is saved in `components-checkboxes-MicrosoftEdge.js.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## MicrosoftEdge on Windows 10 -- components/checkboxes/test.html
+
+> Snapshot 1
+
+    `<td data-dom-diff="hxCheckbox-default">␊
+                <hx-checkbox><label class="style-scope hx-checkbox" id="hxCheckbox"><input class="style-scope hx-checkbox" id="hxNativeControl" type="checkbox"><div class="style-scope hx-checkbox" id="hxCustomControl"><hx-icon class="style-scope hx-checkbox" id="hxTick" aria-hidden="true" type="checkmark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 7.038 14.997 c -0.438 0 -0.858 -0.192 -1.145 -0.53 L 1.355 9.111 a 1.5 1.5 0 0 1 2.289 -1.939 l 3.171 3.742 l 5.392 -9.175 a 1.5 1.5 0 0 1 2.586 1.52 L 8.331 14.257 a 1.5 1.5 0 0 1 -1.293 0.74" /></svg></hx-icon><hx-icon class="style-scope hx-checkbox" id="hxMinus" aria-hidden="true" type="minus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 3 9 a 1 1 0 1 1 0 -2 h 10 a 1 1 0 0 1 0 2 H 3 Z" /></svg></hx-icon></div></label></hx-checkbox>␊
+              </td>`
+
+> Snapshot 2
+
+    `<td data-dom-diff="hxCheckbox-default-checked">␊
+                <hx-checkbox checked=""><label class="style-scope hx-checkbox" id="hxCheckbox"><input class="style-scope hx-checkbox" id="hxNativeControl" type="checkbox"><div class="style-scope hx-checkbox" id="hxCustomControl"><hx-icon class="style-scope hx-checkbox" id="hxTick" aria-hidden="true" type="checkmark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 7.038 14.997 c -0.438 0 -0.858 -0.192 -1.145 -0.53 L 1.355 9.111 a 1.5 1.5 0 0 1 2.289 -1.939 l 3.171 3.742 l 5.392 -9.175 a 1.5 1.5 0 0 1 2.586 1.52 L 8.331 14.257 a 1.5 1.5 0 0 1 -1.293 0.74" /></svg></hx-icon><hx-icon class="style-scope hx-checkbox" id="hxMinus" aria-hidden="true" type="minus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 3 9 a 1 1 0 1 1 0 -2 h 10 a 1 1 0 0 1 0 2 H 3 Z" /></svg></hx-icon></div></label></hx-checkbox>␊
+              </td>`
+
+> Snapshot 3
+
+    `<td data-dom-diff="hxCheckbox-default-indeterminate">␊
+                <hx-checkbox indeterminate=""><label class="style-scope hx-checkbox" id="hxCheckbox"><input class="style-scope hx-checkbox" id="hxNativeControl" type="checkbox"><div class="style-scope hx-checkbox" id="hxCustomControl"><hx-icon class="style-scope hx-checkbox" id="hxTick" aria-hidden="true" type="checkmark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 7.038 14.997 c -0.438 0 -0.858 -0.192 -1.145 -0.53 L 1.355 9.111 a 1.5 1.5 0 0 1 2.289 -1.939 l 3.171 3.742 l 5.392 -9.175 a 1.5 1.5 0 0 1 2.586 1.52 L 8.331 14.257 a 1.5 1.5 0 0 1 -1.293 0.74" /></svg></hx-icon><hx-icon class="style-scope hx-checkbox" id="hxMinus" aria-hidden="true" type="minus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 3 9 a 1 1 0 1 1 0 -2 h 10 a 1 1 0 0 1 0 2 H 3 Z" /></svg></hx-icon></div></label></hx-checkbox>␊
+              </td>`
+
+> Snapshot 4
+
+    `<td data-dom-diff="hxCheckbox-default-checked-indeterminate">␊
+                <hx-checkbox checked="" indeterminate=""><label class="style-scope hx-checkbox" id="hxCheckbox"><input class="style-scope hx-checkbox" id="hxNativeControl" type="checkbox"><div class="style-scope hx-checkbox" id="hxCustomControl"><hx-icon class="style-scope hx-checkbox" id="hxTick" aria-hidden="true" type="checkmark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 7.038 14.997 c -0.438 0 -0.858 -0.192 -1.145 -0.53 L 1.355 9.111 a 1.5 1.5 0 0 1 2.289 -1.939 l 3.171 3.742 l 5.392 -9.175 a 1.5 1.5 0 0 1 2.586 1.52 L 8.331 14.257 a 1.5 1.5 0 0 1 -1.293 0.74" /></svg></hx-icon><hx-icon class="style-scope hx-checkbox" id="hxMinus" aria-hidden="true" type="minus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 3 9 a 1 1 0 1 1 0 -2 h 10 a 1 1 0 0 1 0 2 H 3 Z" /></svg></hx-icon></div></label></hx-checkbox>␊
+              </td>`
+
+> Snapshot 5
+
+    `<td data-dom-diff="hxCheckbox-invalid">␊
+                <hx-checkbox invalid=""><label class="style-scope hx-checkbox" id="hxCheckbox"><input class="style-scope hx-checkbox" id="hxNativeControl" type="checkbox"><div class="style-scope hx-checkbox" id="hxCustomControl"><hx-icon class="style-scope hx-checkbox" id="hxTick" aria-hidden="true" type="checkmark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 7.038 14.997 c -0.438 0 -0.858 -0.192 -1.145 -0.53 L 1.355 9.111 a 1.5 1.5 0 0 1 2.289 -1.939 l 3.171 3.742 l 5.392 -9.175 a 1.5 1.5 0 0 1 2.586 1.52 L 8.331 14.257 a 1.5 1.5 0 0 1 -1.293 0.74" /></svg></hx-icon><hx-icon class="style-scope hx-checkbox" id="hxMinus" aria-hidden="true" type="minus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 3 9 a 1 1 0 1 1 0 -2 h 10 a 1 1 0 0 1 0 2 H 3 Z" /></svg></hx-icon></div></label></hx-checkbox>␊
+              </td>`
+
+> Snapshot 6
+
+    `<td data-dom-diff="hxCheckbox-invalid-checked">␊
+                <hx-checkbox invalid="" checked=""><label class="style-scope hx-checkbox" id="hxCheckbox"><input class="style-scope hx-checkbox" id="hxNativeControl" type="checkbox"><div class="style-scope hx-checkbox" id="hxCustomControl"><hx-icon class="style-scope hx-checkbox" id="hxTick" aria-hidden="true" type="checkmark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 7.038 14.997 c -0.438 0 -0.858 -0.192 -1.145 -0.53 L 1.355 9.111 a 1.5 1.5 0 0 1 2.289 -1.939 l 3.171 3.742 l 5.392 -9.175 a 1.5 1.5 0 0 1 2.586 1.52 L 8.331 14.257 a 1.5 1.5 0 0 1 -1.293 0.74" /></svg></hx-icon><hx-icon class="style-scope hx-checkbox" id="hxMinus" aria-hidden="true" type="minus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 3 9 a 1 1 0 1 1 0 -2 h 10 a 1 1 0 0 1 0 2 H 3 Z" /></svg></hx-icon></div></label></hx-checkbox>␊
+              </td>`
+
+> Snapshot 7
+
+    `<td data-dom-diff="hxCheckbox-invalid-indeterminate">␊
+                <hx-checkbox invalid="" indeterminate=""><label class="style-scope hx-checkbox" id="hxCheckbox"><input class="style-scope hx-checkbox" id="hxNativeControl" type="checkbox"><div class="style-scope hx-checkbox" id="hxCustomControl"><hx-icon class="style-scope hx-checkbox" id="hxTick" aria-hidden="true" type="checkmark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 7.038 14.997 c -0.438 0 -0.858 -0.192 -1.145 -0.53 L 1.355 9.111 a 1.5 1.5 0 0 1 2.289 -1.939 l 3.171 3.742 l 5.392 -9.175 a 1.5 1.5 0 0 1 2.586 1.52 L 8.331 14.257 a 1.5 1.5 0 0 1 -1.293 0.74" /></svg></hx-icon><hx-icon class="style-scope hx-checkbox" id="hxMinus" aria-hidden="true" type="minus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 3 9 a 1 1 0 1 1 0 -2 h 10 a 1 1 0 0 1 0 2 H 3 Z" /></svg></hx-icon></div></label></hx-checkbox>␊
+              </td>`
+
+> Snapshot 8
+
+    `<td data-dom-diff="hxCheckbox-invalid-checked-indeterminate">␊
+                <hx-checkbox invalid="" checked="" indeterminate=""><label class="style-scope hx-checkbox" id="hxCheckbox"><input class="style-scope hx-checkbox" id="hxNativeControl" type="checkbox"><div class="style-scope hx-checkbox" id="hxCustomControl"><hx-icon class="style-scope hx-checkbox" id="hxTick" aria-hidden="true" type="checkmark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 7.038 14.997 c -0.438 0 -0.858 -0.192 -1.145 -0.53 L 1.355 9.111 a 1.5 1.5 0 0 1 2.289 -1.939 l 3.171 3.742 l 5.392 -9.175 a 1.5 1.5 0 0 1 2.586 1.52 L 8.331 14.257 a 1.5 1.5 0 0 1 -1.293 0.74" /></svg></hx-icon><hx-icon class="style-scope hx-checkbox" id="hxMinus" aria-hidden="true" type="minus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 3 9 a 1 1 0 1 1 0 -2 h 10 a 1 1 0 0 1 0 2 H 3 Z" /></svg></hx-icon></div></label></hx-checkbox>␊
+              </td>`
+
+> Snapshot 9
+
+    `<td data-dom-diff="hxCheckbox-disabled">␊
+                <hx-checkbox disabled="" aria-disabled="true"><label class="style-scope hx-checkbox" id="hxCheckbox"><input disabled="" class="style-scope hx-checkbox" id="hxNativeControl" type="checkbox"><div class="style-scope hx-checkbox" id="hxCustomControl"><hx-icon class="style-scope hx-checkbox" id="hxTick" aria-hidden="true" type="checkmark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 7.038 14.997 c -0.438 0 -0.858 -0.192 -1.145 -0.53 L 1.355 9.111 a 1.5 1.5 0 0 1 2.289 -1.939 l 3.171 3.742 l 5.392 -9.175 a 1.5 1.5 0 0 1 2.586 1.52 L 8.331 14.257 a 1.5 1.5 0 0 1 -1.293 0.74" /></svg></hx-icon><hx-icon class="style-scope hx-checkbox" id="hxMinus" aria-hidden="true" type="minus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 3 9 a 1 1 0 1 1 0 -2 h 10 a 1 1 0 0 1 0 2 H 3 Z" /></svg></hx-icon></div></label></hx-checkbox>␊
+              </td>`
+
+> Snapshot 10
+
+    `<td data-dom-diff="hxCheckbox-disabled-checked">␊
+                <hx-checkbox disabled="" aria-disabled="true" checked=""><label class="style-scope hx-checkbox" id="hxCheckbox"><input disabled="" class="style-scope hx-checkbox" id="hxNativeControl" type="checkbox"><div class="style-scope hx-checkbox" id="hxCustomControl"><hx-icon class="style-scope hx-checkbox" id="hxTick" aria-hidden="true" type="checkmark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 7.038 14.997 c -0.438 0 -0.858 -0.192 -1.145 -0.53 L 1.355 9.111 a 1.5 1.5 0 0 1 2.289 -1.939 l 3.171 3.742 l 5.392 -9.175 a 1.5 1.5 0 0 1 2.586 1.52 L 8.331 14.257 a 1.5 1.5 0 0 1 -1.293 0.74" /></svg></hx-icon><hx-icon class="style-scope hx-checkbox" id="hxMinus" aria-hidden="true" type="minus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 3 9 a 1 1 0 1 1 0 -2 h 10 a 1 1 0 0 1 0 2 H 3 Z" /></svg></hx-icon></div></label></hx-checkbox>␊
+              </td>`
+
+> Snapshot 11
+
+    `<td data-dom-diff="hxCheckbox-disabled-indeterminate">␊
+                <hx-checkbox disabled="" aria-disabled="true" indeterminate=""><label class="style-scope hx-checkbox" id="hxCheckbox"><input disabled="" class="style-scope hx-checkbox" id="hxNativeControl" type="checkbox"><div class="style-scope hx-checkbox" id="hxCustomControl"><hx-icon class="style-scope hx-checkbox" id="hxTick" aria-hidden="true" type="checkmark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 7.038 14.997 c -0.438 0 -0.858 -0.192 -1.145 -0.53 L 1.355 9.111 a 1.5 1.5 0 0 1 2.289 -1.939 l 3.171 3.742 l 5.392 -9.175 a 1.5 1.5 0 0 1 2.586 1.52 L 8.331 14.257 a 1.5 1.5 0 0 1 -1.293 0.74" /></svg></hx-icon><hx-icon class="style-scope hx-checkbox" id="hxMinus" aria-hidden="true" type="minus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 3 9 a 1 1 0 1 1 0 -2 h 10 a 1 1 0 0 1 0 2 H 3 Z" /></svg></hx-icon></div></label></hx-checkbox>␊
+              </td>`
+
+> Snapshot 12
+
+    `<td data-dom-diff="hxCheckbox-disabled-checked-indeterminate">␊
+                <hx-checkbox disabled="" aria-disabled="true" checked="" indeterminate=""><label class="style-scope hx-checkbox" id="hxCheckbox"><input disabled="" class="style-scope hx-checkbox" id="hxNativeControl" type="checkbox"><div class="style-scope hx-checkbox" id="hxCustomControl"><hx-icon class="style-scope hx-checkbox" id="hxTick" aria-hidden="true" type="checkmark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 7.038 14.997 c -0.438 0 -0.858 -0.192 -1.145 -0.53 L 1.355 9.111 a 1.5 1.5 0 0 1 2.289 -1.939 l 3.171 3.742 l 5.392 -9.175 a 1.5 1.5 0 0 1 2.586 1.52 L 8.331 14.257 a 1.5 1.5 0 0 1 -1.293 0.74" /></svg></hx-icon><hx-icon class="style-scope hx-checkbox" id="hxMinus" aria-hidden="true" type="minus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path d="M 3 9 a 1 1 0 1 1 0 -2 h 10 a 1 1 0 0 1 0 2 H 3 Z" /></svg></hx-icon></div></label></hx-checkbox>␊
+              </td>`

test/dom-snapshots/components-checkboxes-MicrosoftEdge.js.snap

@@ -4,7 +4,7 @@ The actual snapshot is saved in `components-checkboxes-chrome.js.snap`.
 
 Generated by [AVA](https://ava.li).
 
-## chrome -- components/checkboxes/test.html
+## chrome on macOS 10.13 -- components/checkboxes/test.html
 
 > Snapshot 1
 

test/dom-snapshots/components-checkboxes-chrome.js.md

@@ -4,7 +4,7 @@ The actual snapshot is saved in `components-checkboxes-firefox.js.snap`.
 
 Generated by [AVA](https://ava.li).
 
-## firefox -- components/checkboxes/test.html
+## firefox on Windows 10 -- components/checkboxes/test.html
 
 > Snapshot 1