diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-11-14 18:35:29 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-11-14 18:35:29 +0300 |
commit | be4abe7719a500852ce4f913d345e9b3e8794dc3 (patch) | |
tree | 03cc5bb43e1cd83a4a5ee6263545e4f532a4c6e8 /spec | |
parent | 62287fec4f3dcfce99a1c8e083efb799720d97f2 (diff) |
Stops page reload when changing tabs or pages - uses API requests instead
Diffstat (limited to 'spec')
-rw-r--r-- | spec/features/projects/pipelines/pipelines_spec.rb | 26 | ||||
-rw-r--r-- | spec/javascripts/fixtures/pipelines.html.haml | 8 | ||||
-rw-r--r-- | spec/javascripts/lib/utils/common_utils_spec.js | 30 | ||||
-rw-r--r-- | spec/javascripts/lib/utils/poll_spec.js | 6 | ||||
-rw-r--r-- | spec/javascripts/pipelines/navigation_tabs_spec.js | 128 | ||||
-rw-r--r-- | spec/javascripts/pipelines/pipelines_spec.js | 133 |
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' }); + }); + }); }); |