accordion & sidebar tests added
Tuğçe Küçükoğlu
parent
021c78db1b
commit
a408f694a1
|
|
@ -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">
|
||||
<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.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</AccordionTab>
|
||||
<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
|
||||
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>
|
||||
</AccordionTab>
|
||||
<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
|
||||
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>
|
||||
</AccordionTab>`
|
||||
<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
|
||||
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>
|
||||
</AccordionTab>
|
||||
<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
|
||||
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>
|
||||
</AccordionTab>
|
||||
<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
|
||||
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>
|
||||
</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]]);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue