Merge pull request #2402 from tugcekucukoglu/testing

Testing

src/components/slider/Slider.spec.js

@@ -0,0 +1,49 @@
+import { mount } from '@vue/test-utils';
+import Slider from './Slider.vue';
+
+describe('Slider.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(Slider, {
+            props: {
+                modelValue: null
+            }
+        });
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-slider.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-slider').classes()).toContain('p-slider-horizontal');
+    });
+
+    it('should drag start and end', async () => {
+        await wrapper.vm.onDragStart({ preventDefault: () => {} });
+
+        expect(wrapper.find('.p-slider').classes()).toContain('p-slider-sliding');
+
+        await wrapper.vm.onDragEnd();
+
+        expect(wrapper.find('.p-slider').classes()).not.toContain('p-slider-sliding');
+    });
+
+    it('should set value', async () => {
+        wrapper.element.setAttribute('width', '14rem');
+
+        await wrapper.vm.updateDomData();
+
+        await wrapper.vm.setValue({ pageX: 60 }); // TODO: 
+
+        expect(wrapper.emitted()['update:modelValue'][0][0]).toBeGreaterThan(0);
+    });
+
+    it('should set value on vertical mode', async () => {
+        await wrapper.setProps({ orientation: 'vertical', modelValue: 0 });
+
+        await wrapper.vm.updateDomData();
+
+        await wrapper.vm.setValue({ pageY: 111 }); // TODO:
+
+        expect(wrapper.emitted()['update:modelValue'][0][0]).toBeGreaterThan(0);
+    });
+});

src/components/speeddial/SpeedDial.spec.js

@@ -0,0 +1,97 @@
+import { mount } from '@vue/test-utils';
+import SpeedDial from './SpeedDial.vue';
+
+describe('SpeedDial.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(SpeedDial, {
+            props: {
+                model: [
+                    {
+                        label: 'Add',
+                        icon: 'pi pi-pencil'
+                    },
+                    {
+                        label: 'Update',
+                        icon: 'pi pi-refresh'
+                    },
+                    {
+                        label: 'Delete',
+                        icon: 'pi pi-trash'
+                    },
+                    {
+                        label: 'Upload',
+                        icon: 'pi pi-upload',
+                        command: () => {
+                            window.location.hash = "/fileupload"
+                        }
+                    },
+                    {
+                        label: 'Vue Website',
+                        icon: 'pi pi-external-link',
+                        command: () => {
+                            window.location.href = 'https://vuejs.org/'
+                        }
+                    }
+                ],
+                direction: 'down'
+            }
+        });
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-speeddial.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-speeddial').classes()).toContain('p-speeddial-direction-down');
+        expect(wrapper.findAll('li.p-speeddial-item').length).toEqual(5);
+    });
+
+    it('should show the list', async () => {
+        await wrapper.vm.onClick({});
+
+        expect(wrapper.emitted()['click'][0]).toEqual([{}]);
+        expect(wrapper.emitted()['show'][0]).toEqual([]);
+        expect(wrapper.find('.p-speeddial').classes()).toContain('p-speeddial-opened');
+        expect(wrapper.findAll('li.p-speeddial-item')[0].attributes().style).toBe('transition-delay: 0ms;');
+    });
+
+    it('should hide the list', async () => {
+        await wrapper.setProps({ visible: true });
+
+        await wrapper.vm.onClick({});
+
+        expect(wrapper.find('.p-speeddial').classes()).not.toContain('p-speeddial-opened');
+        expect(wrapper.findAll('li.p-speeddial-item')[wrapper.findAll('li.p-speeddial-item').length - 1].attributes().style).toBe('transition-delay: 0ms;');
+    });
+
+    it('should have radius and type', async () => {
+        await wrapper.setProps({ radius: 80, direction: 'left', type: 'semi-circle' });
+
+        expect(wrapper.find('.p-speeddial').classes()).toContain('p-speeddial-semi-circle');
+        expect(wrapper.find('.p-speeddial').classes()).toContain('p-speeddial-direction-left');
+    });
+
+    it('should transition delay', async () => {
+        await wrapper.setProps({ transitionDelay: 80 });
+
+        expect(wrapper.findAll('li.p-speeddial-item')[wrapper.findAll('li.p-speeddial-item').length - 2].attributes().style).toBe('transition-delay: 80ms;');
+    });
+
+    it('should have show and hide icons', async () => {
+        await wrapper.setProps({ showIcon: 'pi pi-bars', hideIcon: 'pi pi-times' });
+
+        const button = wrapper.find('.p-speeddial-button');
+
+        expect(button.find('span').classes()).toContain('pi-bars');
+
+        await wrapper.vm.onClick({});
+
+        expect(button.find('span').classes()).toContain('pi-times');
+    });
+
+    it('should have mask', async () => {
+        await wrapper.setProps({ mask: true });
+
+        expect(wrapper.find('.p-speeddial-mask').exists()).toBe(true);
+    });
+});

