diff options
Diffstat (limited to 'spec/frontend/issues/show/components')
20 files changed, 386 insertions, 660 deletions
diff --git a/spec/frontend/issues/show/components/app_spec.js b/spec/frontend/issues/show/components/app_spec.js index 9fa0ce6f93d..1006f54eeaf 100644 --- a/spec/frontend/issues/show/components/app_spec.js +++ b/spec/frontend/issues/show/components/app_spec.js @@ -1,11 +1,10 @@ import { GlIcon, GlIntersectionObserver } from '@gitlab/ui'; import MockAdapter from 'axios-mock-adapter'; -import { nextTick } from 'vue'; -import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; +import { setHTMLFixture } from 'helpers/fixtures'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import waitForPromises from 'helpers/wait_for_promises'; -import { createAlert } from '~/flash'; +import { createAlert } from '~/alert'; import { IssuableStatusText, STATUS_CLOSED, @@ -21,29 +20,27 @@ import FormComponent from '~/issues/show/components/form.vue'; import TitleComponent from '~/issues/show/components/title.vue'; import IncidentTabs from '~/issues/show/components/incidents/incident_tabs.vue'; import PinnedLinks from '~/issues/show/components/pinned_links.vue'; -import { POLLING_DELAY } from '~/issues/show/constants'; import eventHub from '~/issues/show/event_hub'; import axios from '~/lib/utils/axios_utils'; -import { HTTP_STATUS_OK } from '~/lib/utils/http_status'; +import { HTTP_STATUS_OK, HTTP_STATUS_UNAUTHORIZED } from '~/lib/utils/http_status'; import { visitUrl } from '~/lib/utils/url_utility'; import { appProps, initialRequest, publishedIncidentUrl, + putRequest, secondRequest, zoomMeetingUrl, } from '../mock_data/mock_data'; -jest.mock('~/flash'); -jest.mock('~/issues/show/event_hub'); +jest.mock('~/alert'); jest.mock('~/lib/utils/url_utility'); jest.mock('~/behaviors/markdown/render_gfm'); const REALTIME_REQUEST_STACK = [initialRequest, secondRequest]; describe('Issuable output', () => { - let mock; - let realtimeRequestCount = 0; + let axiosMock; let wrapper; const findStickyHeader = () => wrapper.findByTestId('issue-sticky-header'); @@ -57,15 +54,14 @@ describe('Issuable output', () => { const findForm = () => wrapper.findComponent(FormComponent); const findPinnedLinks = () => wrapper.findComponent(PinnedLinks); - const mountComponent = (props = {}, options = {}, data = {}) => { + const createComponent = ({ props = {}, options = {}, data = {} } = {}) => { wrapper = shallowMountExtended(IssuableApp, { directives: { - GlTooltip: createMockDirective(), + GlTooltip: createMockDirective('gl-tooltip'), }, propsData: { ...appProps, ...props }, provide: { fullPath: 'gitlab-org/incidents', - iid: '19', uploadMetricsFeatureAvailable: false, }, stubs: { @@ -79,6 +75,28 @@ describe('Issuable output', () => { }, ...options, }); + + jest.advanceTimersToNextTimer(2); + return waitForPromises(); + }; + + const emitHubEvent = (event) => { + eventHub.$emit(event); + return waitForPromises(); + }; + + const openForm = () => { + return emitHubEvent('open.form'); + }; + + const updateIssuable = () => { + return emitHubEvent('update.issuable'); + }; + + const advanceToNextPoll = () => { + // We get new data through the HTTP request. + jest.advanceTimersToNextTimer(); + return waitForPromises(); }; beforeEach(() => { @@ -98,79 +116,100 @@ describe('Issuable output', () => { </div> `); - mock = new MockAdapter(axios); - mock - .onGet('/gitlab-org/gitlab-shell/-/issues/9/realtime_changes/realtime_changes') - .reply(() => { - const res = Promise.resolve([HTTP_STATUS_OK, REALTIME_REQUEST_STACK[realtimeRequestCount]]); - realtimeRequestCount += 1; - return res; - }); + jest.spyOn(eventHub, '$emit'); - mountComponent(); + axiosMock = new MockAdapter(axios); + const endpoint = '/gitlab-org/gitlab-shell/-/issues/9/realtime_changes/realtime_changes'; - jest.advanceTimersByTime(2); + axiosMock.onGet(endpoint).replyOnce(HTTP_STATUS_OK, REALTIME_REQUEST_STACK[0], { + 'POLL-INTERVAL': '1', + }); + axiosMock.onGet(endpoint).reply(HTTP_STATUS_OK, REALTIME_REQUEST_STACK[1], { + 'POLL-INTERVAL': '-1', + }); + axiosMock.onPut().reply(HTTP_STATUS_OK, putRequest); }); - afterEach(() => { - mock.restore(); - realtimeRequestCount = 0; - wrapper.vm.poll.stop(); - wrapper.destroy(); - resetHTMLFixture(); - }); + describe('update', () => { + beforeEach(async () => { + await createComponent(); + }); - it('should render a title/description/edited and update title/description/edited on update', () => { - return axios - .waitForAll() - .then(() => { - expect(findTitle().props('titleText')).toContain('this is a title'); - expect(findDescription().props('descriptionText')).toContain('this is a description'); - - expect(findEdited().exists()).toBe(true); - expect(findEdited().props('updatedByPath')).toMatch(/\/some_user$/); - expect(findEdited().props('updatedAt')).toBe(initialRequest.updated_at); - expect(wrapper.vm.state.lock_version).toBe(initialRequest.lock_version); - }) - .then(() => { - wrapper.vm.poll.makeRequest(); - return axios.waitForAll(); - }) - .then(() => { - expect(findTitle().props('titleText')).toContain('2'); - expect(findDescription().props('descriptionText')).toContain('42'); - - expect(findEdited().exists()).toBe(true); - expect(findEdited().props('updatedByName')).toBe('Other User'); - expect(findEdited().props('updatedByPath')).toMatch(/\/other_user$/); - expect(findEdited().props('updatedAt')).toBe(secondRequest.updated_at); - }); - }); + it('should render a title/description/edited and update title/description/edited on update', async () => { + expect(findTitle().props('titleText')).toContain(initialRequest.title_text); + expect(findDescription().props('descriptionText')).toContain('this is a description'); - it('shows actions if permissions are correct', async () => { - wrapper.vm.showForm = true; + expect(findEdited().exists()).toBe(true); + expect(findEdited().props('updatedByPath')).toMatch(/\/some_user$/); + expect(findEdited().props('updatedAt')).toBe(initialRequest.updated_at); + expect(findDescription().props().lockVersion).toBe(initialRequest.lock_version); - await nextTick(); - expect(findForm().exists()).toBe(true); - }); + await advanceToNextPoll(); - it('does not show actions if permissions are incorrect', async () => { - wrapper.vm.showForm = true; - wrapper.setProps({ canUpdate: false }); + expect(findTitle().props('titleText')).toContain('2'); + expect(findDescription().props('descriptionText')).toContain('42'); - await nextTick(); - expect(findForm().exists()).toBe(false); + expect(findEdited().exists()).toBe(true); + expect(findEdited().props('updatedByName')).toBe('Other User'); + expect(findEdited().props('updatedByPath')).toMatch(/\/other_user$/); + expect(findEdited().props('updatedAt')).toBe(secondRequest.updated_at); + }); }); - it('does not update formState if form is already open', async () => { - wrapper.vm.updateAndShowForm(); + describe('with permissions', () => { + beforeEach(async () => { + await createComponent(); + }); - wrapper.vm.state.titleText = 'testing 123'; + it('shows actions on `open.form` event', async () => { + expect(findForm().exists()).toBe(false); - wrapper.vm.updateAndShowForm(); + await openForm(); - await nextTick(); - expect(wrapper.vm.store.formState.title).not.toBe('testing 123'); + expect(findForm().exists()).toBe(true); + }); + + it('update formState if form is not open', async () => { + const titleValue = initialRequest.title_text; + + expect(findTitle().exists()).toBe(true); + expect(findTitle().props('titleText')).toBe(titleValue); + + await advanceToNextPoll(); + + // The title component has the new data, so the state was updated + expect(findTitle().exists()).toBe(true); + expect(findTitle().props('titleText')).toBe(secondRequest.title_text); + }); + + it('does not update formState if form is already open', async () => { + const titleValue = initialRequest.title_text; + + expect(findTitle().exists()).toBe(true); + expect(findTitle().props('titleText')).toBe(titleValue); + + await openForm(); + + // Opening the form, the data has not changed + expect(findForm().props().formState.title).toBe(titleValue); + + await advanceToNextPoll(); + + // We expect the prop value not to have changed after another API call + expect(findForm().props().formState.title).toBe(titleValue); + }); + }); + + describe('without permissions', () => { + beforeEach(async () => { + await createComponent({ props: { canUpdate: false } }); + }); + + it('does not show actions if permissions are incorrect', async () => { + await openForm(); + + expect(findForm().exists()).toBe(false); + }); }); describe('Pinned links propagated', () => { @@ -178,288 +217,130 @@ describe('Issuable output', () => { prop | value ${'zoomMeetingUrl'} | ${zoomMeetingUrl} ${'publishedIncidentUrl'} | ${publishedIncidentUrl} - `('sets the $prop correctly on underlying pinned links', ({ prop, value }) => { + `('sets the $prop correctly on underlying pinned links', async ({ prop, value }) => { + await createComponent(); + expect(findPinnedLinks().props(prop)).toBe(value); }); }); - describe('updateIssuable', () => { + describe('updating an issue', () => { + beforeEach(async () => { + await createComponent(); + }); + it('fetches new data after update', async () => { - const updateStoreSpy = jest.spyOn(wrapper.vm, 'updateStoreState'); - const getDataSpy = jest.spyOn(wrapper.vm.service, 'getData'); - jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({ - data: { web_url: window.location.pathname }, - }); + await advanceToNextPoll(); - await wrapper.vm.updateIssuable(); - expect(updateStoreSpy).toHaveBeenCalled(); - expect(getDataSpy).toHaveBeenCalled(); + await updateIssuable(); + + expect(axiosMock.history.put).toHaveLength(1); + // The call was made with the new data + expect(axiosMock.history.put[0].data.title).toEqual(findTitle().props().title); }); - it('correctly updates issuable data', async () => { - const spy = jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({ - data: { web_url: window.location.pathname }, - }); + it('closes the form after fetching data', async () => { + await updateIssuable(); - await wrapper.vm.updateIssuable(); - expect(spy).toHaveBeenCalledWith(wrapper.vm.formState); expect(eventHub.$emit).toHaveBeenCalledWith('close.form'); }); it('does not redirect if issue has not moved', async () => { - jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({ - data: { - web_url: window.location.pathname, - confidential: wrapper.vm.isConfidential, - }, + axiosMock.onPut().reply(HTTP_STATUS_OK, { + ...putRequest, + confidential: appProps.isConfidential, }); - await wrapper.vm.updateIssuable(); + await updateIssuable(); + expect(visitUrl).not.toHaveBeenCalled(); }); it('does not redirect if issue has not moved and user has switched tabs', async () => { - jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({ - data: { - web_url: '', - confidential: wrapper.vm.isConfidential, - }, + axiosMock.onPut().reply(HTTP_STATUS_OK, { + ...putRequest, + web_url: '', + confidential: appProps.isConfidential, }); - await wrapper.vm.updateIssuable(); + await updateIssuable(); + expect(visitUrl).not.toHaveBeenCalled(); }); it('redirects if returned web_url has changed', async () => { - jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({ - data: { - web_url: '/testing-issue-move', - confidential: wrapper.vm.isConfidential, - }, - }); - - wrapper.vm.updateIssuable(); - - await wrapper.vm.updateIssuable(); - expect(visitUrl).toHaveBeenCalledWith('/testing-issue-move'); - }); - - describe('shows dialog when issue has unsaved changed', () => { - it('confirms on title change', async () => { - wrapper.vm.showForm = true; - wrapper.vm.state.titleText = 'title has changed'; - const e = { returnValue: null }; - wrapper.vm.handleBeforeUnloadEvent(e); - - await nextTick(); - expect(e.returnValue).not.toBeNull(); - }); - - it('confirms on description change', async () => { - wrapper.vm.showForm = true; - wrapper.vm.state.descriptionText = 'description has changed'; - const e = { returnValue: null }; - wrapper.vm.handleBeforeUnloadEvent(e); + const webUrl = '/testing-issue-move'; - await nextTick(); - expect(e.returnValue).not.toBeNull(); + axiosMock.onPut().reply(HTTP_STATUS_OK, { + ...putRequest, + web_url: webUrl, + confidential: appProps.isConfidential, }); - it('does nothing when nothing has changed', async () => { - const e = { returnValue: null }; - wrapper.vm.handleBeforeUnloadEvent(e); + await updateIssuable(); - await nextTick(); - expect(e.returnValue).toBeNull(); - }); + expect(visitUrl).toHaveBeenCalledWith(webUrl); }); describe('error when updating', () => { - it('closes form on error', async () => { - jest.spyOn(wrapper.vm.service, 'updateIssuable').mockRejectedValue(); + it('closes form', async () => { + axiosMock.onPut().reply(HTTP_STATUS_UNAUTHORIZED); - await wrapper.vm.updateIssuable(); - expect(eventHub.$emit).not.toHaveBeenCalledWith('close.form'); - expect(createAlert).toHaveBeenCalledWith({ message: `Error updating issue` }); - }); + await updateIssuable(); - it('returns the correct error message for issuableType', async () => { - jest.spyOn(wrapper.vm.service, 'updateIssuable').mockRejectedValue(); - wrapper.setProps({ issuableType: 'merge request' }); - - await nextTick(); - await wrapper.vm.updateIssuable(); expect(eventHub.$emit).not.toHaveBeenCalledWith('close.form'); - expect(createAlert).toHaveBeenCalledWith({ message: `Error updating merge request` }); - }); - - it('shows error message from backend if exists', async () => { - const msg = 'Custom error message from backend'; - jest - .spyOn(wrapper.vm.service, 'updateIssuable') - .mockRejectedValue({ response: { data: { errors: [msg] } } }); - - await wrapper.vm.updateIssuable(); expect(createAlert).toHaveBeenCalledWith({ - message: `${wrapper.vm.defaultErrorMessage}. ${msg}`, + message: `Error updating issue. Request failed with status code 401`, }); }); - }); - }); - - describe('updateAndShowForm', () => { - it('shows locked warning if form is open & data is different', async () => { - await nextTick(); - wrapper.vm.updateAndShowForm(); - - wrapper.vm.poll.makeRequest(); - await new Promise((resolve) => { - wrapper.vm.$watch('formState.lockedWarningVisible', (value) => { - if (value) { - resolve(); - } - }); - }); - - expect(wrapper.vm.formState.lockedWarningVisible).toBe(true); - expect(wrapper.vm.formState.lock_version).toBe(1); - }); - }); - - describe('requestTemplatesAndShowForm', () => { - let formSpy; - - beforeEach(() => { - formSpy = jest.spyOn(wrapper.vm, 'updateAndShowForm'); - }); - - it('shows the form if template names as hash request is successful', () => { - const mockData = { - test: [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }], - }; - mock - .onGet('/issuable-templates-path') - .reply(() => Promise.resolve([HTTP_STATUS_OK, mockData])); - - return wrapper.vm.requestTemplatesAndShowForm().then(() => { - expect(formSpy).toHaveBeenCalledWith(mockData); - }); - }); + it('returns the correct error message for issuableType', async () => { + axiosMock.onPut().reply(HTTP_STATUS_UNAUTHORIZED); - it('shows the form if template names as array request is successful', () => { - const mockData = [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }]; - mock - .onGet('/issuable-templates-path') - .reply(() => Promise.resolve([HTTP_STATUS_OK, mockData])); + await updateIssuable(); - return wrapper.vm.requestTemplatesAndShowForm().then(() => { - expect(formSpy).toHaveBeenCalledWith(mockData); - }); - }); - - it('shows the form if template names request failed', () => { - mock - .onGet('/issuable-templates-path') - .reply(() => Promise.reject(new Error('something went wrong'))); + wrapper.setProps({ issuableType: 'merge request' }); - return wrapper.vm.requestTemplatesAndShowForm().then(() => { - expect(createAlert).toHaveBeenCalledWith({ message: 'Error updating issue' }); + await updateIssuable(); - expect(formSpy).toHaveBeenCalledWith(); + expect(eventHub.$emit).not.toHaveBeenCalledWith('close.form'); + expect(createAlert).toHaveBeenCalledWith({ + message: `Error updating merge request. Request failed with status code 401`, + }); }); - }); - }); - - describe('show inline edit button', () => { - it('should render by default', () => { - expect(findTitle().props('showInlineEditButton')).toBe(true); - }); - - it('should render if showInlineEditButton', async () => { - wrapper.setProps({ showInlineEditButton: true }); - - await nextTick(); - expect(findTitle().props('showInlineEditButton')).toBe(true); - }); - it('should not render if showInlineEditButton is false', async () => { - wrapper.setProps({ showInlineEditButton: false }); - - await nextTick(); - expect(findTitle().props('showInlineEditButton')).toBe(false); - }); - }); - - describe('updateStoreState', () => { - it('should make a request and update the state of the store', () => { - const data = { foo: 1 }; - const getDataSpy = jest.spyOn(wrapper.vm.service, 'getData').mockResolvedValue({ data }); - const updateStateSpy = jest - .spyOn(wrapper.vm.store, 'updateState') - .mockImplementation(jest.fn); - - return wrapper.vm.updateStoreState().then(() => { - expect(getDataSpy).toHaveBeenCalled(); - expect(updateStateSpy).toHaveBeenCalledWith(data); - }); - }); + it('shows error message from backend if exists', async () => { + const msg = 'Custom error message from backend'; + axiosMock.onPut().reply(HTTP_STATUS_UNAUTHORIZED, { errors: [msg] }); - it('should show error message if store update fails', () => { - jest.spyOn(wrapper.vm.service, 'getData').mockRejectedValue(); - wrapper.setProps({ issuableType: 'merge request' }); + await updateIssuable(); - return wrapper.vm.updateStoreState().then(() => { expect(createAlert).toHaveBeenCalledWith({ - message: `Error updating ${wrapper.vm.issuableType}`, + message: `Error updating issue. ${msg}`, }); }); }); }); - describe('issueChanged', () => { - beforeEach(() => { - wrapper.vm.store.formState.title = ''; - wrapper.vm.store.formState.description = ''; - wrapper.setProps({ - initialDescriptionText: '', - initialTitleText: '', - }); - }); - - it('returns true when title is changed', () => { - wrapper.vm.store.formState.title = 'RandomText'; - - expect(wrapper.vm.issueChanged).toBe(true); - }); - - it('returns false when title is empty null', () => { - wrapper.vm.store.formState.title = null; - - expect(wrapper.vm.issueChanged).toBe(false); - }); - - it('returns true when description is changed', () => { - wrapper.vm.store.formState.description = 'RandomText'; - - expect(wrapper.vm.issueChanged).toBe(true); + describe('Locked warning', () => { + beforeEach(async () => { + await createComponent(); }); - it('returns false when description is empty null', () => { - wrapper.vm.store.formState.description = null; - - expect(wrapper.vm.issueChanged).toBe(false); - }); - - it('returns false when `initialDescriptionText` is null and `formState.description` is empty string', () => { - wrapper.vm.store.formState.description = ''; - wrapper.setProps({ initialDescriptionText: null }); + it('shows locked warning if form is open & data is different', async () => { + await openForm(); + await advanceToNextPoll(); - expect(wrapper.vm.issueChanged).toBe(false); + expect(findForm().props().formState.lockedWarningVisible).toBe(true); + expect(findForm().props().formState.lock_version).toBe(1); }); }); describe('sticky header', () => { + beforeEach(async () => { + await createComponent(); + }); + describe('when title is in view', () => { it('is not shown', () => { expect(findStickyHeader().exists()).toBe(false); @@ -467,21 +348,18 @@ describe('Issuable output', () => { }); describe('when title is not in view', () => { - beforeEach(() => { - wrapper.vm.state.titleText = 'Sticky header title'; + beforeEach(async () => { wrapper.findComponent(GlIntersectionObserver).vm.$emit('disappear'); }); it('shows with title', () => { - expect(findStickyHeader().text()).toContain('Sticky header title'); + expect(findStickyHeader().text()).toContain(initialRequest.title_text); }); it('shows with title for an epic', async () => { - wrapper.setProps({ issuableType: 'epic' }); - - await nextTick(); + await wrapper.setProps({ issuableType: 'epic' }); - expect(findStickyHeader().text()).toContain('Sticky header title'); + expect(findStickyHeader().text()).toContain(' this is a title'); }); it.each` @@ -493,9 +371,7 @@ describe('Issuable output', () => { `( 'shows with state icon "$statusIcon" for $issuableType when status is $issuableStatus', async ({ issuableType, issuableStatus, statusIcon }) => { - wrapper.setProps({ issuableType, issuableStatus }); - - await nextTick(); + await wrapper.setProps({ issuableType, issuableStatus }); expect(findStickyHeader().findComponent(GlIcon).props('name')).toBe(statusIcon); }, @@ -507,9 +383,7 @@ describe('Issuable output', () => { ${'shows with Closed when status is closed'} | ${STATUS_CLOSED} ${'shows with Open when status is reopened'} | ${STATUS_REOPENED} `('$title', async ({ state }) => { - wrapper.setProps({ issuableStatus: state }); - - await nextTick(); + await wrapper.setProps({ issuableStatus: state }); expect(findStickyHeader().text()).toContain(IssuableStatusText[state]); }); @@ -519,9 +393,7 @@ describe('Issuable output', () => { ${'does not show confidential badge when issue is not confidential'} | ${false} ${'shows confidential badge when issue is confidential'} | ${true} `('$title', async ({ isConfidential }) => { - wrapper.setProps({ isConfidential }); - - await nextTick(); + await wrapper.setProps({ isConfidential }); const confidentialEl = findConfidentialBadge(); expect(confidentialEl.exists()).toBe(isConfidential); @@ -538,9 +410,7 @@ describe('Issuable output', () => { ${'does not show locked badge when issue is not locked'} | ${false} ${'shows locked badge when issue is locked'} | ${true} `('$title', async ({ isLocked }) => { - wrapper.setProps({ isLocked }); - - await nextTick(); + await wrapper.setProps({ isLocked }); expect(findLockedBadge().exists()).toBe(isLocked); }); @@ -550,9 +420,7 @@ describe('Issuable output', () => { ${'does not show hidden badge when issue is not hidden'} | ${false} ${'shows hidden badge when issue is hidden'} | ${true} `('$title', async ({ isHidden }) => { - wrapper.setProps({ isHidden }); - - await nextTick(); + await wrapper.setProps({ isHidden }); const hiddenBadge = findHiddenBadge(); @@ -569,6 +437,10 @@ describe('Issuable output', () => { }); describe('Composable description component', () => { + beforeEach(async () => { + await createComponent(); + }); + const findIncidentTabs = () => wrapper.findComponent(IncidentTabs); const borderClass = 'gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-mb-6'; @@ -587,13 +459,13 @@ describe('Issuable output', () => { }); describe('when using incident tabs description wrapper', () => { - beforeEach(() => { - mountComponent( - { + beforeEach(async () => { + await createComponent({ + props: { descriptionComponent: IncidentTabs, showTitleBorder: false, }, - { + options: { mocks: { $apollo: { queries: { @@ -604,7 +476,7 @@ describe('Issuable output', () => { }, }, }, - ); + }); }); it('does not the description component', () => { @@ -622,48 +494,77 @@ describe('Issuable output', () => { }); describe('taskListUpdateStarted', () => { - it('stops polling', () => { - jest.spyOn(wrapper.vm.poll, 'stop'); + beforeEach(async () => { + await createComponent(); + }); + + it('stops polling', async () => { + expect(findTitle().props().titleText).toBe(initialRequest.title_text); + + findDescription().vm.$emit('taskListUpdateStarted'); - wrapper.vm.taskListUpdateStarted(); + await advanceToNextPoll(); - expect(wrapper.vm.poll.stop).toHaveBeenCalled(); + expect(findTitle().props().titleText).toBe(initialRequest.title_text); }); }); describe('taskListUpdateSucceeded', () => { - it('enables polling', () => { - jest.spyOn(wrapper.vm.poll, 'enable'); - jest.spyOn(wrapper.vm.poll, 'makeDelayedRequest'); + beforeEach(async () => { + await createComponent(); + findDescription().vm.$emit('taskListUpdateStarted'); + }); + + it('enables polling', async () => { + // Ensure that polling is not working before + expect(findTitle().props().titleText).toBe(initialRequest.title_text); + await advanceToNextPoll(); + + expect(findTitle().props().titleText).toBe(initialRequest.title_text); - wrapper.vm.taskListUpdateSucceeded(); + // Enable Polling an move forward + findDescription().vm.$emit('taskListUpdateSucceeded'); + await advanceToNextPoll(); - expect(wrapper.vm.poll.enable).toHaveBeenCalled(); - expect(wrapper.vm.poll.makeDelayedRequest).toHaveBeenCalledWith(POLLING_DELAY); + // Title has changed: polling works! + expect(findTitle().props().titleText).toBe(secondRequest.title_text); }); }); describe('taskListUpdateFailed', () => { - it('enables polling and calls updateStoreState', () => { - jest.spyOn(wrapper.vm.poll, 'enable'); - jest.spyOn(wrapper.vm.poll, 'makeDelayedRequest'); - jest.spyOn(wrapper.vm, 'updateStoreState'); + beforeEach(async () => { + await createComponent(); + findDescription().vm.$emit('taskListUpdateStarted'); + }); + + it('enables polling and calls updateStoreState', async () => { + // Ensure that polling is not working before + expect(findTitle().props().titleText).toBe(initialRequest.title_text); + await advanceToNextPoll(); - wrapper.vm.taskListUpdateFailed(); + expect(findTitle().props().titleText).toBe(initialRequest.title_text); - expect(wrapper.vm.poll.enable).toHaveBeenCalled(); - expect(wrapper.vm.poll.makeDelayedRequest).toHaveBeenCalledWith(POLLING_DELAY); - expect(wrapper.vm.updateStoreState).toHaveBeenCalled(); + // Enable Polling an move forward + findDescription().vm.$emit('taskListUpdateFailed'); + await advanceToNextPoll(); + + // Title has changed: polling works! + expect(findTitle().props().titleText).toBe(secondRequest.title_text); }); }); describe('saveDescription event', () => { + beforeEach(async () => { + await createComponent(); + }); + it('makes request to update issue', async () => { const description = 'I have been updated!'; findDescription().vm.$emit('saveDescription', description); + await waitForPromises(); - expect(mock.history.put[0].data).toContain(description); + expect(axiosMock.history.put[0].data).toContain(description); }); }); }); diff --git a/spec/frontend/issues/show/components/delete_issue_modal_spec.js b/spec/frontend/issues/show/components/delete_issue_modal_spec.js index 97a091a1748..b8adeb24005 100644 --- a/spec/frontend/issues/show/components/delete_issue_modal_spec.js +++ b/spec/frontend/issues/show/components/delete_issue_modal_spec.js @@ -20,10 +20,6 @@ describe('DeleteIssueModal component', () => { const mountComponent = (props = {}) => shallowMount(DeleteIssueModal, { propsData: { ...defaultProps, ...props } }); - afterEach(() => { - wrapper.destroy(); - }); - describe('modal', () => { it('renders', () => { wrapper = mountComponent(); diff --git a/spec/frontend/issues/show/components/description_spec.js b/spec/frontend/issues/show/components/description_spec.js index da51372dd3d..740b2f782e4 100644 --- a/spec/frontend/issues/show/components/description_spec.js +++ b/spec/frontend/issues/show/components/description_spec.js @@ -1,25 +1,19 @@ import $ from 'jquery'; import Vue, { nextTick } from 'vue'; import VueApollo from 'vue-apollo'; -import { GlModal } from '@gitlab/ui'; import getIssueDetailsQuery from 'ee_else_ce/work_items/graphql/get_issue_details.query.graphql'; import setWindowLocation from 'helpers/set_window_location_helper'; -import { stubComponent } from 'helpers/stub_component'; import { TEST_HOST } from 'helpers/test_constants'; -import { mockTracking } from 'helpers/tracking_helper'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; -import { createAlert } from '~/flash'; +import { createAlert } from '~/alert'; import Description from '~/issues/show/components/description.vue'; import eventHub from '~/issues/show/event_hub'; -import { updateHistory } from '~/lib/utils/url_utility'; import workItemQuery from '~/work_items/graphql/work_item.query.graphql'; import createWorkItemMutation from '~/work_items/graphql/create_work_item.mutation.graphql'; import workItemTypesQuery from '~/work_items/graphql/project_work_item_types.query.graphql'; import TaskList from '~/task_list'; -import WorkItemDetailModal from '~/work_items/components/work_item_detail_modal.vue'; -import { TRACKING_CATEGORY_SHOW } from '~/work_items/constants'; import { renderGFM } from '~/behaviors/markdown/render_gfm'; import { createWorkItemMutationErrorResponse, @@ -27,14 +21,9 @@ import { getIssueDetailsResponse, projectWorkItemTypesQueryResponse, } from 'jest/work_items/mock_data'; -import { - descriptionProps as initialProps, - descriptionHtmlWithList, - descriptionHtmlWithCheckboxes, - descriptionHtmlWithTask, -} from '../mock_data/mock_data'; +import { descriptionProps as initialProps, descriptionHtmlWithList } from '../mock_data/mock_data'; -jest.mock('~/flash'); +jest.mock('~/alert'); jest.mock('~/lib/utils/url_utility', () => ({ ...jest.requireActual('~/lib/utils/url_utility'), updateHistory: jest.fn(), @@ -43,9 +32,6 @@ jest.mock('~/task_list'); jest.mock('~/behaviors/markdown/render_gfm'); const mockSpriteIcons = '/icons.svg'; -const showModal = jest.fn(); -const hideModal = jest.fn(); -const showDetailsModal = jest.fn(); const $toast = { show: jest.fn(), }; @@ -62,7 +48,6 @@ const workItemTypesQueryHandler = jest.fn().mockResolvedValue(projectWorkItemTyp describe('Description component', () => { let wrapper; - let originalGon; Vue.use(VueApollo); @@ -70,21 +55,16 @@ describe('Description component', () => { const findTextarea = () => wrapper.find('[data-testid="textarea"]'); const findListItems = () => findGfmContent().findAll('ul > li'); const findTaskActionButtons = () => wrapper.findAll('.task-list-item-actions'); - const findTaskLink = () => wrapper.find('a.gfm-issue'); - const findModal = () => wrapper.findComponent(GlModal); - const findWorkItemDetailModal = () => wrapper.findComponent(WorkItemDetailModal); function createComponent({ props = {}, provide, issueDetailsQueryHandler = jest.fn().mockResolvedValue(issueDetailsResponse), createWorkItemMutationHandler, - ...options } = {}) { wrapper = shallowMountExtended(Description, { propsData: { issueId: 1, - issueIid: 1, ...initialProps, ...props, }, @@ -102,25 +82,10 @@ describe('Description component', () => { mocks: { $toast, }, - stubs: { - GlModal: stubComponent(GlModal, { - methods: { - show: showModal, - hide: hideModal, - }, - }), - WorkItemDetailModal: stubComponent(WorkItemDetailModal, { - methods: { - show: showDetailsModal, - }, - }), - }, - ...options, }); } beforeEach(() => { - originalGon = window.gon; window.gon = { sprite_icons: mockSpriteIcons }; setWindowLocation(TEST_HOST); @@ -136,8 +101,6 @@ describe('Description component', () => { }); afterAll(() => { - window.gon = originalGon; - $('.issuable-meta .flash-container').remove(); }); @@ -285,7 +248,6 @@ describe('Description component', () => { props: { descriptionHtml: descriptionHtmlWithList, }, - attachTo: document.body, }); await nextTick(); }); @@ -325,33 +287,6 @@ describe('Description component', () => { }); }); - describe('description with checkboxes', () => { - beforeEach(() => { - createComponent({ - props: { - descriptionHtml: descriptionHtmlWithCheckboxes, - }, - }); - return nextTick(); - }); - - it('renders a list of hidden buttons corresponding to checkboxes in description HTML', () => { - expect(findTaskActionButtons()).toHaveLength(3); - }); - - it('does not show a modal by default', () => { - expect(findModal().exists()).toBe(false); - }); - - it('shows toast after delete success', async () => { - const newDesc = 'description'; - findWorkItemDetailModal().vm.$emit('workItemDeleted', newDesc); - - expect(wrapper.emitted('updateDescription')).toEqual([[newDesc]]); - expect($toast.show).toHaveBeenCalledWith('Task deleted'); - }); - }); - describe('task list item actions', () => { describe('converting the task list item to a task', () => { describe('when successful', () => { @@ -391,11 +326,7 @@ describe('Description component', () => { }); it('calls a mutation to create a task', () => { - const { - confidential, - iteration, - milestone, - } = issueDetailsResponse.data.workspace.issuable; + const { confidential, iteration, milestone } = issueDetailsResponse.data.issue; expect(createWorkItemMutationHandler).toHaveBeenCalledWith({ input: { confidential, @@ -468,109 +399,4 @@ describe('Description component', () => { }); }); }); - - describe('work items detail', () => { - describe('when opening and closing', () => { - beforeEach(() => { - createComponent({ - props: { - descriptionHtml: descriptionHtmlWithTask, - }, - }); - return nextTick(); - }); - - it('opens when task button is clicked', async () => { - await findTaskLink().trigger('click'); - - expect(showDetailsModal).toHaveBeenCalled(); - expect(updateHistory).toHaveBeenCalledWith({ - url: `${TEST_HOST}/?work_item_id=2`, - replace: true, - }); - }); - - it('closes from an open state', async () => { - await findTaskLink().trigger('click'); - - findWorkItemDetailModal().vm.$emit('close'); - await nextTick(); - - expect(updateHistory).toHaveBeenLastCalledWith({ - url: `${TEST_HOST}/`, - replace: true, - }); - }); - - it('tracks when opened', async () => { - const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn); - - await findTaskLink().trigger('click'); - - expect(trackingSpy).toHaveBeenCalledWith( - TRACKING_CATEGORY_SHOW, - 'viewed_work_item_from_modal', - { - category: TRACKING_CATEGORY_SHOW, - label: 'work_item_view', - property: 'type_task', - }, - ); - }); - }); - - describe('when url query `work_item_id` exists', () => { - it.each` - behavior | workItemId | modalOpened - ${'opens'} | ${'2'} | ${1} - ${'does not open'} | ${'123'} | ${0} - ${'does not open'} | ${'123e'} | ${0} - ${'does not open'} | ${'12e3'} | ${0} - ${'does not open'} | ${'1e23'} | ${0} - ${'does not open'} | ${'x'} | ${0} - ${'does not open'} | ${'undefined'} | ${0} - `( - '$behavior when url contains `work_item_id=$workItemId`', - async ({ workItemId, modalOpened }) => { - setWindowLocation(`?work_item_id=${workItemId}`); - - createComponent({ - props: { descriptionHtml: descriptionHtmlWithTask }, - }); - - expect(showDetailsModal).toHaveBeenCalledTimes(modalOpened); - }, - ); - }); - }); - - describe('when hovering task links', () => { - beforeEach(() => { - createComponent({ - props: { - descriptionHtml: descriptionHtmlWithTask, - }, - }); - return nextTick(); - }); - - it('prefetches work item detail after work item link is hovered for 150ms', async () => { - await findTaskLink().trigger('mouseover'); - jest.advanceTimersByTime(150); - await waitForPromises(); - - expect(queryHandler).toHaveBeenCalledWith({ - id: 'gid://gitlab/WorkItem/2', - }); - }); - - it('does not work item detail after work item link is hovered for less than 150ms', async () => { - await findTaskLink().trigger('mouseover'); - await findTaskLink().trigger('mouseout'); - jest.advanceTimersByTime(150); - await waitForPromises(); - - expect(queryHandler).not.toHaveBeenCalled(); - }); - }); }); diff --git a/spec/frontend/issues/show/components/edit_actions_spec.js b/spec/frontend/issues/show/components/edit_actions_spec.js index 11c43ea4388..ca561149806 100644 --- a/spec/frontend/issues/show/components/edit_actions_spec.js +++ b/spec/frontend/issues/show/components/edit_actions_spec.js @@ -56,10 +56,6 @@ describe('Edit Actions component', () => { createComponent(); }); - afterEach(() => { - wrapper.destroy(); - }); - it('renders all buttons as enabled', () => { const buttons = findEditButtons().wrappers; buttons.forEach((button) => { diff --git a/spec/frontend/issues/show/components/edited_spec.js b/spec/frontend/issues/show/components/edited_spec.js index aa6e0a9dceb..a509627c347 100644 --- a/spec/frontend/issues/show/components/edited_spec.js +++ b/spec/frontend/issues/show/components/edited_spec.js @@ -15,10 +15,6 @@ describe('Edited component', () => { const mountComponent = (propsData) => mount(Edited, { propsData }); const updatedAt = '2017-05-15T12:31:04.428Z'; - afterEach(() => { - wrapper.destroy(); - }); - it('renders an edited at+by string', () => { wrapper = mountComponent({ updatedAt, diff --git a/spec/frontend/issues/show/components/fields/description_spec.js b/spec/frontend/issues/show/components/fields/description_spec.js index 273ddfdd5d4..5c145ed4707 100644 --- a/spec/frontend/issues/show/components/fields/description_spec.js +++ b/spec/frontend/issues/show/components/fields/description_spec.js @@ -33,11 +33,6 @@ describe('Description field component', () => { jest.spyOn(eventHub, '$emit'); }); - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - it('renders markdown field with description', () => { wrapper = mountComponent(); @@ -80,17 +75,18 @@ describe('Description field component', () => { }); it('uses the MarkdownEditor component to edit markdown', () => { - expect(findMarkdownEditor().props()).toEqual( - expect.objectContaining({ - value: 'test', - renderMarkdownPath: '/', - markdownDocsPath: '/', - quickActionsDocsPath: expect.any(String), - autofocus: true, - supportsQuickActions: true, - enableAutocomplete: true, - }), - ); + expect(findMarkdownEditor().props()).toMatchObject({ + value: 'test', + renderMarkdownPath: '/', + autofocus: true, + supportsQuickActions: true, + quickActionsDocsPath: expect.any(String), + }); + + expect(findMarkdownEditor().vm.$attrs).toMatchObject({ + 'enable-autocomplete': true, + 'markdown-docs-path': '/', + }); }); it('triggers update with meta+enter', () => { diff --git a/spec/frontend/issues/show/components/fields/description_template_spec.js b/spec/frontend/issues/show/components/fields/description_template_spec.js index 79a3bfa9840..1e8d5e2dd95 100644 --- a/spec/frontend/issues/show/components/fields/description_template_spec.js +++ b/spec/frontend/issues/show/components/fields/description_template_spec.js @@ -22,10 +22,6 @@ describe('Issue description template component with templates as hash', () => { wrapper = shallowMount(descriptionTemplate, options); }; - afterEach(() => { - wrapper.destroy(); - }); - it('renders templates as JSON hash in data attribute', () => { createComponent(); expect(findIssuableSelector().attributes('data-data')).toBe( diff --git a/spec/frontend/issues/show/components/fields/title_spec.js b/spec/frontend/issues/show/components/fields/title_spec.js index a5fa96d8d64..b28762f1520 100644 --- a/spec/frontend/issues/show/components/fields/title_spec.js +++ b/spec/frontend/issues/show/components/fields/title_spec.js @@ -17,11 +17,6 @@ describe('Title field component', () => { }); }); - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - it('renders form control with formState title', () => { expect(findInput().element.value).toBe('test'); }); diff --git a/spec/frontend/issues/show/components/fields/type_spec.js b/spec/frontend/issues/show/components/fields/type_spec.js index 27ac0e1baf3..e655cf3b37d 100644 --- a/spec/frontend/issues/show/components/fields/type_spec.js +++ b/spec/frontend/issues/show/components/fields/type_spec.js @@ -1,4 +1,4 @@ -import { GlFormGroup, GlListbox, GlIcon } from '@gitlab/ui'; +import { GlFormGroup, GlCollapsibleListbox, GlIcon } from '@gitlab/ui'; import { mount, shallowMount } from '@vue/test-utils'; import Vue, { nextTick } from 'vue'; import VueApollo from 'vue-apollo'; @@ -32,7 +32,7 @@ describe('Issue type field component', () => { }, }; - const findListBox = () => wrapper.findComponent(GlListbox); + const findListBox = () => wrapper.findComponent(GlCollapsibleListbox); const findFormGroup = () => wrapper.findComponent(GlFormGroup); const findAllIssueItems = () => wrapper.findAll('[data-testid="issue-type-list-item"]'); const findIssueItemAt = (at) => findAllIssueItems().at(at); @@ -60,10 +60,6 @@ describe('Issue type field component', () => { mockIssueStateData = jest.fn(); }); - afterEach(() => { - wrapper.destroy(); - }); - it.each` at | text | icon ${0} | ${issuableTypes[0].text} | ${issuableTypes[0].icon} diff --git a/spec/frontend/issues/show/components/form_spec.js b/spec/frontend/issues/show/components/form_spec.js index aedb974cbd0..b8ed33801f2 100644 --- a/spec/frontend/issues/show/components/form_spec.js +++ b/spec/frontend/issues/show/components/form_spec.js @@ -30,10 +30,6 @@ describe('Inline edit form component', () => { projectNamespace: '/', }; - afterEach(() => { - wrapper.destroy(); - }); - const createComponent = (props) => { wrapper = shallowMount(formComponent, { propsData: { diff --git a/spec/frontend/issues/show/components/header_actions_spec.js b/spec/frontend/issues/show/components/header_actions_spec.js index 3d9dad3a721..58ec7387851 100644 --- a/spec/frontend/issues/show/components/header_actions_spec.js +++ b/spec/frontend/issues/show/components/header_actions_spec.js @@ -1,20 +1,22 @@ import Vue, { nextTick } from 'vue'; -import { GlButton, GlDropdownItem, GlLink, GlModal } from '@gitlab/ui'; +import { GlDropdownItem, GlLink, GlModal, GlButton } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import Vuex from 'vuex'; import { mockTracking } from 'helpers/tracking_helper'; -import { createAlert, VARIANT_SUCCESS } from '~/flash'; -import { IssueType, STATUS_CLOSED, STATUS_OPEN } from '~/issues/constants'; +import { createAlert, VARIANT_SUCCESS } from '~/alert'; +import { STATUS_CLOSED, STATUS_OPEN, TYPE_INCIDENT, TYPE_ISSUE } from '~/issues/constants'; import DeleteIssueModal from '~/issues/show/components/delete_issue_modal.vue'; import AbuseCategorySelector from '~/abuse_reports/components/abuse_category_selector.vue'; import HeaderActions from '~/issues/show/components/header_actions.vue'; import { ISSUE_STATE_EVENT_CLOSE, ISSUE_STATE_EVENT_REOPEN } from '~/issues/show/constants'; +import issuesEventHub from '~/issues/show/event_hub'; import promoteToEpicMutation from '~/issues/show/queries/promote_to_epic.mutation.graphql'; import * as urlUtility from '~/lib/utils/url_utility'; import eventHub from '~/notes/event_hub'; import createStore from '~/notes/stores'; -jest.mock('~/flash'); +jest.mock('~/alert'); +jest.mock('~/issues/show/event_hub', () => ({ $emit: jest.fn() })); describe('HeaderActions component', () => { let dispatchEventSpy; @@ -36,7 +38,7 @@ describe('HeaderActions component', () => { iid: '32', isIssueAuthor: true, issuePath: 'gitlab-org/gitlab-test/-/issues/1', - issueType: IssueType.Issue, + issueType: TYPE_ISSUE, newIssuePath: 'gitlab-org/gitlab-test/-/issues/new', projectPath: 'gitlab-org/gitlab-test', reportAbusePath: '-/abuse_reports/add_category', @@ -67,7 +69,8 @@ describe('HeaderActions component', () => { }, }; - const findToggleIssueStateButton = () => wrapper.findComponent(GlButton); + const findToggleIssueStateButton = () => wrapper.find(`[data-testid="toggle-button"]`); + const findEditButton = () => wrapper.find(`[data-testid="edit-button"]`); const findDropdownBy = (dataTestId) => wrapper.find(`[data-testid="${dataTestId}"]`); const findMobileDropdown = () => findDropdownBy('mobile-dropdown'); @@ -103,6 +106,9 @@ describe('HeaderActions component', () => { mutate: mutateMock, }, }, + stubs: { + GlButton, + }, }); }; @@ -113,13 +119,12 @@ describe('HeaderActions component', () => { if (visitUrlSpy) { visitUrlSpy.mockRestore(); } - wrapper.destroy(); }); describe.each` issueType - ${IssueType.Issue} - ${IssueType.Incident} + ${TYPE_ISSUE} + ${TYPE_INCIDENT} `('when issue type is $issueType', ({ issueType }) => { describe('close/reopen button', () => { describe.each` @@ -240,6 +245,30 @@ describe('HeaderActions component', () => { }); }); }); + + describe(`show edit button ${issueType}`, () => { + beforeEach(() => { + wrapper = mountComponent({ + props: { + canUpdateIssue: true, + canCreateIssue: false, + isIssueAuthor: true, + issueType, + canReportSpam: false, + canPromoteToEpic: false, + }, + }); + }); + it(`shows the edit button`, () => { + expect(findEditButton().exists()).toBe(true); + }); + + it('should trigger "open.form" event when clicked', async () => { + expect(issuesEventHub.$emit).not.toHaveBeenCalled(); + await findEditButton().trigger('click'); + expect(issuesEventHub.$emit).toHaveBeenCalledWith('open.form'); + }); + }); }); describe('delete issue button', () => { diff --git a/spec/frontend/issues/show/components/incidents/create_timeline_events_form_spec.js b/spec/frontend/issues/show/components/incidents/create_timeline_events_form_spec.js index 6c923cae0cc..6b68e7a0da6 100644 --- a/spec/frontend/issues/show/components/incidents/create_timeline_events_form_spec.js +++ b/spec/frontend/issues/show/components/incidents/create_timeline_events_form_spec.js @@ -9,7 +9,7 @@ import createTimelineEventMutation from '~/issues/show/components/incidents/grap import getTimelineEvents from '~/issues/show/components/incidents/graphql/queries/get_timeline_events.query.graphql'; import { timelineFormI18n } from '~/issues/show/components/incidents/constants'; import createMockApollo from 'helpers/mock_apollo_helper'; -import { createAlert } from '~/flash'; +import { createAlert } from '~/alert'; import { useFakeDate } from 'helpers/fake_date'; import { timelineEventsCreateEventResponse, @@ -19,7 +19,7 @@ import { Vue.use(VueApollo); -jest.mock('~/flash'); +jest.mock('~/alert'); const fakeDate = '2020-07-08T00:00:00.000Z'; @@ -99,7 +99,6 @@ describe('Create Timeline events', () => { afterEach(() => { createAlert.mockReset(); - wrapper.destroy(); }); describe('createIncidentTimelineEvent', () => { diff --git a/spec/frontend/issues/show/components/incidents/incident_tabs_spec.js b/spec/frontend/issues/show/components/incidents/incident_tabs_spec.js index 33a3a6eddfc..0f4fb02a40b 100644 --- a/spec/frontend/issues/show/components/incidents/incident_tabs_spec.js +++ b/spec/frontend/issues/show/components/incidents/incident_tabs_spec.js @@ -1,4 +1,5 @@ import merge from 'lodash/merge'; +import { nextTick } from 'vue'; import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { trackIncidentDetailsViewsOptions } from '~/incidents/constants'; import DescriptionComponent from '~/issues/show/components/description.vue'; @@ -11,6 +12,11 @@ import Tracking from '~/tracking'; import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue'; import { descriptionProps } from '../../mock_data/mock_data'; +const push = jest.fn(); +const $router = { + push, +}; + const mockAlert = { __typename: 'AlertManagementAlert', detailsUrl: INVALID_URL, @@ -28,12 +34,20 @@ const defaultMocks = { }, }, }, + $route: { params: {} }, + $router, }; describe('Incident Tabs component', () => { let wrapper; - const mountComponent = ({ data = {}, options = {}, mount = shallowMountExtended } = {}) => { + const mountComponent = ({ + data = {}, + options = {}, + mount = shallowMountExtended, + hasLinkedAlerts = false, + mocks = {}, + } = {}) => { wrapper = mount( IncidentTabs, merge( @@ -54,11 +68,12 @@ describe('Incident Tabs component', () => { slaFeatureAvailable: true, canUpdate: true, canUpdateTimelineEvent: true, + hasLinkedAlerts, }, data() { return { alert: mockAlert, ...data }; }, - mocks: defaultMocks, + mocks: { ...defaultMocks, ...mocks }, }, options, ), @@ -102,11 +117,13 @@ describe('Incident Tabs component', () => { }); it('renders the alert details tab', () => { + mountComponent({ hasLinkedAlerts: true }); expect(findAlertDetailsTab().exists()).toBe(true); expect(findAlertDetailsTab().attributes('title')).toBe('Alert details'); }); it('renders the alert details table with the correct props', () => { + mountComponent({ hasLinkedAlerts: true }); const alert = { iid: mockAlert.iid }; expect(findAlertDetailsComponent().props('alert')).toMatchObject(alert); @@ -156,6 +173,40 @@ describe('Incident Tabs component', () => { expect(findActiveTabs()).toHaveLength(1); expect(findActiveTabs().at(0).text()).toBe(incidentTabsI18n.timelineTitle); + expect(push).toHaveBeenCalledWith('/timeline'); + }); + }); + + describe('loading page with tab', () => { + it('shows the timeline tab when timeline path is passed', async () => { + mountComponent({ + mount: mountExtended, + mocks: { $route: { params: { tabId: 'timeline' } } }, + }); + await nextTick(); + expect(findActiveTabs()).toHaveLength(1); + expect(findActiveTabs().at(0).text()).toBe(incidentTabsI18n.timelineTitle); + }); + + it('shows the alerts tab when timeline path is passed', async () => { + mountComponent({ + mount: mountExtended, + mocks: { $route: { params: { tabId: 'alerts' } } }, + hasLinkedAlerts: true, + }); + await nextTick(); + expect(findActiveTabs()).toHaveLength(1); + expect(findActiveTabs().at(0).text()).toBe(incidentTabsI18n.alertsTitle); + }); + + it('shows the metrics tab when metrics path is passed', async () => { + mountComponent({ + mount: mountExtended, + mocks: { $route: { params: { tabId: 'metrics' } } }, + }); + await nextTick(); + expect(findActiveTabs()).toHaveLength(1); + expect(findActiveTabs().at(0).text()).toBe(incidentTabsI18n.metricsTitle); }); }); }); diff --git a/spec/frontend/issues/show/components/incidents/timeline_events_form_spec.js b/spec/frontend/issues/show/components/incidents/timeline_events_form_spec.js index e352f9708e4..af01fd34336 100644 --- a/spec/frontend/issues/show/components/incidents/timeline_events_form_spec.js +++ b/spec/frontend/issues/show/components/incidents/timeline_events_form_spec.js @@ -10,12 +10,12 @@ import { TIMELINE_EVENT_TAGS, timelineEventTagsI18n, } from '~/issues/show/components/incidents/constants'; -import { createAlert } from '~/flash'; +import { createAlert } from '~/alert'; import { useFakeDate } from 'helpers/fake_date'; Vue.use(VueApollo); -jest.mock('~/flash'); +jest.mock('~/alert'); const fakeDate = '2020-07-08T00:00:00.000Z'; @@ -51,7 +51,6 @@ describe('Timeline events form', () => { afterEach(() => { createAlert.mockReset(); - wrapper.destroy(); }); const findMarkdownField = () => wrapper.findComponent(MarkdownField); diff --git a/spec/frontend/issues/show/components/incidents/timeline_events_list_spec.js b/spec/frontend/issues/show/components/incidents/timeline_events_list_spec.js index 26fda877089..8d79dece888 100644 --- a/spec/frontend/issues/show/components/incidents/timeline_events_list_spec.js +++ b/spec/frontend/issues/show/components/incidents/timeline_events_list_spec.js @@ -11,7 +11,7 @@ import deleteTimelineEventMutation from '~/issues/show/components/incidents/grap import editTimelineEventMutation from '~/issues/show/components/incidents/graphql/queries/edit_timeline_event.mutation.graphql'; import createMockApollo from 'helpers/mock_apollo_helper'; import { useFakeDate } from 'helpers/fake_date'; -import { createAlert } from '~/flash'; +import { createAlert } from '~/alert'; import { mockEvents, timelineEventsDeleteEventResponse, @@ -26,7 +26,7 @@ import { Vue.use(VueApollo); -jest.mock('~/flash'); +jest.mock('~/alert'); jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal'); const mockConfirmAction = ({ confirmed }) => { @@ -77,10 +77,6 @@ describe('IncidentTimelineEventList', () => { mountComponent(); }); - afterEach(() => { - wrapper.destroy(); - }); - describe('template', () => { it('groups items correctly', () => { expect(findTimelineEventGroups()).toHaveLength(2); diff --git a/spec/frontend/issues/show/components/incidents/timeline_events_tab_spec.js b/spec/frontend/issues/show/components/incidents/timeline_events_tab_spec.js index 63474070701..48c3f0984a0 100644 --- a/spec/frontend/issues/show/components/incidents/timeline_events_tab_spec.js +++ b/spec/frontend/issues/show/components/incidents/timeline_events_tab_spec.js @@ -8,13 +8,13 @@ import IncidentTimelineEventsList from '~/issues/show/components/incidents/timel import CreateTimelineEvent from '~/issues/show/components/incidents/create_timeline_event.vue'; import timelineEventsQuery from '~/issues/show/components/incidents/graphql/queries/get_timeline_events.query.graphql'; import createMockApollo from 'helpers/mock_apollo_helper'; -import { createAlert } from '~/flash'; +import { createAlert } from '~/alert'; import { timelineTabI18n } from '~/issues/show/components/incidents/constants'; import { timelineEventsQueryListResponse, timelineEventsQueryEmptyResponse } from './mock_data'; Vue.use(VueApollo); -jest.mock('~/flash'); +jest.mock('~/alert'); const graphQLError = new Error('GraphQL error'); const listResponse = jest.fn().mockResolvedValue(timelineEventsQueryListResponse); diff --git a/spec/frontend/issues/show/components/incidents/utils_spec.js b/spec/frontend/issues/show/components/incidents/utils_spec.js index 75be17f9889..8ee0d906dd4 100644 --- a/spec/frontend/issues/show/components/incidents/utils_spec.js +++ b/spec/frontend/issues/show/components/incidents/utils_spec.js @@ -5,10 +5,10 @@ import { getUtcShiftedDate, getPreviousEventTags, } from '~/issues/show/components/incidents/utils'; -import { createAlert } from '~/flash'; +import { createAlert } from '~/alert'; import { mockTimelineEventTags } from './mock_data'; -jest.mock('~/flash'); +jest.mock('~/alert'); describe('incident utils', () => { describe('display and log error', () => { diff --git a/spec/frontend/issues/show/components/locked_warning_spec.js b/spec/frontend/issues/show/components/locked_warning_spec.js index dd3c7c58380..f8a8c999632 100644 --- a/spec/frontend/issues/show/components/locked_warning_spec.js +++ b/spec/frontend/issues/show/components/locked_warning_spec.js @@ -13,11 +13,6 @@ describe('LockedWarning component', () => { }); }; - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - const findAlert = () => wrapper.findComponent(GlAlert); const findLink = () => wrapper.findComponent(GlLink); diff --git a/spec/frontend/issues/show/components/task_list_item_actions_spec.js b/spec/frontend/issues/show/components/task_list_item_actions_spec.js index d52f9d57453..8caa5236796 100644 --- a/spec/frontend/issues/show/components/task_list_item_actions_spec.js +++ b/spec/frontend/issues/show/components/task_list_item_actions_spec.js @@ -17,7 +17,7 @@ describe('TaskListItemActions component', () => { document.body.appendChild(li); wrapper = shallowMount(TaskListItemActions, { - provide: { canUpdate: true, toggleClass: 'task-list-item-actions' }, + provide: { canUpdate: true }, attachTo: document.querySelector('div'), }); }; diff --git a/spec/frontend/issues/show/components/title_spec.js b/spec/frontend/issues/show/components/title_spec.js index 7560b733ae6..16ac675e12c 100644 --- a/spec/frontend/issues/show/components/title_spec.js +++ b/spec/frontend/issues/show/components/title_spec.js @@ -1,96 +1,59 @@ -import Vue, { nextTick } from 'vue'; +import { nextTick } from 'vue'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; -import titleComponent from '~/issues/show/components/title.vue'; -import eventHub from '~/issues/show/event_hub'; -import Store from '~/issues/show/stores'; +import Title from '~/issues/show/components/title.vue'; describe('Title component', () => { - let vm; - beforeEach(() => { + let wrapper; + + const getTitleHeader = () => wrapper.findByTestId('issue-title'); + + const createWrapper = (props) => { setHTMLFixture(`<title />`); - const Component = Vue.extend(titleComponent); - const store = new Store({ - titleHtml: '', - descriptionHtml: '', - issuableRef: '', - }); - vm = new Component({ + wrapper = shallowMountExtended(Title, { propsData: { issuableRef: '#1', titleHtml: 'Testing <img />', titleText: 'Testing', - showForm: false, - formState: store.formState, + ...props, }, - }).$mount(); - }); + }); + }; afterEach(() => { resetHTMLFixture(); }); it('renders title HTML', () => { - expect(vm.$el.querySelector('.title').innerHTML.trim()).toBe('Testing <img>'); - }); - - it('updates page title when changing titleHtml', async () => { - const spy = jest.spyOn(vm, 'setPageTitle'); - vm.titleHtml = 'test'; + createWrapper(); - await nextTick(); - expect(spy).toHaveBeenCalled(); + expect(getTitleHeader().element.innerHTML.trim()).toBe('Testing <img>'); }); it('animates title changes', async () => { - vm.titleHtml = 'test'; + createWrapper(); - await nextTick(); + await wrapper.setProps({ + titleHtml: 'test', + }); - expect(vm.$el.querySelector('.title').classList).toContain('issue-realtime-pre-pulse'); - jest.runAllTimers(); + expect(getTitleHeader().classes('issue-realtime-pre-pulse')).toBe(true); + jest.runAllTimers(); await nextTick(); - expect(vm.$el.querySelector('.title').classList).toContain('issue-realtime-trigger-pulse'); + expect(getTitleHeader().classes('issue-realtime-trigger-pulse')).toBe(true); }); it('updates page title after changing title', async () => { - vm.titleHtml = 'changed'; - vm.titleText = 'changed'; - - await nextTick(); - expect(document.querySelector('title').textContent.trim()).toContain('changed'); - }); + createWrapper(); - describe('inline edit button', () => { - it('should not show by default', () => { - expect(vm.$el.querySelector('.btn-edit')).toBeNull(); + await wrapper.setProps({ + titleHtml: 'changed', + titleText: 'changed', }); - it('should not show if canUpdate is false', () => { - vm.showInlineEditButton = true; - vm.canUpdate = false; - - expect(vm.$el.querySelector('.btn-edit')).toBeNull(); - }); - - it('should show if showInlineEditButton and canUpdate', () => { - vm.showInlineEditButton = true; - vm.canUpdate = true; - - expect(vm.$el.querySelector('.btn-edit')).toBeDefined(); - }); - - it('should trigger open.form event when clicked', async () => { - jest.spyOn(eventHub, '$emit').mockImplementation(() => {}); - vm.showInlineEditButton = true; - vm.canUpdate = true; - - await nextTick(); - vm.$el.querySelector('.btn-edit').click(); - - expect(eventHub.$emit).toHaveBeenCalledWith('open.form'); - }); + expect(document.querySelector('title').textContent.trim()).toContain('changed'); }); }); |