diff options
Diffstat (limited to 'spec/frontend/boards/components/board_new_issue_spec.js')
-rw-r--r-- | spec/frontend/boards/components/board_new_issue_spec.js | 154 |
1 files changed, 77 insertions, 77 deletions
diff --git a/spec/frontend/boards/components/board_new_issue_spec.js b/spec/frontend/boards/components/board_new_issue_spec.js index e6405bbcff3..57ccebf3676 100644 --- a/spec/frontend/boards/components/board_new_issue_spec.js +++ b/spec/frontend/boards/components/board_new_issue_spec.js @@ -1,6 +1,9 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; import BoardNewIssue from '~/boards/components/board_new_issue.vue'; +import BoardNewItem from '~/boards/components/board_new_item.vue'; +import ProjectSelect from '~/boards/components/project_select.vue'; +import eventHub from '~/boards/eventhub'; import { mockList, mockGroupProjects } from '../mock_data'; @@ -8,107 +11,104 @@ const localVue = createLocalVue(); localVue.use(Vuex); +const addListNewIssuesSpy = jest.fn().mockResolvedValue(); +const mockActions = { addListNewIssue: addListNewIssuesSpy }; + +const createComponent = ({ + state = { selectedProject: mockGroupProjects[0], fullPath: mockGroupProjects[0].fullPath }, + actions = mockActions, + getters = { isGroupBoard: () => true, isProjectBoard: () => false }, +} = {}) => + shallowMount(BoardNewIssue, { + localVue, + store: new Vuex.Store({ + state, + actions, + getters, + }), + propsData: { + list: mockList, + }, + provide: { + groupId: 1, + weightFeatureAvailable: false, + boardWeight: null, + }, + stubs: { + BoardNewItem, + }, + }); + describe('Issue boards new issue form', () => { let wrapper; - let vm; - - const addListNewIssuesSpy = jest.fn(); - - const findSubmitButton = () => wrapper.find({ ref: 'submitButton' }); - const findCancelButton = () => wrapper.find({ ref: 'cancelButton' }); - const findSubmitForm = () => wrapper.find({ ref: 'submitForm' }); - - const submitIssue = () => { - const dummySubmitEvent = { - preventDefault() {}, - }; - return findSubmitForm().trigger('submit', dummySubmitEvent); - }; - - beforeEach(() => { - const store = new Vuex.Store({ - state: { selectedProject: mockGroupProjects[0] }, - actions: { addListNewIssue: addListNewIssuesSpy }, - getters: { isGroupBoard: () => false, isProjectBoard: () => true }, - }); - - wrapper = shallowMount(BoardNewIssue, { - propsData: { - disabled: false, - list: mockList, - }, - store, - localVue, - provide: { - groupId: null, - weightFeatureAvailable: false, - boardWeight: null, - }, - }); + const findBoardNewItem = () => wrapper.findComponent(BoardNewItem); - vm = wrapper.vm; + beforeEach(async () => { + wrapper = createComponent(); - return vm.$nextTick(); + await wrapper.vm.$nextTick(); }); afterEach(() => { wrapper.destroy(); }); - it('calls submit if submit button is clicked', async () => { - jest.spyOn(wrapper.vm, 'submit').mockImplementation(); - wrapper.setData({ title: 'Testing Title' }); - - await vm.$nextTick(); - await submitIssue(); - expect(wrapper.vm.submit).toHaveBeenCalled(); - }); - - it('disables submit button if title is empty', () => { - expect(findSubmitButton().props().disabled).toBe(true); + it('renders board-new-item component', () => { + const boardNewItem = findBoardNewItem(); + expect(boardNewItem.exists()).toBe(true); + expect(boardNewItem.props()).toEqual({ + list: mockList, + formEventPrefix: 'toggle-issue-form-', + submitButtonTitle: 'Create issue', + disableSubmit: false, + }); }); - it('enables submit button if title is not empty', async () => { - wrapper.setData({ title: 'Testing Title' }); - - await vm.$nextTick(); - expect(wrapper.find({ ref: 'input' }).element.value).toBe('Testing Title'); - expect(findSubmitButton().props().disabled).toBe(false); + it('calls addListNewIssue action when `board-new-item` emits form-submit event', async () => { + findBoardNewItem().vm.$emit('form-submit', { title: 'Foo' }); + + await wrapper.vm.$nextTick(); + expect(addListNewIssuesSpy).toHaveBeenCalledWith(expect.any(Object), { + list: mockList, + issueInput: { + title: 'Foo', + labelIds: [], + assigneeIds: [], + milestoneId: undefined, + projectPath: mockGroupProjects[0].fullPath, + }, + }); }); - it('clears title after clicking cancel', async () => { - findCancelButton().trigger('click'); + it('emits event `toggle-issue-form` with current list Id suffix on eventHub when `board-new-item` emits form-cancel event', async () => { + jest.spyOn(eventHub, '$emit').mockImplementation(); + findBoardNewItem().vm.$emit('form-cancel'); - await vm.$nextTick(); - expect(vm.title).toBe(''); + await wrapper.vm.$nextTick(); + expect(eventHub.$emit).toHaveBeenCalledWith(`toggle-issue-form-${mockList.id}`); }); - describe('submit success', () => { - it('creates new issue', async () => { - wrapper.setData({ title: 'create issue' }); + describe('when in group issue board', () => { + it('renders project-select component within board-new-item component', () => { + const projectSelect = findBoardNewItem().findComponent(ProjectSelect); - await vm.$nextTick(); - await submitIssue(); - expect(addListNewIssuesSpy).toHaveBeenCalled(); + expect(projectSelect.exists()).toBe(true); + expect(projectSelect.props('list')).toEqual(mockList); }); + }); - it('enables button after submit', async () => { - jest.spyOn(wrapper.vm, 'submit').mockImplementation(); - wrapper.setData({ title: 'create issue' }); - - await vm.$nextTick(); - await submitIssue(); - expect(findSubmitButton().props().disabled).toBe(false); + describe('when in project issue board', () => { + beforeEach(() => { + wrapper = createComponent({ + getters: { isGroupBoard: () => false, isProjectBoard: () => true }, + }); }); - it('clears title after submit', async () => { - wrapper.setData({ title: 'create issue' }); + it('does not render project-select component within board-new-item component', () => { + const projectSelect = findBoardNewItem().findComponent(ProjectSelect); - await vm.$nextTick(); - await submitIssue(); - await vm.$nextTick(); - expect(vm.title).toBe(''); + expect(projectSelect.exists()).toBe(false); }); }); }); |