2020-10-24 23:57:45 +05:30
|
|
|
import { shallowMount } from '@vue/test-utils';
|
2022-08-13 15:12:31 +05:30
|
|
|
import Vue, { nextTick } from 'vue';
|
|
|
|
import Vuex from 'vuex';
|
2020-10-24 23:57:45 +05:30
|
|
|
import { mockTracking, triggerEvent } from 'helpers/tracking_helper';
|
2021-01-03 14:25:43 +05:30
|
|
|
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
|
2021-03-11 19:13:27 +05:30
|
|
|
import createStore from '~/notes/stores';
|
|
|
|
import EditForm from '~/sidebar/components/lock/edit_form.vue';
|
|
|
|
import IssuableLockForm from '~/sidebar/components/lock/issuable_lock_form.vue';
|
2022-08-13 15:12:31 +05:30
|
|
|
import toast from '~/vue_shared/plugins/global_toast';
|
2020-10-24 23:57:45 +05:30
|
|
|
import { ISSUABLE_TYPE_ISSUE, ISSUABLE_TYPE_MR } from './constants';
|
|
|
|
|
2022-08-13 15:12:31 +05:30
|
|
|
jest.mock('~/vue_shared/plugins/global_toast');
|
|
|
|
|
|
|
|
Vue.use(Vuex);
|
|
|
|
|
2020-10-24 23:57:45 +05:30
|
|
|
describe('IssuableLockForm', () => {
|
|
|
|
let wrapper;
|
|
|
|
let store;
|
|
|
|
let issuableType; // Either ISSUABLE_TYPE_ISSUE or ISSUABLE_TYPE_MR
|
2022-08-13 15:12:31 +05:30
|
|
|
let updateLockedAttribute;
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2021-03-08 18:12:59 +05:30
|
|
|
const setIssuableType = (pageType) => {
|
2020-10-24 23:57:45 +05:30
|
|
|
issuableType = pageType;
|
|
|
|
};
|
|
|
|
|
|
|
|
const findSidebarCollapseIcon = () => wrapper.find('[data-testid="sidebar-collapse-icon"]');
|
|
|
|
const findLockStatus = () => wrapper.find('[data-testid="lock-status"]');
|
|
|
|
const findEditLink = () => wrapper.find('[data-testid="edit-link"]');
|
|
|
|
const findEditForm = () => wrapper.find(EditForm);
|
2021-01-03 14:25:43 +05:30
|
|
|
const findSidebarLockStatusTooltip = () =>
|
|
|
|
getBinding(findSidebarCollapseIcon().element, 'gl-tooltip');
|
2020-10-24 23:57:45 +05:30
|
|
|
|
2021-03-08 18:12:59 +05:30
|
|
|
const initStore = (isLocked) => {
|
2020-10-24 23:57:45 +05:30
|
|
|
if (issuableType === ISSUABLE_TYPE_ISSUE) {
|
|
|
|
store = createStore();
|
|
|
|
store.getters.getNoteableData.targetType = 'issue';
|
|
|
|
} else {
|
2022-08-13 15:12:31 +05:30
|
|
|
updateLockedAttribute = jest.fn().mockResolvedValue();
|
|
|
|
store = new Vuex.Store({
|
|
|
|
getters: {
|
|
|
|
getNoteableData: () => ({ targetType: issuableType }),
|
|
|
|
},
|
|
|
|
actions: {
|
|
|
|
updateLockedAttribute,
|
|
|
|
},
|
|
|
|
});
|
2020-10-24 23:57:45 +05:30
|
|
|
}
|
|
|
|
store.getters.getNoteableData.discussion_locked = isLocked;
|
|
|
|
};
|
|
|
|
|
2022-08-13 15:12:31 +05:30
|
|
|
const createComponent = ({ props = {} }, movedMrSidebar = false) => {
|
2020-10-24 23:57:45 +05:30
|
|
|
wrapper = shallowMount(IssuableLockForm, {
|
|
|
|
store,
|
2022-07-16 23:28:13 +05:30
|
|
|
provide: {
|
|
|
|
fullPath: '',
|
2022-08-13 15:12:31 +05:30
|
|
|
glFeatures: {
|
|
|
|
movedMrSidebar,
|
|
|
|
},
|
2022-07-16 23:28:13 +05:30
|
|
|
},
|
2020-10-24 23:57:45 +05:30
|
|
|
propsData: {
|
|
|
|
isEditable: true,
|
|
|
|
...props,
|
|
|
|
},
|
2021-01-03 14:25:43 +05:30
|
|
|
directives: {
|
|
|
|
GlTooltip: createMockDirective(),
|
|
|
|
},
|
2020-10-24 23:57:45 +05:30
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
wrapper = null;
|
|
|
|
});
|
|
|
|
|
|
|
|
describe.each`
|
|
|
|
pageType
|
|
|
|
${ISSUABLE_TYPE_ISSUE} | ${ISSUABLE_TYPE_MR}
|
|
|
|
`('In $pageType page', ({ pageType }) => {
|
|
|
|
beforeEach(() => {
|
|
|
|
setIssuableType(pageType);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe.each`
|
|
|
|
isLocked
|
|
|
|
${false} | ${true}
|
|
|
|
`(`renders for isLocked = $isLocked`, ({ isLocked }) => {
|
|
|
|
beforeEach(() => {
|
|
|
|
initStore(isLocked);
|
|
|
|
createComponent({});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows the lock status', () => {
|
|
|
|
expect(findLockStatus().text()).toBe(isLocked ? 'Locked' : 'Unlocked');
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('edit form', () => {
|
|
|
|
let isEditable;
|
|
|
|
beforeEach(() => {
|
|
|
|
isEditable = false;
|
|
|
|
createComponent({ props: { isEditable } });
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when not editable', () => {
|
2022-04-04 11:22:00 +05:30
|
|
|
it('does not display the edit form when opened if not editable', async () => {
|
2020-10-24 23:57:45 +05:30
|
|
|
expect(findEditForm().exists()).toBe(false);
|
|
|
|
findSidebarCollapseIcon().trigger('click');
|
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
await nextTick();
|
|
|
|
expect(findEditForm().exists()).toBe(false);
|
2020-10-24 23:57:45 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when editable', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
isEditable = true;
|
|
|
|
createComponent({ props: { isEditable } });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows the editable status', () => {
|
|
|
|
expect(findEditLink().exists()).toBe(isEditable);
|
|
|
|
expect(findEditLink().text()).toBe('Edit');
|
|
|
|
});
|
|
|
|
|
|
|
|
describe("when 'Edit' is clicked", () => {
|
2022-04-04 11:22:00 +05:30
|
|
|
it('displays the edit form when editable', async () => {
|
2020-10-24 23:57:45 +05:30
|
|
|
expect(findEditForm().exists()).toBe(false);
|
|
|
|
findEditLink().trigger('click');
|
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
await nextTick();
|
|
|
|
expect(findEditForm().exists()).toBe(true);
|
2020-10-24 23:57:45 +05:30
|
|
|
});
|
|
|
|
|
2022-10-11 01:57:18 +05:30
|
|
|
it('tracks the event', () => {
|
2020-10-24 23:57:45 +05:30
|
|
|
const spy = mockTracking('_category_', wrapper.element, jest.spyOn);
|
|
|
|
triggerEvent(findEditLink().element);
|
|
|
|
|
|
|
|
expect(spy).toHaveBeenCalledWith('_category_', 'click_edit_button', {
|
|
|
|
label: 'right_sidebar',
|
|
|
|
property: 'lock_issue',
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('When sidebar is collapsed', () => {
|
2022-04-04 11:22:00 +05:30
|
|
|
it('displays the edit form when opened', async () => {
|
2020-10-24 23:57:45 +05:30
|
|
|
expect(findEditForm().exists()).toBe(false);
|
|
|
|
findSidebarCollapseIcon().trigger('click');
|
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
await nextTick();
|
|
|
|
expect(findEditForm().exists()).toBe(true);
|
2020-10-24 23:57:45 +05:30
|
|
|
});
|
2021-01-03 14:25:43 +05:30
|
|
|
|
|
|
|
it('renders a tooltip with the lock status text', () => {
|
|
|
|
const tooltip = findSidebarLockStatusTooltip();
|
|
|
|
|
|
|
|
expect(tooltip).toBeDefined();
|
|
|
|
expect(tooltip.value.title).toBe(isLocked ? 'Locked' : 'Unlocked');
|
|
|
|
});
|
2020-10-24 23:57:45 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2022-08-13 15:12:31 +05:30
|
|
|
|
|
|
|
describe('merge requests', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
setIssuableType('merge_request');
|
|
|
|
});
|
|
|
|
|
|
|
|
it.each`
|
|
|
|
locked | message
|
|
|
|
${true} | ${'Merge request locked.'}
|
|
|
|
${false} | ${'Merge request unlocked.'}
|
|
|
|
`('displays $message when merge request is $locked', async ({ locked, message }) => {
|
|
|
|
initStore(locked);
|
|
|
|
|
|
|
|
createComponent({}, true);
|
|
|
|
|
|
|
|
await wrapper.find('.dropdown-item').trigger('click');
|
|
|
|
|
|
|
|
expect(toast).toHaveBeenCalledWith(message);
|
|
|
|
});
|
|
|
|
});
|
2020-10-24 23:57:45 +05:30
|
|
|
});
|