2019-09-27 08:06:07 -04:00
|
|
|
import { shallowMount } from '@vue/test-utils';
|
2019-09-26 02:06:27 -04:00
|
|
|
import { mockTracking, triggerEvent } from 'helpers/tracking_helper';
|
2019-12-09 07:07:58 -05:00
|
|
|
import ConfidentialIssueSidebar from '~/sidebar/components/confidential/confidential_issue_sidebar.vue';
|
2019-09-27 08:06:07 -04:00
|
|
|
import EditForm from '~/sidebar/components/confidential/edit_form.vue';
|
2019-10-01 11:06:05 -04:00
|
|
|
import SidebarService from '~/sidebar/services/sidebar_service';
|
|
|
|
import createFlash from '~/flash';
|
|
|
|
import RecaptchaModal from '~/vue_shared/components/recaptcha_modal';
|
|
|
|
|
|
|
|
jest.mock('~/flash');
|
|
|
|
jest.mock('~/sidebar/services/sidebar_service');
|
2017-08-07 19:56:16 -04:00
|
|
|
|
|
|
|
describe('Confidential Issue Sidebar Block', () => {
|
2019-09-27 08:06:07 -04:00
|
|
|
let wrapper;
|
2017-08-07 19:56:16 -04:00
|
|
|
|
2019-10-01 11:06:05 -04:00
|
|
|
const findRecaptchaModal = () => wrapper.find(RecaptchaModal);
|
|
|
|
|
|
|
|
const triggerUpdateConfidentialAttribute = () => {
|
|
|
|
wrapper.setData({ edit: true });
|
|
|
|
return (
|
|
|
|
// wait for edit form to become visible
|
|
|
|
wrapper.vm
|
|
|
|
.$nextTick()
|
|
|
|
.then(() => {
|
|
|
|
const editForm = wrapper.find(EditForm);
|
|
|
|
const { updateConfidentialAttribute } = editForm.props();
|
|
|
|
updateConfidentialAttribute();
|
|
|
|
})
|
|
|
|
// wait for reCAPTCHA modal to render
|
|
|
|
.then(() => wrapper.vm.$nextTick())
|
|
|
|
);
|
|
|
|
};
|
2017-08-07 19:56:16 -04:00
|
|
|
|
2019-10-01 11:06:05 -04:00
|
|
|
const createComponent = propsData => {
|
|
|
|
const service = new SidebarService();
|
2019-09-27 08:06:07 -04:00
|
|
|
wrapper = shallowMount(ConfidentialIssueSidebar, {
|
2017-08-07 19:56:16 -04:00
|
|
|
propsData: {
|
|
|
|
service,
|
2019-09-27 08:06:07 -04:00
|
|
|
...propsData,
|
2017-08-07 19:56:16 -04:00
|
|
|
},
|
2019-09-27 08:06:07 -04:00
|
|
|
sync: false,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2019-10-01 11:06:05 -04:00
|
|
|
beforeEach(() => {
|
|
|
|
jest.spyOn(window.location, 'reload').mockImplementation();
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
});
|
|
|
|
|
2019-09-27 08:06:07 -04:00
|
|
|
it.each`
|
|
|
|
isConfidential | isEditable
|
|
|
|
${false} | ${false}
|
|
|
|
${false} | ${true}
|
|
|
|
${true} | ${false}
|
|
|
|
${true} | ${true}
|
|
|
|
`(
|
|
|
|
'renders for isConfidential = $isConfidential and isEditable = $isEditable',
|
|
|
|
({ isConfidential, isEditable }) => {
|
|
|
|
createComponent({
|
|
|
|
isConfidential,
|
|
|
|
isEditable,
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(wrapper.element).toMatchSnapshot();
|
|
|
|
},
|
|
|
|
);
|
|
|
|
|
|
|
|
describe('if editable', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent({
|
|
|
|
isConfidential: true,
|
|
|
|
isEditable: true,
|
|
|
|
});
|
|
|
|
});
|
2017-08-07 19:56:16 -04:00
|
|
|
|
2019-09-27 08:06:07 -04:00
|
|
|
it('displays the edit form when editable', () => {
|
|
|
|
wrapper.setData({ edit: false });
|
2017-08-07 19:56:16 -04:00
|
|
|
|
2019-09-27 08:06:07 -04:00
|
|
|
wrapper.find({ ref: 'editLink' }).trigger('click');
|
2017-08-07 19:56:16 -04:00
|
|
|
|
2019-09-27 08:06:07 -04:00
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(wrapper.find(EditForm).exists()).toBe(true);
|
|
|
|
});
|
2017-08-07 19:56:16 -04:00
|
|
|
});
|
2018-04-02 14:46:50 -04:00
|
|
|
|
2019-09-27 08:06:07 -04:00
|
|
|
it('displays the edit form when opened from collapsed state', () => {
|
|
|
|
wrapper.setData({ edit: false });
|
2018-04-02 14:46:50 -04:00
|
|
|
|
2019-09-27 08:06:07 -04:00
|
|
|
wrapper.find({ ref: 'collapseIcon' }).trigger('click');
|
2018-04-02 14:46:50 -04:00
|
|
|
|
2019-09-27 08:06:07 -04:00
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(wrapper.find(EditForm).exists()).toBe(true);
|
|
|
|
});
|
2018-04-02 14:46:50 -04:00
|
|
|
});
|
2019-08-21 15:12:11 -04:00
|
|
|
|
2019-09-27 08:06:07 -04:00
|
|
|
it('tracks the event when "Edit" is clicked', () => {
|
|
|
|
const spy = mockTracking('_category_', wrapper.element, jest.spyOn);
|
|
|
|
|
|
|
|
const editLink = wrapper.find({ ref: 'editLink' });
|
|
|
|
triggerEvent(editLink.element);
|
2019-08-21 15:12:11 -04:00
|
|
|
|
2019-09-27 08:06:07 -04:00
|
|
|
expect(spy).toHaveBeenCalledWith('_category_', 'click_edit_button', {
|
|
|
|
label: 'right_sidebar',
|
|
|
|
property: 'confidentiality',
|
|
|
|
});
|
2019-09-19 17:06:29 -04:00
|
|
|
});
|
2019-10-01 11:06:05 -04:00
|
|
|
|
|
|
|
describe('for successful update', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
SidebarService.prototype.update.mockResolvedValue({ data: 'irrelevant' });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('reloads the page', () =>
|
|
|
|
triggerUpdateConfidentialAttribute().then(() => {
|
|
|
|
expect(window.location.reload).toHaveBeenCalled();
|
|
|
|
}));
|
|
|
|
|
|
|
|
it('does not show an error message', () =>
|
|
|
|
triggerUpdateConfidentialAttribute().then(() => {
|
|
|
|
expect(createFlash).not.toHaveBeenCalled();
|
|
|
|
}));
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('for update error', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
SidebarService.prototype.update.mockRejectedValue(new Error('updating failed!'));
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not reload the page', () =>
|
|
|
|
triggerUpdateConfidentialAttribute().then(() => {
|
|
|
|
expect(window.location.reload).not.toHaveBeenCalled();
|
|
|
|
}));
|
|
|
|
|
|
|
|
it('shows an error message', () =>
|
|
|
|
triggerUpdateConfidentialAttribute().then(() => {
|
|
|
|
expect(createFlash).toHaveBeenCalled();
|
|
|
|
}));
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('for spam error', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
SidebarService.prototype.update.mockRejectedValue({ name: 'SpamError' });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not reload the page', () =>
|
|
|
|
triggerUpdateConfidentialAttribute().then(() => {
|
|
|
|
expect(window.location.reload).not.toHaveBeenCalled();
|
|
|
|
}));
|
|
|
|
|
|
|
|
it('does not show an error message', () =>
|
|
|
|
triggerUpdateConfidentialAttribute().then(() => {
|
|
|
|
expect(createFlash).not.toHaveBeenCalled();
|
|
|
|
}));
|
|
|
|
|
|
|
|
it('shows a reCAPTCHA modal', () => {
|
|
|
|
expect(findRecaptchaModal().exists()).toBe(false);
|
|
|
|
|
|
|
|
return triggerUpdateConfidentialAttribute().then(() => {
|
|
|
|
expect(findRecaptchaModal().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2019-08-21 15:12:11 -04:00
|
|
|
});
|
2017-08-07 19:56:16 -04:00
|
|
|
});
|