From a408f694a1b9b5c5296906982e559be021c709a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Tue, 27 Dec 2022 17:17:26 +0300 Subject: [PATCH] accordion & sidebar tests added --- components/accordion/Accordion.spec.js | 69 ++++++++++++++++++++------ components/sidebar/Sidebar.spec.js | 58 +++++++++++++++++++++- 2 files changed, 111 insertions(+), 16 deletions(-) diff --git a/components/accordion/Accordion.spec.js b/components/accordion/Accordion.spec.js index 264af4b36..92e8b11d5 100644 --- a/components/accordion/Accordion.spec.js +++ b/components/accordion/Accordion.spec.js @@ -1,4 +1,5 @@ import { mount } from '@vue/test-utils'; +import { expect, it } from 'vitest'; import AccordionTab from '../accordiontab/AccordionTab.vue'; import Accordion from './Accordion.vue'; @@ -14,21 +15,21 @@ describe('Accordion.vue', () => { }, slots: { default: ` - -

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- - -

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi - architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione - voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

- - -

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati - cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. - Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

- ` + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ + +

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi + architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione + voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

+ + +

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati + cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. + Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

+ ` } }); }); @@ -47,4 +48,42 @@ describe('Accordion.vue', () => { expect(allTabs[0].classes()).not.toContain('p-accordion-tab-active'); expect(allTabs[1].classes()).toContain('p-accordion-tab-active'); }); + + it('should work tab click', async () => { + const firstHeader = wrapper.find('a.p-accordion-header-link'); + + await firstHeader.trigger('click'); + + expect(wrapper.emitted()['update:activeIndex'][0]).toEqual([0]); + expect(wrapper.emitted()['tab-click'][0][0].index).toEqual(0); + }); + + it('should open tab with keydown', async () => { + const firstHeader = wrapper.find('a.p-accordion-header-link'); + + await firstHeader.trigger('keydown', { code: 'Enter' }); + + expect(wrapper.emitted()['update:activeIndex'][0]).toEqual([0]); + expect(wrapper.emitted()['tab-open'][0][0].index).toEqual(0); + }); + + it('should close tab with keydown', async () => { + await wrapper.setProps({ activeIndex: 0 }); + + const firstHeader = wrapper.find('a.p-accordion-header-link'); + + await firstHeader.trigger('keydown', { code: 'Enter' }); + + expect(wrapper.emitted()['update:activeIndex'][0]).toEqual([null]); + expect(wrapper.emitted()['tab-close'][0][0].index).toEqual(0); + }); + + it('should work multiple mode', async () => { + const firstHeader = wrapper.find('a.p-accordion-header-link'); + + await wrapper.setProps({ activeIndex: [1], multiple: true }); + await firstHeader.trigger('click'); + + expect(wrapper.emitted()['update:activeIndex'][0]).toEqual([[1, 0]]); + }); }); diff --git a/components/sidebar/Sidebar.spec.js b/components/sidebar/Sidebar.spec.js index 667721749..c6b1b6dcd 100644 --- a/components/sidebar/Sidebar.spec.js +++ b/components/sidebar/Sidebar.spec.js @@ -1,5 +1,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', () => { @@ -18,7 +19,8 @@ describe('Sidebar.vue', () => { bazeZIndex: 1000 }, slots: { - default: `

Left Sidebar

` + default: `

Left Sidebar

`, + header: `Header Template` } }); }); @@ -58,4 +60,58 @@ describe('Sidebar.vue', () => { expect(icon.classes()).toContain('pi-discord'); }); + + 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('should default slot rendered', () => { + expect(wrapper.find('h3').exists()).toBe(true); + expect(wrapper.find('h3').text()).toBe('Left Sidebar'); + }); + + it('should keydown work', async () => { + const event = { code: 'Escape' }; + + await wrapper.vm.onKeydown(event); + + 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); + }); });