Improve environments performance

10 files changed, 290 insertions, 221 deletions

diff --git a/spec/javascripts/environments/emtpy_state_spec.js b/spec/javascripts/environments/emtpy_state_spec.js
new file mode 100644
index 00000000000..82de35933f5
--- /dev/null
+++ b/spec/javascripts/environments/emtpy_state_spec.js
@@ -0,0 +1,57 @@
+
+import Vue from 'vue';
+import emptyState from '~/environments/components/empty_state.vue';
+import mountComponent from '../helpers/vue_mount_component_helper';
+
+describe('environments empty state', () => {
+  let vm;
+  let Component;
+
+  beforeEach(() => {
+    Component = Vue.extend(emptyState);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('With permissions', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, {
+        newPath: 'foo',
+        canCreateEnvironment: true,
+        helpPath: 'bar',
+      });
+    });
+
+    it('renders empty state and new environment button', () => {
+      expect(
+        vm.$el.querySelector('.js-blank-state-title').textContent.trim(),
+      ).toEqual('You don\'t have any environments right now.');
+
+      expect(
+        vm.$el.querySelector('.js-new-environment-button').getAttribute('href'),
+      ).toEqual('foo');
+    });
+  });
+
+  describe('Without permission', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, {
+        newPath: 'foo',
+        canCreateEnvironment: false,
+        helpPath: 'bar',
+      });
+    });
+
+    it('renders empty state without new button', () => {
+      expect(
+        vm.$el.querySelector('.js-blank-state-title').textContent.trim(),
+      ).toEqual('You don\'t have any environments right now.');
+
+      expect(
+        vm.$el.querySelector('.js-new-environment-button'),
+      ).toBeNull();
+    });
+  });
+});
diff --git a/spec/javascripts/environments/environment_table_spec.js b/spec/javascripts/environments/environment_table_spec.js
index 2862971bec4..9bd42863759 100644
--- a/spec/javascripts/environments/environment_table_spec.js
+++ b/spec/javascripts/environments/environment_table_spec.js
@@ -1,10 +1,17 @@
 import Vue from 'vue';
 import environmentTableComp from '~/environments/components/environments_table.vue';
