test(ui): implement automated browser testing

.travis.yml

@@ -1,4 +1,3 @@
-sudo: false
 dist: xenial
 os:
   - linux
@@ -10,8 +9,7 @@ notifications:
 addons:
   firefox: latest
   chrome: stable
-  #sauce_connect: true
-branch:
+branches:
   only:
   - master
 install:
@@ -26,6 +24,14 @@ before_script:
   #- while ! curl --silent http://localhost:3000 > /dev/null 2>&1; do sleep 1; done
 script:
   - yarn lint
-  #- yarn test:coverage
   - yarn generate
-  - yarn test
+  - yarn compile --prod
+  - if [[ "$TRAVIS_EVENT_TYPE" != false ]]; then
+      echo "Pull request detected.  Running standard test suite first...";
+      yarn test;
+      echo "Running Sauce tests...";
+      yarn test:sauce || travis_terminate 1;
+    else
+      echo "Pull request was NOT detected. Running standard test suite...";
+      yarn test || travis_terminate 1;
+    fi

karma-sauce-init.js

@@ -0,0 +1,9 @@
+/**
+ * @overview Karma SauceLabs start up script.
+ *
+ * Used to initialize minified HelixUI ES Modules for testing.
+ */
+
+import HelixUI from './dist/js/helix-ui.module.min.js';
+
+HelixUI.initialize();

karma.sauce.config.js

@@ -0,0 +1,98 @@
+/* eslint-env node */
+const { createDefaultConfig } = require('@open-wc/testing-karma');
+const merge = require('deepmerge');
+
+const customLaunchers = {
+	mac_firefox: {
+		base: 'SauceLabs',
+		browserName: 'firefox',
+        platform: 'OS X 10.13',
+        version: 'latest-1'
+	},
+	mac_safari: {
+		base: 'SauceLabs',
+		browserName: 'safari',
+        platform: 'OS X 10.13',
+        version: 'latest-1'
+	},
+	mac_chrome: {
+		base: 'SauceLabs',
+		browserName: 'chrome',
+        platform: 'OS X 10.13',
+        version: 'latest-1'
+	},
+	win_edge_legacy: {
+		base: 'SauceLabs',
+		browserName: 'microsoftedge',
+		platform: 'Windows 10',
+		version: '18.17763'
+    },
+    win_10_ie_11: {
+        base: 'SauceLabs',
+        browserName: 'internet explorer',
+        platform: 'Windows 10',
+        version: '11.285',
+    },
+	// win_edge_chromium: { // Current SL config only allows 5 browsers per test run
+	// 	base: 'SauceLabs',
+	// 	browserName: 'microsoftedge',
+	// 	platform: 'Windows 10',
+	// 	version: 'latest'
+	// },
+};
+
+module.exports = config => {
+	config.set(
+		merge(createDefaultConfig(config), {
+			files: [
+				// runs all files ending with .test in the test folder,
+				// can be overwritten by passing a --grep flag. examples:
+				//
+				// npm run test -- --grep test/foo/bar.test.js
+                // npm run test -- --grep test/bar/*
+                { pattern: 'karma-sauce-init.js',
+                  type: 'module'
+                },
+                { pattern: config.grep ? config.grep : 'src/elements/**/*.spec.js',
+                  type: 'module'
+                },
+            ],
+			// see the karma-esm docs for all options
+			esm: {
+				// if you are using 'bare module imports' you will need this option
+				nodeResolve: true,
+                compatibility: 'max',
+                moduleDirs: ['node_modules', 'dist'],
+            },
+			sauceLabs: {
+				testName: 'HelixUI Component Unit Tests',
+                public: "public restricted",
+                recordVideo: false,
+                // recordLogs: false,
+			},
+			customLaunchers: customLaunchers,
+			browsers: Object.keys(customLaunchers),
+			reporters: ['dots', 'saucelabs'],
+			singleRun: true,
+			browserDisconnectTimeout : 120000, // default 2000
+			browserDisconnectTolerance : 10, // default 0
+			browserNoActivityTimeout: 120000, // default 10000
+			captureTimeout: 120000, // default 60000
+            concurrency: 5,
+			client: {
+				mocha: {
+					timeout : 10000
+				}
+            },
+            polyfillsLoader: {
+                polyfills: {
+                  webcomponents: true,
+                  shadyCssCustomStyle: true,
+                },
+            },
+            // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
+            logLevel: config.LOG_INFO,
+		}),
+	);
+	return config;
+};

package.json

@@ -45,6 +45,7 @@
     "jsdom": "^12.2.0",
     "json5": "^2.1.3",
     "karma": "5.0.2",
+    "karma-sauce-launcher": "~4.1.4",
     "less": "^3.11.1",
     "less-loader": "^5.0.0",
     "lit-element": "^2.3.1",
@@ -94,6 +95,7 @@
     "test:unit:deprecated": "mocha test/run_unit.js",
     "test:deprecated": "cd test; yarn test",
     "test": "karma start",
+    "test:sauce": "karma start karma.sauce.config.js",
     "test:update": "karma start --update-snapshots",
     "test:prune": "karma start --prune-snapshots",
     "test:watch": "karma start --auto-watch=true --single-run=false"
@@ -114,6 +116,7 @@
     "Evan Nabors",
     "James Thompson",
     "Lalith Karikelli",
+    "Nicko Winner-Arroyo",
     "Shaleen Agarwal",
     "Steven Salinas",
     "Ty Taylor"

src/elements/hx-error/index.spec.js

@@ -61,7 +61,11 @@ describe('<hx-error> component tests', () => {
                 const component = /** @type { HXErrorElement } */ await fixture(template);
                 const name = component.slot;
 
-                expect(name).to.be.equal('');
+                if ( name !== null ) {
+                    expect(name).to.be.equal('');
+                } else {
+                    expect(name).to.be.null; // IE11 and Legacy Edge
+                }
             });
         });