diff options
Diffstat (limited to 'spec/frontend/admin/users/components/modals/user_modal_manager_spec.js')
-rw-r--r-- | spec/frontend/admin/users/components/modals/user_modal_manager_spec.js | 126 |
1 files changed, 126 insertions, 0 deletions
diff --git a/spec/frontend/admin/users/components/modals/user_modal_manager_spec.js b/spec/frontend/admin/users/components/modals/user_modal_manager_spec.js new file mode 100644 index 00000000000..65ce242662b --- /dev/null +++ b/spec/frontend/admin/users/components/modals/user_modal_manager_spec.js @@ -0,0 +1,126 @@ +import { mount } from '@vue/test-utils'; +import UserModalManager from '~/admin/users/components/modals/user_modal_manager.vue'; +import ModalStub from './stubs/modal_stub'; + +describe('Users admin page Modal Manager', () => { + let wrapper; + + const modalConfiguration = { + action1: { + title: 'action1', + content: 'Action Modal 1', + }, + action2: { + title: 'action2', + content: 'Action Modal 2', + }, + }; + + const findModal = () => wrapper.find({ ref: 'modal' }); + + const createComponent = (props = {}) => { + wrapper = mount(UserModalManager, { + propsData: { + selector: '.js-delete-user-modal-button', + modalConfiguration, + csrfToken: 'dummyCSRF', + ...props, + }, + stubs: { + DeleteUserModal: ModalStub, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + describe('render behavior', () => { + it('does not renders modal when initialized', () => { + createComponent(); + expect(findModal().exists()).toBeFalsy(); + }); + + it('throws if action has no proper configuration', () => { + createComponent({ + modalConfiguration: {}, + }); + expect(() => wrapper.vm.show({ glModalAction: 'action1' })).toThrow(); + }); + + it('renders modal with expected props when valid configuration is passed', () => { + createComponent(); + wrapper.vm.show({ + glModalAction: 'action1', + extraProp: 'extraPropValue', + }); + + return wrapper.vm.$nextTick().then(() => { + const modal = findModal(); + expect(modal.exists()).toBeTruthy(); + expect(modal.vm.$attrs.csrfToken).toEqual('dummyCSRF'); + expect(modal.vm.$attrs.extraProp).toEqual('extraPropValue'); + expect(modal.vm.showWasCalled).toBeTruthy(); + }); + }); + }); + + describe('click handling', () => { + let button; + let button2; + + const createButtons = () => { + button = document.createElement('button'); + button2 = document.createElement('button'); + button.setAttribute('class', 'js-delete-user-modal-button'); + button.setAttribute('data-username', 'foo'); + button.setAttribute('data-gl-modal-action', 'action1'); + button.setAttribute('data-block-user-url', '/block'); + button.setAttribute('data-delete-user-url', '/delete'); + document.body.appendChild(button); + document.body.appendChild(button2); + }; + const removeButtons = () => { + button.remove(); + button = null; + button2.remove(); + button2 = null; + }; + + beforeEach(() => { + createButtons(); + createComponent(); + }); + + afterEach(() => { + removeButtons(); + }); + + it('renders the modal when the button is clicked', async () => { + button.click(); + + await wrapper.vm.$nextTick(); + + expect(findModal().exists()).toBe(true); + }); + + it('does not render the modal when a misconfigured button is clicked', async () => { + button.removeAttribute('data-gl-modal-action'); + button.click(); + + await wrapper.vm.$nextTick(); + + expect(findModal().exists()).toBe(false); + }); + + it('does not render the modal when a button without the selector class is clicked', async () => { + button2.click(); + + await wrapper.vm.$nextTick(); + + expect(findModal().exists()).toBe(false); + }); + }); +}); |