Add cross browser testing via SauceLabs (#298)

* Add sauce labs testing info to karma

This also removes Node versions 4, 5, 6 from Travis.  The node
version only matters for development not for use.  I don't
think it's a problem officially supporting only the latest node
for development.

* Make specs work under IE 11

Author: claydiffrient

.travis.yml

@@ -1,9 +1,6 @@
 language: node_js
 node_js:
   - "7"
-  - "6"
-  - "5"
-  - "4"
 before_script:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start

README.md

@@ -5,6 +5,8 @@ Accessible modal dialog component for React.JS
 [![Code Climate](https://codeclimate.com/github/reactjs/react-modal/badges/gpa.svg)](https://codeclimate.com/github/reactjs/react-modal)
 [![Coverage Status](https://coveralls.io/repos/github/reactjs/react-modal/badge.svg?branch=master)](https://coveralls.io/github/reactjs/react-modal?branch=master)
 
+[![Build Status](https://saucelabs.com/browser-matrix/cd-reactmodal.svg)](https://saucelabs.com/beta/builds/ad582339a83145e1a4d3e8b8a1809b6c)
+
 ## Active Development
 The modal is currently undergoing significant development for a v2 release.  The `master` branch contains that development work.
 If you'd like to see the latest stable version please use the release tags (https://github.com/reactjs/react-modal/releases)

karma.conf.js

@@ -1,4 +1,66 @@
-module.exports = function(config) {
+const webpackTestConfig = require('./webpack.test.config');
+
+module.exports = function karmaConfig (config) {
+  let browsers = [];
+  const customLaunchers = {};
+
+  function createCustomLauncher (browser, version, platform) {
+    return {
+      base: 'SauceLabs',
+      browserName: browser,
+      version,
+      platform
+    };
+  }
+
+  if (process.env.SAUCE_USERNAME || process.env.SAUCE_ACCESS_KEY) {
+    const OPTIONS = [
+      'SAUCE_CHROME',
+      'SAUCE_FIREFOX',
+      'SAUCE_SAFARI',
+      'SAUCE_IE',
+      'SAUCE_EDGE',
+    ];
+
+    let runAll = true;
+
+    OPTIONS.forEach((opt) => {
+      if (process.env[opt]) {
+        runAll = false;
+      }
+    });
+
+    // Chrome
+    if (runAll || process.env.SAUCE_CHROME) {
+      customLaunchers.SL_Chrome = createCustomLauncher('chrome');
+    }
+
+    // Firefox
+    if (runAll || process.env.SAUCE_FIREFOX) {
+      customLaunchers.SL_Firefox = createCustomLauncher('firefox');
+    }
+
+    // Safari
+    if (runAll || process.env.SAUCE_SAFARI) {
+      customLaunchers.SL_Safari10 = createCustomLauncher('safari', 10);
+      customLaunchers.SL_Safari9 = createCustomLauncher('safari', 9);
+    }
+
+    // IE
+    if (runAll || process.env.SAUCE_IE) {
+      customLaunchers.SL_IE11 = createCustomLauncher('internet explorer', 11, 'Windows 10');
+    }
+
+    // Edge
+    if (runAll || process.env.SAUCE_EDGE) {
+      customLaunchers.SL_Edge = createCustomLauncher('microsoftedge', null, 'Windows 10');
+    }
+
+    browsers = Object.keys(customLaunchers);
+  } else {
+    browsers = [(process.env.CONTINUOUS_INTEGRATION) ? 'Firefox' : 'Chrome'];
+  }
+
   config.set({
 
     basePath: '',
@@ -10,10 +72,10 @@ module.exports = function(config) {
     ],
 
     preprocessors: {
-      'specs/spec_index.js': [ 'webpack', 'sourcemap' ]
+      'specs/spec_index.js': ['webpack', 'sourcemap']
     },
 
-    webpack: require('./webpack.test.config'),
+    webpack: webpackTestConfig,
 
     webpackMiddleware: {
       stats: 'errors-only'
@@ -39,10 +101,25 @@ module.exports = function(config) {
 
     autoWatch: true,
 
-    browsers: [ (process.env.CONTINUOUS_INTEGRATION) ? 'Firefox' : 'Chrome' ],
-
-    captureTimeout: 60000,
-
-    singleRun: (process.env.CONTINUOUS_INTEGRATION)
+    browsers,
+    customLaunchers,
+
+    // Increase timeouts to prevent the issue with disconnected tests (https://goo.gl/nstA69)
+    captureTimeout: 4 * 60 * 1000,
+    browserDisconnectTimeout: 10000,
+    browserDisconnectTolerance: 1,
+    browserNoActivityTimeout: 4 * 60 * 1000,
+
+    singleRun: (process.env.CONTINUOUS_INTEGRATION),
+
+    // SauceLabs config
+    sauceLabs: {
+      recordScreenshots: false,
+      connectOptions: {
+        port: 5757,
+        logfile: 'sauce_connect.log'
+      },
+      public: 'public'
+    }
   });
 };

package.json

@@ -55,6 +55,7 @@
     "karma-firefox-launcher": "1.0.0",
     "karma-mocha": "^1.3.0",
     "karma-mocha-reporter": "^2.2.1",
+    "karma-sauce-launcher": "^1.1.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.8.1",
     "mocha": "3.2.0",

specs/Modal.spec.js

@@ -270,6 +270,30 @@ describe('Modal', () => {
     unmountModal();
   });
 
+  it('should close on Esc key event', () => {
+    const requestCloseCallback = sinon.spy();
+    const modal = renderModal({
+      isOpen: true,
+      shouldCloseOnOverlayClick: true,
+      onRequestClose: requestCloseCallback
+    });
+    expect(modal.props.isOpen).toEqual(true);
+    expect(() => {
+      Simulate.keyDown(modal.portal.content, {
+        // The keyCode is all that matters, so this works
+        key: 'FakeKeyToTestLater',
+        keyCode: 27,
+        which: 27
+      });
+    }).toNotThrow();
+    expect(requestCloseCallback.called).toBeTruthy();
+    // Check if event is passed to onRequestClose callback.
+    const event = requestCloseCallback.getCall(0).args[0];
+    expect(event).toBeTruthy();
+    expect(event.constructor).toBeTruthy();
+    expect(event.key).toEqual('FakeKeyToTestLater');
+  });
+
   describe('should close on overlay click', () => {
     afterEach('Unmount modal', () => {
       unmountModal();
@@ -365,7 +389,15 @@ describe('Modal', () => {
         });
         const overlay = TestUtils.scryRenderedDOMComponentsWithClass(modal.portal, 'ReactModal__Overlay');
         window.addEventListener('click', () => { hasPropagated = true; });
-        overlay[0].dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        // Work around for running the spec in IE 11
+        let mouseEvent = null;
+        try {
+          mouseEvent = new MouseEvent('click', { bubbles: true });
+        } catch (err) {
+          mouseEvent = document.createEvent('MouseEvent');
+          mouseEvent.initEvent('click', true, false);
+        }
+        overlay[0].dispatchEvent(mouseEvent);
         expect(hasPropagated).toBeTruthy();
       });
     });
@@ -380,34 +412,19 @@ describe('Modal', () => {
       expect(modal.props.isOpen).toEqual(true);
       const overlay = TestUtils.scryRenderedDOMComponentsWithClass(modal.portal, 'ReactModal__Overlay');
       expect(overlay.length).toEqual(1);
-      Simulate.mouseDown(overlay[0]); // click the overlay
-      Simulate.mouseUp(overlay[0]);
+      // click the overlay
+      Simulate.mouseDown(overlay[0]);
+      Simulate.mouseUp(overlay[0], {
+        // Used to test that this was the event received
+        fakeData: 'ABC'
+      });
       expect(requestCloseCallback.called).toBeTruthy();
       // Check if event is passed to onRequestClose callback.
       const event = requestCloseCallback.getCall(0).args[0];
       expect(event).toBeTruthy();
       expect(event.constructor).toBeTruthy();
-      expect(event.constructor.name).toEqual('SyntheticEvent');
-    });
-  });
-
-  it('should close on Esc key event', () => {
-    const requestCloseCallback = sinon.spy();
-    const modal = renderModal({
-      isOpen: true,
-      shouldCloseOnOverlayClick: true,
-      onRequestClose: requestCloseCallback
+      expect(event.fakeData).toEqual('ABC');
     });
-    expect(modal.props.isOpen).toEqual(true);
-    expect(() => {
-      Simulate.keyDown(modal.portal.content, { key: 'Esc', keyCode: 27, which: 27 });
-    }).toNotThrow();
-    expect(requestCloseCallback.called).toBeTruthy();
-    // Check if event is passed to onRequestClose callback.
-    const event = requestCloseCallback.getCall(0).args[0];
-    expect(event).toBeTruthy();
-    expect(event.constructor).toBeTruthy();
-    expect(event.constructor.name).toEqual('SyntheticEvent');
   });
 
   // it('adds --before-close for animations', function() {