src/components/splitbutton/SplitButton.spec.js

@@ -0,0 +1,59 @@
+import { mount } from '@vue/test-utils';
+import PrimeVue from '@/components/config/PrimeVue';
+import SplitButton from './SplitButton.vue';
+
+describe('SplitButton.vue', () => {
+    let wrapper;
+
+    beforeEach(async () => {
+        wrapper = mount(SplitButton, {
+            global: {
+                plugins: [PrimeVue],
+                stubs: {
+                    teleport: true,
+                    'router-link': true
+                }
+            },
+            props: {
+                label: 'Save',
+                model: [
+                    {
+                        label: 'Update',
+                        icon: 'pi pi-refresh'
+                    },
+                    {
+                        label: 'Delete',
+                        icon: 'pi pi-times'
+                    },
+                    {
+                        label: 'Vue Website',
+                        icon: 'pi pi-external-link',
+                        command: () => {
+                            window.location.href = 'https://vuejs.org/'
+                        }
+                    },
+                    {   label: 'Upload',
+                        icon: 'pi pi-upload',
+                        to: '/fileupload'
+                    }
+                ]
+            }
+        });
+
+        await wrapper.vm.onDropdownButtonClick();
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-splitbutton.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-tieredmenu.p-component').exists()).toBe(true);
+        expect(wrapper.findAll('li.p-menuitem').length).toBe(4);
+        expect(wrapper.find('.p-splitbutton-defaultbutton').exists()).toBe(true);
+        expect(wrapper.find('.p-button-label').text()).toBe('Save');
+    });
+
+    it('should hide when default button is clicked', async () => {
+        await wrapper.vm.onDefaultButtonClick();
+
+        expect(wrapper.find('.p-tieredmenu.p-component').exists()).toBe(false);
+    });
+});

src/components/splitter/Splitter.spec.js

@@ -0,0 +1,42 @@
+import { mount } from '@vue/test-utils';
+import Splitter from './Splitter.vue';
+import SplitterPanel from '@/components/splitterpanel/SplitterPanel.vue';
+
+describe('Splitter.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(Splitter, {
+            global: {
+                components: {
+                    SplitterPanel
+                }
+            },
+            slots: {
+                default: `
+                    <SplitterPanel class="flex align-items-center justify-content-center">
+                        Panel 1
+                    </SplitterPanel>
+                    <SplitterPanel class="flex align-items-center justify-content-center">
+                        Panel 2
+                    </SplitterPanel>
+                `
+            }
+        });
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-splitter.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-splitter').classes()).toContain('p-splitter-horizontal');
+        expect(wrapper.findAll('.p-splitter-panel').length).toBe(2);
+        expect(wrapper.find('.p-splitter-gutter-handle').exists()).toBe(true);
+    });
+
+    it('should mousedown', async () => {
+        const gutter = wrapper.find('.p-splitter-gutter-handle').element;
+        const siblings = wrapper.findAll('.p-splitter-panel');
+        await wrapper.vm.onGutterMouseDown({ currentTarget: {gutter, previousElementSibling: siblings[0].element, nextElementSibling: siblings[1].element }, pageX: 123 }, 0);
+        
+        expect(wrapper.find('.p-splitter').classes()).toContain('p-splitter-resizing');
+    });
+});

src/components/splitterpanel/SplitterPanel.spec.js

@@ -0,0 +1,23 @@
+import { mount } from '@vue/test-utils';
+import SplitterPanel from './SplitterPanel.vue';
+
+describe('SplitterPanel.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(SplitterPanel, {
+            attrs: {
+                class: 'flex align-items-center justify-content-center'
+            },
+            slots: {
+                default: 'Panel 1'
+            }
+        });
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-splitter-panel').exists()).toBe(true);
+        expect(wrapper.attributes().class).toBe('p-splitter-panel flex align-items-center justify-content-center');
+        expect(wrapper.find('.p-splitter-panel').text()).toBe('Panel 1');
+    });
+});

