@maxpike/vue

/* eslint-disable @typescript-eslint/no-explicit-any */ import { shallowMount, mount } from '@vue/test-utils'; import * as bodyScrollLockModule from 'body-scroll-lock'; import { TModalConfig } from '@variantjs/core'; import TModal from '@/components/TModal.vue'; import plugin from '../../plugin'; const waitUntilModalIsVisible = (wrapper: any) : Promise<void> => new Promise((resolve) => { // 1. Component is added to the DOM wrapper.vm.$nextTick().then(() => { // 2. Overlay is about to show wrapper.vm.$nextTick().then(() => { // 3. Overlay is shown, modal is about to show wrapper.vm.$nextTick().then(() => { // 4 Modal is shown wrapper.vm.$nextTick().then(() => { resolve(); }); }); }); }); }); describe('TModal.vue', () => { it('doesnt show the component by default', () => { const wrapper = shallowMount(TModal); expect(wrapper.vm.$el.tagName).toBeUndefined(); }); describe('opening modal', () => { const props = { teleport: false, }; describe('with the `show` method', () => { it('show the component when calling the show method', async () => { const wrapper = mount(TModal, { props, }); expect(wrapper.vm.showComponent).toBe(false); wrapper.vm.show(); await wrapper.vm.$nextTick(); expect(wrapper.vm.showComponent).toBe(true); }); it('pass parameters from the show method to the before-show event', async () => { const wrapper = mount(TModal, { props, }); const params = { foo: 'bar', }; expect(wrapper.vm.showComponent).toBe(false); wrapper.vm.show(params); await wrapper.vm.$nextTick(); expect(wrapper.vm.showComponent).toBe(true); expect((wrapper.emitted('before-show')![0] as any)[0].params).toEqual(params); }); it('cancel the show if the cancel method is called', async () => { const wrapper = mount(TModal, { props: { ...props, }, }); const emitSpy = jest.spyOn(wrapper.vm.$, 'emit').mockImplementation((name, ...params) => { if (name === 'before-show') { (params as any).cancel(); } }); wrapper.vm.show(); await wrapper.vm.$nextTick(); expect(wrapper.vm.showComponent).toBe(false); emitSpy.mockRestore(); }); }); describe('with the $modal global property', () => { it('show the component when calling the show method', async () => { const wrapper = mount(TModal, { props: { ...props, name: 'modal-name', }, global: { plugins: [plugin], }, }); expect(wrapper.vm.showComponent).toBe(false); wrapper.vm.$modal.show('modal-name'); await wrapper.vm.$nextTick(); expect(wrapper.vm.showComponent).toBe(true); }); it('doesnt show the component when calling the show method if different name', async () => { const wrapper = mount(TModal, { props: { ...props, name: 'other-name', }, global: { plugins: [plugin], }, }); expect(wrapper.vm.showComponent).toBe(false); wrapper.vm.$modal.show('modal-name'); await wrapper.vm.$nextTick(); expect(wrapper.vm.showComponent).toBe(false); }); it('pass parameters from the show method to the before-show event', async () => { const wrapper = mount(TModal, { props: { ...props, name: 'modal-name', }, global: { plugins: [plugin], }, }); const params = { foo: 'bar', }; expect(wrapper.vm.showComponent).toBe(false); wrapper.vm.$modal.show('modal-name', params); await wrapper.vm.$nextTick(); expect(wrapper.vm.showComponent).toBe(true); expect((wrapper.emitted('before-show')![0] as any)[0].params).toEqual(params); }); it('cancel the show if the cancel method is called', async () => { const wrapper = mount(TModal, { props: { ...props, name: 'modal-name', }, global: { plugins: [plugin], }, }); const emitSpy = jest.spyOn(wrapper.vm.$, 'emit').mockImplementation((name, ...params) => { if (name === 'before-show') { (params as any).cancel(); } }); wrapper.vm.$modal.show('modal-name'); await wrapper.vm.$nextTick(); expect(wrapper.vm.showComponent).toBe(false); emitSpy.mockRestore(); }); }); describe('with the vModel', () => { it('show the component when updated the v-model to true', async () => { const wrapper = mount(TModal, { props, }); expect(wrapper.vm.showComponent).toBe(false); wrapper.setProps({ modelValue: true, }); await wrapper.vm.$nextTick(); expect(wrapper.vm.showComponent).toBe(true); }); }); }); describe('hiding modal', () => { const props = { teleport: false, modelValue: true, }; describe('with the `hide` method', () => { it('hides the component when calling the hide method', async () => { const wrapper = mount(TModal, { props, }); expect(wrapper.vm.showModal).toBe(true); wrapper.vm.hide(); await wrapper.vm.$nextTick(); expect(wrapper.vm.showModal).toBe(false); }); it('cancel the hide if the cancel method is called', async () => { const wrapper = mount(TModal, { props, }); const emitSpy = jest.spyOn(wrapper.vm.$, 'emit').mockImplementation((name, ...params) => { if (name === 'before-hide') { (params as any).cancel(); } }); wrapper.vm.hide(); await wrapper.vm.$nextTick(); expect(wrapper.vm.showModal).toBe(true); emitSpy.mockRestore(); }); }); describe('with the $modal global property', () => { it('show the component when calling the show method', async () => { const wrapper = mount(TModal, { props: { ...props, name: 'modal-name', }, global: { plugins: [plugin], }, }); expect(wrapper.vm.showModal).toBe(true); wrapper.vm.$modal.hide('modal-name'); await wrapper.vm.$nextTick(); expect(wrapper.vm.showModal).toBe(false); }); it('doesnt show the component when calling the show method if different name', async () => { const wrapper = mount(TModal, { props: { ...props, name: 'other-name', }, global: { plugins: [plugin], }, }); expect(wrapper.vm.showModal).toBe(true); wrapper.vm.$modal.hide('modal-name'); await wrapper.vm.$nextTick(); expect(wrapper.vm.showModal).toBe(true); }); it('cancel the show if the cancel method is called', async () => { const wrapper = mount(TModal, { props: { ...props, name: 'modal-name', }, global: { plugins: [plugin], }, }); const emitSpy = jest.spyOn(wrapper.vm.$, 'emit').mockImplementation((name, ...params) => { if (name === 'before-hide') { (params as any).cancel(); } }); wrapper.vm.$modal.hide('modal-name'); await wrapper.vm.$nextTick(); expect(wrapper.vm.showModal).toBe(true); emitSpy.mockRestore(); }); }); describe('with the vModel', () => { it('hides the component when updated the v-model to false', async () => { const wrapper = mount(TModal, { props, }); expect(wrapper.vm.showModal).toBe(true); wrapper.setProps({ modelValue: false, }); await wrapper.vm.$nextTick(); expect(wrapper.vm.showModal).toBe(false); }); }); }); describe('modal is shown initially', () => { const props = { modelValue: true, teleport: false, }; it('show the component if modelValue is set to `true`', () => { const wrapper = mount(TModal, { props, slots: { default: 'Hello World', }, }); expect(wrapper.html()).toContain('Hello World'); }); describe('disable body scroll', () => { it('disables the body scroll', () => { const disableBodyScrollSpy = jest.spyOn(bodyScrollLockModule, 'disableBodyScroll'); mount(TModal, { props, }); expect(disableBodyScrollSpy).toHaveBeenCalled(); disableBodyScrollSpy.mockRestore(); }); it('doesnt disabled the body scroll if `disableBodyScroll` is set to `false`', () => { const disableBodyScrollSpy = jest.spyOn(bodyScrollLockModule, 'disableBodyScroll'); mount(TModal, { props: { ...props, disableBodyScroll: false, }, }); expect(disableBodyScrollSpy).not.toHaveBeenCalled(); disableBodyScrollSpy.mockRestore(); }); }); describe('enable body scroll', () => { it('enables body scroll when unmounted', () => { const enableBodyScrollSpy = jest.spyOn(bodyScrollLockModule, 'enableBodyScroll'); const wrapper = mount(TModal, { props, }); wrapper.unmount(); expect(enableBodyScrollSpy).toHaveBeenCalled(); enableBodyScrollSpy.mockRestore(); }); it('doesnt enables body scroll when unmounted if `disableBodyScroll` is set to `false`', () => { const enableBodyScrollSpy = jest.spyOn(bodyScrollLockModule, 'enableBodyScroll'); const wrapper = mount(TModal, { props: { ...props, disableBodyScroll: false, }, }); wrapper.unmount(); expect(enableBodyScrollSpy).not.toHaveBeenCalled(); enableBodyScrollSpy.mockRestore(); }); it('enables body scroll when modal is closed', async () => { const enableBodyScrollSpy = jest.spyOn(bodyScrollLockModule, 'enableBodyScroll'); const wrapper = mount(TModal, { props, }); wrapper.vm.hide(); // Whole close lifecycle await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); expect(enableBodyScrollSpy).toHaveBeenCalled(); enableBodyScrollSpy.mockRestore(); }); it('doesnt enables body scroll when modal is closed if `disableBodyScroll` is set to `false`', async () => { const enableBodyScrollSpy = jest.spyOn(bodyScrollLockModule, 'enableBodyScroll'); const wrapper = mount(TModal, { props: { ...props, disableBodyScroll: false, }, }); wrapper.vm.hide(); // Whole close lifecycle await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); expect(enableBodyScrollSpy).not.toHaveBeenCalled(); enableBodyScrollSpy.mockRestore(); }); }); describe('focus overlay', () => { it('focus the overlay', () => { const focusSpy = jest.spyOn(HTMLElement.prototype, 'focus'); mount(TModal, { props, }); expect(focusSpy).toHaveBeenCalled(); focusSpy.mockRestore(); }); it('doesnt focus the overlay if `focusOnOpen` is set to `false`', () => { const focusSpy = jest.spyOn(HTMLElement.prototype, 'focus'); mount(TModal, { props: { ...props, focusOnOpen: false, }, }); expect(focusSpy).not.toHaveBeenCalled(); focusSpy.mockRestore(); }); }); it('emits the hide-related events in order', async () => { const wrapper = mount(TModal, { props, }); expect(wrapper.emitted('before-hide')).toBeFalsy(); expect(wrapper.emitted('hidden')).toBeFalsy(); wrapper.vm.hide(); // After press hidden it just change the modelValue, no events yet expect(wrapper.emitted('before-hide')).toBeFalsy(); expect(wrapper.emitted('hidden')).toBeFalsy(); // Model is about to hide await wrapper.vm.$nextTick(); expect(wrapper.emitted('before-hide')).toBeTruthy(); expect(Object.keys((wrapper.emitted('before-hide')![0] as any)[0])).toEqual([ 'cancel', 'reason', ]); expect(wrapper.emitted('hidden')).toBeFalsy(); // Modal is hidden, overlay is about to hide (no new events emitted) await wrapper.vm.$nextTick(); expect(wrapper.emitted('before-hide')).toBeTruthy(); expect(wrapper.emitted('hidden')).toBeFalsy(); // Overlay is hidden, component is about to be removed from the DOM (no new events emitted) await wrapper.vm.$nextTick(); expect(wrapper.emitted('before-hide')).toBeTruthy(); expect(wrapper.emitted('hidden')).toBeFalsy(); // component is removed from the DOM await wrapper.vm.$nextTick(); expect(wrapper.emitted('before-hide')).toBeTruthy(); expect(wrapper.emitted('hidden')).toBeTruthy(); }); describe('press esc key', () => { it('hides the modal when press esc', async () => { const wrapper = mount(TModal, { props, }); wrapper.vm.$refs.overlay.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', })); await wrapper.vm.$nextTick(); // Meaning the modal was hidden expect(wrapper.vm.$.setupState.showModal).toBe(false); }); it('doesnt hide the modal when press esc if `escToClose` is set to `false`', async () => { const wrapper = mount(TModal, { props: { ...props, escToClose: false, }, }); wrapper.vm.$refs.overlay.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', })); await wrapper.vm.$nextTick(); // Meaning the modal was hidden expect(wrapper.vm.$.setupState.showModal).toBe(true); }); }); describe('user clicks the overlay (outside)', () => { it('hides the modal when clicks outside', async () => { const wrapper = mount(TModal, { props, }); wrapper.vm.$refs.overlay.dispatchEvent(new MouseEvent('click')); await wrapper.vm.$nextTick(); // Meaning the modal was hidden expect(wrapper.vm.$.setupState.showModal).toBe(false); }); it('doesnt hides the modal when clicks the modal', async () => { const wrapper = mount(TModal, { props, }); wrapper.vm.$refs.modal.dispatchEvent(new MouseEvent('click')); await wrapper.vm.$nextTick(); // Meaning the modal was hidden expect(wrapper.vm.$.setupState.showModal).toBe(true); }); it('doesnt hide the modal when click outside if `clickToClose` is set to `false`', async () => { const wrapper = mount(TModal, { props: { ...props, clickToClose: false, }, }); wrapper.vm.$refs.overlay.dispatchEvent(new MouseEvent('click')); await wrapper.vm.$nextTick(); // Meaning the modal was hidden expect(wrapper.vm.$.setupState.showModal).toBe(true); }); }); }); describe('modal is hidden initially', () => { const props = { teleport: false, }; it('focus the overlay when shown', async () => { const focusSpy = jest.spyOn(HTMLElement.prototype, 'focus'); const wrapper = mount(TModal, { props, }); expect(focusSpy).not.toHaveBeenCalled(); wrapper.vm.show(); await waitUntilModalIsVisible(wrapper); expect(focusSpy).toHaveBeenCalled(); focusSpy.mockRestore(); }); it('emits the open-related events in order', async () => { const wrapper = mount(TModal, { props, }); expect(wrapper.emitted('before-show')).toBeFalsy(); expect(wrapper.emitted('shown')).toBeFalsy(); wrapper.vm.show(); // After press shown it just adds the component into the DOM, no events emitted yet expect(wrapper.emitted('before-show')).toBeFalsy(); expect(wrapper.emitted('shown')).toBeFalsy(); // Component is added to the DOM, but not shown yet await wrapper.vm.$nextTick(); expect(wrapper.emitted('before-show')).toBeTruthy(); expect(Object.keys((wrapper.emitted('before-show')![0] as any)[0])).toEqual([ 'cancel', 'params', ]); expect(wrapper.emitted('shown')).toBeFalsy(); // Overlay is about to show (no new events emitted) await wrapper.vm.$nextTick(); expect(wrapper.emitted('before-show')).toBeTruthy(); expect(wrapper.emitted('shown')).toBeFalsy(); // Overlay is shown, modal is about to show (no new events emitted) await wrapper.vm.$nextTick(); expect(wrapper.emitted('before-show')).toBeTruthy(); expect(wrapper.emitted('shown')).toBeFalsy(); // Modal is shown await wrapper.vm.$nextTick(); expect(wrapper.emitted('before-show')).toBeTruthy(); expect(wrapper.emitted('shown')).toBeTruthy(); }); }); describe('classes', () => { const props = { teleport: false, }; it('creates the overlayTransitionClassesList computed property from default configuration', () => { const wrapper = mount(TModal, { props, }); expect(wrapper.vm.overlayTransitionClassesList).toEqual({ enterActiveClass: TModalConfig.classes.overlayEnterActiveClass, enterFromClass: TModalConfig.classes.overlayEnterFromClass, enterToClass: TModalConfig.classes.overlayEnterToClass, leaveActiveClass: TModalConfig.classes.overlayLeaveActiveClass, leaveFromClass: TModalConfig.classes.overlayLeaveFromClass, leaveToClass: TModalConfig.classes.overlayLeaveToClass, }); }); }); });