2020-09-23 21:09:28 +00:00
|
|
|
import { mount } from '@vue/test-utils';
|
2020-08-20 09:09:55 +00:00
|
|
|
import { deprecatedCreateFlash as flash } from '~/flash';
|
2020-07-29 15:09:39 +00:00
|
|
|
import { createStore as createMrStore } from '~/mr_notes/stores';
|
2021-02-14 18:09:20 +00:00
|
|
|
import createStore from '~/notes/stores';
|
|
|
|
import EditFormButtons from '~/sidebar/components/lock/edit_form_buttons.vue';
|
|
|
|
import eventHub from '~/sidebar/event_hub';
|
2020-07-29 15:09:39 +00:00
|
|
|
import { ISSUABLE_TYPE_ISSUE, ISSUABLE_TYPE_MR } from './constants';
|
|
|
|
|
|
|
|
jest.mock('~/sidebar/event_hub', () => ({ $emit: jest.fn() }));
|
|
|
|
jest.mock('~/flash');
|
2020-04-28 18:09:35 +00:00
|
|
|
|
|
|
|
describe('EditFormButtons', () => {
|
|
|
|
let wrapper;
|
2020-07-29 15:09:39 +00:00
|
|
|
let store;
|
|
|
|
let issuableType;
|
|
|
|
let issuableDisplayName;
|
|
|
|
|
2020-12-23 21:10:24 +00:00
|
|
|
const setIssuableType = (pageType) => {
|
2020-07-29 15:09:39 +00:00
|
|
|
issuableType = pageType;
|
|
|
|
issuableDisplayName = issuableType.replace(/_/g, ' ');
|
|
|
|
};
|
|
|
|
|
|
|
|
const findLockToggle = () => wrapper.find('[data-testid="lock-toggle"]');
|
2020-04-28 18:09:35 +00:00
|
|
|
|
2020-07-29 15:09:39 +00:00
|
|
|
const createComponent = ({ props = {}, data = {}, resolved = true }) => {
|
|
|
|
store = issuableType === ISSUABLE_TYPE_ISSUE ? createStore() : createMrStore();
|
|
|
|
|
|
|
|
if (resolved) {
|
|
|
|
jest.spyOn(store, 'dispatch').mockResolvedValue();
|
|
|
|
} else {
|
|
|
|
jest.spyOn(store, 'dispatch').mockRejectedValue();
|
|
|
|
}
|
|
|
|
|
2020-09-23 21:09:28 +00:00
|
|
|
wrapper = mount(EditFormButtons, {
|
2020-07-29 15:09:39 +00:00
|
|
|
store,
|
|
|
|
provide: {
|
|
|
|
fullPath: '',
|
|
|
|
},
|
|
|
|
propsData: {
|
|
|
|
isLocked: false,
|
|
|
|
issuableDisplayName,
|
|
|
|
...props,
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
isLoading: false,
|
|
|
|
...data,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
});
|
|
|
|
};
|
2020-04-28 18:09:35 +00:00
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
wrapper = null;
|
|
|
|
});
|
|
|
|
|
2020-07-29 15:09:39 +00:00
|
|
|
describe.each`
|
|
|
|
pageType
|
|
|
|
${ISSUABLE_TYPE_ISSUE} | ${ISSUABLE_TYPE_MR}
|
|
|
|
`('In $pageType page', ({ pageType }) => {
|
|
|
|
beforeEach(() => {
|
|
|
|
setIssuableType(pageType);
|
2020-04-28 18:09:35 +00:00
|
|
|
});
|
|
|
|
|
2020-07-29 15:09:39 +00:00
|
|
|
describe('when isLoading', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent({ data: { isLoading: true } });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders "Applying" in the toggle button', () => {
|
|
|
|
expect(findLockToggle().text()).toBe('Applying');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('disables the toggle button', () => {
|
|
|
|
expect(findLockToggle().attributes('disabled')).toBe('disabled');
|
|
|
|
});
|
2020-04-28 18:09:35 +00:00
|
|
|
|
2020-09-23 21:09:28 +00:00
|
|
|
it('sets loading on the toggle button', () => {
|
|
|
|
expect(findLockToggle().props('loading')).toBe(true);
|
2020-07-29 15:09:39 +00:00
|
|
|
});
|
2020-04-28 18:09:35 +00:00
|
|
|
});
|
|
|
|
|
2020-07-29 15:09:39 +00:00
|
|
|
describe.each`
|
|
|
|
isLocked | toggleText | statusText
|
|
|
|
${false} | ${'Lock'} | ${'unlocked'}
|
|
|
|
${true} | ${'Unlock'} | ${'locked'}
|
|
|
|
`('when $statusText', ({ isLocked, toggleText }) => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent({
|
|
|
|
props: {
|
|
|
|
isLocked,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it(`toggle button displays "${toggleText}"`, () => {
|
|
|
|
expect(findLockToggle().text()).toContain(toggleText);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when toggled', () => {
|
|
|
|
describe(`when resolved`, () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent({
|
|
|
|
props: {
|
|
|
|
isLocked,
|
|
|
|
},
|
|
|
|
resolved: true,
|
|
|
|
});
|
|
|
|
findLockToggle().trigger('click');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('dispatches the correct action', () => {
|
|
|
|
expect(store.dispatch).toHaveBeenCalledWith('updateLockedAttribute', {
|
|
|
|
locked: !isLocked,
|
|
|
|
fullPath: '',
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('resets loading', async () => {
|
|
|
|
await wrapper.vm.$nextTick().then(() => {
|
2020-09-23 21:09:28 +00:00
|
|
|
expect(findLockToggle().props('loading')).toBe(false);
|
2020-07-29 15:09:39 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('emits close form', () => {
|
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(eventHub.$emit).toHaveBeenCalledWith('closeLockForm');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not flash an error message', () => {
|
|
|
|
expect(flash).not.toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe(`when not resolved`, () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent({
|
|
|
|
props: {
|
|
|
|
isLocked,
|
|
|
|
},
|
|
|
|
resolved: false,
|
|
|
|
});
|
|
|
|
findLockToggle().trigger('click');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('dispatches the correct action', () => {
|
|
|
|
expect(store.dispatch).toHaveBeenCalledWith('updateLockedAttribute', {
|
|
|
|
locked: !isLocked,
|
|
|
|
fullPath: '',
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('resets loading', async () => {
|
|
|
|
await wrapper.vm.$nextTick().then(() => {
|
2020-09-23 21:09:28 +00:00
|
|
|
expect(findLockToggle().props('loading')).toBe(false);
|
2020-07-29 15:09:39 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('emits close form', () => {
|
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(eventHub.$emit).toHaveBeenCalledWith('closeLockForm');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('calls flash with the correct message', () => {
|
|
|
|
expect(flash).toHaveBeenCalledWith(
|
|
|
|
`Something went wrong trying to change the locked state of this ${issuableDisplayName}`,
|
|
|
|
);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2020-04-28 18:09:35 +00:00
|
|
|
});
|
|
|
|
});
|