accordion & sidebar tests added

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: `
-                <AccordionTab header="Header I">
+                    <AccordionTab header="Header I">
-                    <p>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
+                        <p>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.
+                            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.</p>
+                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-                </AccordionTab>
+                    </AccordionTab>
-                <AccordionTab header="Header II">
+                    <AccordionTab header="Header II">
-                    <p>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
+                        <p>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
+                            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.</p>
+                            voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
-                </AccordionTab>
+                    </AccordionTab>
-                <AccordionTab header="Header III">
+                    <AccordionTab header="Header III">
-                    <p>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
+                        <p>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.
+                            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.</p>
+                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
-                </AccordionTab>`
+                    </AccordionTab>`
             }
         });
     });
@@ -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]]);
+    });
 });

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: `<h3>Left Sidebar</h3>`
+                default: `<h3>Left Sidebar</h3>`,
+                header: `<span class="header">Header Template</span>`
             }
         });
     });
@@ -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);
+    });
 });