debian-mirror-gitlab/spec/frontend/vue_shared/components/confirm_modal_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

206 lines
6 KiB
JavaScript
Raw Normal View History

2020-04-08 14:13:33 +05:30
import { shallowMount } from '@vue/test-utils';
2022-01-26 12:08:38 +05:30
import { merge } from 'lodash';
2020-04-08 14:13:33 +05:30
import { TEST_HOST } from 'helpers/test_constants';
2022-01-26 12:08:38 +05:30
import eventHub, { EVENT_OPEN_CONFIRM_MODAL } from '~/vue_shared/components/confirm_modal_eventhub';
2020-04-08 14:13:33 +05:30
import ConfirmModal from '~/vue_shared/components/confirm_modal.vue';
2022-01-26 12:08:38 +05:30
import DomElementListener from '~/vue_shared/components/dom_element_listener.vue';
2020-04-08 14:13:33 +05:30
jest.mock('~/lib/utils/csrf', () => ({ token: 'test-csrf-token' }));
describe('vue_shared/components/confirm_modal', () => {
const MOCK_MODAL_DATA = {
path: `${TEST_HOST}/1`,
method: 'delete',
modalAttributes: {
title: 'Are you sure?',
message: 'This will remove item 1',
okVariant: 'danger',
okTitle: 'Remove item',
},
};
const defaultProps = {
selector: '.test-button',
};
2020-11-24 15:15:51 +05:30
const popupMethods = {
hide: jest.fn(),
show: jest.fn(),
};
const GlModalStub = {
template: '<div><slot></slot></div>',
methods: popupMethods,
2020-04-08 14:13:33 +05:30
};
let wrapper;
const createComponent = (props = {}) => {
wrapper = shallowMount(ConfirmModal, {
propsData: {
...defaultProps,
...props,
},
2020-11-24 15:15:51 +05:30
stubs: {
GlModal: GlModalStub,
2020-04-08 14:13:33 +05:30
},
});
};
afterEach(() => {
wrapper.destroy();
});
2022-08-27 11:52:29 +05:30
const findModal = () => wrapper.findComponent(GlModalStub);
2020-04-08 14:13:33 +05:30
const findForm = () => wrapper.find('form');
const findFormData = () =>
findForm()
.findAll('input')
2021-03-08 18:12:59 +05:30
.wrappers.map((x) => ({ name: x.attributes('name'), value: x.attributes('value') }));
2022-08-27 11:52:29 +05:30
const findDomElementListener = () => wrapper.findComponent(DomElementListener);
2022-01-26 12:08:38 +05:30
const triggerOpenWithEventHub = (modalData) => {
eventHub.$emit(EVENT_OPEN_CONFIRM_MODAL, modalData);
};
const triggerOpenWithDomListener = (modalData) => {
const element = document.createElement('button');
element.dataset.path = modalData.path;
element.dataset.method = modalData.method;
element.dataset.modalAttributes = JSON.stringify(modalData.modalAttributes);
findDomElementListener().vm.$emit('click', {
preventDefault: jest.fn(),
currentTarget: element,
});
};
describe('default', () => {
beforeEach(() => {
createComponent();
});
it('renders empty GlModal', () => {
expect(findModal().props()).toEqual({});
});
it('renders form missing values', () => {
expect(findForm().attributes('action')).toBe('');
expect(findFormData()).toEqual([
{ name: '_method', value: undefined },
{ name: 'authenticity_token', value: 'test-csrf-token' },
]);
});
});
2020-04-08 14:13:33 +05:30
describe('template', () => {
2022-01-26 12:08:38 +05:30
describe.each`
desc | trigger
${'when opened from eventhub'} | ${triggerOpenWithEventHub}
${'when opened from dom listener'} | ${triggerOpenWithDomListener}
`('$desc', ({ trigger }) => {
2020-04-08 14:13:33 +05:30
beforeEach(() => {
createComponent();
2022-01-26 12:08:38 +05:30
trigger(MOCK_MODAL_DATA);
2020-04-08 14:13:33 +05:30
});
2021-01-29 00:20:46 +05:30
it('renders GlModal with data', () => {
2022-08-27 11:52:29 +05:30
expect(findModal().exists()).toBe(true);
2020-04-08 14:13:33 +05:30
expect(findModal().attributes()).toEqual(
expect.objectContaining({
oktitle: MOCK_MODAL_DATA.modalAttributes.okTitle,
okvariant: MOCK_MODAL_DATA.modalAttributes.okVariant,
}),
);
});
2022-01-26 12:08:38 +05:30
it('renders form', () => {
expect(findForm().attributes('action')).toBe(MOCK_MODAL_DATA.path);
expect(findFormData()).toEqual([
{ name: '_method', value: MOCK_MODAL_DATA.method },
{ name: 'authenticity_token', value: 'test-csrf-token' },
]);
});
2020-04-08 14:13:33 +05:30
});
2021-01-29 00:20:46 +05:30
describe.each`
desc | attrs | expectation
${'when message is simple text'} | ${{}} | ${`<div>${MOCK_MODAL_DATA.modalAttributes.message}</div>`}
${'when message has html'} | ${{ messageHtml: '<p>Header</p><ul onhover="alert(1)"><li>First</li></ul>' }} | ${'<p>Header</p><ul><li>First</li></ul>'}
`('$desc', ({ attrs, expectation }) => {
beforeEach(() => {
2022-01-26 12:08:38 +05:30
const modalData = merge({ ...MOCK_MODAL_DATA }, { modalAttributes: attrs });
2021-01-29 00:20:46 +05:30
createComponent();
2022-01-26 12:08:38 +05:30
triggerOpenWithEventHub(modalData);
2021-01-29 00:20:46 +05:30
});
it('renders message', () => {
expect(findForm().element.innerHTML).toContain(expectation);
});
});
2020-04-08 14:13:33 +05:30
});
describe('methods', () => {
describe('submitModal', () => {
beforeEach(() => {
createComponent();
2022-01-26 12:08:38 +05:30
triggerOpenWithEventHub(MOCK_MODAL_DATA);
2020-04-08 14:13:33 +05:30
});
it('does not submit form', () => {
expect(findForm().element.submit).not.toHaveBeenCalled();
});
2021-01-03 14:25:43 +05:30
describe('with handleSubmit prop', () => {
const handleSubmit = jest.fn();
beforeEach(() => {
createComponent({ handleSubmit });
findModal().vm.$emit('primary');
});
it('will call handleSubmit', () => {
expect(handleSubmit).toHaveBeenCalled();
});
it('does not submit the form', () => {
expect(findForm().element.submit).not.toHaveBeenCalled();
});
});
2020-04-08 14:13:33 +05:30
describe('when modal submitted', () => {
beforeEach(() => {
findModal().vm.$emit('primary');
});
it('submits form', () => {
expect(findFormData()).toEqual([
{ name: '_method', value: MOCK_MODAL_DATA.method },
{ name: 'authenticity_token', value: 'test-csrf-token' },
]);
expect(findForm().element.submit).toHaveBeenCalled();
});
});
});
describe('closeModal', () => {
beforeEach(() => {
createComponent();
});
it('does not close modal', () => {
2020-11-24 15:15:51 +05:30
expect(popupMethods.hide).not.toHaveBeenCalled();
2020-04-08 14:13:33 +05:30
});
describe('when modal closed', () => {
beforeEach(() => {
findModal().vm.$emit('cancel');
});
it('closes modal', () => {
2020-11-24 15:15:51 +05:30
expect(popupMethods.hide).toHaveBeenCalled();
2020-04-08 14:13:33 +05:30
});
});
});
});
});