Add initial Saucelabs test setup

karma.conf.js

@@ -1,49 +1,7 @@
 'use strict';
 
-var RewirePlugin = require('rewire-webpack');
-var webpackConfig = require('./webpack.config.js');
-
-// Remove the bits from the shared config
-// that we don't want for tests.
-delete webpackConfig.output;
-delete webpackConfig.entry;
-
-// Add this just for testing:
-webpackConfig.plugins = [
-  new RewirePlugin(),
-];
-
+var karmaConfig = require('./karma.config.shared');
 
 module.exports = function (config) {
-  config.set({
-    basePath: '',
-    browsers: ['Firefox'],
-    colors: true,
-    singleRun: true,
-    frameworks: [
-      'mocha',
-      'chai',
-      'sinon',
-    ],
-    files: [
-      'tests/test-loader.js',
-    ],
-    preprocessors: {
-      'tests/test-loader.js': ['webpack', 'sourcemap'],
-    },
-    reporters: ['mocha'],
-    webpack: webpackConfig,
-    webpackServer: {
-      noInfo: true,
-    },
-    plugins: [
-      'karma-sinon',
-      'karma-mocha',
-      'karma-mocha-reporter',
-      'karma-chai',
-      'karma-firefox-launcher',
-      'karma-sourcemap-loader',
-      'karma-webpack',
-    ],
-  });
+  config.set(karmaConfig);
 };

karma.conf.sauce.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var defaults = require('lodash.defaults');
+var karmaConfig = require('./karma.config.shared');
+var browsers = require('mozilla-payments-saucelabs-browsers');
+
+
+module.exports = function (config) {
+
+  if (!process.env.SAUCE_USERNAME || !process.env.SAUCE_ACCESS_KEY) {
+    console.log('Make sure the SAUCE_USERNAME and ' +
+                'SAUCE_ACCESS_KEY environment variables are set.');
+    throw new Error('Missing SAUCE_USERNAME and SAUCE_ACCESS_KEY env vars');
+  }
+
+  karmaConfig.plugins.push('karma-sauce-launcher');
+  karmaConfig.reporters.push('saucelabs');
+
+  config.set(defaults({
+    // Increase timeout in case connection in CI is slow
+    browserDisconnectTimeout: 10000,
+    browserDisconnectTolerance: 2,
+    browserNoActivityTimeout: 30000,
+    captureTimeout: 120000,
+    customLaunchers: browsers,
+    browsers: Object.keys(browsers),
+    port: 9876,
+    sauceLabs: {
+      testName: 'Payments UI Unit Tests',
+      recordScreenshots: false,
+      connectOptions: {
+        username: process.env.SAUCE_USERNAME,
+        accessKey: process.env.SAUCE_ACCESS_KEY,
+        tunnelIdentifier: 'autoGeneratedTunnelID',
+      },
+    },
+  }, karmaConfig));
+};

karma.config.shared.js

@@ -0,0 +1,48 @@
+'use strict';
+
+/* This is the shared karma config */
+
+var RewirePlugin = require('rewire-webpack');
+var webpackConfig = require('./webpack.config.js');
+
+// Remove the bits from the shared config
+// that we don't want for tests.
+delete webpackConfig.output;
+delete webpackConfig.entry;
+
+// Add this just for testing:
+webpackConfig.plugins = [
+  new RewirePlugin(),
+];
+
+module.exports = {
+  basePath: '',
+  browsers: ['Firefox'],
+  colors: true,
+  frameworks: [
+    'mocha',
+    'chai',
+    'sinon',
+  ],
+  files: [
+    'tests/test-loader.js',
+  ],
+  preprocessors: {
+    'tests/test-loader.js': ['webpack', 'sourcemap'],
+  },
+  reporters: ['mocha'],
+  plugins: [
+    'karma-sinon',
+    'karma-mocha',
+    'karma-mocha-reporter',
+    'karma-chai',
+    'karma-firefox-launcher',
+    'karma-sourcemap-loader',
+    'karma-webpack',
+  ],
+  singleRun: true,
+  webpack: webpackConfig,
+  webpackServer: {
+    noInfo: true,
+  },
+};

