Merge branch 'fix-frontend-test-failures' into 'master'

Backport frontend test fixes from webpack branch

See merge request !8945

18 files changed, 56 insertions, 45 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index d2f66cf5249..5c86e98567a 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -249,7 +249,7 @@
                 _this.fullData = data;
                 _this.parseData(_this.fullData);
                 _this.focusTextInput();
-                if (_this.options.filterable && _this.filter && _this.filter.input && _this.filter.input.val().trim() !== '') {
+                if (_this.options.filterable && _this.filter && _this.filter.input && _this.filter.input.val() && _this.filter.input.val().trim() !== '') {
                   return _this.filter.input.trigger('input');
                 }
               };
diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js
index 09ee8dbe9d7..37af422a09e 100644
--- a/app/assets/javascripts/merge_request.js
+++ b/app/assets/javascripts/merge_request.js
@@ -110,9 +110,8 @@
     };
 
     MergeRequest.prototype.initCommitMessageListeners = function() {
-      var textarea = $('textarea.js-commit-message');
-
-      $('a.js-with-description-link').on('click', function(e) {
+      $(document).on('click', 'a.js-with-description-link', function(e) {
+        var textarea = $('textarea.js-commit-message');
         e.preventDefault();
 
         textarea.val(textarea.data('messageWithDescription'));
@@ -120,7 +119,8 @@
         $('p.js-without-description-hint').show();
       });
 
-      $('a.js-without-description-link').on('click', function(e) {
+      $(document).on('click', 'a.js-without-description-link', function(e) {
+        var textarea = $('textarea.js-commit-message');
         e.preventDefault();
 
         textarea.val(textarea.data('messageWithoutDescription'));
diff --git a/app/assets/javascripts/users/calendar.js b/app/assets/javascripts/users/calendar.js
index e7280d643d3..6e40dfdf3d8 100644
--- a/app/assets/javascripts/users/calendar.js
+++ b/app/assets/javascripts/users/calendar.js
@@ -1,6 +1,5 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, camelcase, vars-on-top, object-shorthand, comma-dangle, eqeqeq, no-mixed-operators, no-return-assign, newline-per-chained-call, prefer-arrow-callback, consistent-return, one-var, one-var-declaration-per-line, prefer-template, quotes, no-unused-vars, no-else-return, max-len */
 /* global d3 */
-/* global dateFormat */
 
 (function() {
   var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
@@ -33,7 +32,7 @@
         date.setDate(date.getDate() + i);
 
         var day = date.getDay();
-        var count = timestamps[dateFormat(date, 'yyyy-mm-dd')];
+        var count = timestamps[date.format('yyyy-mm-dd')];
 
         // Create a new group array if this is the first day of the week
         // or if is first object
@@ -122,7 +121,7 @@
           if (stamp.count > 0) {
             contribText = stamp.count + " contribution" + (stamp.count > 1 ? 's' : '');
           }
-          dateText = dateFormat(date, 'mmm d, yyyy');
+          dateText = date.format('mmm d, yyyy');
           return contribText + "<br />" + (gl.utils.getDayName(date)) + " " + dateText;
         };
       })(this)).attr('class', 'user-contrib-cell js-tooltip').attr('fill', (function(_this) {
diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
index b195b0ef3ba..a7176e27ea1 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
@@ -28,7 +28,6 @@
                 data-toggle="dropdown"
                 title="Manual build"
                 data-placement="top"
-                data-toggle="dropdown"
                 aria-label="Manual build"
               >
                 <span v-html='svgs.iconPlay' aria-hidden="true"></span>
@@ -54,7 +53,6 @@
                 data-toggle="dropdown"
                 title="Artifacts"
                 data-placement="top"
-                data-toggle="dropdown"
                 aria-label="Artifacts"
               >
                 <i class="fa fa-download" aria-hidden="true"></i>
diff --git a/spec/javascripts/.eslintrc b/spec/javascripts/.eslintrc
index 3cd419b37c9..fbd9bb9f0ff 100644
--- a/spec/javascripts/.eslintrc
+++ b/spec/javascripts/.eslintrc
@@ -22,9 +22,10 @@
   },
   "plugins": ["jasmine"],
   "rules": {
-    "prefer-arrow-callback": 0,
     "func-names": 0,
     "jasmine/no-suite-dupes": [1, "branch"],
-    "jasmine/no-spec-dupes": [1, "branch"]
+    "jasmine/no-spec-dupes": [1, "branch"],
+    "no-console": 0,
+    "prefer-arrow-callback": 0
   }
 }
diff --git a/spec/javascripts/boards/mock_data.js.es6 b/spec/javascripts/boards/mock_data.js.es6
index 8d3e2237fda..7a399b307ad 100644
--- a/spec/javascripts/boards/mock_data.js.es6
+++ b/spec/javascripts/boards/mock_data.js.es6
@@ -56,3 +56,8 @@ const boardsMockInterceptor = (request, next) => {
     status: 200
   }));
 };
+
+window.listObj = listObj;
+window.listObjDuplicate = listObjDuplicate;
+window.BoardsMockData = BoardsMockData;
+window.boardsMockInterceptor = boardsMockInterceptor;
diff --git a/spec/javascripts/environments/environment_spec.js.es6 b/spec/javascripts/environments/environment_spec.js.es6
index 20e11ca3738..239cd69dd3a 100644
--- a/spec/javascripts/environments/environment_spec.js.es6
+++ b/spec/javascripts/environments/environment_spec.js.es6
@@ -8,12 +8,12 @@
 //= require ./mock_data
 
 describe('Environment', () => {
-  preloadFixtures('environments/environments');
+  preloadFixtures('static/environments/environments.html.raw');
 
   let component;
 
   beforeEach(() => {
-    loadFixtures('environments/environments');
+    loadFixtures('static/environments/environments.html.raw');
   });
 
   describe('successfull request', () => {
diff --git a/spec/javascripts/environments/mock_data.js.es6 b/spec/javascripts/environments/mock_data.js.es6
index 8ecd01f9a83..58f6fb96afb 100644
--- a/spec/javascripts/environments/mock_data.js.es6
+++ b/spec/javascripts/environments/mock_data.js.es6
@@ -1,4 +1,4 @@
-/* eslint-disable no-unused-vars */
+
 const environmentsList = [
   {
     id: 31,
@@ -134,6 +134,8 @@ const environmentsList = [
   },
 ];
 
+window.environmentsList = environmentsList;
+
 const environment = {
   id: 4,
   name: 'production',
@@ -147,3 +149,5 @@ const environment = {
   created_at: '2016-12-16T11:51:04.690Z',
   updated_at: '2016-12-16T12:04:51.133Z',
 };
+
+window.environment = environment;
diff --git a/spec/javascripts/gl_dropdown_spec.js.es6 b/spec/javascripts/gl_dropdown_spec.js.es6
index 06fa64b1b4e..4e7eed2767c 100644
--- a/spec/javascripts/gl_dropdown_spec.js.es6
+++ b/spec/javascripts/gl_dropdown_spec.js.es6
@@ -44,6 +44,7 @@
 
   describe('Dropdown', function describeDropdown() {
     preloadFixtures('static/gl_dropdown.html.raw');
+    loadJSONFixtures('projects.json');
 
     function initDropDown(hasRemote, isFilterable) {
       this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown({
diff --git a/spec/javascripts/helpers/class_spec_helper.js.es6 b/spec/javascripts/helpers/class_spec_helper.js.es6
index 92a20687ec5..d3c37d39431 100644
--- a/spec/javascripts/helpers/class_spec_helper.js.es6
+++ b/spec/javascripts/helpers/class_spec_helper.js.es6
@@ -1,5 +1,3 @@
-/* eslint-disable no-unused-vars */
-
 class ClassSpecHelper {
   static itShouldBeAStaticMethod(base, method) {
     return it('should be a static method', () => {
@@ -7,3 +5,5 @@ class ClassSpecHelper {
     });
   }
 }
+
+window.ClassSpecHelper = ClassSpecHelper;
diff --git a/spec/javascripts/issuable_time_tracker_spec.js.es6 b/spec/javascripts/issuable_time_tracker_spec.js.es6
index a1e979e8d09..c5671af235e 100644
--- a/spec/javascripts/issuable_time_tracker_spec.js.es6
+++ b/spec/javascripts/issuable_time_tracker_spec.js.es6
@@ -4,7 +4,7 @@
 //= require issuable/time_tracking/components/time_tracker
 
 function initTimeTrackingComponent(opts) {
-  fixture.set(`
+  setFixtures(`
     <div>
       <div id="mock-container"></div>
     </div>
diff --git a/spec/javascripts/lib/utils/common_utils_spec.js.es6 b/spec/javascripts/lib/utils/common_utils_spec.js.es6
index 1ce8f28e568..32c96e2a088 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js.es6
+++ b/spec/javascripts/lib/utils/common_utils_spec.js.es6
@@ -10,9 +10,9 @@
         // IE11 will return a relative pathname while other browsers will return a full pathname.
         // parseUrl uses an anchor element for parsing an url. With relative urls, the anchor
         // element will create an absolute url relative to the current execution context.
-        // The JavaScript test suite is executed at '/teaspoon' which will lead to an absolute
-        // url starting with '/teaspoon'.
-        expect(gl.utils.parseUrl('" test="asf"').pathname).toEqual('/teaspoon/%22%20test=%22asf%22');
+        // The JavaScript test suite is executed at '/' which will lead to an absolute url
+        // starting with '/'.
+        expect(gl.utils.parseUrl('" test="asf"').pathname).toContain('/%22%20test=%22asf%22');
       });
     });
 
@@ -42,9 +42,13 @@
     });
 
     describe('gl.utils.getParameterByName', () => {
+      beforeEach(() => {
+        window.history.pushState({}, null, '?scope=all&p=2');
+      });
+
       it('should return valid parameter', () => {
-        const value = gl.utils.getParameterByName('reporter');
-        expect(value).toBe('Console');
+        const value = gl.utils.getParameterByName('scope');
+        expect(value).toBe('all');
       });
 
       it('should return invalid parameter', () => {
diff --git a/spec/javascripts/project_title_spec.js b/spec/javascripts/project_title_spec.js
index 0202c9ba85e..e562385a6c6 100644
--- a/spec/javascripts/project_title_spec.js
+++ b/spec/javascripts/project_title_spec.js
@@ -17,6 +17,8 @@
 
   describe('Project Title', function() {
     preloadFixtures('static/project_title.html.raw');
+    loadJSONFixtures('projects.json');
+
     beforeEach(function() {
       loadFixtures('static/project_title.html.raw');
       return this.project = new Project();
diff --git a/spec/javascripts/right_sidebar_spec.js b/spec/javascripts/right_sidebar_spec.js
index 942778229b5..3a01a534557 100644
--- a/spec/javascripts/right_sidebar_spec.js
+++ b/spec/javascripts/right_sidebar_spec.js
@@ -37,6 +37,8 @@
   describe('RightSidebar', function() {
     var fixtureName = 'issues/open-issue.html.raw';
     preloadFixtures(fixtureName);
+    loadJSONFixtures('todos.json');
+
     beforeEach(function() {
       loadFixtures(fixtureName);
       this.sidebar = new Sidebar;
diff --git a/spec/javascripts/shortcuts_issuable_spec.js b/spec/javascripts/shortcuts_issuable_spec.js
index db11c2516a6..e0a5a7927bb 100644
--- a/spec/javascripts/shortcuts_issuable_spec.js
+++ b/spec/javascripts/shortcuts_issuable_spec.js
@@ -59,12 +59,8 @@
           expect(triggered).toBe(true);
         });
         it('triggers `focus`', function() {
-          var focused = false;
-          $(this.selector).on('focus', function() {
-            focused = true;
-          });
           this.shortcut.replyWithSelectedText();
-          expect(focused).toBe(true);
+          expect(document.activeElement).toBe(document.querySelector(this.selector));
         });
       });
       describe('with a one-line selection', function() {
diff --git a/spec/javascripts/u2f/authenticate_spec.js b/spec/javascripts/u2f/authenticate_spec.js
index 80163fd72d3..0e2fb07ba7f 100644
--- a/spec/javascripts/u2f/authenticate_spec.js
+++ b/spec/javascripts/u2f/authenticate_spec.js
@@ -25,19 +25,20 @@
         document.querySelector('#js-login-2fa-device'),
         document.querySelector('.js-2fa-form')
       );
+
+      // bypass automatic form submission within renderAuthenticated
+      spyOn(this.component, 'renderAuthenticated').and.returnValue(true);
+
       return this.component.start();
     });
     it('allows authenticating via a U2F device', function() {
-      var authenticatedMessage, deviceResponse, inProgressMessage;
+      var inProgressMessage;
       inProgressMessage = this.container.find("p");
       expect(inProgressMessage.text()).toContain("Trying to communicate with your device");
       this.u2fDevice.respondToAuthenticateRequest({
         deviceData: "this is data from the device"
       });
-      authenticatedMessage = this.container.find("p");
-      deviceResponse = this.container.find('#js-device-response');
-      expect(authenticatedMessage.text()).toContain('We heard back from your U2F device. You have been authenticated.');
-      return expect(deviceResponse.val()).toBe('{"deviceData":"this is data from the device"}');
+      expect(this.component.renderAuthenticated).toHaveBeenCalledWith('{"deviceData":"this is data from the device"}');
     });
     return describe("errors", function() {
       it("displays an error message", function() {
@@ -51,7 +52,7 @@
         return expect(errorMessage.text()).toContain("There was a problem communicating with your device");
       });
       return it("allows retrying authentication after an error", function() {
-        var authenticatedMessage, retryButton, setupButton;
+        var retryButton, setupButton;
         setupButton = this.container.find("#js-login-u2f-device");
         setupButton.trigger('click');
         this.u2fDevice.respondToAuthenticateRequest({
@@ -64,8 +65,7 @@
         this.u2fDevice.respondToAuthenticateRequest({
           deviceData: "this is data from the device"
         });
-        authenticatedMessage = this.container.find("p");
-        return expect(authenticatedMessage.text()).toContain("We heard back from your U2F device. You have been authenticated.");
+        expect(this.component.renderAuthenticated).toHaveBeenCalledWith('{"deviceData":"this is data from the device"}');
       });
     });
   });
diff --git a/spec/javascripts/vue_pagination/pagination_spec.js.es6 b/spec/javascripts/vue_pagination/pagination_spec.js.es6
index 1a7f2bb5fb8..efb11211ce2 100644
--- a/spec/javascripts/vue_pagination/pagination_spec.js.es6
+++ b/spec/javascripts/vue_pagination/pagination_spec.js.es6
@@ -1,7 +1,6 @@
 //= require vue
 //= require lib/utils/common_utils
 //= require vue_pagination/index
-/* global fixture, gl */
 
 describe('Pagination component', () => {
   let component;
@@ -17,7 +16,7 @@ describe('Pagination component', () => {
   };
 
   it('should render and start at page 1', () => {
-    fixture.set('<div class="test-pagination-container"></div>');
+    setFixtures('<div class="test-pagination-container"></div>');
 
     component = new window.gl.VueGlPagination({
       el: document.querySelector('.test-pagination-container'),
@@ -40,7 +39,7 @@ describe('Pagination component', () => {
   });
 
   it('should go to the previous page', () => {
-    fixture.set('<div class="test-pagination-container"></div>');
+    setFixtures('<div class="test-pagination-container"></div>');
 
     component = new window.gl.VueGlPagination({
       el: document.querySelector('.test-pagination-container'),
@@ -61,7 +60,7 @@ describe('Pagination component', () => {
   });
 
   it('should go to the next page', () => {
-    fixture.set('<div class="test-pagination-container"></div>');
+    setFixtures('<div class="test-pagination-container"></div>');
 
     component = new window.gl.VueGlPagination({
       el: document.querySelector('.test-pagination-container'),
@@ -82,7 +81,7 @@ describe('Pagination component', () => {
   });
 
   it('should go to the last page', () => {
-    fixture.set('<div class="test-pagination-container"></div>');
+    setFixtures('<div class="test-pagination-container"></div>');
 
     component = new window.gl.VueGlPagination({
       el: document.querySelector('.test-pagination-container'),
@@ -103,7 +102,7 @@ describe('Pagination component', () => {
   });
 
   it('should go to the first page', () => {
-    fixture.set('<div class="test-pagination-container"></div>');
+    setFixtures('<div class="test-pagination-container"></div>');
 
     component = new window.gl.VueGlPagination({
       el: document.querySelector('.test-pagination-container'),
@@ -124,7 +123,7 @@ describe('Pagination component', () => {
   });
 
   it('should do nothing', () => {
-    fixture.set('<div class="test-pagination-container"></div>');
+    setFixtures('<div class="test-pagination-container"></div>');
 
     component = new window.gl.VueGlPagination({
       el: document.querySelector('.test-pagination-container'),
diff --git a/vendor/assets/javascripts/xterm/fit.js b/vendor/assets/javascripts/xterm/fit.js
index 7e24fd9b36e..55438452cad 100644
--- a/vendor/assets/javascripts/xterm/fit.js
+++ b/vendor/assets/javascripts/xterm/fit.js
@@ -16,12 +16,12 @@
     /*
      * CommonJS environment
      */
-    module.exports = fit(require('../../xterm'));
+    module.exports = fit(require('./xterm'));
   } else if (typeof define == 'function') {
     /*
      * Require.js is available
      */
-    define(['../../xterm'], fit);
+    define(['./xterm'], fit);
   } else {
     /*
      * Plain browser environment