diff options
Diffstat (limited to 'spec/frontend/issues/show/components/description_spec.js')
-rw-r--r-- | spec/frontend/issues/show/components/description_spec.js | 91 |
1 files changed, 72 insertions, 19 deletions
diff --git a/spec/frontend/issues/show/components/description_spec.js b/spec/frontend/issues/show/components/description_spec.js index 0b3daadae1d..1ae04531a6b 100644 --- a/spec/frontend/issues/show/components/description_spec.js +++ b/spec/frontend/issues/show/components/description_spec.js @@ -1,14 +1,20 @@ import $ from 'jquery'; -import { nextTick } from 'vue'; +import Vue, { nextTick } from 'vue'; +import VueApollo from 'vue-apollo'; import '~/behaviors/markdown/render_gfm'; import { GlTooltip, GlModal } from '@gitlab/ui'; + 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 Description from '~/issues/show/components/description.vue'; import { updateHistory } from '~/lib/utils/url_utility'; +import workItemQuery from '~/work_items/graphql/work_item.query.graphql'; import TaskList from '~/task_list'; import WorkItemDetailModal from '~/work_items/components/work_item_detail_modal.vue'; import CreateWorkItem from '~/work_items/pages/create_work_item.vue'; @@ -27,17 +33,29 @@ jest.mock('~/task_list'); const showModal = jest.fn(); const hideModal = jest.fn(); +const showDetailsModal = jest.fn(); const $toast = { show: jest.fn(), }; +const workItemQueryResponse = { + data: { + workItem: null, + }, +}; + +const queryHandler = jest.fn().mockResolvedValue(workItemQueryResponse); + describe('Description component', () => { let wrapper; + Vue.use(VueApollo); + const findGfmContent = () => wrapper.find('[data-testid="gfm-content"]'); const findTextarea = () => wrapper.find('[data-testid="textarea"]'); const findTaskActionButtons = () => wrapper.findAll('.js-add-task'); const findConvertToTaskButton = () => wrapper.find('.js-add-task'); + const findTaskLink = () => wrapper.find('a.gfm-issue'); const findTooltips = () => wrapper.findAllComponents(GlTooltip); const findModal = () => wrapper.findComponent(GlModal); @@ -52,6 +70,7 @@ describe('Description component', () => { ...props, }, provide, + apolloProvider: createMockApollo([[workItemQuery, queryHandler]]), mocks: { $toast, }, @@ -62,6 +81,11 @@ describe('Description component', () => { hide: hideModal, }, }), + WorkItemDetailModal: stubComponent(WorkItemDetailModal, { + methods: { + show: showDetailsModal, + }, + }), }, }); } @@ -296,15 +320,15 @@ describe('Description component', () => { }); it('shows toast after delete success', async () => { - findWorkItemDetailModal().vm.$emit('workItemDeleted'); + const newDesc = 'description'; + findWorkItemDetailModal().vm.$emit('workItemDeleted', newDesc); + expect(wrapper.emitted('updateDescription')).toEqual([[newDesc]]); expect($toast.show).toHaveBeenCalledWith('Work item deleted'); }); }); describe('work items detail', () => { - const findTaskLink = () => wrapper.find('a.gfm-issue'); - describe('when opening and closing', () => { beforeEach(() => { createComponent({ @@ -319,11 +343,9 @@ describe('Description component', () => { }); it('opens when task button is clicked', async () => { - expect(findWorkItemDetailModal().props('visible')).toBe(false); - await findTaskLink().trigger('click'); - expect(findWorkItemDetailModal().props('visible')).toBe(true); + expect(showDetailsModal).toHaveBeenCalled(); expect(updateHistory).toHaveBeenCalledWith({ url: `${TEST_HOST}/?work_item_id=2`, replace: true, @@ -333,12 +355,9 @@ describe('Description component', () => { it('closes from an open state', async () => { await findTaskLink().trigger('click'); - expect(findWorkItemDetailModal().props('visible')).toBe(true); - findWorkItemDetailModal().vm.$emit('close'); await nextTick(); - expect(findWorkItemDetailModal().props('visible')).toBe(false); expect(updateHistory).toHaveBeenLastCalledWith({ url: `${TEST_HOST}/`, replace: true, @@ -364,16 +383,17 @@ describe('Description component', () => { describe('when url query `work_item_id` exists', () => { it.each` - behavior | workItemId | visible - ${'opens'} | ${'123'} | ${true} - ${'does not open'} | ${'123e'} | ${false} - ${'does not open'} | ${'12e3'} | ${false} - ${'does not open'} | ${'1e23'} | ${false} - ${'does not open'} | ${'x'} | ${false} - ${'does not open'} | ${'undefined'} | ${false} + 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, visible }) => { + async ({ workItemId, modalOpened }) => { setWindowLocation(`?work_item_id=${workItemId}`); createComponent({ @@ -381,10 +401,43 @@ describe('Description component', () => { provide: { glFeatures: { workItems: true } }, }); - expect(findWorkItemDetailModal().props('visible')).toBe(visible); + expect(showDetailsModal).toHaveBeenCalledTimes(modalOpened); }, ); }); }); + + describe('when hovering task links', () => { + beforeEach(() => { + createComponent({ + props: { + descriptionHtml: descriptionHtmlWithTask, + }, + provide: { + glFeatures: { workItems: true }, + }, + }); + 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(); + }); + }); }); }); |