diff options
Diffstat (limited to 'spec/javascripts')
| -rw-r--r-- | spec/javascripts/environments/emtpy_state_spec.js | 57 | ||||
| -rw-r--r-- | spec/javascripts/environments/environment_table_spec.js | 31 | ||||
| -rw-r--r-- | spec/javascripts/environments/environments_app_spec.js (renamed from spec/javascripts/environments/environment_spec.js) | 132 | ||||
| -rw-r--r-- | spec/javascripts/environments/folder/environments_folder_view_spec.js | 157 | ||||
| -rw-r--r-- | spec/javascripts/fixtures/environments/element.html.haml | 1 | ||||
| -rw-r--r-- | spec/javascripts/fixtures/environments/environments.html.haml | 9 | ||||
| -rw-r--r-- | spec/javascripts/fixtures/environments/environments_folder_view.html.haml | 7 | ||||
| -rw-r--r-- | spec/javascripts/lib/utils/common_utils_spec.js | 41 | ||||
| -rw-r--r-- | spec/javascripts/pipelines/pipelines_spec.js | 62 | ||||
| -rw-r--r-- | spec/javascripts/vue_shared/components/navigation_tabs_spec.js (renamed from spec/javascripts/pipelines/navigation_tabs_spec.js) | 14 |
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'); + }); }); |