src/components/tabview/TabView.spec.js

@@ -0,0 +1,74 @@
+import { mount } from '@vue/test-utils';
+import TabView from './TabView.vue';
+import TabPanel from '@/components/tabpanel/TabPanel.vue';
+
+describe('TabPanel.vue', () => {
+    let wrapper;
+
+    window.HTMLElement.prototype.scrollIntoView = function() {};
+
+    beforeEach(() => {
+        wrapper = mount(TabView, {
+            global: {
+                components: {
+                    TabPanel
+                }    
+            },
+            slots: {
+                default: `
+                    <TabPanel header="Header I">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
+                    </TabPanel>
+                    <TabPanel header="Header II">
+                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
+                    </TabPanel>
+                    <TabPanel header="Header III">
+                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui</p>
+                    </TabPanel>
+                `
+            }
+        });
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-tabview.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-tabview-ink-bar').exists()).toBe(true);
+        expect(wrapper.findAll('a.p-tabview-nav-link').length).toBe(3);
+        expect(wrapper.findAll('.p-tabview-panel').length).toBe(3);
+        expect(wrapper.findAll('li[role="presentation"]')[0].classes()).toContain('p-highlight');
+        expect(wrapper.findAll('.p-tabview-panel')[1].attributes().style).toBe('display: none;');
+    });
+
+    it('should change the active item', async () => {
+        await wrapper.vm.onTabClick({}, 1);
+
+        expect(wrapper.findAll('li[role="presentation"]')[1].classes()).toContain('p-highlight');
+        expect(wrapper.findAll('.p-tabview-panel')[0].attributes().style).toBe('display: none;');
+    });
+});
+
+describe('dynamic tabs', () => {
+    it('should exist', () => {
+        const wrapper = mount(TabView, {
+            global: {
+                components: {
+                    TabPanel
+                }    
+            },
+            slots: {
+                default: `
+                    <TabPanel v-for="tab in Array.from({ length: 5 }, (_, i) => ({ title: \`Tab \${i + 1}\`, content: \`Tab \${i + 1} Content\` }))" :key="tab.title" :header="tab.title">
+                        <p>{{tab.content}}</p>
+                    </TabPanel>
+                `
+            }
+        });
+
+        expect(wrapper.find('.p-tabview.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-tabview-ink-bar').exists()).toBe(true);
+        expect(wrapper.findAll('a.p-tabview-nav-link').length).toBe(5);
+        expect(wrapper.findAll('.p-tabview-panel').length).toBe(5);
+        expect(wrapper.findAll('li[role="presentation"]')[0].classes()).toContain('p-highlight');
+        expect(wrapper.findAll('.p-tabview-panel')[1].attributes().style).toBe('display: none;');
+    });
+});

src/components/textarea/Textarea.spec.js

@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils';
+import Textarea from './Textarea.vue';
+
+describe('Textarea.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(Textarea, {
+            props: {
+                modelValue: '',
+                rows: 1,
+                cols: 1
+            }
+        });
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-inputtextarea.p-component').exists()).toBe(true);
+        expect(wrapper.attributes().rows).toBe('1');
+        expect(wrapper.attributes().cols).toBe('1');
+    });
+
+    it('should be autoresized', async () => {
+        await wrapper.setProps({ autoResize: true });
+
+        expect(wrapper.find('.p-inputtextarea-resizable').exists()).toBe(true);
+    });
+
+    it('should input', async () => {
+        await wrapper.vm.onInput({ target: { value: 'primevue' } });
+
+        expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['primevue']);
+    });
+
+    it('should resize', async () => {
+        const firstHeight = wrapper.attributes().style;
+        
+        await wrapper.setProps({ autoResize: true });
+
+        await wrapper.vm.onInput({ target: { value: 'primevue' } });
+
+        expect(wrapper.attributes().style).not.toEqual(firstHeight);
+    });
+});

src/components/timeline/Timeline.spec.js

