Merge pull request #2700 from alecmerdler/karma-headless-chrome

Use Headless Chrome for Unit Tests

.gitlab-ci.yml

@@ -75,6 +75,13 @@ karma-tests:
   <<: *job
   stage: unit-tests
   script:
+    # Install Chrome
+    - set -xe
+    - curl -Ss https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
+    - echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list
+    - apt-get update -yqqq
+    - apt-get install -y google-chrome-stable
+
     - yarn test
 
 

Dockerfile

@@ -99,15 +99,6 @@ ADD static static
 # Run Webpack
 RUN yarn build
 
-# Run front-end tests
-ARG RUN_TESTS=true
-ENV RUN_TESTS ${RUN_TESTS}
-
-ADD karma.conf.js karma.conf.js
-RUN if [ "$RUN_TESTS" = true ]; then \
-        yarn test; \
-    fi
-
 # Optimize our images
 ADD static/img static/img
 RUN jpegoptim static/img/**/*.jpg
@@ -161,6 +152,9 @@ RUN rm -rf /grunt
 RUN rm package.json yarn.lock
 
 # Run the tests
+ARG RUN_TESTS=true
+ENV RUN_TESTS ${RUN_TESTS}
+
 ENV RUN_ACI_TESTS False
 ADD requirements-tests.txt requirements-tests.txt
 
@@ -168,7 +162,6 @@ RUN if [ "$RUN_TESTS" = true ]; then \
       venv/bin/pip install -r requirements-tests.txt ;\
     fi
 
-
 RUN if [ "$RUN_TESTS" = true ]; then \
       TEST=true PYTHONPATH="." venv/bin/py.test --timeout=7200 --verbose \
                 --show-count -x --color=no ./ && rm -rf /var/tmp/; \

karma.conf.js

@@ -38,7 +38,6 @@ module.exports = function(config) {
     ],
     exclude: [],
     preprocessors: {
-      'static/lib/ngReact/react.ngReact.min.js': ['webpack'],
       'static/lib/angular-moment.min.js': ['webpack'],
       'node_modules/core-js/index.js': ['webpack'],
       'static/test/test-index.ts': ['webpack'],
@@ -59,8 +58,11 @@ module.exports = function(config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['PhantomJS', 'Chrome'],
+    browsers: ['ChromeHeadless'],
     singleRun: false,
-    concurrency: Infinity
+    concurrency: Infinity,
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    }
   });
 };

package.json

