diff options
Diffstat (limited to 'spec/frontend/pipelines/stage_spec.js')
-rw-r--r-- | spec/frontend/pipelines/stage_spec.js | 156 |
1 files changed, 156 insertions, 0 deletions
diff --git a/spec/frontend/pipelines/stage_spec.js b/spec/frontend/pipelines/stage_spec.js new file mode 100644 index 00000000000..6aa041bcb7f --- /dev/null +++ b/spec/frontend/pipelines/stage_spec.js @@ -0,0 +1,156 @@ +import { mount } from '@vue/test-utils'; +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import StageComponent from '~/pipelines/components/stage.vue'; +import eventHub from '~/pipelines/event_hub'; +import { stageReply } from './mock_data'; +import waitForPromises from 'helpers/wait_for_promises'; + +describe('Pipelines stage component', () => { + let wrapper; + let mock; + + const defaultProps = { + stage: { + status: { + group: 'success', + icon: 'status_success', + title: 'success', + }, + dropdown_path: 'path.json', + }, + updateDropdown: false, + }; + + const createComponent = (props = {}) => { + wrapper = mount(StageComponent, { + propsData: { + ...defaultProps, + ...props, + }, + }); + }; + + beforeEach(() => { + mock = new MockAdapter(axios); + }); + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + + mock.restore(); + }); + + describe('default', () => { + beforeEach(() => { + createComponent(); + }); + + it('should render a dropdown with the status icon', () => { + expect(wrapper.attributes('class')).toEqual('dropdown'); + expect(wrapper.find('svg').exists()).toBe(true); + expect(wrapper.find('button').attributes('data-toggle')).toEqual('dropdown'); + }); + }); + + describe('with successful request', () => { + beforeEach(() => { + mock.onGet('path.json').reply(200, stageReply); + createComponent(); + }); + + it('should render the received data and emit `clickedDropdown` event', () => { + jest.spyOn(eventHub, '$emit'); + wrapper.find('button').trigger('click'); + + return waitForPromises().then(() => { + expect(wrapper.find('.js-builds-dropdown-container ul').text()).toContain( + stageReply.latest_statuses[0].name, + ); + + expect(eventHub.$emit).toHaveBeenCalledWith('clickedDropdown'); + }); + }); + }); + + describe('when request fails', () => { + beforeEach(() => { + mock.onGet('path.json').reply(500); + createComponent(); + }); + + it('should close the dropdown', () => { + wrapper.setMethods({ + closeDropdown: jest.fn(), + isDropdownOpen: jest.fn().mockReturnValue(false), + }); + + wrapper.find('button').trigger('click'); + + return waitForPromises().then(() => { + expect(wrapper.vm.closeDropdown).toHaveBeenCalled(); + }); + }); + }); + + describe('update endpoint correctly', () => { + beforeEach(() => { + const copyStage = { ...stageReply }; + copyStage.latest_statuses[0].name = 'this is the updated content'; + mock.onGet('bar.json').reply(200, copyStage); + createComponent({ + stage: { + status: { + group: 'running', + icon: 'status_running', + title: 'running', + }, + dropdown_path: 'bar.json', + }, + }); + }); + + it('should update the stage to request the new endpoint provided', () => { + return wrapper.vm + .$nextTick() + .then(() => { + wrapper.find('button').trigger('click'); + return waitForPromises(); + }) + .then(() => { + expect(wrapper.find('.js-builds-dropdown-container ul').text()).toContain( + 'this is the updated content', + ); + }); + }); + }); + + describe('pipelineActionRequestComplete', () => { + beforeEach(() => { + mock.onGet('path.json').reply(200, stageReply); + + mock.onPost(`${stageReply.latest_statuses[0].status.action.path}.json`).reply(200); + + createComponent({ type: 'PIPELINES_TABLE' }); + }); + + describe('within pipeline table', () => { + it('emits `refreshPipelinesTable` event when `pipelineActionRequestComplete` is triggered', () => { + jest.spyOn(eventHub, '$emit'); + + wrapper.find('button').trigger('click'); + + return waitForPromises() + .then(() => { + wrapper.find('.js-ci-action').trigger('click'); + + return waitForPromises(); + }) + .then(() => { + expect(eventHub.$emit).toHaveBeenCalledWith('refreshPipelinesTable'); + }); + }); + }); + }); +}); |