package.json

@@ -45,6 +45,7 @@
     "karma-firefox-launcher": "0.1.6",
     "karma-mocha": "0.2.0",
     "karma-mocha-reporter": "1.0.2",
+    "karma-sauce-launcher": "0.2.14",
     "karma-sinon": "1.0.4",
     "karma-sourcemap-loader": "0.3.5",
     "karma-webpack": "1.5.1",
@@ -52,6 +53,7 @@
     "load-grunt-tasks": "3.1.0",
     "lodash.defaults": "3.1.2",
     "mocha": "2.2.5",
+    "mozilla-payments-saucelabs-browsers": "0.0.1",
     "node-libs-browser": "0.5.0",
     "payment-icons": "0.0.6",
     "rewire": "2.3.4",

public/js/views/complete-payment.jsx

@@ -16,6 +16,13 @@ module.exports = React.createClass({
   propTypes: {
     productId: React.PropTypes.string.isRequired,
     userEmail: React.PropTypes.string.isRequired,
+    win: React.PropTypes.object,
+  },
+
+  getDefaultProps: function() {
+    return {
+      win: window,
+    };
   },
 
   componentDidMount: function() {
@@ -24,14 +31,15 @@ module.exports = React.createClass({
 
   handleClick: function(e) {
     e.preventDefault();
-    if (window.parent !== window) {
+    var win = this.props.win;
+    if (win.parent !== window) {
       // Note: the targetOrigin is wide open.
       // Nothing sensitive should be sent whilst
       // that's the case.
       console.log('Telling parent to close modal.');
       // Stringifying the object is necessary for
       // IE9 support.
-      window.parent.postMessage(JSON.stringify({
+      win.parent.postMessage(JSON.stringify({
         event: 'purchase-completed',
       }), '*');
     } else {

tasks/karma.js

@@ -2,7 +2,7 @@ var grunt = require('grunt');
 
 module.exports = {
   options: {
-    logLevel: grunt.option('log-level') || 'ERROR',
+    logLevel: grunt.option('log-level') || 'INFO',
   },
   dev: {
     configFile: 'karma.conf.js',
@@ -10,6 +10,8 @@ module.exports = {
   },
   run: {
     configFile: 'karma.conf.js',
-    singleRun: true
+  },
+  sauce: {
+    configFile: 'karma.conf.sauce.js',
   },
 };

tests/test.complete-payment.jsx

@@ -11,21 +11,24 @@ var helpers = require('./helpers');
 describe('CompletePayment', function() {
 
   beforeEach(function() {
+    this.sandbox = sinon.sandbox.create();
     this.email = 'buyer@somewhere.org';
-
+    this.win = {
+      parent: {
+        postMessage: this.sandbox.stub(),
+      },
+    };
     React = require('react');
     TestUtils = require('react/lib/ReactTestUtils');
-
     this.CompletePayment = TestUtils.renderIntoDocument(
       <CompletePayment productId='mozilla-concrete-brick'
-                       userEmail={this.email} />
+                       userEmail={this.email}
+                       win={this.win} />
     );
-
-    sinon.stub(window.parent, 'postMessage');
   });
 
   afterEach(function() {
-    window.parent.postMessage.restore();
+    this.sandbox.restore();
   });
 
   it('should show where the receipt was emailed', function() {
@@ -42,7 +45,7 @@ describe('CompletePayment', function() {
 
     TestUtils.Simulate.click(this.button, event);
     assert.equal(event.preventDefault.callCount, 1);
-    assert.ok(window.parent.postMessage.calledWith(
+    assert.ok(this.win.parent.postMessage.calledWith(
       JSON.stringify({event: 'purchase-completed'}), '*'));
   });