@@ -4,8 +4,8 @@
   "private": true,
   "version": "1.0.0",
   "scripts": {
-    "dev": "./node_modules/.bin/karma start --browsers PhantomJS",
-    "test": "./node_modules/.bin/karma start --single-run --browsers PhantomJS",
+    "dev": "./node_modules/.bin/karma start --browsers ChromeHeadless",
+    "test": "./node_modules/.bin/karma start --single-run --browsers ChromeHeadless",
     "test:node": "JASMINE_CONFIG_PATH=static/test/jasmine.json ./node_modules/.bin/jasmine-ts './static/js/**/*.spec.ts'",
     "build": "NODE_ENV=production ./node_modules/.bin/webpack --progress",
     "watch": "./node_modules/.bin/webpack --watch"
@@ -33,8 +33,6 @@
     "jquery": "1.12.4",
     "ng-metadata": "^4.0.1",
     "raven-js": "^3.1.0",
-    "react": "^15.3.2",
-    "react-dom": "^15.3.2",
     "restangular": "^1.2.0",
     "rxjs": "^5.0.1",
     "showdown": "^1.6.4",
@@ -60,15 +58,13 @@
     "html-loader": "^0.4.5",
     "jasmine-core": "^2.5.2",
     "jasmine-ts": "0.0.3",
-    "karma": "^0.13.22",
-    "karma-chrome-launcher": "^2.0.0",
+    "karma": "^1.7.0",
+    "karma-chrome-launcher": "^2.1.1",
     "karma-coverage": "^0.5.5",
     "karma-es6-shim": "^1.0.0",
     "karma-jasmine": "^0.3.8",
-    "karma-phantomjs-launcher": "^1.0.0",
     "karma-webpack": "^1.8.1",
     "ngtemplate-loader": "^1.3.1",
-    "phantomjs-prebuilt": "^2.1.7",
     "script-loader": "^0.7.0",
     "source-map-loader": "0.1.5",
     "style-loader": "0.13.1",

static/lib/ngReact/react.dom.js

@@ -1,42 +0,0 @@
-/**
- * ReactDOM v15.3.2
- *
- * Copyright 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- */
-// Based off https://github.com/ForbesLindesay/umd/blob/master/template.js
-;(function(f) {
-  // CommonJS
-  if (typeof exports === "object" && typeof module !== "undefined") {
-    module.exports = f(require('react'));
-
-  // RequireJS
-  } else if (typeof define === "function" && define.amd) {
-    define(['react'], f);
-
-  // <script>
-  } else {
-    var g;
-    if (typeof window !== "undefined") {
-      g = window;
-    } else if (typeof global !== "undefined") {
-      g = global;
-    } else if (typeof self !== "undefined") {
-      g = self;
-    } else {
-      // works providing we're not in "use strict";
-      // needed for Java 8 Nashorn
-      // see https://github.com/facebook/react/issues/3037
-      g = this;
-    }
-    g.ReactDOM = f(g.React);
-  }
-
-})(function(React) {
-  return React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-});

static/lib/ngReact/react.ngReact.min.js

@@ -1 +0,0 @@
-!function(a,b){"undefined"!=typeof module&&module.exports?module.exports=b(require("react"),require("react-dom"),require("angular")):"function"==typeof define&&define.amd?define(["react","react-dom","angular"],function(c,d,angular){return a.ngReact=b(c,d,angular)}):a.ngReact=b(a.React,a.ReactDOM,a.angular)}(this,function(React,a,angular){"use strict";function b(a,b){if(angular.isFunction(a))return a;if(!a)throw new Error("ReactComponent name attribute must be specified");var c;try{c=b.get(a)}catch(d){}if(!c)try{c=a.split(".").reduce(function(a,b){return a[b]},window)}catch(d){}if(!c)throw Error("Cannot find react component "+a);return c}function c(a,b){if(a.wrappedInApply)return a;var c=function(){var c=arguments,d=b.$root.$$phase;return"$apply"===d||"$digest"===d?a.apply(null,c):b.$apply(function(){return a.apply(null,c)})};return c.wrappedInApply=!0,c}function d(a,b){return Object.keys(a||{}).reduce(function(d,e){var f=a[e];return d[e]=angular.isFunction(f)?c(f,b):f,d},{})}function e(a,b,c,d){"collection"===a&&angular.isFunction(b.$watchCollection)?c.forEach(function(a){b.$watchCollection(a,d)}):"reference"===a?angular.isFunction(b.$watchGroup)?b.$watchGroup(c,d):c.forEach(function(a){b.$watch(a,d)}):c.forEach(function(a){b.$watch(a,d,!0)})}function f(b,c,d,e){d.$evalAsync(function(){a.render(React.createElement(b,c),e[0])})}var g=function(c){return{restrict:"E",replace:!0,link:function(g,h,i){var j=b(i.name,c),k=function(){var a=g.$eval(i.props),b=d(a,g);f(j,b,g,h)};i.props?e(i.watchDepth,g,[i.props],k):k(),g.$on("$destroy",function(){i.onScopeDestroy?g.$eval(i.onScopeDestroy,{unmountComponent:a.unmountComponentAtNode.bind(this,h[0])}):a.unmountComponentAtNode(h[0])})}}},h=function(c){return function(g,h,i,j){var k={restrict:"E",replace:!0,link:function(i,k,l){var m=b(g,c);h=h||Object.keys(m.propTypes||{});var n=function(){var a={};h.forEach(function(b){a[b]=i.$eval(l[b])}),a=d(a,i),a=angular.extend({},a,j),f(m,a,i,k)},o=h.map(function(a){return l[a]});e(l.watchDepth,i,o,n),n(),i.$on("$destroy",function(){l.onScopeDestroy?i.$eval(l.onScopeDestroy,{unmountComponent:a.unmountComponentAtNode.bind(this,k[0])}):a.unmountComponentAtNode(k[0])})}};return angular.extend(k,i)}};return angular.module("react",[]).directive("reactComponent",["$injector",g]).factory("reactDirective",["$injector",h])});

static/test/test-index.ts

@@ -1,6 +1,5 @@
 declare var require: any;
 
-
 // Require all modules ending in ".spec.ts" from the js directory and all subdirectories
-var testsContext = require.context("../js", true, /\.spec\.ts$/);
+var testsContext = (<any>require).context("../js", true, /\.spec\.ts$/);
 testsContext.keys().forEach(testsContext);