From 33ac6be80c5d46eff644b2db0e22d7e83cfd06d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= Date: Wed, 4 Jan 2023 02:14:50 +0300 Subject: [PATCH] Sidebar unit test completed --- components/sidebar/Sidebar.spec.js | 122 +++++++++++++---------------- components/sidebar/Sidebar.vue | 2 +- 2 files changed, 56 insertions(+), 68 deletions(-) diff --git a/components/sidebar/Sidebar.spec.js b/components/sidebar/Sidebar.spec.js index c6b1b6dcd..355bc4608 100644 --- a/components/sidebar/Sidebar.spec.js +++ b/components/sidebar/Sidebar.spec.js @@ -2,7 +2,6 @@ import { mount } from '@vue/test-utils'; import PrimeVue from 'primevue/config'; import { describe, expect, it } from 'vitest'; import Sidebar from './Sidebar.vue'; - describe('Sidebar.vue', () => { let wrapper; @@ -15,7 +14,7 @@ describe('Sidebar.vue', () => { } }, props: { - visible: true, + visible: false, bazeZIndex: 1000 }, slots: { @@ -23,95 +22,84 @@ describe('Sidebar.vue', () => { header: `Header Template` } }); + wrapper.setProps({ visible: true }); }); - it('should exist', () => { + afterEach(() => { + vi.clearAllMocks(); + }); + + it('When component is mounted, sidebar should be exist', () => { expect(wrapper.find('.p-sidebar.p-component').exists()).toBe(true); expect(wrapper.find('.p-sidebar').classes()).toContain('p-sidebar-left'); - expect(wrapper.find('.p-sidebar').classes()).toContain('p-sidebar-active'); }); - it('should close', async () => { - await wrapper.vm.hide(); + it('When mask element triggered, sidebar should be hide', async () => { + const unbindOutsideClickListenerSpy = vi.spyOn(wrapper.vm, 'unbindOutsideClickListener'); - expect(wrapper.emitted()['update:visible'][0]).toEqual([false]); + await wrapper.find('.p-sidebar-mask').trigger('mousedown'); - await wrapper.setProps({ visible: false }); - - expect(wrapper.find('.p-sidebar.p-component').exists()).toBe(false); + expect(wrapper.emitted()['update:visible'].length).toBe(1); + expect(unbindOutsideClickListenerSpy).toHaveBeenCalled(); }); - it('should set position', async () => { - await wrapper.setProps({ position: 'bottom' }); + it('When transition trigger to onEnter, sidebar should be visible', async () => { + const focusSpy = vi.spyOn(wrapper.vm, 'focus'); - expect(wrapper.find('.p-sidebar').classes()).toContain('p-sidebar-bottom'); + await wrapper.vm.onEnter(); + + expect(wrapper.emitted().show.length).toBe(1); + expect(wrapper.vm.maskVisible).toBeTruthy(); + expect(focusSpy).toHaveBeenCalled(); }); - it('should set position', async () => { - await wrapper.setProps({ position: 'full' }); + it('When transition trigger to onLeave, unbindOutsideClickListener should be triggered', async () => { + const unbindOutsideClickListenerSpy = vi.spyOn(wrapper.vm, 'unbindOutsideClickListener'); - expect(wrapper.vm.fullScreen).toBe(true); - expect(wrapper.find('.p-sidebar').classes()).toContain('p-sidebar-full'); + await wrapper.vm.onLeave(); + + expect(wrapper.emitted().hide.length).toBe(1); + expect(unbindOutsideClickListenerSpy).toHaveBeenCalled(); }); - it('should have custom close icon when provided', async () => { - await wrapper.setProps({ closeIcon: 'pi pi-discord' }); - const icon = wrapper.find('.p-sidebar-close-icon'); + it('When transition trigger to onAfterEnter, bindOutsideClickListener should be triggered', async () => { + const bindOutsideClickListenerSpy = vi.spyOn(wrapper.vm, 'bindOutsideClickListener'); - expect(icon.classes()).toContain('pi-discord'); + await wrapper.vm.onAfterEnter(); + + expect(bindOutsideClickListenerSpy).toHaveBeenCalled(); }); - it('should header slot rendered', () => { - expect(wrapper.find('.p-sidebar-header').exists()).toBe(true); - expect(wrapper.find('.p-sidebar-header-content').exists()).toBe(true); - expect(wrapper.find('span.header').exists()).toBe(true); - expect(wrapper.find('span.header').text()).toBe('Header Template'); + /* it('When transition trigger to onAfterLeave, bindOutsideClickListener should be triggered', async () => { + const bindOutsideClickListenerSpy = vi.spyOn(wrapper.vm, 'bindOutsideClickListener'); + + await wrapper.vm.onAfterLeave(); + + expect(bindOutsideClickListenerSpy).toHaveBeenCalled(); + }); */ + + it('When keydown is triggered , hide method should be triggered', async () => { + const hideSpy = vi.spyOn(wrapper.vm, 'hide'); + + await wrapper.find('.p-sidebar').trigger('keydown', { code: 'Escape' }); + + expect(hideSpy).toHaveBeenCalled(); }); - it('should default slot rendered', () => { - expect(wrapper.find('h3').exists()).toBe(true); - expect(wrapper.find('h3').text()).toBe('Left Sidebar'); + it('When keydown is triggered , hide method should be triggered', async () => { + const hideSpy = vi.spyOn(wrapper.vm, 'hide'); + + await wrapper.find('.p-sidebar-close').trigger('click'); + + expect(hideSpy).toHaveBeenCalled(); }); - it('should keydown work', async () => { - const event = { code: 'Escape' }; + it('When component is unmount , unbindOutsideClickListenerSpy method should be triggered', async () => { + const unbindOutsideClickListenerSpy = vi.spyOn(wrapper.vm, 'unbindOutsideClickListener'); - await wrapper.vm.onKeydown(event); + await wrapper.unmount(); - expect(wrapper.emitted()['update:visible'][0]).toEqual([false]); - }); -}); - -describe('when visible is false', () => { - let wrapper; - - beforeEach(() => { - wrapper = mount(Sidebar, { - global: { - plugins: [PrimeVue], - stubs: { - teleport: true, - transition: false - } - }, - props: { - visible: true, - bazeZIndex: 1000 - } - }); - }); - - it('should show and hide emit work', async () => { - expect(wrapper.emitted()['show'][0]).toEqual([]); - - await wrapper.setProps({ visible: false }); - - expect(wrapper.emitted()['hide'][0]).toEqual([]); - }); - - it('should be destroyed', () => { - wrapper.unmount(); - expect(wrapper.componentVM.container).toBe(null); - expect(wrapper.componentVM.mask).toBe(null); + expect(unbindOutsideClickListenerSpy).toHaveBeenCalled(); + expect(Sidebar.container).toBe(null); }); }); diff --git a/components/sidebar/Sidebar.vue b/components/sidebar/Sidebar.vue index 4d0a8b328..2364098b0 100755 --- a/components/sidebar/Sidebar.vue +++ b/components/sidebar/Sidebar.vue @@ -96,7 +96,7 @@ export default { hide() { this.$emit('update:visible', false); - this.outsideClickListener && this.unbindOutsideClickListener(); + this.unbindOutsideClickListener(); this.blockScroll && DomHandler.removeClass(document.body, 'p-overflow-hidden'); }, onEnter() {