debian-mirror-gitlab/spec/frontend/issues/show/components/header_actions_spec.js
2023-07-09 08:55:56 +05:30

651 lines
23 KiB
JavaScript

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';
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';
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 wrapper;
let visitUrlSpy;
Vue.use(Vuex);
Vue.use(VueApollo);
const store = createStore();
const defaultProps = {
canCreateIssue: true,
canDestroyIssue: true,
canPromoteToEpic: true,
canReopenIssue: true,
canReportSpam: true,
canUpdateIssue: true,
iid: '32',
isIssueAuthor: true,
issuePath: 'gitlab-org/gitlab-test/-/issues/1',
issueType: TYPE_ISSUE,
newIssuePath: 'gitlab-org/gitlab-test/-/issues/new',
projectPath: 'gitlab-org/gitlab-test',
reportAbusePath: '-/abuse_reports/add_category',
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 promoteToEpicMutationResponse = {
data: {
promoteToEpic: {
errors: [],
epic: {
id: 'gid://gitlab/Epic/1',
webPath: '/groups/gitlab-org/-/epics/1',
},
},
},
};
const promoteToEpicMutationErrorResponse = {
data: {
promoteToEpic: {
errors: ['The issue has already been promoted to an epic.'],
epic: {},
},
},
};
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"]`);
const findDropdownBy = (dataTestId) => wrapper.find(`[data-testid="${dataTestId}"]`);
const findMobileDropdown = () => findDropdownBy('mobile-dropdown');
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,
} = {}) => {
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,
},
},
stubs: {
GlButton,
},
});
};
afterEach(() => {
if (dispatchEventSpy) {
dispatchEventSpy.mockRestore();
}
if (visitUrlSpy) {
visitUrlSpy.mockRestore();
}
});
describe.each`
issueType
${TYPE_ISSUE}
${TYPE_INCIDENT}
`('when issue type is $issueType', ({ issueType }) => {
describe('close/reopen button', () => {
describe.each`
description | issueState | buttonText | newIssueState
${`when the ${issueType} is open`} | ${STATUS_OPEN} | ${`Close ${issueType}`} | ${ISSUE_STATE_EVENT_CLOSE}
${`when the ${issueType} is closed`} | ${STATUS_CLOSED} | ${`Reopen ${issueType}`} | ${ISSUE_STATE_EVENT_REOPEN}
`('$description', ({ issueState, buttonText, newIssueState }) => {
beforeEach(() => {
dispatchEventSpy = jest.spyOn(document, 'dispatchEvent');
wrapper = mountComponent({
props: { issueType },
issueState,
});
});
it(`has text "${buttonText}"`, () => {
expect(findToggleIssueStateButton().text()).toBe(buttonText);
});
it('calls apollo mutation', () => {
findToggleIssueStateButton().vm.$emit('click');
expect(updateIssueMutationResponseHandler).toHaveBeenCalledWith({
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();
expect(dispatchEventSpy).toHaveBeenCalledTimes(1);
});
});
});
describe.each`
description | isCloseIssueItemVisible | findDropdownItems | findDropdown
${'mobile dropdown'} | ${true} | ${findMobileDropdownItems} | ${findMobileDropdown}
${'desktop dropdown'} | ${false} | ${findDesktopDropdownItems} | ${findDesktopDropdown}
`('$description', ({ isCloseIssueItemVisible, findDropdownItems, findDropdown }) => {
describe.each`
description | itemText | isItemVisible | canUpdateIssue | canCreateIssue | isIssueAuthor | canReportSpam | canPromoteToEpic | canDestroyIssue
${`when user can update ${issueType}`} | ${`Close ${issueType}`} | ${isCloseIssueItemVisible} | ${true} | ${true} | ${true} | ${true} | ${true} | ${true}
${`when user cannot update ${issueType}`} | ${`Close ${issueType}`} | ${false} | ${false} | ${true} | ${true} | ${true} | ${true} | ${true}
${`when user can create ${issueType}`} | ${`New related ${issueType}`} | ${true} | ${true} | ${true} | ${true} | ${true} | ${true} | ${true}
${`when user cannot create ${issueType}`} | ${`New related ${issueType}`} | ${false} | ${true} | ${false} | ${true} | ${true} | ${true} | ${true}
${'when user can promote to epic'} | ${'Promote to epic'} | ${true} | ${true} | ${true} | ${true} | ${true} | ${true} | ${true}
${'when user cannot promote to epic'} | ${'Promote to epic'} | ${false} | ${true} | ${true} | ${true} | ${true} | ${false} | ${true}
${'when user can report abuse'} | ${'Report abuse to administrator'} | ${true} | ${true} | ${true} | ${false} | ${true} | ${true} | ${true}
${'when user cannot report abuse'} | ${'Report abuse to administrator'} | ${false} | ${true} | ${true} | ${true} | ${true} | ${true} | ${true}
${'when user can submit as spam'} | ${'Submit as spam'} | ${true} | ${true} | ${true} | ${true} | ${true} | ${true} | ${true}
${'when user cannot submit as spam'} | ${'Submit as spam'} | ${false} | ${true} | ${true} | ${true} | ${false} | ${true} | ${true}
${`when user can delete ${issueType}`} | ${`Delete ${issueType}`} | ${true} | ${true} | ${true} | ${true} | ${true} | ${true} | ${true}
${`when user cannot delete ${issueType}`} | ${`Delete ${issueType}`} | ${false} | ${true} | ${true} | ${true} | ${true} | ${true} | ${false}
`(
'$description',
({
itemText,
isItemVisible,
canUpdateIssue,
canCreateIssue,
isIssueAuthor,
canReportSpam,
canPromoteToEpic,
canDestroyIssue,
}) => {
beforeEach(() => {
wrapper = mountComponent({
props: {
canUpdateIssue,
canCreateIssue,
isIssueAuthor,
issueType,
canReportSpam,
canPromoteToEpic,
canDestroyIssue,
},
});
});
it(`${isItemVisible ? 'shows' : 'hides'} "${itemText}" item`, () => {
expect(
findDropdownItems()
.filter((item) => item.text() === itemText)
.exists(),
).toBe(isItemVisible);
});
},
);
describe(`when user can update but not create ${issueType}`, () => {
beforeEach(() => {
wrapper = mountComponent({
props: {
canUpdateIssue: true,
canCreateIssue: false,
isIssueAuthor: true,
issueType,
canReportSpam: false,
canPromoteToEpic: false,
},
});
});
it(`${isCloseIssueItemVisible ? 'shows' : 'hides'} the dropdown button`, () => {
expect(findDropdown().exists()).toBe(isCloseIssueItemVisible);
});
});
});
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', () => {
let trackingSpy;
beforeEach(() => {
wrapper = mountComponent();
trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
});
it('tracks clicking on button', () => {
findDesktopDropdownItems().at(3).vm.$emit('click');
expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_dropdown', {
label: 'delete_issue',
});
});
});
describe('when "Promote to epic" button is clicked', () => {
describe('when response is successful', () => {
beforeEach(async () => {
visitUrlSpy = jest.spyOn(urlUtility, 'visitUrl').mockReturnValue({});
wrapper = mountComponent({
promoteToEpicHandler: promoteToEpicMutationSuccessResponseHandler,
});
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,
},
});
});
it('shows a success message and tells the user they are being redirected', () => {
expect(createAlert).toHaveBeenCalledWith({
message: 'The issue was successfully promoted to an epic. Redirecting to epic...',
variant: VARIANT_SUCCESS,
});
});
it('redirects to newly created epic path', () => {
expect(visitUrlSpy).toHaveBeenCalledWith(
promoteToEpicMutationResponse.data.promoteToEpic.epic.webPath,
);
});
});
describe('when response contains errors', () => {
beforeEach(async () => {
visitUrlSpy = jest.spyOn(urlUtility, 'visitUrl').mockReturnValue({});
wrapper = mountComponent({
promoteToEpicHandler: promoteToEpicMutationErrorHandler,
});
wrapper.find('[data-testid="promote-button"]').vm.$emit('click');
await waitForPromises();
});
it('shows an error message', () => {
expect(createAlert).toHaveBeenCalledWith({
message: HeaderActions.i18n.promoteErrorMessage,
});
});
});
});
describe('when `toggle.issuable.state` event is emitted', () => {
it('invokes a method to toggle the issue state', () => {
wrapper = mountComponent();
eventHub.$emit('toggle.issuable.state');
expect(updateIssueMutationResponseHandler).toHaveBeenCalledWith({
input: {
iid: defaultProps.iid,
projectPath: defaultProps.projectPath,
stateEvent: ISSUE_STATE_EVENT_CLOSE,
},
});
});
});
describe('blocked by issues modal', () => {
const blockedByIssues = [
{ iid: 13, web_url: 'gitlab-org/gitlab-test/-/issues/13' },
{ iid: 79, web_url: 'gitlab-org/gitlab-test/-/issues/79' },
];
beforeEach(() => {
wrapper = mountComponent({ blockedByIssues });
});
it('has title text', () => {
expect(findModal().attributes('title')).toBe(
'Are you sure you want to close this blocked issue?',
);
});
it('has body text', () => {
expect(findModal().text()).toContain(
'This issue is currently blocked by the following issues:',
);
});
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,
},
});
});
describe.each`
ordinal | index
${'first'} | ${0}
${'second'} | ${1}
`('$ordinal blocked-by issue link', ({ index }) => {
it('has link text', () => {
expect(findModalLinkAt(index).text()).toBe(`#${blockedByIssues[index].iid}`);
});
it('has url', () => {
expect(findModalLinkAt(index).attributes('href')).toBe(blockedByIssues[index].web_url);
});
});
});
describe('delete issue modal', () => {
it('renders', () => {
wrapper = mountComponent();
expect(wrapper.findComponent(DeleteIssueModal).props()).toEqual({
issuePath: defaultProps.issuePath,
issueType: defaultProps.issueType,
modalId: HeaderActions.deleteModalId,
title: 'Delete issue',
});
});
});
describe('abuse category selector', () => {
beforeEach(() => {
wrapper = mountComponent({ props: { isIssueAuthor: false } });
});
it("doesn't render", () => {
expect(findAbuseCategorySelector().exists()).toEqual(false);
});
it('opens the drawer', async () => {
findReportAbuseSelectorItem().vm.$emit('click');
await nextTick();
expect(findAbuseCategorySelector().props('showDrawer')).toEqual(true);
});
it('closes the drawer', async () => {
await findReportAbuseSelectorItem().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');
});
});
});
});