2018-03-27 19:54:05 +05:30
|
|
|
import Vue from 'vue';
|
2020-06-23 00:09:42 +05:30
|
|
|
import mountComponent from 'helpers/vue_mount_component_helper';
|
2020-01-01 13:55:28 +05:30
|
|
|
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
|
2018-03-27 19:54:05 +05:30
|
|
|
|
2019-12-21 20:55:43 +05:30
|
|
|
const modalComponent = Vue.extend(DeprecatedModal2);
|
2018-03-27 19:54:05 +05:30
|
|
|
|
2019-12-21 20:55:43 +05:30
|
|
|
describe('DeprecatedModal2', () => {
|
2018-03-27 19:54:05 +05:30
|
|
|
let vm;
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
vm.$destroy();
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('props', () => {
|
|
|
|
describe('with id', () => {
|
|
|
|
const props = {
|
|
|
|
id: 'my-modal',
|
|
|
|
};
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
vm = mountComponent(modalComponent, props);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('assigns the id to the modal', () => {
|
|
|
|
expect(vm.$el.id).toBe(props.id);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('without id', () => {
|
|
|
|
beforeEach(() => {
|
2018-11-18 11:00:15 +05:30
|
|
|
vm = mountComponent(modalComponent, {});
|
2018-03-27 19:54:05 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('does not add an id attribute to the modal', () => {
|
|
|
|
expect(vm.$el.hasAttribute('id')).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('with headerTitleText', () => {
|
|
|
|
const props = {
|
|
|
|
headerTitleText: 'my title text',
|
|
|
|
};
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
vm = mountComponent(modalComponent, props);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets the modal title', () => {
|
|
|
|
const modalTitle = vm.$el.querySelector('.modal-title');
|
2018-12-13 13:39:08 +05:30
|
|
|
|
2018-03-27 19:54:05 +05:30
|
|
|
expect(modalTitle.innerHTML.trim()).toBe(props.headerTitleText);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('with footerPrimaryButtonVariant', () => {
|
|
|
|
const props = {
|
|
|
|
footerPrimaryButtonVariant: 'danger',
|
|
|
|
};
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
vm = mountComponent(modalComponent, props);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets the primary button class', () => {
|
|
|
|
const primaryButton = vm.$el.querySelector('.modal-footer button:last-of-type');
|
2018-12-13 13:39:08 +05:30
|
|
|
|
2018-03-27 19:54:05 +05:30
|
|
|
expect(primaryButton).toHaveClass(`btn-${props.footerPrimaryButtonVariant}`);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('with footerPrimaryButtonText', () => {
|
|
|
|
const props = {
|
|
|
|
footerPrimaryButtonText: 'my button text',
|
|
|
|
};
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
vm = mountComponent(modalComponent, props);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets the primary button text', () => {
|
2021-01-03 14:25:43 +05:30
|
|
|
const primaryButton = vm.$el.querySelector('.js-modal-primary-action .gl-button-text');
|
2018-12-13 13:39:08 +05:30
|
|
|
|
2018-03-27 19:54:05 +05:30
|
|
|
expect(primaryButton.innerHTML.trim()).toBe(props.footerPrimaryButtonText);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-06-23 00:09:42 +05:30
|
|
|
it('works with data-toggle="modal"', () => {
|
2018-03-27 19:54:05 +05:30
|
|
|
setFixtures(`
|
|
|
|
<button id="modal-button" data-toggle="modal" data-target="#my-modal"></button>
|
|
|
|
<div id="modal-container"></div>
|
|
|
|
`);
|
|
|
|
|
|
|
|
const modalContainer = document.getElementById('modal-container');
|
|
|
|
const modalButton = document.getElementById('modal-button');
|
2018-11-18 11:00:15 +05:30
|
|
|
vm = mountComponent(
|
|
|
|
modalComponent,
|
|
|
|
{
|
|
|
|
id: 'my-modal',
|
|
|
|
},
|
|
|
|
modalContainer,
|
|
|
|
);
|
2020-06-23 00:09:42 +05:30
|
|
|
const modalElement = document.getElementById('my-modal');
|
2018-03-27 19:54:05 +05:30
|
|
|
|
|
|
|
modalButton.click();
|
2020-06-23 00:09:42 +05:30
|
|
|
|
|
|
|
expect(modalElement).not.toHaveClass('show');
|
|
|
|
|
|
|
|
// let the modal fade in
|
|
|
|
jest.runOnlyPendingTimers();
|
|
|
|
|
|
|
|
expect(modalElement).toHaveClass('show');
|
2018-03-27 19:54:05 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
describe('methods', () => {
|
|
|
|
const dummyEvent = 'not really an event';
|
|
|
|
|
|
|
|
beforeEach(() => {
|
2018-11-18 11:00:15 +05:30
|
|
|
vm = mountComponent(modalComponent, {});
|
2020-06-23 00:09:42 +05:30
|
|
|
jest.spyOn(vm, '$emit').mockImplementation(() => {});
|
2018-03-27 19:54:05 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
describe('emitCancel', () => {
|
|
|
|
it('emits a cancel event', () => {
|
|
|
|
vm.emitCancel(dummyEvent);
|
|
|
|
|
|
|
|
expect(vm.$emit).toHaveBeenCalledWith('cancel', dummyEvent);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('emitSubmit', () => {
|
|
|
|
it('emits a submit event', () => {
|
|
|
|
vm.emitSubmit(dummyEvent);
|
|
|
|
|
|
|
|
expect(vm.$emit).toHaveBeenCalledWith('submit', dummyEvent);
|
|
|
|
});
|
|
|
|
});
|
2018-11-18 11:00:15 +05:30
|
|
|
|
|
|
|
describe('opened', () => {
|
|
|
|
it('emits a open event', () => {
|
|
|
|
vm.opened();
|
|
|
|
|
|
|
|
expect(vm.$emit).toHaveBeenCalledWith('open');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('closed', () => {
|
|
|
|
it('emits a closed event', () => {
|
|
|
|
vm.closed();
|
|
|
|
|
|
|
|
expect(vm.$emit).toHaveBeenCalledWith('closed');
|
|
|
|
});
|
|
|
|
});
|
2018-03-27 19:54:05 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
describe('slots', () => {
|
|
|
|
const slotContent = 'this should go into the slot';
|
|
|
|
|
2020-06-23 00:09:42 +05:30
|
|
|
const modalWithSlot = slot => {
|
2018-03-27 19:54:05 +05:30
|
|
|
return Vue.extend({
|
|
|
|
components: {
|
2019-12-21 20:55:43 +05:30
|
|
|
DeprecatedModal2,
|
2018-03-27 19:54:05 +05:30
|
|
|
},
|
2020-06-23 00:09:42 +05:30
|
|
|
render: h =>
|
|
|
|
h('deprecated-modal-2', [slot ? h('template', { slot }, slotContent) : slotContent]),
|
2018-03-27 19:54:05 +05:30
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
describe('default slot', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
vm = mountComponent(modalWithSlot());
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets the modal body', () => {
|
|
|
|
const modalBody = vm.$el.querySelector('.modal-body');
|
2018-12-13 13:39:08 +05:30
|
|
|
|
2018-03-27 19:54:05 +05:30
|
|
|
expect(modalBody.innerHTML).toBe(slotContent);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('header slot', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
vm = mountComponent(modalWithSlot('header'));
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets the modal header', () => {
|
|
|
|
const modalHeader = vm.$el.querySelector('.modal-header');
|
2018-12-13 13:39:08 +05:30
|
|
|
|
2018-03-27 19:54:05 +05:30
|
|
|
expect(modalHeader.innerHTML).toBe(slotContent);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('title slot', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
vm = mountComponent(modalWithSlot('title'));
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets the modal title', () => {
|
|
|
|
const modalTitle = vm.$el.querySelector('.modal-title');
|
2018-12-13 13:39:08 +05:30
|
|
|
|
2018-03-27 19:54:05 +05:30
|
|
|
expect(modalTitle.innerHTML).toBe(slotContent);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('footer slot', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
vm = mountComponent(modalWithSlot('footer'));
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets the modal footer', () => {
|
|
|
|
const modalFooter = vm.$el.querySelector('.modal-footer');
|
2018-12-13 13:39:08 +05:30
|
|
|
|
2018-03-27 19:54:05 +05:30
|
|
|
expect(modalFooter.innerHTML).toBe(slotContent);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2018-11-08 19:23:39 +05:30
|
|
|
|
|
|
|
describe('handling sizes', () => {
|
|
|
|
it('should render modal-sm', () => {
|
|
|
|
vm = mountComponent(modalComponent, {
|
|
|
|
modalSize: 'sm',
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-sm')).toEqual(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should render modal-lg', () => {
|
|
|
|
vm = mountComponent(modalComponent, {
|
|
|
|
modalSize: 'lg',
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-lg')).toEqual(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should render modal-xl', () => {
|
|
|
|
vm = mountComponent(modalComponent, {
|
|
|
|
modalSize: 'xl',
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-xl')).toEqual(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not add modal size classes when md size is passed', () => {
|
|
|
|
vm = mountComponent(modalComponent, {
|
|
|
|
modalSize: 'md',
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-md')).toEqual(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not add modal size classes by default', () => {
|
|
|
|
vm = mountComponent(modalComponent, {});
|
|
|
|
|
|
|
|
expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-sm')).toEqual(false);
|
|
|
|
expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-lg')).toEqual(false);
|
|
|
|
});
|
|
|
|
});
|
2018-03-27 19:54:05 +05:30
|
|
|
});
|