Stops page reload when changing tabs or pages - uses API requests instead

6 files changed, 199 insertions, 132 deletions

diff --git a/spec/features/projects/pipelines/pipelines_spec.rb b/spec/features/projects/pipelines/pipelines_spec.rb
index fc689bbb486..50f8f13d261 100644
--- a/spec/features/projects/pipelines/pipelines_spec.rb
+++ b/spec/features/projects/pipelines/pipelines_spec.rb
@@ -56,31 +56,37 @@ describe 'Pipelines', :js do
         end
 
         it 'shows a tab for All pipelines and count' do
-          expect(page.find('.js-pipelines-tab-all a').text).to include('All')
+          expect(page.find('.js-pipelines-tab-all').text).to include('All')
           expect(page.find('.js-pipelines-tab-all .badge').text).to include('1')
         end
 
         it 'shows a tab for Pending pipelines and count' do
-          expect(page.find('.js-pipelines-tab-pending a').text).to include('Pending')
+          expect(page.find('.js-pipelines-tab-pending').text).to include('Pending')
           expect(page.find('.js-pipelines-tab-pending .badge').text).to include('0')
         end
 
         it 'shows a tab for Running pipelines and count' do
-          expect(page.find('.js-pipelines-tab-running a').text).to include('Running')
+          expect(page.find('.js-pipelines-tab-running').text).to include('Running')
           expect(page.find('.js-pipelines-tab-running .badge').text).to include('1')
         end
 
         it 'shows a tab for Finished pipelines and count' do
-          expect(page.find('.js-pipelines-tab-finished a').text).to include('Finished')
+          expect(page.find('.js-pipelines-tab-finished').text).to include('Finished')
           expect(page.find('.js-pipelines-tab-finished .badge').text).to include('0')
         end
 
         it 'shows a tab for Branches' do
-          expect(page.find('.js-pipelines-tab-branches a').text).to include('Branches')
+          expect(page.find('.js-pipelines-tab-branches').text).to include('Branches')
         end
 
         it 'shows a tab for Tags' do
-          expect(page.find('.js-pipelines-tab-tags a').text).to include('Tags')
+          expect(page.find('.js-pipelines-tab-tags').text).to include('Tags')
+        end
+
+        it 'updates content when tab is clicked' do
+          page.find('.js-pipelines-tab-pending').click
+          wait_for_requests
+          expect(page).to have_content('No pipelines to show.')
         end
       end
 
@@ -396,6 +402,14 @@ describe 'Pipelines', :js do
 
           expect(page).to have_selector('.gl-pagination .page', count: 2)
         end
+
+        it 'should show updated content' do
+          visit project_pipelines_path(project)
+          wait_for_requests
+          page.find('.js-next-button a').click
+
+          expect(page).to have_selector('.gl-pagination .page', count: 2)
+        end
       end
     end
 
diff --git a/spec/javascripts/fixtures/pipelines.html.haml b/spec/javascripts/fixtures/pipelines.html.haml
index 97b0c25c923..85ee61f0b54 100644
--- a/spec/javascripts/fixtures/pipelines.html.haml
+++ b/spec/javascripts/fixtures/pipelines.html.haml
@@ -1,16 +1,10 @@
 %div
   #pipelines-list-vue{ data: { endpoint: 'foo',
-    "css-class" => 'foo',
     "help-page-path" => 'foo',
+    "help-auto-devops-path" => 'foo',
     "empty-state-svg-path" => 'foo',
     "error-state-svg-path" => 'foo',
     "new-pipeline-path" => 'foo',
     "can-create-pipeline" => 'true',
-    "all-path" =>  'foo',
-    "pending-path" => 'foo',
-    "running-path" => 'foo',
-    "finished-path" => 'foo',
-    "branches-path" => 'foo',
-    "tags-path" => 'foo',
     "has-ci" => 'foo',
     "ci-lint-path" => 'foo' } }
diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js
index a5298be5669..6dad5d6b6bd 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js
+++ b/spec/javascripts/lib/utils/common_utils_spec.js
@@ -183,6 +183,36 @@ describe('common_utils', () => {
     });
   });
 
