diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-04-20 03:12:57 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-04-20 03:12:57 +0300 |
commit | 8277a5b4ba05fe11174397c689c66cef5c06fc38 (patch) | |
tree | c4abbec1509476efbb14c040045ca163042de3bf /spec/frontend/issues | |
parent | f46a8dbf1a0999e27dfeddd258096ef97def8d64 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/issues')
-rw-r--r-- | spec/frontend/issues/show/components/header_actions_spec.js | 317 | ||||
-rw-r--r-- | spec/frontend/issues/show/components/new_header_actions_popover_spec.js | 77 |
2 files changed, 64 insertions, 330 deletions
diff --git a/spec/frontend/issues/show/components/header_actions_spec.js b/spec/frontend/issues/show/components/header_actions_spec.js index a5ba512434c..db3435855f6 100644 --- a/spec/frontend/issues/show/components/header_actions_spec.js +++ b/spec/frontend/issues/show/components/header_actions_spec.js @@ -2,8 +2,6 @@ import Vue, { nextTick } from 'vue'; import { GlDropdownItem, GlLink, GlModal, GlButton } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import Vuex from 'vuex'; -import VueApollo from 'vue-apollo'; -import waitForPromises from 'helpers/wait_for_promises'; import { mockTracking } from 'helpers/tracking_helper'; import { createAlert, VARIANT_SUCCESS } from '~/alert'; import { STATUS_CLOSED, STATUS_OPEN, TYPE_INCIDENT, TYPE_ISSUE } from '~/issues/constants'; @@ -16,22 +14,17 @@ import promoteToEpicMutation from '~/issues/show/queries/promote_to_epic.mutatio import * as urlUtility from '~/lib/utils/url_utility'; import eventHub from '~/notes/event_hub'; import createStore from '~/notes/stores'; -import createMockApollo from 'helpers/mock_apollo_helper'; -import issueReferenceQuery from '~/sidebar/queries/issue_reference.query.graphql'; -import updateIssueMutation from '~/issues/show/queries/update_issue.mutation.graphql'; -import toast from '~/vue_shared/plugins/global_toast'; jest.mock('~/alert'); jest.mock('~/issues/show/event_hub', () => ({ $emit: jest.fn() })); -jest.mock('~/vue_shared/plugins/global_toast'); describe('HeaderActions component', () => { let dispatchEventSpy; + let mutateMock; let wrapper; let visitUrlSpy; Vue.use(Vuex); - Vue.use(VueApollo); const store = createStore(); @@ -52,28 +45,15 @@ describe('HeaderActions component', () => { reportedUserId: 1, reportedFromUrl: 'http://localhost:/gitlab-org/-/issues/32', submitAsSpamPath: 'gitlab-org/gitlab-test/-/issues/32/submit_as_spam', - issuableEmailAddress: null, - fullPath: 'full-path', }; - const updateIssueMutationResponse = { - data: { - updateIssue: { - errors: [], - issuable: { - id: 'gid://gitlab/Issue/511', - state: STATUS_OPEN, - }, - }, - }, - }; + const updateIssueMutationResponse = { data: { updateIssue: { errors: [] } } }; const promoteToEpicMutationResponse = { data: { promoteToEpic: { errors: [], epic: { - id: 'gid://gitlab/Epic/1', webPath: '/groups/gitlab-org/-/epics/1', }, }, @@ -89,20 +69,6 @@ describe('HeaderActions component', () => { }, }; - const mockIssueReferenceData = { - data: { - workspace: { - id: 'gid://gitlab/Project/7', - issuable: { - id: 'gid://gitlab/Issue/511', - reference: 'flightjs/Flight#33', - __typename: 'Issue', - }, - __typename: 'Project', - }, - }, - }; - const findToggleIssueStateButton = () => wrapper.find(`[data-testid="toggle-button"]`); const findEditButton = () => wrapper.find(`[data-testid="edit-button"]`); @@ -111,54 +77,33 @@ describe('HeaderActions component', () => { const findDesktopDropdown = () => findDropdownBy('desktop-dropdown'); const findMobileDropdownItems = () => findMobileDropdown().findAllComponents(GlDropdownItem); const findDesktopDropdownItems = () => findDesktopDropdown().findAllComponents(GlDropdownItem); - const findAbuseCategorySelector = () => wrapper.findComponent(AbuseCategorySelector); - const findReportAbuseSelectorItem = () => wrapper.find(`[data-testid="report-abuse-item"]`); - const findNotificationWidget = () => wrapper.find(`[data-testid="notification-toggle"]`); - const findLockIssueWidget = () => wrapper.find(`[data-testid="lock-issue-toggle"]`); - const findCopyRefenceDropdownItem = () => wrapper.find(`[data-testid="copy-reference"]`); - const findCopyEmailItem = () => wrapper.find(`[data-testid="copy-email"]`); const findModal = () => wrapper.findComponent(GlModal); const findModalLinkAt = (index) => findModal().findAllComponents(GlLink).at(index); - const issueReferenceSuccessHandler = jest.fn().mockResolvedValue(mockIssueReferenceData); - const updateIssueMutationResponseHandler = jest - .fn() - .mockResolvedValue(updateIssueMutationResponse); - const promoteToEpicMutationSuccessResponseHandler = jest - .fn() - .mockResolvedValue(promoteToEpicMutationResponse); - const promoteToEpicMutationErrorHandler = jest - .fn() - .mockResolvedValue(promoteToEpicMutationErrorResponse); - const mountComponent = ({ props = {}, issueState = STATUS_OPEN, blockedByIssues = [], - movedMrSidebarEnabled = false, - promoteToEpicHandler = promoteToEpicMutationSuccessResponseHandler, + mutateResponse = {}, } = {}) => { + mutateMock = jest.fn().mockResolvedValue(mutateResponse); + store.dispatch('setNoteableData', { blocked_by_issues: blockedByIssues, state: issueState, }); - const handlers = [ - [issueReferenceQuery, issueReferenceSuccessHandler], - [updateIssueMutation, updateIssueMutationResponseHandler], - [promoteToEpicMutation, promoteToEpicHandler], - ]; - return shallowMount(HeaderActions, { - apolloProvider: createMockApollo(handlers), store, provide: { ...defaultProps, ...props, - glFeatures: { - movedMrSidebar: movedMrSidebarEnabled, + }, + mocks: { + $apollo: { + mutate: mutateMock, }, }, stubs: { @@ -193,6 +138,7 @@ describe('HeaderActions component', () => { wrapper = mountComponent({ props: { issueType }, issueState, + mutateResponse: updateIssueMutationResponse, }); }); @@ -203,19 +149,23 @@ describe('HeaderActions component', () => { it('calls apollo mutation', () => { findToggleIssueStateButton().vm.$emit('click'); - expect(updateIssueMutationResponseHandler).toHaveBeenCalledWith({ - input: { - iid: defaultProps.iid, - projectPath: defaultProps.projectPath, - stateEvent: newIssueState, - }, - }); + expect(mutateMock).toHaveBeenCalledWith( + expect.objectContaining({ + variables: { + input: { + iid: defaultProps.iid, + projectPath: defaultProps.projectPath, + stateEvent: newIssueState, + }, + }, + }), + ); }); it('dispatches a custom event to update the issue page', async () => { findToggleIssueStateButton().vm.$emit('click'); - await waitForPromises(); + await nextTick(); expect(dispatchEventSpy).toHaveBeenCalledTimes(1); }); @@ -340,25 +290,28 @@ describe('HeaderActions component', () => { describe('when "Promote to epic" button is clicked', () => { describe('when response is successful', () => { - beforeEach(async () => { + beforeEach(() => { visitUrlSpy = jest.spyOn(urlUtility, 'visitUrl').mockReturnValue({}); wrapper = mountComponent({ - promoteToEpicHandler: promoteToEpicMutationSuccessResponseHandler, + mutateResponse: promoteToEpicMutationResponse, }); wrapper.find('[data-testid="promote-button"]').vm.$emit('click'); - - await waitForPromises(); }); it('invokes GraphQL mutation when clicked', () => { - expect(promoteToEpicMutationSuccessResponseHandler).toHaveBeenCalledWith({ - input: { - iid: defaultProps.iid, - projectPath: defaultProps.projectPath, - }, - }); + expect(mutateMock).toHaveBeenCalledWith( + expect.objectContaining({ + mutation: promoteToEpicMutation, + variables: { + input: { + iid: defaultProps.iid, + projectPath: defaultProps.projectPath, + }, + }, + }), + ); }); it('shows a success message and tells the user they are being redirected', () => { @@ -376,16 +329,14 @@ describe('HeaderActions component', () => { }); describe('when response contains errors', () => { - beforeEach(async () => { + beforeEach(() => { visitUrlSpy = jest.spyOn(urlUtility, 'visitUrl').mockReturnValue({}); wrapper = mountComponent({ - promoteToEpicHandler: promoteToEpicMutationErrorHandler, + mutateResponse: promoteToEpicMutationErrorResponse, }); wrapper.find('[data-testid="promote-button"]').vm.$emit('click'); - - await waitForPromises(); }); it('shows an error message', () => { @@ -398,17 +349,21 @@ describe('HeaderActions component', () => { describe('when `toggle.issuable.state` event is emitted', () => { it('invokes a method to toggle the issue state', () => { - wrapper = mountComponent(); + wrapper = mountComponent({ mutateResponse: updateIssueMutationResponse }); eventHub.$emit('toggle.issuable.state'); - expect(updateIssueMutationResponseHandler).toHaveBeenCalledWith({ - input: { - iid: defaultProps.iid, - projectPath: defaultProps.projectPath, - stateEvent: ISSUE_STATE_EVENT_CLOSE, - }, - }); + expect(mutateMock).toHaveBeenCalledWith( + expect.objectContaining({ + variables: { + input: { + iid: defaultProps.iid, + projectPath: defaultProps.projectPath, + stateEvent: ISSUE_STATE_EVENT_CLOSE, + }, + }, + }), + ); }); }); @@ -437,13 +392,17 @@ describe('HeaderActions component', () => { it('calls apollo mutation when primary button is clicked', () => { findModal().vm.$emit('primary'); - expect(updateIssueMutationResponseHandler).toHaveBeenCalledWith({ - input: { - iid: defaultProps.iid.toString(), - projectPath: defaultProps.projectPath, - stateEvent: ISSUE_STATE_EVENT_CLOSE, - }, - }); + expect(mutateMock).toHaveBeenCalledWith( + expect.objectContaining({ + variables: { + input: { + iid: defaultProps.iid.toString(), + projectPath: defaultProps.projectPath, + stateEvent: ISSUE_STATE_EVENT_CLOSE, + }, + }, + }), + ); }); describe.each` @@ -475,6 +434,8 @@ describe('HeaderActions component', () => { }); describe('abuse category selector', () => { + const findAbuseCategorySelector = () => wrapper.findComponent(AbuseCategorySelector); + beforeEach(() => { wrapper = mountComponent({ props: { isIssueAuthor: false } }); }); @@ -484,7 +445,7 @@ describe('HeaderActions component', () => { }); it('opens the drawer', async () => { - findReportAbuseSelectorItem().vm.$emit('click'); + findDesktopDropdownItems().at(2).vm.$emit('click'); await nextTick(); @@ -492,160 +453,10 @@ describe('HeaderActions component', () => { }); it('closes the drawer', async () => { - await findReportAbuseSelectorItem().vm.$emit('click'); + await findDesktopDropdownItems().at(2).vm.$emit('click'); await findAbuseCategorySelector().vm.$emit('close-drawer'); expect(findAbuseCategorySelector().exists()).toEqual(false); }); }); - - describe('notification toggle', () => { - describe('visibility', () => { - describe.each` - movedMrSidebarEnabled | issueType | visible - ${true} | ${TYPE_ISSUE} | ${true} - ${true} | ${TYPE_INCIDENT} | ${true} - ${false} | ${TYPE_ISSUE} | ${false} - ${false} | ${TYPE_INCIDENT} | ${false} - `( - `when movedMrSidebarEnabled flag is "$movedMrSidebarEnabled" with issue type "$issueType"`, - ({ movedMrSidebarEnabled, issueType, visible }) => { - beforeEach(() => { - wrapper = mountComponent({ - props: { - issueType, - }, - movedMrSidebarEnabled, - }); - }); - - it(`${visible ? 'shows' : 'hides'} Notification toggle`, () => { - expect(findNotificationWidget().exists()).toBe(visible); - }); - }, - ); - }); - }); - - describe('lock issue option', () => { - describe('visibility', () => { - describe.each` - movedMrSidebarEnabled | issueType | visible - ${true} | ${TYPE_ISSUE} | ${true} - ${true} | ${TYPE_INCIDENT} | ${false} - ${false} | ${TYPE_ISSUE} | ${false} - ${false} | ${TYPE_INCIDENT} | ${false} - `( - `when movedMrSidebarEnabled flag is "$movedMrSidebarEnabled" with issue type "$issueType"`, - ({ movedMrSidebarEnabled, issueType, visible }) => { - beforeEach(() => { - wrapper = mountComponent({ - props: { - issueType, - }, - movedMrSidebarEnabled, - }); - }); - - it(`${visible ? 'shows' : 'hides'} Lock issue option`, () => { - expect(findLockIssueWidget().exists()).toBe(visible); - }); - }, - ); - }); - }); - - describe('copy reference option', () => { - describe('visibility', () => { - describe.each` - movedMrSidebarEnabled | issueType | visible - ${true} | ${TYPE_ISSUE} | ${true} - ${true} | ${TYPE_INCIDENT} | ${true} - ${false} | ${TYPE_ISSUE} | ${false} - ${false} | ${TYPE_INCIDENT} | ${false} - `( - 'when movedMrSidebarFlagEnabled is "$movedMrSidebarEnabled" with issue type "$issueType"', - ({ movedMrSidebarEnabled, issueType, visible }) => { - beforeEach(() => { - wrapper = mountComponent({ - props: { - issueType, - }, - movedMrSidebarEnabled, - }); - }); - - it(`${visible ? 'shows' : 'hides'} Copy reference option`, () => { - expect(findCopyRefenceDropdownItem().exists()).toBe(visible); - }); - }, - ); - }); - - describe('clicking when visible', () => { - beforeEach(() => { - wrapper = mountComponent({ - props: { - issueType: TYPE_ISSUE, - }, - movedMrSidebarEnabled: true, - }); - }); - - it('shows toast message', () => { - findCopyRefenceDropdownItem().vm.$emit('click'); - - expect(toast).toHaveBeenCalledWith('Reference copied'); - }); - }); - }); - - describe('copy email option', () => { - describe('visibility', () => { - describe.each` - movedMrSidebarEnabled | issueType | issuableEmailAddress | visible - ${true} | ${TYPE_ISSUE} | ${'mock-email-address'} | ${true} - ${true} | ${TYPE_ISSUE} | ${''} | ${false} - ${true} | ${TYPE_INCIDENT} | ${'mock-email-address'} | ${true} - ${true} | ${TYPE_INCIDENT} | ${''} | ${false} - ${false} | ${TYPE_ISSUE} | ${'mock-email-address'} | ${false} - ${false} | ${TYPE_INCIDENT} | ${'mock-email-address'} | ${false} - `( - 'when movedMrSidebarEnabled flag is "$movedMrSidebarEnabled" issue type is "$issueType" and issuableEmailAddress="$issuableEmailAddress"', - ({ movedMrSidebarEnabled, issueType, issuableEmailAddress, visible }) => { - beforeEach(() => { - wrapper = mountComponent({ - props: { - issueType, - issuableEmailAddress, - }, - movedMrSidebarEnabled, - }); - }); - - it(`${visible ? 'shows' : 'hides'} Copy email option`, () => { - expect(findCopyEmailItem().exists()).toBe(visible); - }); - }, - ); - }); - - describe('clicking when visible', () => { - beforeEach(() => { - wrapper = mountComponent({ - props: { - issueType: TYPE_ISSUE, - issuableEmailAddress: 'mock-email-address', - }, - movedMrSidebarEnabled: true, - }); - }); - - it('shows toast message', () => { - findCopyEmailItem().vm.$emit('click'); - - expect(toast).toHaveBeenCalledWith('Email address copied'); - }); - }); - }); }); diff --git a/spec/frontend/issues/show/components/new_header_actions_popover_spec.js b/spec/frontend/issues/show/components/new_header_actions_popover_spec.js deleted file mode 100644 index bf3e81c7d3a..00000000000 --- a/spec/frontend/issues/show/components/new_header_actions_popover_spec.js +++ /dev/null @@ -1,77 +0,0 @@ -import { GlPopover } from '@gitlab/ui'; -import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; -import NewHeaderActionsPopover from '~/issues/show/components/new_header_actions_popover.vue'; -import { NEW_ACTIONS_POPOVER_KEY } from '~/issues/show/constants'; -import { TYPE_ISSUE } from '~/issues/constants'; -import * as utils from '~/lib/utils/common_utils'; - -describe('NewHeaderActionsPopover', () => { - let wrapper; - - const createComponent = ({ issueType = TYPE_ISSUE, movedMrSidebarEnabled = true }) => { - wrapper = shallowMountExtended(NewHeaderActionsPopover, { - propsData: { - issueType, - }, - stubs: { - GlPopover, - }, - provide: { - glFeatures: { - movedMrSidebar: movedMrSidebarEnabled, - }, - }, - }); - }; - - const findPopover = () => wrapper.findComponent(GlPopover); - const findConfirmButton = () => wrapper.findByTestId('confirm-button'); - - it('should not be visible when the feature flag :moved_mr_sidebar is disabled', () => { - createComponent({ movedMrSidebarEnabled: false }); - expect(findPopover().exists()).toBe(false); - }); - - describe('without the popover cookie', () => { - beforeEach(() => { - utils.setCookie = jest.fn(); - - createComponent({}); - }); - - it('renders the popover with correct text', () => { - expect(findPopover().exists()).toBe(true); - expect(findPopover().text()).toContain('issue actions'); - }); - - it('does not call setCookie', () => { - expect(utils.setCookie).not.toHaveBeenCalled(); - }); - - describe('when the confirm button is clicked', () => { - beforeEach(() => { - findConfirmButton().vm.$emit('click'); - }); - - it('sets the popover cookie', () => { - expect(utils.setCookie).toHaveBeenCalledWith(NEW_ACTIONS_POPOVER_KEY, true); - }); - - it('hides the popover', () => { - expect(findPopover().exists()).toBe(false); - }); - }); - }); - - describe('with the popover cookie', () => { - beforeEach(() => { - jest.spyOn(utils, 'getCookie').mockReturnValue('true'); - - createComponent({}); - }); - - it('does not render the popover', () => { - expect(findPopover().exists()).toBe(false); - }); - }); -}); |