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

74 lines
2 KiB
JavaScript
Raw Normal View History

2018-03-17 18:26:18 +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 DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
const modalComponent = Vue.extend(DeprecatedModal);
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
describe('DeprecatedModal', () => {
2018-03-17 18:26:18 +05:30
let vm;
afterEach(() => {
vm.$destroy();
});
describe('props', () => {
describe('without primaryButtonLabel', () => {
beforeEach(() => {
vm = mountComponent(modalComponent, {
primaryButtonLabel: null,
});
});
it('does not render a primary button', () => {
expect(vm.$el.querySelector('.js-primary-button')).toBeNull();
});
});
describe('with id', () => {
describe('does not render a primary button', () => {
beforeEach(() => {
vm = mountComponent(modalComponent, {
id: 'my-modal',
});
});
it('assigns the id to the modal', () => {
expect(vm.$el.querySelector('#my-modal.modal')).not.toBeNull();
});
it('does not show the modal immediately', () => {
expect(vm.$el.querySelector('#my-modal.modal')).not.toHaveClass('show');
});
it('does not show a backdrop', () => {
expect(vm.$el.querySelector('modal-backdrop')).toBeNull();
});
});
});
2020-06-23 00:09:42 +05:30
it('works with data-toggle="modal"', () => {
2018-03-17 18:26:18 +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-12-13 13:39:08 +05:30
vm = mountComponent(
modalComponent,
{
id: 'my-modal',
},
modalContainer,
);
2018-03-17 18:26:18 +05:30
const modalElement = vm.$el.querySelector('#my-modal');
2020-06-23 00:09:42 +05:30
expect(modalElement).not.toHaveClass('show');
2018-03-17 18:26:18 +05:30
modalButton.click();
2020-06-23 00:09:42 +05:30
expect(modalElement).toHaveClass('show');
2018-03-17 18:26:18 +05:30
});
});
});