+  describe('historyPushState', () => {
+    afterEach(() => {
+      window.history.replaceState({}, null, null);
+    });
+
+    it('should call pushState with the correct path', () => {
+      spyOn(window.history, 'pushState');
+
+      commonUtils.historyPushState('newpath?page=2');
+
+      expect(window.history.pushState).toHaveBeenCalled();
+      expect(window.history.pushState.calls.allArgs()[0][2]).toContain('newpath?page=2');
+    });
+  });
+
+  describe('parseQueryStringIntoObject', () => {
+    it('should return object with query parameters', () => {
+      expect(commonUtils.parseQueryStringIntoObject('scope=all&page=2')).toEqual({ scope: 'all', page: '2' });
+      expect(commonUtils.parseQueryStringIntoObject('scope=all')).toEqual({ scope: 'all' });
+      expect(commonUtils.parseQueryStringIntoObject()).toEqual({});
+    });
+  });
+
+  describe('buildUrlWithCurrentLocation', () => {
+    it('should build an url with current location and given parameters', () => {
+      expect(commonUtils.buildUrlWithCurrentLocation()).toEqual(window.location.pathname);
+      expect(commonUtils.buildUrlWithCurrentLocation('?page=2')).toEqual(`${window.location.pathname}?page=2`);
+    });
+  });
+
   describe('getParameterByName', () => {
     beforeEach(() => {
       window.history.pushState({}, null, '?scope=all&p=2');
diff --git a/spec/javascripts/lib/utils/poll_spec.js b/spec/javascripts/lib/utils/poll_spec.js
index 2aa7011ca51..9b8f68f1676 100644
--- a/spec/javascripts/lib/utils/poll_spec.js
+++ b/spec/javascripts/lib/utils/poll_spec.js
@@ -155,7 +155,7 @@ describe('Poll', () => {
         successCallback: () => {
           Polling.stop();
           setTimeout(() => {
-            Polling.restart();
+            Polling.restart({ data: { page: 4 } });
           }, 0);
         },
         errorCallback: callbacks.error,
@@ -170,10 +170,10 @@ describe('Poll', () => {
         Polling.stop();
 
         expect(service.fetch.calls.count()).toEqual(2);
-        expect(service.fetch).toHaveBeenCalledWith({ page: 1 });
+        expect(service.fetch).toHaveBeenCalledWith({ page: 4 });
         expect(Polling.stop).toHaveBeenCalled();
         expect(Polling.restart).toHaveBeenCalled();
-
+        expect(Polling.options.data).toEqual({ page: 4 });
         done();
       });
     });
diff --git a/spec/javascripts/pipelines/navigation_tabs_spec.js b/spec/javascripts/pipelines/navigation_tabs_spec.js
index 53a88e6322f..f125a2fa189 100644
--- a/spec/javascripts/pipelines/navigation_tabs_spec.js
+++ b/spec/javascripts/pipelines/navigation_tabs_spec.js
@@ -8,120 +8,48 @@ describe('navigation tabs pipeline component', () => {
   let data;
 
   beforeEach(() => {
-    data = {
-      scope: 'all',
-      count: {
-        all: 16,
-        running: 1,
-        pending: 10,
-        finished: 0,
+    data = [
+      {
+        name: 'All',
+        scope: 'all',
+        count: 1,
+        isActive: true,
+      },
+      {
+        name: 'Pending',
+        scope: 'pending',
+        count: 0,
+        isActive: false,
       },
-      paths: {
-        allPath: '/gitlab-org/gitlab-ce/pipelines',
-        pendingPath: '/gitlab-org/gitlab-ce/pipelines?scope=pending',
-        finishedPath: '/gitlab-org/gitlab-ce/pipelines?scope=finished',
-        runningPath: '/gitlab-org/gitlab-ce/pipelines?scope=running',
-        branchesPath: '/gitlab-org/gitlab-ce/pipelines?scope=branches',
-        tagsPath: '/gitlab-org/gitlab-ce/pipelines?scope=tags',
+      {
+        name: 'Running',
+        scope: 'running',
+        isActive: false,
       },
-    };
+    ];
 
     Component = Vue.extend(navigationTabs);
+    vm = mountComponent(Component, { tabs: data });
   });
 
   afterEach(() => {
     vm.$destroy();
   });
 
-  it('should render tabs with correct paths', () => {
-    vm = mountComponent(Component, data);
-
-    // All
-    const allTab = vm.$el.querySelector('.js-pipelines-tab-all a');
-    expect(allTab.textContent.trim()).toContain('All');
-    expect(allTab.getAttribute('href')).toEqual(data.paths.allPath);
-
-    // Pending
-    const pendingTab = vm.$el.querySelector('.js-pipelines-tab-pending a');
-    expect(pendingTab.textContent.trim()).toContain('Pending');
-    expect(pendingTab.getAttribute('href')).toEqual(data.paths.pendingPath);
-
-    // Running
-    const runningTab = vm.$el.querySelector('.js-pipelines-tab-running a');
-    expect(runningTab.textContent.trim()).toContain('Running');
-    expect(runningTab.getAttribute('href')).toEqual(data.paths.runningPath);
-
-    // Finished
-    const finishedTab = vm.$el.querySelector('.js-pipelines-tab-finished a');
-    expect(finishedTab.textContent.trim()).toContain('Finished');
-    expect(finishedTab.getAttribute('href')).toEqual(data.paths.finishedPath);
-
-    // Branches
-    const branchesTab = vm.$el.querySelector('.js-pipelines-tab-branches a');
-    expect(branchesTab.textContent.trim()).toContain('Branches');
-
-    // Tags
-    const tagsTab = vm.$el.querySelector('.js-pipelines-tab-tags a');
-    expect(tagsTab.textContent.trim()).toContain('Tags');
+  it('should render tabs', () => {
+    expect(vm.$el.querySelectorAll('li').length).toEqual(data.length);
   });
 
-  describe('scope', () => {
-    it('should render scope provided as active tab', () => {
-      vm = mountComponent(Component, data);
-      expect(vm.$el.querySelector('.js-pipelines-tab-all').className).toContain('active');
-    });
+  it('should render active tab', () => {
+    expect(vm.$el.querySelector('.active .js-pipelines-tab-all')).toBeDefined();
   });
 
-  describe('badges', () => {
-    it('should render provided number', () => {
-      vm = mountComponent(Component, data);
-      // All
-      expect(
-        vm.$el.querySelector('.js-totalbuilds-count').textContent.trim(),
-      ).toContain(data.count.all);
-
-      // Pending
-      expect(
-        vm.$el.querySelector('.js-pipelines-tab-pending .badge').textContent.trim(),
-      ).toContain(data.count.pending);
-
-      // Running
-      expect(
-        vm.$el.querySelector('.js-pipelines-tab-running .badge').textContent.trim(),
-      ).toContain(data.count.running);
-
-      // Finished
-      expect(
-        vm.$el.querySelector('.js-pipelines-tab-finished .badge').textContent.trim(),
-      ).toContain(data.count.finished);
-    });
-
-    it('should not render badge when number is undefined', () => {
-      vm = mountComponent(Component, {
-        scope: 'all',
-        paths: {},
-        count: {},
-      });
-
-       // All
-      expect(
-        vm.$el.querySelector('.js-totalbuilds-count'),
-      ).toEqual(null);
-
-      // Pending
-      expect(
-        vm.$el.querySelector('.js-pipelines-tab-pending .badge'),
-      ).toEqual(null);
-
-      // Running
-      expect(
-        vm.$el.querySelector('.js-pipelines-tab-running .badge'),
-      ).toEqual(null);
+  it('should render badge', () => {
+    expect(vm.$el.querySelector('.js-pipelines-tab-all .badge').textContent.trim()).toEqual('1');
+    expect(vm.$el.querySelector('.js-pipelines-tab-pending .badge').textContent.trim()).toEqual('0');
+  });
 
-      // Finished
-      expect(
-        vm.$el.querySelector('.js-pipelines-tab-finished .badge'),
-      ).toEqual(null);
-    });
+  it('should not render badge', () => {
+    expect(vm.$el.querySelector('.js-pipelines-tab-running .badge')).toEqual(null);
   });
 });
diff --git a/spec/javascripts/pipelines/pipelines_spec.js b/spec/javascripts/pipelines/pipelines_spec.js
index c30abb2edb0..ff38bc1974d 100644
--- a/spec/javascripts/pipelines/pipelines_spec.js
+++ b/spec/javascripts/pipelines/pipelines_spec.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import pipelinesComp from '~/pipelines/components/pipelines.vue';
 import Store from '~/pipelines/stores/pipelines_store';
+import mountComponent from '../helpers/vue_mount_component_helper';
 
 describe('Pipelines', () => {
   const jsonFixtureName = 'pipelines/pipelines.json';
@@ -9,26 +10,33 @@ describe('Pipelines', () => {
   preloadFixtures(jsonFixtureName);
 
   let PipelinesComponent;
-  let pipeline;
+  let pipelines;
+  let component;
 
   beforeEach(() => {
     loadFixtures('static/pipelines.html.raw');
-    const pipelines = getJSONFixture(jsonFixtureName).pipelines;
-    pipeline = pipelines.find(p => p.id === 1);
+    pipelines = getJSONFixture(jsonFixtureName);
 
     PipelinesComponent = Vue.extend(pipelinesComp);
   });
 
+  afterEach(() => {
+    component.$destroy();
+  });
+
   describe('successfull request', () => {
     describe('with pipelines', () => {
       const pipelinesInterceptor = (request, next) => {
-        next(request.respondWith(JSON.stringify(pipeline), {
+        next(request.respondWith(JSON.stringify(pipelines), {
           status: 200,
         }));
       };
 
       beforeEach(() => {
         Vue.http.interceptors.push(pipelinesInterceptor);
+        component = mountComponent(PipelinesComponent, {
+          store: new Store(),
+        });
       });
 
       afterEach(() => {
@@ -38,18 +46,71 @@ describe('Pipelines', () => {
       });
 
       it('should render table', (done) => {
-        const component = new PipelinesComponent({
-          propsData: {
-            store: new Store(),
-          },
-        }).$mount();
-
         setTimeout(() => {
           expect(component.$el.querySelector('.table-holder')).toBeDefined();
-          expect(component.$el.querySelector('.realtime-loading')).toBe(null);
+          expect(
+            component.$el.querySelectorAll('.gl-responsive-table-row').length,
+          ).toEqual(pipelines.pipelines.length + 1);
           done();
         });
       });
+
+      it('should render navigation tabs', (done) => {
+        setTimeout(() => {
+          expect(
+            component.$el.querySelector('.js-pipelines-tab-pending').textContent.trim(),
+          ).toContain('Pending');
+          expect(
+            component.$el.querySelector('.js-pipelines-tab-all').textContent.trim(),
+          ).toContain('All');
+          expect(
+            component.$el.querySelector('.js-pipelines-tab-running').textContent.trim(),
+          ).toContain('Running');
+          expect(
+            component.$el.querySelector('.js-pipelines-tab-finished').textContent.trim(),
+          ).toContain('Finished');
+          expect(
+            component.$el.querySelector('.js-pipelines-tab-branches').textContent.trim(),
+          ).toContain('Branches');
+          expect(
+            component.$el.querySelector('.js-pipelines-tab-tags').textContent.trim(),
+          ).toContain('Tags');
+          done();
+        });
+      });
+
+      it('should make an API request when using tabs', (done) => {
+        setTimeout(() => {
+          spyOn(component, 'updateContent');
+          component.$el.querySelector('.js-pipelines-tab-finished').click();
+
+          expect(component.updateContent).toHaveBeenCalledWith({ scope: 'finished', page: '1' });
+          done();
+        });
+      });
+
+      describe('with pagination', () => {
+        it('should make an API request when using pagination', (done) => {
+          setTimeout(() => {
+            spyOn(component, 'updateContent');
+            // Mock pagination
+            component.store.state.pageInfo = {
+              page: 1,
+              total: 10,
+              perPage: 2,
+              nextPage: 2,
+              totalPages: 5,
+            };
+
+            Vue.nextTick(() => {
+              component.$el.querySelector('.js-next-button a').click();
+              expect(component.updateContent).toHaveBeenCalledWith({ scope: 'all', page: '2' });
+
+              done();
+            });
+          });
+        });
+      });
     });
 
     describe('without pipelines', () => {
@@ -70,15 +131,14 @@ describe('Pipelines', () => {
       });
 
       it('should render empty state', (done) => {
-        const component = new PipelinesComponent({
+        component = new PipelinesComponent({
           propsData: {
             store: new Store(),
           },
         }).$mount();
 
         setTimeout(() => {
-          expect(component.$el.querySelector('.empty-state')).toBeDefined();
-          expect(component.$el.querySelector('.realtime-loading')).toBe(null);
+          expect(component.$el.querySelector('.empty-state')).not.toBe(null);
           done();
         });
       });
@@ -103,7 +163,7 @@ describe('Pipelines', () => {
     });
 
     it('should render error state', (done) => {
-      const component = new PipelinesComponent({
+      component = new PipelinesComponent({
         propsData: {
           store: new Store(),
         },
@@ -111,9 +171,50 @@ describe('Pipelines', () => {
 
       setTimeout(() => {
         expect(component.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
-        expect(component.$el.querySelector('.realtime-loading')).toBe(null);
         done();
       });
     });
   });
+
+  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('onChangeTab', () => {
+    it('should set page to 1', () => {
+      component = mountComponent(PipelinesComponent, {
+        store: new Store(),
+      });
+
+      spyOn(component, 'updateContent');
+
+      component.onChangeTab('running');
+
+      expect(component.updateContent).toHaveBeenCalledWith({ scope: 'running', page: '1' });
+    });
+  });
+
+  describe('onChangePage', () => {
+    it('should update page and keep scope', () => {
+      component = mountComponent(PipelinesComponent, {
+        store: new Store(),
+      });
+
+      spyOn(component, 'updateContent');
+
+      component.onChangePage(4);
+
+      expect(component.updateContent).toHaveBeenCalledWith({ scope: component.scope, page: '4' });
+    });
+  });
 });