fix(karma): fix unit tests across the all supported browsers (#1322)

Author: musienkoyuriy

.travis.yml

@@ -2,6 +2,11 @@ language: node_js
 node_js:
   - "6"
 
+env:
+  global:
+    - SAUCE_USERNAME=valorkin
+    - SAUCE_ACCESS_KEY=aeaf806e-ad5c-484b-a8fe-4b4b9f54e99a
+
 before_install:
   - export CHROME_BIN=chromium-browser
   - export DISPLAY=:99.0
@@ -11,6 +16,7 @@ script:
   - npm run pretest
   - npm run test-coverage
   - ./node_modules/.bin/codecov
+  - npm run test-cross
 
 after_success:
   - ./node_modules/.bin/codecov  -f coverage/coverage-final.json

demo/src/index-bs4.html

@@ -4,7 +4,7 @@
   <title>Angular2 Bootstrap</title>
 
   <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta http-equiv="X-UA-Compatible" content="IE=9; IE=edge">
   <meta name="description" content="Angular2 Bootstrap">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" href="data:;base64,iVBORw0KGgo=">

demo/src/polyfills.ts

@@ -18,3 +18,4 @@ import 'core-js/es6/reflect';
 
 import 'core-js/es7/reflect';
 import 'zone.js/dist/zone';
+import 'classlist-polyfill';

karma.conf.js

@@ -1,6 +1,8 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/0.13/config/configuration-file.html
 
+const customLaunchers = require('./scripts/sauce-browsers').customLaunchers;
+
 module.exports = function (config) {
   const configuration = {
     basePath: '',
@@ -28,8 +30,8 @@ module.exports = function (config) {
       environment: 'dev'
     },
     reporters: config.angularCli && config.angularCli.codeCoverage
-              ? ['progress', 'karma-remap-istanbul']
-              : ['progress'],
+      ? ['progress', 'karma-remap-istanbul']
+      : ['progress'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_DEBUG,
@@ -48,5 +50,32 @@ module.exports = function (config) {
     configuration.browsers = ['Chrome_travis_ci'];
   }
 
+  console.log(process.env.SAUCE)
+  if (process.env.SAUCE) {
+    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.');
+      process.exit(1);
+    }
+
+    configuration.plugins.push(require('karma-sauce-launcher'));
+    configuration.reporters.push('saucelabs');
+    configuration.sauceLabs = {
+      verbose: true,
+      testName: 'ng2-bootstrap unit tests',
+      recordScreenshots: false,
+      username: process.env.SAUCE_USERNAME,
+      accessKey: process.env.SAUCE_ACCESS_KEY,
+      connectOptions: {
+        port: 5757,
+        logfile: 'sauce_connect.log'
+      },
+      public: 'public'
+    };
+    configuration.captureTimeout = 0;
+    configuration.customLaunchers = customLaunchers();
+    configuration.browsers = Object.keys(configuration.customLaunchers);
+    configuration.concurrency = 2;
+  }
+
   config.set(configuration);
 };

package.json

@@ -19,10 +19,11 @@
     "generate-bs4": "node scripts/generate-bs4.js",
     "pretest": "run-s lint build link",
     "test": "ng test -sr",
+    "test-cross": "SAUCE=true ng test -sr",
     "test-coverage": "ng test -sr -cc",
     "pree2e": "webdriver-manager update",
     "e2e": "protractor",
-    "e2e.saucelabs": "tsc -p ./demo/e2e/ && webdriver-manager update && protractor protractor.saucelabs.conf.js"
+    "e2e-cross": "SAUCE=true npm run e2e"
   },
   "main": "bundles/ng2-bootstrap.umd.js",
   "module": "index.js",
@@ -63,6 +64,7 @@
     "angular-cli": "1.0.0-beta.20-4",
     "bootstrap": "3.3.7",
     "chokidar-cli": "1.2.0",
+    "classlist-polyfill": "1.0.3",
     "codecov": "1.0.1",
     "codelyzer": "^2.0.0-beta.1",
     "conventional-changelog-cli": "1.2.0",
@@ -83,6 +85,7 @@
     "karma-cli": "1.0.1",
     "karma-jasmine": "1.0.2",
     "karma-remap-istanbul": "0.2.1",
+    "karma-sauce-launcher": "1.1.0",
     "lite-server": "2.2.2",
     "lodash": "4.17.2",
     "markdown-loader": "github:valorkin/markdown-loader",

protractor.conf.js

@@ -2,9 +2,10 @@
 // https://github.com/angular/protractor/blob/master/docs/referenceConf.js
 
 /*global jasmine */
-var SpecReporter = require('jasmine-spec-reporter');
+const SpecReporter = require('jasmine-spec-reporter');
+const customLaunchers = require('./scripts/sauce-browsers').customLaunchers;
 
-exports.config = {
+const config = {
   allScriptsTimeout: 11000,
   specs: [
     './demo/e2e/**/*.e2e-spec.ts'
@@ -31,3 +32,16 @@ exports.config = {
     jasmine.getEnv().addReporter(new SpecReporter());
   }
 };
+
+if (process.env.SAUCE) {
+  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.');
+    process.exit(1);
+  }
+
+  delete config.capabilities;
+  config.multiCapabilities = customLaunchers();
+  // todo: O`Really?
+  config.baseUrl = 'http://valor-software.com/ng2-bootstrap/';
+}
+exports.config = config;

protractor.saucelabs.conf.js

@@ -0,0 +1,5 @@
+exports.fireEvent = function (target, action) {
+  var event = document.createEvent('Event');
+  event.initEvent(action, false, true);
+  target.dispatchEvent(event);
+};

scripts/helpers.js

@@ -0,0 +1,29 @@
+module.exports.customLaunchers = function customLaunchers() {
+  return {
+    sl_chrome: {
+      base: 'SauceLabs',
+      browserName: 'chrome',
+      version: "52.0",
+      platform: "Windows 7"
+    },
+    sl_firefox: {
+      base: 'SauceLabs',
+      browserName: 'Firefox',
+      platform: 'Windows 7',
+      version: '46.0'
+    },
+    sl_ie_9: {
+      base: 'SauceLabs',
+      browserName: 'internet explorer',
+      version: "9.0",
+      platform: "Windows 7"
+    },
+    sl_ie_11: {
+      base: 'SauceLabs',
+      browserName: 'internet explorer',
+      version: "11.0",
+      platform: "Windows 8.1"
+    }
+  };
+};
+

scripts/sauce-browsers.js

@@ -124,7 +124,7 @@ describe('Directive: Collapse', () => {
       context.isHidden = false;
       fixture.detectChanges();
       let heightWithDynamic = element.offsetHeight;
-      expect(heightWithDynamic).toBeGreaterThan(heightWithoutDynamic);
+      expect(heightWithDynamic).toBeGreaterThanOrEqual(heightWithoutDynamic);
     });
 
     it('should shrink accordingly when content size inside collapse decreases', () => {
@@ -135,7 +135,7 @@ describe('Directive: Collapse', () => {
       context.isHidden = true;
       fixture.detectChanges();
       let heightWithoutDynamic = element.offsetHeight;
-      expect(heightWithoutDynamic).toBeLessThan(heightWithDynamic);
+      expect(heightWithoutDynamic).toBeLessThanOrEqual(heightWithDynamic);
     });
   });