@@ -0,0 +1,83 @@
+import { mount } from '@vue/test-utils';
+import Timeline from './Timeline.vue';
+
+describe('Timeline.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(Timeline, {
+            props: {
+                value: [
+                    {status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
+                    {status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
+                    {status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
+                    {status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
+                ]
+            },
+            slots: {
+                content: `
+                    <template #content="slotProps">
+                        {{slotProps.item.status}}
+                    </template>
+                `
+            }
+        });
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-timeline.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-timeline').classes()).toContain('p-timeline-left');
+        expect(wrapper.find('.p-timeline').classes()).toContain('p-timeline-vertical');
+        expect(wrapper.findAll('.p-timeline-event-separator').length).toBe(4);
+    });
+
+    it('should align right', async () => {
+        await wrapper.setProps({ align: 'right' });
+
+        expect(wrapper.find('.p-timeline').classes()).toContain('p-timeline-right');
+    });
+
+    it('should horizontal layout', async () => {
+        await wrapper.setProps({ layout: 'horizontal' });
+
+        expect(wrapper.find('.p-timeline').classes()).toContain('p-timeline-horizontal');
+    });
+});
+
+describe('customized timeline', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(Timeline, {
+            slots: {
+                opposite: `
+                    <template #opposite="slotProps">
+                        <small class="p-text-secondary">{{slotProps.item.date}}</small>
+                    </template>
+                `,
+                marker: `
+                    <template #marker="slotProps">
+                        <span class="custom-marker shadow-2" :style="{backgroundColor: slotProps.item.color}">
+                            <i :class="slotProps.item.icon"></i>
+                        </span>
+                    </template>
+                `
+            },
+            props: {
+                value: [
+                    {status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
+                    {status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
+                    {status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
+                    {status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
+                ]
+            }
+        });
+    });
+
+    it('should have templating', () => {
+        const firstItem = wrapper.findAll('.p-timeline-event')[0];
+
+        expect(firstItem.find('.p-text-secondary').text()).toBe('15/10/2020 10:30');
+        expect(firstItem.find('.custom-marker').attributes().style.backgroundColor).not.toBe('');
+    });
+});

src/components/toast/Toast.spec.js

@@ -0,0 +1,87 @@
+import { mount } from '@vue/test-utils';
+import Toast from './Toast.vue';
+
+describe('Toast.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(Toast, {
+            global: {
+                mocks: {
+                    $primevue: {
+                        config: {
+                            'ripple': true
+                        }
+                    }
+                },
+                stubs: {
+                    teleport: true
+                }
+            },
+            data() {
+                return {
+                    messages: [{severity:'success', summary: 'Success Message', detail:'Message Content', life: 3000}]
+                }
+            }
+        })
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-toast.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-toast-message').classes()).toContain('p-toast-message-success');
+        expect(wrapper.find('.p-toast-summary').text()).toBe('Success Message');
+        expect(wrapper.find('.p-toast-detail').text()).toBe('Message Content');
+    });
+
+    it('should position is changed', async () => {
+        await wrapper.setProps({ position: 'bottom-left' });
+
+        expect(wrapper.find('.p-toast.p-component').classes()).toContain('p-toast-bottom-left');
+    });
+
+    it('should show grouped toast', async () => {
+        await wrapper.setProps({ group: 'br' });
+
+        expect(wrapper.find('.p-toast.p-component').exists()).toBe(true);
+    });
+
+    it('should close toast', async () => {
+        await wrapper.vm.remove({severity:'success', summary: 'Success Message', detail:'Message Content', life: 3000});
+
+        expect(wrapper.find('.p-toast-message').exists()).toBe(false);
+    });
+
+    it('should show multiple toast', async () => {
+        await wrapper.setData({
+            messages: [
+                {severity:'info', summary:'Message 1', detail:'Message 1 Content', life: 3000},
+                {severity:'info', summary:'Message 2', detail:'Message 2 Content', life: 3000},
+                {severity:'info', summary:'Message 3', detail:'Message 3 Content', life: 3000}
+            ]
+        });
+
+        expect(wrapper.findAll('.p-toast-message').length).toBe(3);
+    });
+
+    it('should close multiple toast', async () => {
+        await wrapper.setData({
+            messages: [
+                {severity:'info', summary:'Message 1', detail:'Message 1 Content', life: 3000},
+                {severity:'info', summary:'Message 2', detail:'Message 2 Content', life: 3000},
+                {severity:'info', summary:'Message 3', detail:'Message 3 Content', life: 3000}
+            ]
+        });
+
+        await wrapper.vm.onRemoveAllGroups();
+
+        expect(wrapper.findAll('.p-toast-message').length).toBe(0);
+    });
+
+    it('should close grouped toast', async () => {
+        await wrapper.setProps({ group: 'br' });
+
+        await wrapper.vm.onRemoveGroup('br');
+
+        expect(wrapper.findAll('.p-toast-message').length).toBe(0);
+    });
+});