diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/deprecated_modal_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/deprecated_modal_spec.js | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/deprecated_modal_spec.js b/spec/frontend/vue_shared/components/deprecated_modal_spec.js new file mode 100644 index 00000000000..b9793ce2d80 --- /dev/null +++ b/spec/frontend/vue_shared/components/deprecated_modal_spec.js @@ -0,0 +1,73 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue'; + +const modalComponent = Vue.extend(DeprecatedModal); + +describe('DeprecatedModal', () => { + 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(); + }); + }); + }); + + it('works with data-toggle="modal"', () => { + 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'); + vm = mountComponent( + modalComponent, + { + id: 'my-modal', + }, + modalContainer, + ); + const modalElement = vm.$el.querySelector('#my-modal'); + + expect(modalElement).not.toHaveClass('show'); + + modalButton.click(); + + expect(modalElement).toHaveClass('show'); + }); + }); +}); |