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

This reverts merge request !12036

.gitlab-ci.yml

@@ -441,7 +441,6 @@ 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: ['ChromeHeadless'],
+    browsers: ['PhantomJS'],
     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');
 
@@ -10,7 +19,9 @@ 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', () => {
@@ -36,7 +47,7 @@ import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
 
     describe('on click', () => {
       it('should change the url according to the clicked tab', () => {
-        const historySpy = spyOn(history, 'replaceState').and.callFake(() => {});
+        const historySpy = !phantomjs && spyOn(history, 'replaceState').and.callFake(() => {});
 
         const linkedTabs = new LinkedTabs({
           action: 'show',

spec/javascripts/commits_spec.js

@@ -5,6 +5,15 @@ 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(`
@@ -52,7 +61,9 @@ 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,6 +12,15 @@ 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) {
@@ -28,9 +37,11 @@ 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 () {
@@ -197,9 +208,11 @@ 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, some browsers do not propagate click events
+      // For an unknown reason, Phantom.js doesn't trigger 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')).toBeFalsy();
+      expect(vm.$el.querySelector('.btn .fa-spinner').getAttribute('style')).toEqual('');
       done();
     });
   });