Merge branch 'karma-headless-chrome-redux' into 'master'

Replace PhantomJS with Chrome in Karma test runner (2nd attempt)

Closes #33633

See merge request !12144

.gitlab-ci.yml

@@ -441,19 +441,23 @@ gitlab:assets:compile:
     - webpack-report/
 
 karma:
+  image: "dev.gitlab.org:5005/gitlab/gitlab-build-images:ruby-2.3.3-golang-1.8-git-2.7-chrome-59.0-node-7.1-postgresql-9.6"
   stage: test
   <<: *use-pg
   <<: *dedicated-runner
   <<: *except-docs
   variables:
     BABEL_ENV: "coverage"
+    CHROME_LOG_FILE: "chrome_debug.log"
   script:
     - bundle exec rake karma
   coverage: '/^Statements *: (\d+\.\d+%)/'
   artifacts:
     name: coverage-javascript
     expire_in: 31d
+    when: always
     paths:
+    - chrome_debug.log
     - coverage-javascript/
 
 codeclimate:

app/assets/javascripts/api.js

@@ -77,7 +77,7 @@ const Api = {
       dataType: 'json',
     })
       .done(label => callback(label))
-      .error(message => callback(message.responseJSON));
+      .fail(message => callback(message.responseJSON));
   },
 
   // Return group projects list. Filtered by query
@@ -134,7 +134,7 @@ const Api = {
       dataType: 'json',
     })
       .done(file => callback(null, file))
