diff options
Diffstat (limited to 'spec/frontend/milestones')
-rw-r--r-- | spec/frontend/milestones/milestone_combobox_spec.js | 126 |
1 files changed, 60 insertions, 66 deletions
diff --git a/spec/frontend/milestones/milestone_combobox_spec.js b/spec/frontend/milestones/milestone_combobox_spec.js index 047484f117f..8c519abe382 100644 --- a/spec/frontend/milestones/milestone_combobox_spec.js +++ b/spec/frontend/milestones/milestone_combobox_spec.js @@ -1,9 +1,9 @@ +import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; -import { mount, createLocalVue } from '@vue/test-utils'; +import { mount } from '@vue/test-utils'; import axios from 'axios'; import MockAdapter from 'axios-mock-adapter'; import { GlLoadingIcon, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui'; -import { s__ } from '~/locale'; import { ENTER_KEY } from '~/lib/utils/keys'; import MilestoneCombobox from '~/milestones/components/milestone_combobox.vue'; import { projectMilestones, groupMilestones } from './mock_data'; @@ -14,8 +14,7 @@ const extraLinks = [ { text: 'Manage milestones', url: '/h5bp/html5-boilerplate/-/milestones' }, ]; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); describe('Milestone combobox component', () => { const projectId = '8'; @@ -29,26 +28,31 @@ describe('Milestone combobox component', () => { let searchApiCallSpy; const createComponent = (props = {}, attrs = {}) => { + const propsData = { + projectId, + groupId, + groupMilestonesAvailable, + extraLinks, + value: [], + ...props, + }; + wrapper = mount(MilestoneCombobox, { - propsData: { - projectId, - groupId, - groupMilestonesAvailable, - extraLinks, - value: [], - ...props, - }, + propsData, attrs, listeners: { // simulate a parent component v-model binding - input: selectedMilestone => { + input: (selectedMilestone) => { + // ugly hack because setProps plays bad with immediate watchers + // see https://github.com/vuejs/vue-test-utils/issues/1140 and + // https://github.com/vuejs/vue-test-utils/pull/1752 + propsData.value = selectedMilestone; wrapper.setProps({ value: selectedMilestone }); }, }, stubs: { GlSearchBoxByType: true, }, - localVue, store: createStore(), }); }; @@ -71,13 +75,13 @@ describe('Milestone combobox component', () => { mock .onGet(`/api/v4/projects/${projectId}/milestones`) - .reply(config => projectMilestonesApiCallSpy(config)); + .reply((config) => projectMilestonesApiCallSpy(config)); mock .onGet(`/api/v4/groups/${groupId}/milestones`) - .reply(config => groupMilestonesApiCallSpy(config)); + .reply((config) => groupMilestonesApiCallSpy(config)); - mock.onGet(`/api/v4/projects/${projectId}/search`).reply(config => searchApiCallSpy(config)); + mock.onGet(`/api/v4/projects/${projectId}/search`).reply((config) => searchApiCallSpy(config)); }); afterEach(() => { @@ -115,7 +119,7 @@ describe('Milestone combobox component', () => { return projectMilestoneSection .text() - .includes(s__('MilestoneCombobox|An error occurred while searching for milestones')); + .includes('An error occurred while searching for milestones'); }; const groupMilestoneSectionContainsErrorMessage = () => { @@ -123,13 +127,13 @@ describe('Milestone combobox component', () => { return groupMilestoneSection .text() - .includes(s__('MilestoneCombobox|An error occurred while searching for milestones')); + .includes('An error occurred while searching for milestones'); }; // // Convenience methods // - const updateQuery = newQuery => { + const updateQuery = (newQuery) => { findSearchBox().vm.$emit('input', newQuery); }; @@ -141,13 +145,13 @@ describe('Milestone combobox component', () => { findFirstGroupMilestonesDropdownItem().vm.$emit('click'); }; - const waitForRequests = ({ andClearMocks } = { andClearMocks: false }) => - axios.waitForAll().then(() => { - if (andClearMocks) { - projectMilestonesApiCallSpy.mockClear(); - groupMilestonesApiCallSpy.mockClear(); - } - }); + const waitForRequests = async ({ andClearMocks } = { andClearMocks: false }) => { + await axios.waitForAll(); + if (andClearMocks) { + projectMilestonesApiCallSpy.mockClear(); + groupMilestonesApiCallSpy.mockClear(); + } + }; describe('initialization behavior', () => { beforeEach(createComponent); @@ -250,7 +254,7 @@ describe('Milestone combobox component', () => { describe('when the search query is empty', () => { it('renders a "no results" message', () => { - expect(findNoResults().text()).toBe(s__('MilestoneCombobox|No matching results')); + expect(findNoResults().text()).toBe('No matching results'); }); }); }); @@ -333,23 +337,19 @@ describe('Milestone combobox component', () => { it('renders a checkmark by the selected item', async () => { selectFirstProjectMilestone(); - await localVue.nextTick(); + await nextTick(); expect( - findFirstProjectMilestonesDropdownItem() - .find('span') - .classes('selected-item'), - ).toBe(false); + findFirstProjectMilestonesDropdownItem().find('span').classes('selected-item'), + ).toBe(true); selectFirstProjectMilestone(); - await localVue.nextTick(); + await nextTick(); expect( - findFirstProjectMilestonesDropdownItem() - .find('span') - .classes('selected-item'), - ).toBe(true); + findFirstProjectMilestonesDropdownItem().find('span').classes('selected-item'), + ).toBe(false); }); describe('when a project milestones is selected', () => { @@ -364,22 +364,21 @@ describe('Milestone combobox component', () => { it("displays the project milestones name in the dropdown's button", async () => { selectFirstProjectMilestone(); - await localVue.nextTick(); + await nextTick(); - expect(findButtonContent().text()).toBe(s__('MilestoneCombobox|No milestone')); + expect(findButtonContent().text()).toBe('v1.0'); selectFirstProjectMilestone(); + await nextTick(); - await localVue.nextTick(); - expect(findButtonContent().text()).toBe('v1.0'); + expect(findButtonContent().text()).toBe('No milestone'); }); - it('updates the v-model binding with the project milestone title', () => { - expect(wrapper.vm.value).toEqual([]); - + it('updates the v-model binding with the project milestone title', async () => { selectFirstProjectMilestone(); + await nextTick(); - expect(wrapper.vm.value).toEqual(['v1.0']); + expect(wrapper.emitted().input[0][0]).toStrictEqual(['v1.0']); }); }); }); @@ -463,23 +462,19 @@ describe('Milestone combobox component', () => { it('renders a checkmark by the selected item', async () => { selectFirstGroupMilestone(); - await localVue.nextTick(); + await nextTick(); - expect( - findFirstGroupMilestonesDropdownItem() - .find('span') - .classes('selected-item'), - ).toBe(false); + expect(findFirstGroupMilestonesDropdownItem().find('span').classes('selected-item')).toBe( + true, + ); selectFirstGroupMilestone(); - await localVue.nextTick(); + await nextTick(); - expect( - findFirstGroupMilestonesDropdownItem() - .find('span') - .classes('selected-item'), - ).toBe(true); + expect(findFirstGroupMilestonesDropdownItem().find('span').classes('selected-item')).toBe( + false, + ); }); describe('when a group milestones is selected', () => { @@ -494,22 +489,21 @@ describe('Milestone combobox component', () => { it("displays the group milestones name in the dropdown's button", async () => { selectFirstGroupMilestone(); - await localVue.nextTick(); + await nextTick(); - expect(findButtonContent().text()).toBe(s__('MilestoneCombobox|No milestone')); + expect(findButtonContent().text()).toBe('group-v1.0'); selectFirstGroupMilestone(); + await nextTick(); - await localVue.nextTick(); - expect(findButtonContent().text()).toBe('group-v1.0'); + expect(findButtonContent().text()).toBe('No milestone'); }); - it('updates the v-model binding with the group milestone title', () => { - expect(wrapper.vm.value).toEqual([]); - + it('updates the v-model binding with the group milestone title', async () => { selectFirstGroupMilestone(); + await nextTick(); - expect(wrapper.vm.value).toEqual(['group-v1.0']); + expect(wrapper.emitted().input[0][0]).toStrictEqual(['group-v1.0']); }); }); }); |