From 3aa6bee6c428dac123be90735c14235e1374e4f9 Mon Sep 17 00:00:00 2001 From: Mark Fayngersh Date: Sat, 21 Mar 2015 12:13:03 -0400 Subject: [PATCH 1/2] Initial progress towards Sauce Labs integration --- .travis.yml | 7 ++- README.md | 2 + karma.cross-browser.config.js | 108 ++++++++++++++++++++++++++++++++++ package.json | 2 + 4 files changed, 118 insertions(+), 1 deletion(-) create mode 100644 karma.cross-browser.config.js diff --git a/.travis.yml b/.travis.yml index 7c16620..e0873cf 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,4 +2,9 @@ language: node_js node_js: - "0.10" after_script: - - npm run coveralls \ No newline at end of file + - npm run coveralls + - npm run test-cross-browser +env: + global: + - secure: H7Yi0dWwKnnAbGHIQjFnFTDbZy177ghm2VtzV0z9FpAFI5arQZQpE0cIe3glsEawRqXoYSjopLza8oDHRnbYynPj2a7vrQy/duiYFNbTgE4xzXlvZzRMs2D+9De+fMHNjmcsSoEgR9gukwooiN2KYELtQC8tyn/H8T0J3GAGXBM= + - secure: LcwufGqqrC7aMj88Dwkevu2ugmDWIpvL07gLtk3gMu+xPFTnyXtPNgFOXnOOXSl3tsw5w8y04aJvIWNKWN5xHOSBdAd/T4sNfhqhHh5q8h6vwsww4IH9u3cCsEQburY9tnIxs2qUkcIweijsXWXrAZUTP0sckqgq8fTtKW8JF8k= diff --git a/README.md b/README.md index 8b94f38..a7ab544 100644 --- a/README.md +++ b/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) diff --git a/karma.cross-browser.config.js b/karma.cross-browser.config.js new file mode 100644 index 0000000..9b532cd --- /dev/null +++ b/karma.cross-browser.config.js @@ -0,0 +1,108 @@ +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 run the tests using the PhantomJS headless browser. + * This is especially useful for continuous integration. + */ + browsers: Object.keys(customLaunchers), + + /** + * Use Mocha as the test framework, Sinon for mocking, and + * Chai for assertions. + */ + frameworks: ['mocha', 'sinon-chai'], + + /** + * After running the tests, return the results and generate a + * code coverage report. + */ + 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' + ], + }); +} \ No newline at end of file diff --git a/package.json b/package.json index 9d49dc0..30907d6 100644 --- a/package.json +++ b/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", From 9e018a1518d7770219bac30bae131eb4c9db1961 Mon Sep 17 00:00:00 2001 From: Mark Fayngersh Date: Sat, 21 Mar 2015 12:23:04 -0400 Subject: [PATCH 2/2] README and comment tweaks --- README.md | 11 +++++++++++ karma.cross-browser.config.js | 6 ++---- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index a7ab544..6324b03 100644 --- a/README.md +++ b/README.md @@ -18,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) @@ -111,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 diff --git a/karma.cross-browser.config.js b/karma.cross-browser.config.js index 9b532cd..f0565ae 100644 --- a/karma.cross-browser.config.js +++ b/karma.cross-browser.config.js @@ -39,8 +39,7 @@ module.exports = function(config) { }, /** - * We want to run the tests using the PhantomJS headless browser. - * This is especially useful for continuous integration. + * We want to use the Sauce Lab browsers defined above. */ browsers: Object.keys(customLaunchers), @@ -51,8 +50,7 @@ module.exports = function(config) { frameworks: ['mocha', 'sinon-chai'], /** - * After running the tests, return the results and generate a - * code coverage report. + * Integrate with the sauce labs reporter. */ reporters: ['dots', 'saucelabs'],