Import modules instead of using the ones in global namespace

Removes set favicon related methods from global scope
Improves test related with favicon

Removes convertPermissionToBoolean from global scope.
Adds tests for convertPermissionToBoolean - were non existant

Removes setParamInURL from gl.utils

Removes parseIntPagination from gl.utils namespace

Remove normalizeCRLFHeaders from gl.utils namespace

Removes normalizeHeaders from gl.utils namespace

Use gl.utils for filtered search

Fix bad import

Fix broken test by cleaning window.history namespace

Adds changelog

5 files changed, 123 insertions, 85 deletions

diff --git a/spec/javascripts/environments/folder/environments_folder_view_spec.js b/spec/javascripts/environments/folder/environments_folder_view_spec.js
index fdaea5c0b0c..09916629bd1 100644
--- a/spec/javascripts/environments/folder/environments_folder_view_spec.js
+++ b/spec/javascripts/environments/folder/environments_folder_view_spec.js
@@ -14,6 +14,10 @@ describe('Environments Folder View', () => {
     window.history.pushState({}, null, 'environments/folders/build');
   });
 
+  afterEach(() => {
+    window.history.pushState({}, null, '');
+  });
+
   let component;
 
   describe('successfull request', () => {
diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js
index 097de24f6ea..fd5b7d4e5da 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js
+++ b/spec/javascripts/lib/utils/common_utils_spec.js
@@ -18,26 +18,22 @@ describe('common_utils', () => {
   });
 
   describe('parseUrlPathname', () => {
-    beforeEach(() => {
-      spyOn(gl.utils, 'parseUrl').and.callFake(url => ({
-        pathname: url,
-      }));
-    });
     it('returns an absolute url when given an absolute url', () => {
       expect(commonUtils.parseUrlPathname('/some/absolute/url')).toEqual('/some/absolute/url');
     });
+
     it('returns an absolute url when given a relative url', () => {
       expect(commonUtils.parseUrlPathname('some/relative/url')).toEqual('/some/relative/url');
     });
   });
 
-  describe('gl.utils.getUrlParamsArray', () => {
+  describe('getUrlParamsArray', () => {
     it('should return params array', () => {
-      expect(gl.utils.getUrlParamsArray() instanceof Array).toBe(true);
+      expect(commonUtils.getUrlParamsArray() instanceof Array).toBe(true);
     });
 
     it('should remove the question mark from the search params', () => {
-      const paramsArray = gl.utils.getUrlParamsArray();
+      const paramsArray = commonUtils.getUrlParamsArray();
       expect(paramsArray[0][0] !== '?').toBe(true);
     });
 
@@ -45,7 +41,7 @@ describe('common_utils', () => {
       history.pushState('', '', '?label_name%5B%5D=test');
 
       expect(
-        gl.utils.getUrlParamsArray()[0],
+        commonUtils.getUrlParamsArray()[0],
       ).toBe('label_name[]=test');
 
       history.pushState('', '', '?');
@@ -90,7 +86,7 @@ describe('common_utils', () => {
     });
   });
 
-  describe('gl.utils.setParamInURL', () => {
+  describe('setParamInURL', () => {
     afterEach(() => {
       window.history.pushState({}, null, '');
     });
@@ -98,40 +94,40 @@ describe('common_utils', () => {
     it('should return the parameter', () => {
       window.history.replaceState({}, null, '');
 
-      expect(gl.utils.setParamInURL('page', 156)).toBe('?page=156');
-      expect(gl.utils.setParamInURL('page', '156')).toBe('?page=156');
+      expect(commonUtils.setParamInURL('page', 156)).toBe('?page=156');
+      expect(commonUtils.setParamInURL('page', '156')).toBe('?page=156');
     });
 
     it('should update the existing parameter when its a number', () => {
       window.history.pushState({}, null, '?page=15');
 
-      expect(gl.utils.setParamInURL('page', 16)).toBe('?page=16');
-      expect(gl.utils.setParamInURL('page', '16')).toBe('?page=16');
-      expect(gl.utils.setParamInURL('page', true)).toBe('?page=true');
+      expect(commonUtils.setParamInURL('page', 16)).toBe('?page=16');
+      expect(commonUtils.setParamInURL('page', '16')).toBe('?page=16');
+      expect(commonUtils.setParamInURL('page', true)).toBe('?page=true');
     });
 
     it('should update the existing parameter when its a string', () => {
       window.history.pushState({}, null, '?scope=all');
 
-      expect(gl.utils.setParamInURL('scope', 'finished')).toBe('?scope=finished');
+      expect(commonUtils.setParamInURL('scope', 'finished')).toBe('?scope=finished');
     });
 
     it('should update the existing parameter when more than one parameter exists', () => {
       window.history.pushState({}, null, '?scope=all&page=15');
 
-      expect(gl.utils.setParamInURL('scope', 'finished')).toBe('?scope=finished&page=15');
+      expect(commonUtils.setParamInURL('scope', 'finished')).toBe('?scope=finished&page=15');
     });
 
     it('should add a new parameter to the end of the existing ones', () => {
       window.history.pushState({}, null, '?scope=all');
 
-      expect(gl.utils.setParamInURL('page', 16)).toBe('?scope=all&page=16');
-      expect(gl.utils.setParamInURL('page', '16')).toBe('?scope=all&page=16');
-      expect(gl.utils.setParamInURL('page', true)).toBe('?scope=all&page=true');
+      expect(commonUtils.setParamInURL('page', 16)).toBe('?scope=all&page=16');
+      expect(commonUtils.setParamInURL('page', '16')).toBe('?scope=all&page=16');
+      expect(commonUtils.setParamInURL('page', true)).toBe('?scope=all&page=true');
     });
   });
 
-  describe('gl.utils.getParameterByName', () => {
+  describe('getParameterByName', () => {
     beforeEach(() => {
       window.history.pushState({}, null, '?scope=all&p=2');
     });
@@ -141,33 +137,33 @@ describe('common_utils', () => {
     });
 
     it('should return valid parameter', () => {
-      const value = gl.utils.getParameterByName('scope');
-      expect(gl.utils.getParameterByName('p')).toEqual('2');
+      const value = commonUtils.getParameterByName('scope');
+      expect(commonUtils.getParameterByName('p')).toEqual('2');
       expect(value).toBe('all');
     });
 
     it('should return invalid parameter', () => {
-      const value = gl.utils.getParameterByName('fakeParameter');
+      const value = commonUtils.getParameterByName('fakeParameter');
       expect(value).toBe(null);
     });
 
     it('should return valid paramentes if URL is provided', () => {
-      let value = gl.utils.getParameterByName('foo', 'http://cocteau.twins/?foo=bar');
+      let value = commonUtils.getParameterByName('foo', 'http://cocteau.twins/?foo=bar');
       expect(value).toBe('bar');
 
-      value = gl.utils.getParameterByName('manan', 'http://cocteau.twins/?foo=bar&manan=canchu');
+      value = commonUtils.getParameterByName('manan', 'http://cocteau.twins/?foo=bar&manan=canchu');
       expect(value).toBe('canchu');
     });
   });
 
-  describe('gl.utils.normalizedHeaders', () => {
+  describe('normalizedHeaders', () => {
     it('should upperCase all the header keys to keep them consistent', () => {
       const apiHeaders = {
         'X-Something-Workhorse': { workhorse: 'ok' },
         'x-something-nginx': { nginx: 'ok' },
       };
 
-      const normalized = gl.utils.normalizeHeaders(apiHeaders);
+      const normalized = commonUtils.normalizeHeaders(apiHeaders);
 
       const WORKHORSE = 'X-SOMETHING-WORKHORSE';
       const NGINX = 'X-SOMETHING-NGINX';
@@ -177,14 +173,11 @@ describe('common_utils', () => {
     });
   });
 
-  describe('gl.utils.normalizeCRLFHeaders', () => {
+  describe('normalizeCRLFHeaders', () => {
     beforeEach(function () {
       this.CLRFHeaders = 'a-header: a-value\nAnother-Header: ANOTHER-VALUE\nLaSt-HeAdEr: last-VALUE';
-
       spyOn(String.prototype, 'split').and.callThrough();
-      spyOn(gl.utils, 'normalizeHeaders').and.callThrough();
-
-      this.normalizeCRLFHeaders = gl.utils.normalizeCRLFHeaders(this.CLRFHeaders);
+      this.normalizeCRLFHeaders = commonUtils.normalizeCRLFHeaders(this.CLRFHeaders);
     });
 
     it('should split by newline', function () {
@@ -195,10 +188,6 @@ describe('common_utils', () => {
       expect(String.prototype.split.calls.allArgs().filter(args => args[0] === ': ').length).toBe(3);
     });
 
-    it('should call gl.utils.normalizeHeaders with a parsed headers object', function () {
-      expect(gl.utils.normalizeHeaders).toHaveBeenCalledWith(jasmine.any(Object));
-    });
-
     it('should return a normalized headers object', function () {
       expect(this.normalizeCRLFHeaders).toEqual({
         'A-HEADER': 'a-value',
@@ -208,7 +197,7 @@ describe('common_utils', () => {
     });
   });
 
-  describe('gl.utils.parseIntPagination', () => {
+  describe('parseIntPagination', () => {
     it('should parse to integers all string values and return pagination object', () => {
       const pagination = {
         'X-PER-PAGE': 10,
@@ -228,11 +217,11 @@ describe('common_utils', () => {
         previousPage: 1,
       };
 
-      expect(gl.utils.parseIntPagination(pagination)).toEqual(expectedPagination);
+      expect(commonUtils.parseIntPagination(pagination)).toEqual(expectedPagination);
     });
   });
 
-  describe('gl.utils.isMetaClick', () => {
+  describe('isMetaClick', () => {
     it('should identify meta click on Windows/Linux', () => {
       const e = {
         metaKey: false,
@@ -240,7 +229,7 @@ describe('common_utils', () => {
         which: 1,
       };
 
-      expect(gl.utils.isMetaClick(e)).toBe(true);
+      expect(commonUtils.isMetaClick(e)).toBe(true);
     });
 
     it('should identify meta click on macOS', () => {
@@ -250,7 +239,7 @@ describe('common_utils', () => {
         which: 1,
       };
 
-      expect(gl.utils.isMetaClick(e)).toBe(true);
+      expect(commonUtils.isMetaClick(e)).toBe(true);
     });
 
     it('should identify as meta click on middle-click or Mouse-wheel click', () => {
@@ -260,7 +249,14 @@ describe('common_utils', () => {
         which: 2,
       };
 
-      expect(gl.utils.isMetaClick(e)).toBe(true);
+      expect(commonUtils.isMetaClick(e)).toBe(true);
+    });
+  });
+
+  describe('convertPermissionToBoolean', () => {
+    it('should convert a boolean in a string to a boolean', () => {
+      expect(commonUtils.convertPermissionToBoolean('true')).toEqual(true);
+      expect(commonUtils.convertPermissionToBoolean('false')).toEqual(false);
     });
   });
 
@@ -333,53 +329,76 @@ describe('common_utils', () => {
     });
   });
 
-  describe('gl.utils.setFavicon', () => {
+  describe('setFavicon', () => {
+    beforeEach(() => {
+      const favicon = document.createElement('link');
+      favicon.setAttribute('id', 'favicon');
+      favicon.setAttribute('href', 'default/favicon');
+      document.body.appendChild(favicon);
+    });
+
+    afterEach(() => {
+      document.body.removeChild(document.getElementById('favicon'));
+    });
     it('should set page favicon to provided favicon', () => {
       const faviconPath = '//custom_favicon';
-      const fakeLink = {
-        setAttribute() {},
-      };
+      commonUtils.setFavicon(faviconPath);
 
-      spyOn(window.document, 'getElementById').and.callFake(() => fakeLink);
-      spyOn(fakeLink, 'setAttribute').and.callFake((attr, val) => {
-        expect(attr).toEqual('href');
-        expect(val.indexOf(faviconPath) > -1).toBe(true);
-      });
-      gl.utils.setFavicon(faviconPath);
+      expect(document.getElementById('favicon').getAttribute('href')).toEqual(faviconPath);
     });
   });
 
-  describe('gl.utils.resetFavicon', () => {
+  describe('resetFavicon', () => {
+    beforeEach(() => {
+      const favicon = document.createElement('link');
+      favicon.setAttribute('id', 'favicon');
+      favicon.setAttribute('href', 'default/favicon');
+      document.body.appendChild(favicon);
+    });
+
+    afterEach(() => {
+      document.body.removeChild(document.getElementById('favicon'));
+    });
+
     it('should reset page favicon to tanuki', () => {
-      const fakeLink = {
-        setAttribute() {},
-      };
+      commonUtils.resetFavicon();
+      expect(document.getElementById('favicon').getAttribute('href')).toEqual('default/favicon');
+    });
+  });
+
+  describe('setCiStatusFavicon', () => {
+    const BUILD_URL = `${gl.TEST_HOST}/frontend-fixtures/builds-project/-/jobs/1/status.json`;
+
+    beforeEach(() => {
+      const favicon = document.createElement('link');
+      favicon.setAttribute('id', 'favicon');
+      document.body.appendChild(favicon);
+    });
 
-      spyOn(window.document, 'getElementById').and.callFake(() => fakeLink);
-      spyOn(fakeLink, 'setAttribute').and.callFake((attr, val) => {
-        expect(attr).toEqual('href');
-        expect(val).toMatch(/favicon/);
+    afterEach(() => {
+      document.body.removeChild(document.getElementById('favicon'));
+    });
+
+    it('should reset favicon in case of error', () => {
+      const favicon = document.getElementById('favicon');
+      spyOn($, 'ajax').and.callFake(function (options) {
+        options.error();
+        expect(favicon.getAttribute('href')).toEqual('null');
       });
-      gl.utils.resetFavicon();
+
+      commonUtils.setCiStatusFavicon(BUILD_URL);
     });
-  });
 
-  describe('gl.utils.setCiStatusFavicon', () => {
     it('should set page favicon to CI status favicon based on provided status', () => {
-      const BUILD_URL = `${gl.TEST_HOST}/frontend-fixtures/builds-project/-/jobs/1/status.json`;
       const FAVICON_PATH = '//icon_status_success';
-      const spySetFavicon = spyOn(gl.utils, 'setFavicon').and.stub();
-      const spyResetFavicon = spyOn(gl.utils, 'resetFavicon').and.stub();
+      const favicon = document.getElementById('favicon');
+
       spyOn($, 'ajax').and.callFake(function (options) {
         options.success({ favicon: FAVICON_PATH });
-        expect(spySetFavicon).toHaveBeenCalledWith(FAVICON_PATH);
-        options.success();
-        expect(spyResetFavicon).toHaveBeenCalled();
-        options.error();
-        expect(spyResetFavicon).toHaveBeenCalled();
+        expect(favicon.getAttribute('href')).toEqual(FAVICON_PATH);
       });
 
-      gl.utils.setCiStatusFavicon(BUILD_URL);
+      commonUtils.setCiStatusFavicon(BUILD_URL);
     });
   });
 
diff --git a/spec/javascripts/merge_request_tabs_spec.js b/spec/javascripts/merge_request_tabs_spec.js
index 8830a2d29e5..eadab738376 100644
--- a/spec/javascripts/merge_request_tabs_spec.js
+++ b/spec/javascripts/merge_request_tabs_spec.js
@@ -78,8 +78,9 @@ import 'vendor/jquery.scrollTo';
       });
 
       describe('meta click', () => {
+        let metakeyEvent;
         beforeEach(function () {
-          spyOn(gl.utils, 'isMetaClick').and.returnValue(true);
+          metakeyEvent = $.Event('click', { keyCode: 91, ctrlKey: true });
         });
 
         it('opens page when commits link is clicked', function () {
@@ -89,7 +90,7 @@ import 'vendor/jquery.scrollTo';
           });
 
           this.class.bindEvents();
-          document.querySelector('.merge-request-tabs .commits-tab a').click();
+          $('.merge-request-tabs .commits-tab a').trigger(metakeyEvent);
         });
 
         it('opens page when commits badge is clicked', function () {
@@ -99,7 +100,7 @@ import 'vendor/jquery.scrollTo';
           });
 
           this.class.bindEvents();
-          document.querySelector('.merge-request-tabs .commits-tab a .badge').click();
+          $('.merge-request-tabs .commits-tab a .badge').trigger(metakeyEvent);
         });
       });
 
diff --git a/spec/javascripts/todos_spec.js b/spec/javascripts/todos_spec.js
index fd492159081..207ad2d6f97 100644
--- a/spec/javascripts/todos_spec.js
+++ b/spec/javascripts/todos_spec.js
@@ -26,9 +26,10 @@ describe('Todos', () => {
 
     describe('meta click', () => {
       let visitUrlSpy;
+      let metakeyEvent;
 
       beforeEach(() => {
-        spyOn(gl.utils, 'isMetaClick').and.returnValue(true);
+        metakeyEvent = $.Event('click', { keyCode: 91, ctrlKey: true });
         visitUrlSpy = spyOn(gl.utils, 'visitUrl').and.callFake(() => {});
       });
 
@@ -41,7 +42,7 @@ describe('Todos', () => {
           done();
         });
 
-        todoItem.click();
+        $('.todos-list .todo').trigger(metakeyEvent);
         expect(visitUrlSpy).not.toHaveBeenCalled();
       });
 
diff --git a/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js b/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
index 669ee248bf1..baa40516d28 100644
--- a/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
+++ b/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
@@ -232,29 +232,42 @@ describe('mrWidgetOptions', () => {
     describe('handleMounted', () => {
       it('should call required methods to do the initial kick-off', () => {
         spyOn(vm, 'initDeploymentsPolling');
-        spyOn(vm, 'setFavicon');
+        spyOn(vm, 'setFaviconHelper');
 
         vm.handleMounted();
 
-        expect(vm.setFavicon).toHaveBeenCalled();
+        expect(vm.setFaviconHelper).toHaveBeenCalled();
         expect(vm.initDeploymentsPolling).toHaveBeenCalled();
       });
     });
 
     describe('setFavicon', () => {
+      let faviconElement;
+
+      beforeEach(() => {
+        const favicon = document.createElement('link');
+        favicon.setAttribute('id', 'favicon');
+        favicon.setAttribute('href', 'default/favicon');
+        document.body.appendChild(favicon);
+
+        faviconElement = document.body.getElementById('favicon');
+      });
+
+      afterEach(() => {
+        document.body.removeChild(document.getElementById('favicon'));
+      });
+
       it('should call setFavicon method', () => {
-        spyOn(gl.utils, 'setFavicon');
         vm.setFavicon();
 
-        expect(gl.utils.setFavicon).toHaveBeenCalledWith(vm.mr.ciStatusFaviconPath);
+        expect(faviconElement.getAttribute('href')).toEqual(vm.mr.ciStatusFaviconPath);
       });
 
       it('should not call setFavicon when there is no ciStatusFaviconPath', () => {
-        spyOn(gl.utils, 'setFavicon');
         vm.mr.ciStatusFaviconPath = null;
-        vm.setFavicon();
+        vm.setFaviconHelper();
 
-        expect(gl.utils.setFavicon).not.toHaveBeenCalled();
+        expect(faviconElement.getAttribute('href')).toEqual(null);
       });
     });