Cross-browser testing w/ Sauce Labs

.travis.yml

@@ -2,4 +2,9 @@ language: node_js
 node_js:
   - "0.10"
 after_script:
-  - npm run coveralls
+  - npm run coveralls
+  - npm run test-cross-browser
+env:
+  global:
+    - secure: H7Yi0dWwKnnAbGHIQjFnFTDbZy177ghm2VtzV0z9FpAFI5arQZQpE0cIe3glsEawRqXoYSjopLza8oDHRnbYynPj2a7vrQy/duiYFNbTgE4xzXlvZzRMs2D+9De+fMHNjmcsSoEgR9gukwooiN2KYELtQC8tyn/H8T0J3GAGXBM=
+    - secure: LcwufGqqrC7aMj88Dwkevu2ugmDWIpvL07gLtk3gMu+xPFTnyXtPNgFOXnOOXSl3tsw5w8y04aJvIWNKWN5xHOSBdAd/T4sNfhqhHh5q8h6vwsww4IH9u3cCsEQburY9tnIxs2qUkcIweijsXWXrAZUTP0sckqgq8fTtKW8JF8k=

README.md

@@ -5,6 +5,8 @@
 [![npm](https://img.shields.io/npm/v/essential-react.svg?style=flat-square)](https://www.npmjs.com/package/essential-react)
 [![David](https://img.shields.io/david/pheuter/essential-react.svg?style=flat-square)](https://david-dm.org/pheuter/essential-react)
 
+[![Sauce Test Status](https://saucelabs.com/browser-matrix/essential_react.svg)](https://saucelabs.com/u/essential_react)
+
 A minimal skeleton for building testable React apps using ES6.
 
 - [Design Goals](#design-goals)
@@ -16,6 +18,7 @@ A minimal skeleton for building testable React apps using ES6.
   - [server](#server)
   - [build](#build)
   - [test](#test)
+  - [test-cross-browser](#test-cross-browser)
   - [coveralls](#coveralls)
   - [clean](#clean)
 - [Changelog](#changelog)
@@ -109,6 +112,16 @@ $ npm test
 
 Leverages [Karma](http://karma-runner.github.io/0.12/index.html) to run through the test suite using [PhantomJS](http://phantomjs.org/) and generate code coverage reports.
 
+### test-cross-browser
+
+```sh
+$ npm run test-cross-browser
+```
+
+**Input:** `test/main.js`
+
+Runs the unit test suite against various browsers using the [Sauce Labs](https://saucelabs.com/) automated cross-browser testing tool.
+
 ### coveralls
 
 ```sh

karma.cross-browser.config.js

@@ -0,0 +1,106 @@
+module.exports = function(config) {
+
+  /**
+   * Used by sauce labs to launch various browsers
+   */
+  var customLaunchers = {
+    sl_chrome: {
+      base: 'SauceLabs',
+      browserName: 'chrome'
+    },
+    sl_firefox: {
+      base: 'SauceLabs',
+      browserName: 'firefox'
+    },
+    sl_ie: {
+      base: 'SauceLabs',
+      browserName: 'internet explorer'
+    }
+  }
+
+  config.set({
+    /**
+     * These are the files required to run the tests.
+     *
+     * The `Function.prototype.bind` polyfill is required by PhantomJS
+     * because it uses an older version of JavaScript.
+     */
+    files: [
+      './test/polyfill.js',
+      './test/main.js'
+    ],
+
+    /**
+     * The actual tests are preprocessed by the karma-webpack plugin, so that
+     * their source can be properly transpiled.
+     */
+    preprocessors: {
+      './test/main.js': ['webpack']
+    },
+
+    /**
+     * We want to use the Sauce Lab browsers defined above.
+     */
+    browsers: Object.keys(customLaunchers),
+
+    /**
+     * Use Mocha as the test framework, Sinon for mocking, and
+     * Chai for assertions.
+     */
+    frameworks: ['mocha', 'sinon-chai'],
+
+    /**
+     * Integrate with the sauce labs reporter.
+     */
+    reporters: ['dots', 'saucelabs'],
+
+
+    /**
+     * The configuration for the karma-webpack plugin.
+     */
+    webpack: {
+      module: {
+        loaders: [
+          { test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader"}
+        ]
+      },
+      resolve: {
+        extensions: ['', '.js', '.jsx']
+      }
+    },
+
+    /**
+     * Configuration option to turn off verbose logging of webpack compilation.
+     */
+    webpackMiddleware: {
+      noInfo: true
+    },
+
+    /**
+     * Once the mocha test suite returns, we want to exit from the test runner as well.
+     */
+    singleRun: true,
+
+    /**
+     * Identifies the sauce labs session name
+     */
+    sauceLabs: {
+      testName: 'Essential React Unit Tests'
+    },
+
+    /**
+     * Used by sauce labs to launch the various browsers defined above
+     */
+    customLaunchers: customLaunchers,
+
+    /**
+     * List of plugins
+     */
+    plugins: [
+      'karma-mocha',
+      'karma-webpack',
+      'karma-sinon-chai',
+      'karma-sauce-launcher'
+    ],
+  });
+}

package.json

@@ -7,6 +7,7 @@
     "server": "node server.js",
     "build": "webpack -p --config webpack.production.config.js",
     "test": "PHANTOMJS_BIN=./node_modules/.bin/phantomjs ./node_modules/karma/bin/karma start karma.config.js",
+    "test-cross-browser": "./node_modules/karma/bin/karma start karma.cross-browser.config.js",
     "coveralls": "cat coverage/lcov.info | coveralls",
     "clean": "rm build/app.js"
   },
@@ -37,6 +38,7 @@
     "karma-coverage": "^0.2.7",
     "karma-mocha": "^0.1.10",
     "karma-phantomjs-launcher": "^0.1.4",
+    "karma-sauce-launcher": "^0.2.10",
     "karma-sinon-chai": "^0.3.0",
     "karma-webpack": "^1.5.0",
     "phantomjs": "^1.9.16",