+import mountComponent from '../helpers/vue_mount_component_helper';
+
+describe('Environment table', () => {
+  let Component;
+  let vm;
 
-describe('Environment item', () => {
-  preloadFixtures('static/environments/element.html.raw');
   beforeEach(() => {
-    loadFixtures('static/environments/element.html.raw');
+    Component = Vue.extend(environmentTableComp);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
   });
 
   it('Should render a table', () => {
@@ -17,18 +24,12 @@ describe('Environment item', () => {
       },
     };
 
-    const EnvironmentTable = Vue.extend(environmentTableComp);
-
-    const component = new EnvironmentTable({
-      el: document.querySelector('.test-dom-element'),
-      propsData: {
-        environments: [{ mockItem }],
-        canCreateDeployment: false,
-        canReadEnvironment: true,
-        service: {},
-      },
-    }).$mount();
+    vm = mountComponent(Component, {
+      environments: [mockItem],
+      canCreateDeployment: false,
+      canReadEnvironment: true,
+    });
 
-    expect(component.$el.getAttribute('class')).toContain('ci-table');
+    expect(vm.$el.getAttribute('class')).toContain('ci-table');
   });
 });
diff --git a/spec/javascripts/environments/environment_spec.js b/spec/javascripts/environments/environments_app_spec.js
index 0c8817a8148..d02adb25b4e 100644
--- a/spec/javascripts/environments/environment_spec.js
+++ b/spec/javascripts/environments/environments_app_spec.js
@@ -1,18 +1,24 @@
 import Vue from 'vue';
-import '~/flash';
-import environmentsComponent from '~/environments/components/environment.vue';
+import environmentsComponent from '~/environments/components/environments_app.vue';
 import { environment, folder } from './mock_data';
 import { headersInterceptor } from '../helpers/vue_resource_helper';
+import mountComponent from '../helpers/vue_mount_component_helper';
 
 describe('Environment', () => {
-  preloadFixtures('static/environments/environments.html.raw');
+  const mockData = {
+    endpoint: 'environments.json',
+    canCreateEnvironment: true,
+    canCreateDeployment: true,
+    canReadEnvironment: true,
+    cssContainerClass: 'container',
+    newEnvironmentPath: 'environments/new',
+    helpPagePath: 'help',
+  };
 
   let EnvironmentsComponent;
   let component;
 
   beforeEach(() => {
-    loadFixtures('static/environments/environments.html.raw');
-
     EnvironmentsComponent = Vue.extend(environmentsComponent);
   });
 
@@ -37,9 +43,7 @@ describe('Environment', () => {
       });
 
       it('should render the empty state', (done) => {
-        component = new EnvironmentsComponent({
-          el: document.querySelector('#environments-list-view'),
-        });
+        component = mountComponent(EnvironmentsComponent, mockData);
 
         setTimeout(() => {
           expect(
@@ -81,9 +85,7 @@ describe('Environment', () => {
       beforeEach(() => {
         Vue.http.interceptors.push(environmentsResponseInterceptor);
         Vue.http.interceptors.push(headersInterceptor);
-        component = new EnvironmentsComponent({
-          el: document.querySelector('#environments-list-view'),
-        });
+        component = mountComponent(EnvironmentsComponent, mockData);
       });
 
       afterEach(() => {
@@ -95,7 +97,7 @@ describe('Environment', () => {
 
       it('should render a table with environments', (done) => {
         setTimeout(() => {
-          expect(component.$el.querySelectorAll('table')).toBeDefined();
+          expect(component.$el.querySelectorAll('table')).not.toBeNull();
           expect(
             component.$el.querySelector('.environment-name').textContent.trim(),
           ).toEqual(environment.name);
@@ -104,10 +106,6 @@ describe('Environment', () => {
       });
 
       describe('pagination', () => {
-        afterEach(() => {
-          window.history.pushState({}, null, '');
-        });
-
         it('should render pagination', (done) => {
           setTimeout(() => {
             expect(
@@ -117,46 +115,23 @@ describe('Environment', () => {
           }, 0);
         });
 
-        it('should update url when no search params are present', (done) => {
-          spyOn(gl.utils, 'visitUrl');
+        it('should make an API request when page is clicked', (done) => {
+          spyOn(component, 'updateContent');
           setTimeout(() => {
             component.$el.querySelector('.gl-pagination li:nth-child(5) a').click();
-            expect(gl.utils.visitUrl).toHaveBeenCalledWith('?page=2');
+            expect(component.updateContent).toHaveBeenCalledWith({ scope: 'available', page: '2' });
             done();
           }, 0);
         });
 
-        it('should update url when page is already present', (done) => {
-          spyOn(gl.utils, 'visitUrl');
-          window.history.pushState({}, null, '?page=1');
-
-          setTimeout(() => {
-            component.$el.querySelector('.gl-pagination li:nth-child(5) a').click();
-            expect(gl.utils.visitUrl).toHaveBeenCalledWith('?page=2');
-            done();
-          }, 0);
-        });
-
-        it('should update url when page and scope are already present', (done) => {
-          spyOn(gl.utils, 'visitUrl');
-          window.history.pushState({}, null, '?scope=all&page=1');
-
+        it('should make an API request when using tabs', (done) => {
           setTimeout(() => {
-            component.$el.querySelector('.gl-pagination li:nth-child(5) a').click();
-            expect(gl.utils.visitUrl).toHaveBeenCalledWith('?scope=all&page=2');
-            done();
-          }, 0);
-        });
+            spyOn(component, 'updateContent');
+            component.$el.querySelector('.js-environments-tab-stopped').click();
 
-        it('should update url when page and scope are already present and page is first param', (done) => {
-          spyOn(gl.utils, 'visitUrl');
-          window.history.pushState({}, null, '?page=1&scope=all');
-
-          setTimeout(() => {
-            component.$el.querySelector('.gl-pagination li:nth-child(5) a').click();
-            expect(gl.utils.visitUrl).toHaveBeenCalledWith('?page=2&scope=all');
+            expect(component.updateContent).toHaveBeenCalledWith({ scope: 'stopped', page: '1' });
             done();
-          }, 0);
+          });
         });
       });
     });
@@ -180,9 +155,7 @@ describe('Environment', () => {
     });
 
     it('should render empty state', (done) => {
-      component = new EnvironmentsComponent({
-        el: document.querySelector('#environments-list-view'),
-      });
+      component = mountComponent(EnvironmentsComponent, mockData);
 
       setTimeout(() => {
         expect(
@@ -214,9 +187,7 @@ describe('Environment', () => {
 
     beforeEach(() => {
       Vue.http.interceptors.push(environmentsResponseInterceptor);
-      component = new EnvironmentsComponent({
-        el: document.querySelector('#environments-list-view'),
-      });
+      component = mountComponent(EnvironmentsComponent, mockData);
     });
 
     afterEach(() => {
@@ -289,4 +260,59 @@ describe('Environment', () => {
       });
     });
   });
+
+  describe('methods', () => {
+    const environmentsEmptyResponseInterceptor = (request, next) => {
+      next(request.respondWith(JSON.stringify([]), {
+        status: 200,
+      }));
+    };
+
+    beforeEach(() => {
+      Vue.http.interceptors.push(environmentsEmptyResponseInterceptor);
+      Vue.http.interceptors.push(headersInterceptor);
+
+      component = mountComponent(EnvironmentsComponent, mockData);
+      spyOn(history, 'pushState').and.stub();
+    });
+
+    afterEach(() => {
+      Vue.http.interceptors = _.without(
+        Vue.http.interceptors, environmentsEmptyResponseInterceptor,
+      );
+      Vue.http.interceptors = _.without(Vue.http.interceptors, headersInterceptor);
+    });
+
+    describe('updateContent', () => {
+      it('should set given parameters', (done) => {
+        component.updateContent({ scope: 'stopped', page: '3' })
+          .then(() => {
+            expect(component.page).toEqual('3');
+            expect(component.scope).toEqual('stopped');
+            expect(component.requestData.scope).toEqual('stopped');
+            expect(component.requestData.page).toEqual('3');
+            done();
+          })
+          .catch(done.fail);
+      });
+    });
+
+    describe('onChangeTab', () => {
+      it('should set page to 1', () => {
+        spyOn(component, 'updateContent');
+        component.onChangeTab('stopped');
+
+        expect(component.updateContent).toHaveBeenCalledWith({ scope: 'stopped', page: '1' });
+      });
+    });
+
+    describe('onChangePage', () => {
+      it('should update page and keep scope', () => {
+        spyOn(component, 'updateContent');
+        component.onChangePage(4);
+
+        expect(component.updateContent).toHaveBeenCalledWith({ scope: component.scope, page: '4' });
+      });
+    });
+  });
 });
diff --git a/spec/javascripts/environments/folder/environments_folder_view_spec.js b/spec/javascripts/environments/folder/environments_folder_view_spec.js
index 7e62d356bd2..4ea4d9d7499 100644
--- a/spec/javascripts/environments/folder/environments_folder_view_spec.js
+++ b/spec/javascripts/environments/folder/environments_folder_view_spec.js
@@ -1,25 +1,28 @@
 import Vue from 'vue';
-import '~/flash';
 import environmentsFolderViewComponent from '~/environments/folder/environments_folder_view.vue';
 import { environmentsList } from '../mock_data';
 import { headersInterceptor } from '../../helpers/vue_resource_helper';
+import mountComponent from '../../helpers/vue_mount_component_helper';
 
 describe('Environments Folder View', () => {
-  preloadFixtures('static/environments/environments_folder_view.html.raw');
-  let EnvironmentsFolderViewComponent;
+  let Component;
+  let component;
+  const mockData = {
+    endpoint: 'environments.json',
+    folderName: 'review',
+    canCreateDeployment: true,
+    canReadEnvironment: true,
+    cssContainerClass: 'container',
+  };
 
   beforeEach(() => {
-    loadFixtures('static/environments/environments_folder_view.html.raw');
-    EnvironmentsFolderViewComponent = Vue.extend(environmentsFolderViewComponent);
-    window.history.pushState({}, null, 'environments/folders/build');
+    Component = Vue.extend(environmentsFolderViewComponent);
   });
 
   afterEach(() => {
-    window.history.pushState({}, null, '/');
+    component.$destroy();
   });
 
-  let component;
-
   describe('successfull request', () => {
     const environmentsResponseInterceptor = (request, next) => {
       next(request.respondWith(JSON.stringify({
@@ -31,10 +34,10 @@ describe('Environments Folder View', () => {
         headers: {
           'X-nExt-pAge': '2',
           'x-page': '1',
-          'X-Per-Page': '1',
+          'X-Per-Page': '2',
           'X-Prev-Page': '',
-          'X-TOTAL': '37',
-          'X-Total-Pages': '2',
+          'X-TOTAL': '20',
+          'X-Total-Pages': '10',
         },
       }));
     };
@@ -43,9 +46,7 @@ describe('Environments Folder View', () => {
       Vue.http.interceptors.push(environmentsResponseInterceptor);
       Vue.http.interceptors.push(headersInterceptor);
 
-      component = new EnvironmentsFolderViewComponent({
-        el: document.querySelector('#environments-folder-list-view'),
-      });
+      component = mountComponent(Component, mockData);
     });
 
     afterEach(() => {
@@ -57,7 +58,7 @@ describe('Environments Folder View', () => {
 
     it('should render a table with environments', (done) => {
       setTimeout(() => {
-        expect(component.$el.querySelectorAll('table')).toBeDefined();
+        expect(component.$el.querySelectorAll('table')).not.toBeNull();
         expect(
           component.$el.querySelector('.environment-name').textContent.trim(),
         ).toEqual(environmentsList[0].name);
@@ -68,11 +69,11 @@ describe('Environments Folder View', () => {
     it('should render available tab with count', (done) => {
       setTimeout(() => {
         expect(
-          component.$el.querySelector('.js-available-environments-folder-tab').textContent,
+          component.$el.querySelector('.js-environments-tab-available').textContent,
         ).toContain('Available');
 
         expect(
-          component.$el.querySelector('.js-available-environments-folder-tab .js-available-environments-count').textContent,
+          component.$el.querySelector('.js-environments-tab-available .badge').textContent,
         ).toContain('0');
         done();
       }, 0);
@@ -81,11 +82,11 @@ describe('Environments Folder View', () => {
     it('should render stopped tab with count', (done) => {
       setTimeout(() => {
         expect(
-          component.$el.querySelector('.js-stopped-environments-folder-tab').textContent,
+          component.$el.querySelector('.js-environments-tab-stopped').textContent,
         ).toContain('Stopped');
 
         expect(
-          component.$el.querySelector('.js-stopped-environments-folder-tab .js-stopped-environments-count').textContent,
+          component.$el.querySelector('.js-environments-tab-stopped .badge').textContent,
         ).toContain('1');
         done();
       }, 0);
@@ -94,8 +95,8 @@ describe('Environments Folder View', () => {
     it('should render parent folder name', (done) => {
       setTimeout(() => {
         expect(
-          component.$el.querySelector('.js-folder-name').textContent,
-        ).toContain('Environments / build');
+          component.$el.querySelector('.js-folder-name').textContent.trim(),
+        ).toContain('Environments / review');
         done();
       }, 0);
     });
@@ -104,52 +105,30 @@ describe('Environments Folder View', () => {
       it('should render pagination', (done) => {
         setTimeout(() => {
           expect(
-            component.$el.querySelectorAll('.gl-pagination li').length,
-          ).toEqual(5);
+            component.$el.querySelectorAll('.gl-pagination'),
+          ).not.toBeNull();
           done();
         }, 0);
       });
 
-      it('should update url when no search params are present', (done) => {
-        spyOn(gl.utils, 'visitUrl');
+      it('should make an API request when changing page', (done) => {
+        spyOn(component, 'updateContent');
         setTimeout(() => {
-          component.$el.querySelector('.gl-pagination li:nth-child(5) a').click();
-          expect(gl.utils.visitUrl).toHaveBeenCalledWith('?page=2');
-          done();
-        }, 0);
-      });
-
-      it('should update url when page is already present', (done) => {
-        spyOn(gl.utils, 'visitUrl');
-        window.history.pushState({}, null, '?page=1');
+          component.$el.querySelector('.gl-pagination .js-last-button a').click();
 
-        setTimeout(() => {
-          component.$el.querySelector('.gl-pagination li:nth-child(5) a').click();
-          expect(gl.utils.visitUrl).toHaveBeenCalledWith('?page=2');
+          expect(component.updateContent).toHaveBeenCalledWith({ scope: component.scope, page: '10' });
           done();
         }, 0);
       });
 
-      it('should update url when page and scope are already present', (done) => {
-        spyOn(gl.utils, 'visitUrl');
-        window.history.pushState({}, null, '?scope=all&page=1');
-
+      it('should make an API request when using tabs', (done) => {
         setTimeout(() => {
-          component.$el.querySelector('.gl-pagination li:nth-child(5) a').click();
-          expect(gl.utils.visitUrl).toHaveBeenCalledWith('?scope=all&page=2');
-          done();
-        }, 0);
-      });
-
-      it('should update url when page and scope are already present and page is first param', (done) => {
-        spyOn(gl.utils, 'visitUrl');
-        window.history.pushState({}, null, '?page=1&scope=all');
+          spyOn(component, 'updateContent');
+          component.$el.querySelector('.js-environments-tab-stopped').click();
 
-        setTimeout(() => {
-          component.$el.querySelector('.gl-pagination li:nth-child(5) a').click();
-          expect(gl.utils.visitUrl).toHaveBeenCalledWith('?page=2&scope=all');
+          expect(component.updateContent).toHaveBeenCalledWith({ scope: 'stopped', page: '1' });
           done();
-        }, 0);
+        });
       });
     });
   });
@@ -172,9 +151,7 @@ describe('Environments Folder View', () => {
     });
 
     it('should not render a table', (done) => {
-      component = new EnvironmentsFolderViewComponent({
-        el: document.querySelector('#environments-folder-list-view'),
-      });
+      component = mountComponent(Component, mockData);
 
       setTimeout(() => {
         expect(
@@ -187,11 +164,11 @@ describe('Environments Folder View', () => {
     it('should render available tab with count 0', (done) => {
       setTimeout(() => {
         expect(
-          component.$el.querySelector('.js-available-environments-folder-tab').textContent,
+          component.$el.querySelector('.js-environments-tab-available').textContent,
         ).toContain('Available');
 
         expect(
-          component.$el.querySelector('.js-available-environments-folder-tab .js-available-environments-count').textContent,
+          component.$el.querySelector('.js-environments-tab-available .badge').textContent,
         ).toContain('0');
         done();
       }, 0);
@@ -200,14 +177,70 @@ describe('Environments Folder View', () => {
     it('should render stopped tab with count 0', (done) => {
       setTimeout(() => {
         expect(
-          component.$el.querySelector('.js-stopped-environments-folder-tab').textContent,
+          component.$el.querySelector('.js-environments-tab-stopped').textContent,
         ).toContain('Stopped');
 
         expect(
-          component.$el.querySelector('.js-stopped-environments-folder-tab .js-stopped-environments-count').textContent,
+          component.$el.querySelector('.js-environments-tab-stopped .badge').textContent,
         ).toContain('0');
         done();
       }, 0);
     });
   });
+
+  describe('methods', () => {
+    const environmentsEmptyResponseInterceptor = (request, next) => {
+      next(request.respondWith(JSON.stringify([]), {
+        status: 200,
+      }));
+    };
+
+    beforeEach(() => {
+      Vue.http.interceptors.push(environmentsEmptyResponseInterceptor);
+      Vue.http.interceptors.push(headersInterceptor);
+
+      component = mountComponent(Component, mockData);
+      spyOn(history, 'pushState').and.stub();
+    });
+
+    afterEach(() => {
+      Vue.http.interceptors = _.without(
+        Vue.http.interceptors, environmentsEmptyResponseInterceptor,
+      );
+      Vue.http.interceptors = _.without(Vue.http.interceptors, headersInterceptor);
+    });
+
+    describe('updateContent', () => {
+      it('should set given parameters', (done) => {
+        component.updateContent({ scope: 'stopped', page: '4' })
+          .then(() => {
+            expect(component.page).toEqual('4');
+            expect(component.scope).toEqual('stopped');
+            expect(component.requestData.scope).toEqual('stopped');
+            expect(component.requestData.page).toEqual('4');
+            done();
+          })
+          .catch(done.fail);
+      });
+    });
+
+    describe('onChangeTab', () => {
+      it('should set page to 1', () => {
+        spyOn(component, 'updateContent');
+        component.onChangeTab('stopped');
+
+        expect(component.updateContent).toHaveBeenCalledWith({ scope: 'stopped', page: '1' });
+      });
+    });
+
+    describe('onChangePage', () => {
+      it('should update page and keep scope', () => {
+        spyOn(component, 'updateContent');
+
+        component.onChangePage(4);
+
+        expect(component.updateContent).toHaveBeenCalledWith({ scope: component.scope, page: '4' });
+      });
+    });
+  });
 });
diff --git a/spec/javascripts/fixtures/environments/element.html.haml b/spec/javascripts/fixtures/environments/element.html.haml
deleted file mode 100644
index 8d7aeb23356..00000000000
--- a/spec/javascripts/fixtures/environments/element.html.haml
+++ /dev/null
@@ -1 +0,0 @@
-.test-dom-element
diff --git a/spec/javascripts/fixtures/environments/environments.html.haml b/spec/javascripts/fixtures/environments/environments.html.haml
deleted file mode 100644
index e6000fbb553..00000000000
--- a/spec/javascripts/fixtures/environments/environments.html.haml
+++ /dev/null
@@ -1,9 +0,0 @@
-%div
-  #environments-list-view{ data: { environments_data: "foo/environments",
-    "can-create-deployment" => "true",
-    "can-read-environment" => "true",
-    "can-create-environment" => "true",
-    "project-environments-path" => "https://gitlab.com/foo/environments",
-    "project-stopped-environments-path" => "https://gitlab.com/foo/environments?scope=stopped",
-    "new-environment-path" => "https://gitlab.com/foo/environments/new",
-    "help-page-path" => "https://gitlab.com/help_page"}}
diff --git a/spec/javascripts/fixtures/environments/environments_folder_view.html.haml b/spec/javascripts/fixtures/environments/environments_folder_view.html.haml
deleted file mode 100644
index aceec139730..00000000000
--- a/spec/javascripts/fixtures/environments/environments_folder_view.html.haml
+++ /dev/null
@@ -1,7 +0,0 @@
-%div
-  #environments-folder-list-view{ data: { "can-create-deployment" => "true",
-    "can-read-environment" => "true",
-    "css-class" => "",
-    "commit-icon-svg" => custom_icon("icon_commit"),
-    "terminal-icon-svg" => custom_icon("icon_terminal"),
-    "play-icon-svg" => custom_icon("icon_play") } }
diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js
index 6dad5d6b6bd..0a9d815f469 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js
+++ b/spec/javascripts/lib/utils/common_utils_spec.js
@@ -142,47 +142,6 @@ describe('common_utils', () => {
     });
   });
 
-  describe('setParamInURL', () => {
-    afterEach(() => {
-      window.history.pushState({}, null, '');
-    });
-
-    it('should return the parameter', () => {
-      window.history.replaceState({}, null, '');
-
-      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(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(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(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(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('historyPushState', () => {
     afterEach(() => {
       window.history.replaceState({}, null, null);
diff --git a/spec/javascripts/pipelines/pipelines_spec.js b/spec/javascripts/pipelines/pipelines_spec.js
index ff38bc1974d..367b42cefb0 100644
--- a/spec/javascripts/pipelines/pipelines_spec.js
+++ b/spec/javascripts/pipelines/pipelines_spec.js
@@ -176,45 +176,49 @@ describe('Pipelines', () => {
     });
   });
 
-  describe('updateContent', () => {
-    it('should set given parameters', () => {
-      component = mountComponent(PipelinesComponent, {
-        store: new Store(),
-      });
-      component.updateContent({ scope: 'finished', page: '4' });
-
-      expect(component.page).toEqual('4');
-      expect(component.scope).toEqual('finished');
-      expect(component.requestData.scope).toEqual('finished');
-      expect(component.requestData.page).toEqual('4');
+  describe('methods', () => {
+    beforeEach(() => {
+      spyOn(history, 'pushState').and.stub();
     });
-  });
 
-  describe('onChangeTab', () => {
-    it('should set page to 1', () => {
-      component = mountComponent(PipelinesComponent, {
-        store: new Store(),
-      });
+    describe('updateContent', () => {
+      it('should set given parameters', () => {
+        component = mountComponent(PipelinesComponent, {
+          store: new Store(),
+        });
+        component.updateContent({ scope: 'finished', page: '4' });
 
-      spyOn(component, 'updateContent');
+        expect(component.page).toEqual('4');
+        expect(component.scope).toEqual('finished');
+        expect(component.requestData.scope).toEqual('finished');
+        expect(component.requestData.page).toEqual('4');
+      });
+    });
 
-      component.onChangeTab('running');
+    describe('onChangeTab', () => {
+      it('should set page to 1', () => {
+        component = mountComponent(PipelinesComponent, {
+          store: new Store(),
+        });
+        spyOn(component, 'updateContent');
 
-      expect(component.updateContent).toHaveBeenCalledWith({ scope: 'running', page: '1' });
-    });
-  });
+        component.onChangeTab('running');
 
-  describe('onChangePage', () => {
-    it('should update page and keep scope', () => {
-      component = mountComponent(PipelinesComponent, {
-        store: new Store(),
+        expect(component.updateContent).toHaveBeenCalledWith({ scope: 'running', page: '1' });
       });
+    });
 
-      spyOn(component, 'updateContent');
+    describe('onChangePage', () => {
+      it('should update page and keep scope', () => {
+        component = mountComponent(PipelinesComponent, {
+          store: new Store(),
+        });
+        spyOn(component, 'updateContent');
 
-      component.onChangePage(4);
+        component.onChangePage(4);
 
-      expect(component.updateContent).toHaveBeenCalledWith({ scope: component.scope, page: '4' });
+        expect(component.updateContent).toHaveBeenCalledWith({ scope: component.scope, page: '4' });
+      });
     });
   });
 });
diff --git a/spec/javascripts/pipelines/navigation_tabs_spec.js b/spec/javascripts/vue_shared/components/navigation_tabs_spec.js
index f125a2fa189..78e7d747b92 100644
--- a/spec/javascripts/pipelines/navigation_tabs_spec.js
+++ b/spec/javascripts/vue_shared/components/navigation_tabs_spec.js
@@ -1,8 +1,8 @@
 import Vue from 'vue';
-import navigationTabs from '~/pipelines/components/navigation_tabs.vue';
-import mountComponent from '../helpers/vue_mount_component_helper';
+import navigationTabs from '~/vue_shared/components/navigation_tabs.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
 
-describe('navigation tabs pipeline component', () => {
+describe('navigation tabs component', () => {
   let vm;
   let Component;
   let data;
@@ -29,7 +29,7 @@ describe('navigation tabs pipeline component', () => {
     ];
 
     Component = Vue.extend(navigationTabs);
-    vm = mountComponent(Component, { tabs: data });
+    vm = mountComponent(Component, { tabs: data, scope: 'pipelines' });
   });
 
   afterEach(() => {
@@ -52,4 +52,10 @@ describe('navigation tabs pipeline component', () => {
   it('should not render badge', () => {
     expect(vm.$el.querySelector('.js-pipelines-tab-running .badge')).toEqual(null);
   });
+
+  it('should trigger onTabClick', () => {
+    spyOn(vm, '$emit');
+    vm.$el.querySelector('.js-pipelines-tab-pending').click();
+    expect(vm.$emit).toHaveBeenCalledWith('onChangeTab', 'pending');
+  });
 });