diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-06-06 15:07:34 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-06-06 15:07:34 +0300 |
commit | 4958d96e262f6b31b2850123e4949536555b2d29 (patch) | |
tree | 28fe9a1fed009a569806c705e4810a33979cbd6a /spec/frontend/work_items | |
parent | 95de7177f2d5844e4aa399fea9a59d4ba6b4b1f1 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/work_items')
-rw-r--r-- | spec/frontend/work_items/components/work_item_description_spec.js | 294 |
1 files changed, 127 insertions, 167 deletions
diff --git a/spec/frontend/work_items/components/work_item_description_spec.js b/spec/frontend/work_items/components/work_item_description_spec.js index 62cbb1bacb6..b910e9854f8 100644 --- a/spec/frontend/work_items/components/work_item_description_spec.js +++ b/spec/frontend/work_items/components/work_item_description_spec.js @@ -1,3 +1,4 @@ +import { GlForm } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import Vue, { nextTick } from 'vue'; import VueApollo from 'vue-apollo'; @@ -7,7 +8,6 @@ import waitForPromises from 'helpers/wait_for_promises'; import EditedAt from '~/issues/show/components/edited.vue'; import { updateDraft } from '~/lib/utils/autosave'; import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal'; -import MarkdownField from '~/vue_shared/components/markdown/field.vue'; import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue'; import WorkItemDescription from '~/work_items/components/work_item_description.vue'; import WorkItemDescriptionRendered from '~/work_items/components/work_item_description_rendered.vue'; @@ -36,22 +36,18 @@ describe('WorkItemDescription', () => { const mutationSuccessHandler = jest.fn().mockResolvedValue(updateWorkItemMutationResponse); const subscriptionHandler = jest.fn().mockResolvedValue(workItemDescriptionSubscriptionResponse); let workItemResponseHandler; - let workItemsMvc; - const findMarkdownField = () => wrapper.findComponent(MarkdownField); + const findForm = () => wrapper.findComponent(GlForm); const findMarkdownEditor = () => wrapper.findComponent(MarkdownEditor); const findRenderedDescription = () => wrapper.findComponent(WorkItemDescriptionRendered); const findEditedAt = () => wrapper.findComponent(EditedAt); - const editDescription = (newText) => { - if (workItemsMvc) { - return findMarkdownEditor().vm.$emit('input', newText); - } - return wrapper.find('textarea').setValue(newText); - }; + const editDescription = (newText) => findMarkdownEditor().vm.$emit('input', newText); - const clickCancel = () => wrapper.find('[data-testid="cancel"]').vm.$emit('click'); - const clickSave = () => wrapper.find('[data-testid="save-description"]').vm.$emit('click', {}); + const findCancelButton = () => wrapper.find('[data-testid="cancel"]'); + const findSubmitButton = () => wrapper.find('[data-testid="save-description"]'); + const clickCancel = () => findForm().vm.$emit('reset', new Event('reset')); + const clickSave = () => findForm().vm.$emit('submit', new Event('submit')); const createComponent = async ({ mutationHandler = mutationSuccessHandler, @@ -75,12 +71,6 @@ describe('WorkItemDescription', () => { }, provide: { fullPath: 'test-project-path', - glFeatures: { - workItemsMvc, - }, - }, - stubs: { - MarkdownField, }, }); @@ -93,11 +83,15 @@ describe('WorkItemDescription', () => { } }; - describe('editing description with workItemsMvc FF enabled', () => { - beforeEach(() => { - workItemsMvc = true; + it('has a subscription', async () => { + await createComponent(); + + expect(subscriptionHandler).toHaveBeenCalledWith({ + issuableId: workItemQueryResponse.data.workItem.id, }); + }); + describe('editing description', () => { it('passes correct autocompletion data and preview markdown sources and enables quick actions', async () => { const { iid, @@ -113,196 +107,162 @@ describe('WorkItemDescription', () => { autocompleteDataSources: autocompleteDataSources(fullPath, iid), }); }); - }); - - describe('editing description with workItemsMvc FF disabled', () => { - beforeEach(() => { - workItemsMvc = false; - }); - - it('passes correct autocompletion data and preview markdown sources', async () => { - const { - iid, - project: { fullPath }, - } = workItemQueryResponse.data.workItem; - - await createComponent({ isEditing: true }); + it('shows edited by text', async () => { + const lastEditedAt = '2022-09-21T06:18:42Z'; + const lastEditedBy = { + name: 'Administrator', + webPath: '/root', + }; + + await createComponent({ + workItemResponse: workItemByIidResponseFactory({ lastEditedAt, lastEditedBy }), + }); - expect(findMarkdownField().props()).toMatchObject({ - autocompleteDataSources: autocompleteDataSources(fullPath, iid), - markdownPreviewPath: markdownPreviewPath(fullPath, iid), - quickActionsDocsPath: wrapper.vm.$options.quickActionsDocsPath, + expect(findEditedAt().props()).toMatchObject({ + updatedAt: lastEditedAt, + updatedByName: lastEditedBy.name, + updatedByPath: lastEditedBy.webPath, }); }); - }); - describe.each([true, false])( - 'editing description with workItemsMvc %workItemsMvcEnabled', - (workItemsMvcEnabled) => { - beforeEach(() => { - beforeEach(() => { - workItemsMvc = workItemsMvcEnabled; - }); - }); + it('does not show edited by text', async () => { + await createComponent(); - it('has a subscription', async () => { - await createComponent(); + expect(findEditedAt().exists()).toBe(false); + }); - expect(subscriptionHandler).toHaveBeenCalledWith({ - issuableId: workItemQueryResponse.data.workItem.id, - }); + it('cancels when clicking cancel', async () => { + await createComponent({ + isEditing: true, }); - describe('editing description', () => { - it('shows edited by text', async () => { - const lastEditedAt = '2022-09-21T06:18:42Z'; - const lastEditedBy = { - name: 'Administrator', - webPath: '/root', - }; + clickCancel(); - await createComponent({ - workItemResponse: workItemByIidResponseFactory({ lastEditedAt, lastEditedBy }), - }); + await nextTick(); - expect(findEditedAt().props()).toMatchObject({ - updatedAt: lastEditedAt, - updatedByName: lastEditedBy.name, - updatedByPath: lastEditedBy.webPath, - }); - }); + expect(confirmAction).not.toHaveBeenCalled(); + expect(findMarkdownEditor().exists()).toBe(false); + }); - it('does not show edited by text', async () => { - await createComponent(); + it('prompts for confirmation when clicking cancel after changes', async () => { + await createComponent({ + isEditing: true, + }); - expect(findEditedAt().exists()).toBe(false); - }); + editDescription('updated desc'); - it('cancels when clicking cancel', async () => { - await createComponent({ - isEditing: true, - }); + clickCancel(); - clickCancel(); + await nextTick(); - await nextTick(); + expect(confirmAction).toHaveBeenCalled(); + }); - expect(confirmAction).not.toHaveBeenCalled(); - expect(findMarkdownField().exists()).toBe(false); - }); + it('calls update widgets mutation', async () => { + const updatedDesc = 'updated desc'; - it('prompts for confirmation when clicking cancel after changes', async () => { - await createComponent({ - isEditing: true, - }); + await createComponent({ + isEditing: true, + }); - editDescription('updated desc'); + editDescription(updatedDesc); - clickCancel(); + clickSave(); - await nextTick(); + await waitForPromises(); - expect(confirmAction).toHaveBeenCalled(); - }); + expect(mutationSuccessHandler).toHaveBeenCalledWith({ + input: { + id: workItemId, + descriptionWidget: { + description: updatedDesc, + }, + }, + }); + }); - it('calls update widgets mutation', async () => { - const updatedDesc = 'updated desc'; + it('tracks editing description', async () => { + await createComponent({ + isEditing: true, + markdownPreviewPath: '/preview', + }); + const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn); - await createComponent({ - isEditing: true, - }); + clickSave(); - editDescription(updatedDesc); + await waitForPromises(); - clickSave(); + expect(trackingSpy).toHaveBeenCalledWith(TRACKING_CATEGORY_SHOW, 'updated_description', { + category: TRACKING_CATEGORY_SHOW, + label: 'item_description', + property: 'type_Task', + }); + }); - await waitForPromises(); + it('emits error when mutation returns error', async () => { + const error = 'eror'; - expect(mutationSuccessHandler).toHaveBeenCalledWith({ - input: { - id: workItemId, - descriptionWidget: { - description: updatedDesc, - }, + await createComponent({ + isEditing: true, + mutationHandler: jest.fn().mockResolvedValue({ + data: { + workItemUpdate: { + workItem: {}, + errors: [error], }, - }); - }); - - it('tracks editing description', async () => { - await createComponent({ - isEditing: true, - markdownPreviewPath: '/preview', - }); - const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn); - - clickSave(); - - await waitForPromises(); - - expect(trackingSpy).toHaveBeenCalledWith(TRACKING_CATEGORY_SHOW, 'updated_description', { - category: TRACKING_CATEGORY_SHOW, - label: 'item_description', - property: 'type_Task', - }); - }); - - it('emits error when mutation returns error', async () => { - const error = 'eror'; + }, + }), + }); - await createComponent({ - isEditing: true, - mutationHandler: jest.fn().mockResolvedValue({ - data: { - workItemUpdate: { - workItem: {}, - errors: [error], - }, - }, - }), - }); + editDescription('updated desc'); - editDescription('updated desc'); + clickSave(); - clickSave(); + await waitForPromises(); - await waitForPromises(); + expect(wrapper.emitted('error')).toEqual([[error]]); + }); - expect(wrapper.emitted('error')).toEqual([[error]]); - }); + it('emits error when mutation fails', async () => { + const error = 'eror'; - it('emits error when mutation fails', async () => { - const error = 'eror'; + await createComponent({ + isEditing: true, + mutationHandler: jest.fn().mockRejectedValue(new Error(error)), + }); - await createComponent({ - isEditing: true, - mutationHandler: jest.fn().mockRejectedValue(new Error(error)), - }); + editDescription('updated desc'); - editDescription('updated desc'); + clickSave(); - clickSave(); + await waitForPromises(); - await waitForPromises(); + expect(wrapper.emitted('error')).toEqual([[error]]); + }); - expect(wrapper.emitted('error')).toEqual([[error]]); - }); + it('autosaves description', async () => { + await createComponent({ + isEditing: true, + }); - it('autosaves description', async () => { - await createComponent({ - isEditing: true, - }); + editDescription('updated desc'); - editDescription('updated desc'); + expect(updateDraft).toHaveBeenCalled(); + }); - expect(updateDraft).toHaveBeenCalled(); - }); + it('maps submit and cancel buttons to form actions', async () => { + await createComponent({ + isEditing: true, }); - it('calls the work item query', async () => { - await createComponent(); + expect(findCancelButton().attributes('type')).toBe('reset'); + expect(findSubmitButton().attributes('type')).toBe('submit'); + }); + }); + + it('calls the work item query', async () => { + await createComponent(); - expect(workItemResponseHandler).toHaveBeenCalled(); - }); - }, - ); + expect(workItemResponseHandler).toHaveBeenCalled(); + }); }); |