-      .error(callback);
+      .fail(callback);
   },
 
   users(query, options) {

changelogs/unreleased/karma-headless-chrome.yml

+---
+title: Replace PhantomJS with headless Chrome for karma test suite
+merge_request: 12036
+author:

config/karma.config.js

@@ -21,7 +21,18 @@ module.exports = function(config) {
 
   var karmaConfig = {
     basePath: ROOT_PATH,
-    browsers: ['PhantomJS'],
+    browsers: ['ChromeHeadlessCustom'],
+    customLaunchers: {
+      ChromeHeadlessCustom: {
+        base: 'ChromeHeadless',
+        displayName: 'Chrome',
+        flags: [
+          // chrome cannot run in sandboxed mode inside a docker container unless it is run with
+          // escalated kernel privileges (e.g. docker run --cap-add=CAP_SYS_ADMIN)
+          '--no-sandbox',
+        ],
+      }
+    },
     frameworks: ['jasmine'],
     files: [
       { pattern: 'spec/javascripts/test_bundle.js', watched: false },
@@ -45,5 +56,14 @@ module.exports = function(config) {
     };
   }
 
+  if (process.env.DEBUG) {
+    karmaConfig.logLevel = config.LOG_DEBUG;
+    process.env.CHROME_LOG_FILE = process.env.CHROME_LOG_FILE || 'chrome_debug.log';
+  }
+
+  if (process.env.CHROME_LOG_FILE) {
+    karmaConfig.customLaunchers.ChromeHeadlessCustom.flags.push('--enable-logging', '--v=1');
+  }
+
   config.set(karmaConfig);
 };

package.json

@@ -72,13 +72,13 @@
     "eslint-plugin-jasmine": "^2.1.0",
     "eslint-plugin-promise": "^3.5.0",
     "istanbul": "^0.4.5",
-    "jasmine-core": "^2.5.2",
+    "jasmine-core": "^2.6.3",
     "jasmine-jquery": "^2.1.1",
-    "karma": "^1.4.1",
+    "karma": "^1.7.0",
+    "karma-chrome-launcher": "^2.1.1",
     "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "^1.1.0",
     "karma-mocha-reporter": "^2.2.2",
-    "karma-phantomjs-launcher": "^1.0.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.2",
     "nodemon": "^1.11.0",

spec/javascripts/bootstrap_linked_tabs_spec.js

 import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
 
 (() => {
-  // TODO: remove this hack!
-  // PhantomJS causes spyOn to panic because replaceState isn't "writable"
-  let phantomjs;
-  try {
-    phantomjs = !Object.getOwnPropertyDescriptor(window.history, 'replaceState').writable;
-  } catch (err) {
-    phantomjs = false;
-  }
-
   describe('Linked Tabs', () => {
     preloadFixtures('static/linked_tabs.html.raw');
 
@@ -19,9 +10,7 @@ import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
 
     describe('when is initialized', () => {
       beforeEach(() => {
-        if (!phantomjs) {
-          spyOn(window.history, 'replaceState').and.callFake(function () {});
-        }
+        spyOn(window.history, 'replaceState').and.callFake(function () {});
       });
 
       it('should activate the tab correspondent to the given action', () => {
@@ -47,7 +36,7 @@ import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
 
     describe('on click', () => {
       it('should change the url according to the clicked tab', () => {
-        const historySpy = !phantomjs && spyOn(history, 'replaceState').and.callFake(() => {});
+        const historySpy = spyOn(history, 'replaceState').and.callFake(() => {});
 
         const linkedTabs = new LinkedTabs({
           action: 'show',

spec/javascripts/commits_spec.js

@@ -5,15 +5,6 @@ import '~/pager';
 import '~/commits';
 
 (() => {
-  // TODO: remove this hack!
-  // PhantomJS causes spyOn to panic because replaceState isn't "writable"
-  let phantomjs;
-  try {
-    phantomjs = !Object.getOwnPropertyDescriptor(window.history, 'replaceState').writable;
-  } catch (err) {
-    phantomjs = false;
-  }
-
   describe('Commits List', () => {
     beforeEach(() => {
       setFixtures(`
@@ -61,9 +52,7 @@ import '~/commits';
         CommitsList.init(25);
         CommitsList.searchField.val('');
 
-        if (!phantomjs) {
-          spyOn(history, 'replaceState').and.stub();
-        }
+        spyOn(history, 'replaceState').and.stub();
         ajaxSpy = spyOn(jQuery, 'ajax').and.callFake((req) => {
           req.success({
             data: '<li>Result</li>',

spec/javascripts/issue_show/components/app_spec.js

@@ -126,7 +126,7 @@ describe('Issuable output', () => {
 
   describe('updateIssuable', () => {
     it('fetches new data after update', (done) => {
-      spyOn(vm.service, 'getData');
+      spyOn(vm.service, 'getData').and.callThrough();
       spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {
         resolve({
           json() {

spec/javascripts/merge_request_tabs_spec.js

@@ -12,15 +12,6 @@ import '~/notes';
 import 'vendor/jquery.scrollTo';
 
 (function () {
-  // TODO: remove this hack!
-  // PhantomJS causes spyOn to panic because replaceState isn't "writable"
-  var phantomjs;
-  try {
-    phantomjs = !Object.getOwnPropertyDescriptor(window.history, 'replaceState').writable;
-  } catch (err) {
-    phantomjs = false;
-  }
-
   describe('MergeRequestTabs', function () {
     var stubLocation = {};
     var setLocation = function (stubs) {
@@ -37,11 +28,9 @@ import 'vendor/jquery.scrollTo';
       this.class = new gl.MergeRequestTabs({ stubLocation: stubLocation });
       setLocation();
 
-      if (!phantomjs) {
-        this.spies = {
-          history: spyOn(window.history, 'replaceState').and.callFake(function () {})
-        };
-      }
+      this.spies = {
+        history: spyOn(window.history, 'replaceState').and.callFake(function () {})
+      };
     });
 
     afterEach(function () {
@@ -208,11 +197,9 @@ import 'vendor/jquery.scrollTo';
           pathname: '/foo/bar/merge_requests/1'
         });
         newState = this.subject('commits');
-        if (!phantomjs) {
-          expect(this.spies.history).toHaveBeenCalledWith({
-            url: newState
-          }, document.title, newState);
-        }
+        expect(this.spies.history).toHaveBeenCalledWith({
+          url: newState
+        }, document.title, newState);
       });
 
       it('treats "show" like "notes"', function () {

spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js

@@ -95,7 +95,7 @@ describe('Interval Pattern Input Component', function () {
 
   describe('User Actions', function () {
     beforeEach(function () {
-      // For an unknown reason, Phantom.js doesn't trigger click events
+      // For an unknown reason, some browsers do not propagate click events
       // on radio buttons in a way Vue can register. So, we have to mount
       // to a fixture.
       setFixtures('<div id="my-mount"></div>');

spec/javascripts/pipelines_spec.js

 import Pipelines from '~/pipelines';
 
-// Fix for phantomJS
-if (!Element.prototype.matches && Element.prototype.webkitMatchesSelector) {
-  Element.prototype.matches = Element.prototype.webkitMatchesSelector;
-}
-
 describe('Pipelines', () => {
   preloadFixtures('static/pipeline_graph.html.raw');
 

spec/javascripts/vue_shared/components/header_ci_component_spec.js

@@ -87,7 +87,7 @@ describe('Header CI Component', () => {
     vm.actions[0].isLoading = true;
 
     Vue.nextTick(() => {
-      expect(vm.$el.querySelector('.btn .fa-spinner').getAttribute('style')).toEqual('');
+      expect(vm.$el.querySelector('.btn .fa-spinner').getAttribute('style')).toBeFalsy();
       done();
     });
   });