import Vue from 'vue'; import MockAdapter from 'axios-mock-adapter'; import axios from '~/lib/utils/axios_utils'; import pipelinesComp from '~/pipelines/components/pipelines.vue'; import Store from '~/pipelines/stores/pipelines_store'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { pipelineWithStages, stageReply } from './mock_data'; describe('Pipelines', () => { const jsonFixtureName = 'pipelines/pipelines.json'; preloadFixtures(jsonFixtureName); let PipelinesComponent; let pipelines; let vm; let mock; const paths = { endpoint: 'twitter/flight/pipelines.json', autoDevopsPath: '/help/topics/autodevops/index.md', helpPagePath: '/help/ci/quick_start/README', emptyStateSvgPath: '/assets/illustrations/pipelines_empty.svg', errorStateSvgPath: '/assets/illustrations/pipelines_failed.svg', noPipelinesSvgPath: '/assets/illustrations/pipelines_pending.svg', ciLintPath: '/ci/lint', resetCachePath: '/twitter/flight/settings/ci_cd/reset_cache', newPipelinePath: '/twitter/flight/pipelines/new', }; const noPermissions = { endpoint: 'twitter/flight/pipelines.json', autoDevopsPath: '/help/topics/autodevops/index.md', helpPagePath: '/help/ci/quick_start/README', emptyStateSvgPath: '/assets/illustrations/pipelines_empty.svg', errorStateSvgPath: '/assets/illustrations/pipelines_failed.svg', noPipelinesSvgPath: '/assets/illustrations/pipelines_pending.svg', }; beforeEach(() => { mock = new MockAdapter(axios); pipelines = getJSONFixture(jsonFixtureName); PipelinesComponent = Vue.extend(pipelinesComp); }); afterEach(() => { vm.$destroy(); mock.restore(); }); describe('With permission', () => { describe('With pipelines in main tab', () => { beforeEach((done) => { mock.onGet('twitter/flight/pipelines.json').reply(200, pipelines); vm = mountComponent(PipelinesComponent, { store: new Store(), hasGitlabCi: true, canCreatePipeline: true, ...paths, }); setTimeout(() => { done(); }); }); it('renders tabs', () => { expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All'); }); it('renders Run Pipeline link', () => { expect(vm.$el.querySelector('.js-run-pipeline').getAttribute('href')).toEqual(paths.newPipelinePath); }); it('renders CI Lint link', () => { expect(vm.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(paths.ciLintPath); }); it('renders Clear Runner Cache button', () => { expect(vm.$el.querySelector('.js-clear-cache').textContent.trim()).toEqual('Clear Runner Caches'); }); it('renders pipelines table', () => { expect( vm.$el.querySelectorAll('.gl-responsive-table-row').length, ).toEqual(pipelines.pipelines.length + 1); }); }); describe('Without pipelines on main tab with CI', () => { beforeEach((done) => { mock.onGet('twitter/flight/pipelines.json').reply(200, { pipelines: [], count: { all: 0, pending: 0, running: 0, finished: 0, }, }); vm = mountComponent(PipelinesComponent, { store: new Store(), hasGitlabCi: true, canCreatePipeline: true, ...paths, }); setTimeout(() => { done(); }); }); it('renders tabs', () => { expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All'); }); it('renders Run Pipeline link', () => { expect(vm.$el.querySelector('.js-run-pipeline').getAttribute('href')).toEqual(paths.newPipelinePath); }); it('renders CI Lint link', () => { expect(vm.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(paths.ciLintPath); }); it('renders Clear Runner Cache button', () => { expect(vm.$el.querySelector('.js-clear-cache').textContent.trim()).toEqual('Clear Runner Caches'); }); it('renders tab empty state', () => { expect(vm.$el.querySelector('.empty-state h4').textContent.trim()).toEqual('There are currently no pipelines.'); }); }); describe('Without pipelines nor CI', () => { beforeEach((done) => { mock.onGet('twitter/flight/pipelines.json').reply(200, { pipelines: [], count: { all: 0, pending: 0, running: 0, finished: 0, }, }); vm = mountComponent(PipelinesComponent, { store: new Store(), hasGitlabCi: false, canCreatePipeline: true, ...paths, }); setTimeout(() => { done(); }); }); it('renders empty state', () => { expect(vm.$el.querySelector('.js-empty-state h4').textContent.trim()).toEqual('Build with confidence'); expect(vm.$el.querySelector('.js-get-started-pipelines').getAttribute('href')).toEqual(paths.helpPagePath); }); it('does not render tabs nor buttons', () => { expect(vm.$el.querySelector('.js-pipelines-tab-all')).toBeNull(); expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull(); expect(vm.$el.querySelector('.js-ci-lint')).toBeNull(); expect(vm.$el.querySelector('.js-clear-cache')).toBeNull(); }); }); describe('When API returns error', () => { beforeEach((done) => { mock.onGet('twitter/flight/pipelines.json').reply(500, {}); vm = mountComponent(PipelinesComponent, { store: new Store(), hasGitlabCi: false, canCreatePipeline: true, ...paths, }); setTimeout(() => { done(); }); }); it('renders tabs', () => { expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All'); }); it('renders buttons', () => { expect(vm.$el.querySelector('.js-run-pipeline').getAttribute('href')).toEqual(paths.newPipelinePath); expect(vm.$el.querySelector('.js-ci-lint').getAttribute('href')).toEqual(paths.ciLintPath); expect(vm.$el.querySelector('.js-clear-cache').textContent.trim()).toEqual('Clear Runner Caches'); }); it('renders error state', () => { expect(vm.$el.querySelector('.empty-state').textContent.trim()).toContain('There was an error fetching the pipelines.'); }); }); }); describe('Without permission', () => { describe('With pipelines in main tab', () => { beforeEach((done) => { mock.onGet('twitter/flight/pipelines.json').reply(200, pipelines); vm = mountComponent(PipelinesComponent, { store: new Store(), hasGitlabCi: false, canCreatePipeline: false, ...noPermissions, }); setTimeout(() => { done(); }); }); it('renders tabs', () => { expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All'); }); it('does not render buttons', () => { expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull(); expect(vm.$el.querySelector('.js-ci-lint')).toBeNull(); expect(vm.$el.querySelector('.js-clear-cache')).toBeNull(); }); it('renders pipelines table', () => { expect( vm.$el.querySelectorAll('.gl-responsive-table-row').length, ).toEqual(pipelines.pipelines.length + 1); }); }); describe('Without pipelines on main tab with CI', () => { beforeEach((done) => { mock.onGet('twitter/flight/pipelines.json').reply(200, { pipelines: [], count: { all: 0, pending: 0, running: 0, finished: 0, }, }); vm = mountComponent(PipelinesComponent, { store: new Store(), hasGitlabCi: true, canCreatePipeline: false, ...noPermissions, }); setTimeout(() => { done(); }); }); it('renders tabs', () => { expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All'); }); it('does not render buttons', () => { expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull(); expect(vm.$el.querySelector('.js-ci-lint')).toBeNull(); expect(vm.$el.querySelector('.js-clear-cache')).toBeNull(); }); it('renders tab empty state', () => { expect(vm.$el.querySelector('.empty-state h4').textContent.trim()).toEqual('There are currently no pipelines.'); }); }); describe('Without pipelines nor CI', () => { beforeEach((done) => { mock.onGet('twitter/flight/pipelines.json').reply(200, { pipelines: [], count: { all: 0, pending: 0, running: 0, finished: 0, }, }); vm = mountComponent(PipelinesComponent, { store: new Store(), hasGitlabCi: false, canCreatePipeline: false, ...noPermissions, }); setTimeout(() => { done(); }); }); it('renders empty state without button to set CI', () => { expect(vm.$el.querySelector('.js-empty-state').textContent.trim()).toEqual('This project is not currently set up to run pipelines.'); expect(vm.$el.querySelector('.js-get-started-pipelines')).toBeNull(); }); it('does not render tabs or buttons', () => { expect(vm.$el.querySelector('.js-pipelines-tab-all')).toBeNull(); expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull(); expect(vm.$el.querySelector('.js-ci-lint')).toBeNull(); expect(vm.$el.querySelector('.js-clear-cache')).toBeNull(); }); }); describe('When API returns error', () => { beforeEach((done) => { mock.onGet('twitter/flight/pipelines.json').reply(500, {}); vm = mountComponent(PipelinesComponent, { store: new Store(), hasGitlabCi: false, canCreatePipeline: true, ...noPermissions, }); setTimeout(() => { done(); }); }); it('renders tabs', () => { expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All'); }); it('does not renders buttons', () => { expect(vm.$el.querySelector('.js-run-pipeline')).toBeNull(); expect(vm.$el.querySelector('.js-ci-lint')).toBeNull(); expect(vm.$el.querySelector('.js-clear-cache')).toBeNull(); }); it('renders error state', () => { expect(vm.$el.querySelector('.empty-state').textContent.trim()).toContain('There was an error fetching the pipelines.'); }); }); }); describe('successfull request', () => { describe('with pipelines', () => { beforeEach(() => { mock.onGet('twitter/flight/pipelines.json').reply(200, pipelines); vm = mountComponent(PipelinesComponent, { store: new Store(), hasGitlabCi: true, canCreatePipeline: true, ...paths, }); }); it('should render table', (done) => { setTimeout(() => { expect(vm.$el.querySelector('.table-holder')).toBeDefined(); expect( vm.$el.querySelectorAll('.gl-responsive-table-row').length, ).toEqual(pipelines.pipelines.length + 1); done(); }); }); it('should render navigation tabs', (done) => { setTimeout(() => { expect( vm.$el.querySelector('.js-pipelines-tab-pending').textContent.trim(), ).toContain('Pending'); expect( vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim(), ).toContain('All'); expect( vm.$el.querySelector('.js-pipelines-tab-running').textContent.trim(), ).toContain('Running'); expect( vm.$el.querySelector('.js-pipelines-tab-finished').textContent.trim(), ).toContain('Finished'); expect( vm.$el.querySelector('.js-pipelines-tab-branches').textContent.trim(), ).toContain('Branches'); expect( vm.$el.querySelector('.js-pipelines-tab-tags').textContent.trim(), ).toContain('Tags'); done(); }); }); it('should make an API request when using tabs', (done) => { setTimeout(() => { spyOn(vm, 'updateContent'); vm.$el.querySelector('.js-pipelines-tab-finished').click(); expect(vm.updateContent).toHaveBeenCalledWith({ scope: 'finished', page: '1' }); done(); }); }); describe('with pagination', () => { it('should make an API request when using pagination', (done) => { setTimeout(() => { spyOn(vm, 'updateContent'); // Mock pagination vm.store.state.pageInfo = { page: 1, total: 10, perPage: 2, nextPage: 2, totalPages: 5, }; vm.$nextTick(() => { vm.$el.querySelector('.js-next-button a').click(); expect(vm.updateContent).toHaveBeenCalledWith({ scope: 'all', page: '2' }); done(); }); }); }); }); }); }); describe('methods', () => { beforeEach(() => { spyOn(window.history, 'pushState').and.stub(); }); describe('updateContent', () => { it('should set given parameters', () => { vm = mountComponent(PipelinesComponent, { store: new Store(), hasGitlabCi: true, canCreatePipeline: true, ...paths, }); vm.updateContent({ scope: 'finished', page: '4' }); expect(vm.page).toEqual('4'); expect(vm.scope).toEqual('finished'); expect(vm.requestData.scope).toEqual('finished'); expect(vm.requestData.page).toEqual('4'); }); }); describe('onChangeTab', () => { it('should set page to 1', () => { vm = mountComponent(PipelinesComponent, { store: new Store(), hasGitlabCi: true, canCreatePipeline: true, ...paths, }); spyOn(vm, 'updateContent'); vm.onChangeTab('running'); expect(vm.updateContent).toHaveBeenCalledWith({ scope: 'running', page: '1' }); }); }); describe('onChangePage', () => { it('should update page and keep scope', () => { vm = mountComponent(PipelinesComponent, { store: new Store(), hasGitlabCi: true, canCreatePipeline: true, ...paths, }); spyOn(vm, 'updateContent'); vm.onChangePage(4); expect(vm.updateContent).toHaveBeenCalledWith({ scope: vm.scope, page: '4' }); }); }); }); describe('computed properties', () => { beforeEach(() => { vm = mountComponent(PipelinesComponent, { store: new Store(), hasGitlabCi: true, canCreatePipeline: true, ...paths, }); }); describe('tabs', () => { it('returns default tabs', () => { expect(vm.tabs).toEqual([ { name: 'All', scope: 'all', count: undefined, isActive: true }, { name: 'Pending', scope: 'pending', count: undefined, isActive: false }, { name: 'Running', scope: 'running', count: undefined, isActive: false }, { name: 'Finished', scope: 'finished', count: undefined, isActive: false }, { name: 'Branches', scope: 'branches', isActive: false }, { name: 'Tags', scope: 'tags', isActive: false }, ]); }); }); describe('emptyTabMessage', () => { it('returns message with scope', (done) => { vm.scope = 'pending'; vm.$nextTick(() => { expect(vm.emptyTabMessage).toEqual('There are currently no pending pipelines.'); done(); }); }); it('returns message without scope when scope is `all`', () => { expect(vm.emptyTabMessage).toEqual('There are currently no pipelines.'); }); }); describe('stateToRender', () => { it('returns loading state when the app is loading', () => { expect(vm.stateToRender).toEqual('loading'); }); it('returns error state when app has error', (done) => { vm.hasError = true; vm.isLoading = false; vm.$nextTick(() => { expect(vm.stateToRender).toEqual('error'); done(); }); }); it('returns table list when app has pipelines', (done) => { vm.isLoading = false; vm.hasError = false; vm.state.pipelines = pipelines.pipelines; vm.$nextTick(() => { expect(vm.stateToRender).toEqual('tableList'); done(); }); }); it('returns empty tab when app does not have pipelines but project has pipelines', (done) => { vm.state.count.all = 10; vm.isLoading = false; vm.$nextTick(() => { expect(vm.stateToRender).toEqual('emptyTab'); done(); }); }); it('returns empty tab when project has CI', (done) => { vm.isLoading = false; vm.$nextTick(() => { expect(vm.stateToRender).toEqual('emptyTab'); done(); }); }); it('returns empty state when project does not have pipelines nor CI', (done) => { vm.isLoading = false; vm.hasGitlabCi = false; vm.$nextTick(() => { expect(vm.stateToRender).toEqual('emptyState'); done(); }); }); }); describe('shouldRenderTabs', () => { it('returns true when state is loading & has already made the first request', (done) => { vm.isLoading = true; vm.hasMadeRequest = true; vm.$nextTick(() => { expect(vm.shouldRenderTabs).toEqual(true); done(); }); }); it('returns true when state is tableList & has already made the first request', (done) => { vm.isLoading = false; vm.state.pipelines = pipelines.pipelines; vm.hasMadeRequest = true; vm.$nextTick(() => { expect(vm.shouldRenderTabs).toEqual(true); done(); }); }); it('returns true when state is error & has already made the first request', (done) => { vm.isLoading = false; vm.hasError = true; vm.hasMadeRequest = true; vm.$nextTick(() => { expect(vm.shouldRenderTabs).toEqual(true); done(); }); }); it('returns true when state is empty tab & has already made the first request', (done) => { vm.isLoading = false; vm.state.count.all = 10; vm.hasMadeRequest = true; vm.$nextTick(() => { expect(vm.shouldRenderTabs).toEqual(true); done(); }); }); it('returns false when has not made first request', (done) => { vm.hasMadeRequest = false; vm.$nextTick(() => { expect(vm.shouldRenderTabs).toEqual(false); done(); }); }); it('returns false when state is emtpy state', (done) => { vm.isLoading = false; vm.hasMadeRequest = true; vm.hasGitlabCi = false; vm.$nextTick(() => { expect(vm.shouldRenderTabs).toEqual(false); done(); }); }); }); describe('shouldRenderButtons', () => { it('returns true when it has paths & has made the first request', (done) => { vm.hasMadeRequest = true; vm.$nextTick(() => { expect(vm.shouldRenderButtons).toEqual(true); done(); }); }); it('returns false when it has not made the first request', (done) => { vm.hasMadeRequest = false; vm.$nextTick(() => { expect(vm.shouldRenderButtons).toEqual(false); done(); }); }); }); }); describe('updates results when a staged is clicked', () => { beforeEach(() => { const copyPipeline = Object.assign({}, pipelineWithStages); copyPipeline.id += 1; mock .onGet('twitter/flight/pipelines.json').reply(200, { pipelines: [pipelineWithStages], count: { all: 1, finished: 1, pending: 0, running: 0, }, }, { 'POLL-INTERVAL': 100, }) .onGet(pipelineWithStages.details.stages[0].dropdown_path) .reply(200, stageReply); vm = mountComponent(PipelinesComponent, { store: new Store(), hasGitlabCi: true, canCreatePipeline: true, ...paths, }); }); describe('when a request is being made', () => { it('stops polling, cancels the request, fetches pipelines & restarts polling', (done) => { spyOn(vm.poll, 'stop'); spyOn(vm.poll, 'restart'); spyOn(vm, 'getPipelines').and.returnValue(Promise.resolve()); spyOn(vm.service.cancelationSource, 'cancel').and.callThrough(); setTimeout(() => { vm.isMakingRequest = true; return vm.$nextTick() .then(() => { vm.$el.querySelector('.js-builds-dropdown-button').click(); }) .then(() => { expect(vm.service.cancelationSource.cancel).toHaveBeenCalled(); expect(vm.poll.stop).toHaveBeenCalled(); setTimeout(() => { expect(vm.getPipelines).toHaveBeenCalled(); expect(vm.poll.restart).toHaveBeenCalled(); done(); }, 0); }); }, 0); }); }); describe('when no request is being made', () => { it('stops polling, fetches pipelines & restarts polling', (done) => { spyOn(vm.poll, 'stop'); spyOn(vm.poll, 'restart'); spyOn(vm, 'getPipelines').and.returnValue(Promise.resolve()); setTimeout(() => { vm.$el.querySelector('.js-builds-dropdown-button').click(); expect(vm.poll.stop).toHaveBeenCalled(); setTimeout(() => { expect(vm.getPipelines).toHaveBeenCalled(); expect(vm.poll.restart).toHaveBeenCalled(); done(); }, 0); }, 0); }); }); }); });