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

Replace PhantomJS with headless Chrome in frontend test suite

See merge request !12036

.gitlab-ci.yml

@@ -441,6 +441,7 @@ 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

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,7 @@ module.exports = function(config) {
 
   var karmaConfig = {
     basePath: ROOT_PATH,
-    browsers: ['PhantomJS'],
+    browsers: ['ChromeHeadless'],
     frameworks: ['jasmine'],
     files: [
       { pattern: 'spec/javascripts/test_bundle.js', watched: false },

package.json

@@ -75,10 +75,10 @@
     "jasmine-core": "^2.5.2",
     "jasmine-jquery": "^2.1.1",
     "karma": "^1.4.1",
+    "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 () {});
-        }
       });
 
       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();
-        }
         ajaxSpy = spyOn(jQuery, 'ajax').and.callFake((req) => {
           req.success({
             data: '<li>Result</li>',

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 () {})
       };
-      }
     });
 
     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);
-        }
       });
 
       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();
     });
   });