Merge pull request #2337 from tugcekucukoglu/tests

Tests

jest.config.js

@@ -29,5 +29,6 @@ module.exports = {
     },
     testMatch: [
         "**/src/components/**/*.spec.{j,t}s?(x)"
-    ]
+    ],
+    timers: "fake"
 }

src/components/message/Message.spec.js

@@ -0,0 +1,52 @@
+import { mount } from '@vue/test-utils';
+import Message from './Message.vue';
+
+describe('Message.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(Message, {
+            props: {
+                severity: 'error'
+            },
+            slots: {
+                default: 'Error Message Content'
+            }
+        });
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-message.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-message.p-component').classes()).toContain('p-message-error');
+        expect(wrapper.find('.p-message-text').text()).toContain('Error Message Content');
+    });
+
+    it('should close the message', async () => {
+        await wrapper.vm.close({});
+
+        expect(wrapper.vm.visible).toBe(false);
+        expect(wrapper.emitted().close[0]).toEqual([{}]);
+    });
+});
+
+describe('Message.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(Message, {
+            props: {
+                severity: 'error',
+                life: 3000,
+                sticky: false
+            },
+            slots: {
+                default: 'Error Message Content'
+            }
+        });
+    });
+
+    it('should sticky and life works', async () => {
+        jest.runTimersToTime(3001);
+        expect(wrapper.vm.visible).toBe(false);
+    });
+});

src/components/multiselect/MultiSelect.spec.js

@@ -0,0 +1,78 @@
+import { mount } from '@vue/test-utils';
+import PrimeVue from '@/components/config/PrimeVue';
+import MultiSelect from './MultiSelect.vue';
+
+describe('MultiSelect.vue', () => {
+    let wrapper;
+
+    beforeEach(async () => {
+        wrapper = mount(MultiSelect, {
+            global: {
+                plugins: [PrimeVue],
+                stubs: {
+                    teleport: true
+                }
+            },
+            props: {
+                modelValue: null,
+                options: [
+                    {name: 'New York', code: 'NY'},
+                    {name: 'Rome', code: 'RM'},
+                    {name: 'London', code: 'LDN'},
+                    {name: 'Istanbul', code: 'IST'},
+                    {name: 'Paris', code: 'PRS'}
+                ],
+                optionLabel: 'name',
+                placeholder: 'Select Cities'
+            }
+        });
+
+        await wrapper.vm.onClick({});
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-multiselect.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-multiselect-label.p-placeholder').text()).toBe('Select Cities');
+        expect(wrapper.find('.p-multiselect-panel').exists()).toBe(true);
+        expect(wrapper.findAll('li.p-multiselect-item').length).toBe(5);
+        expect(wrapper.findAll('li.p-multiselect-item')[0].attributes()['aria-label']).toBe('New York');
+        expect(wrapper.findAll('li.p-multiselect-item')[0].findAll('span')[1].text()).toBe('New York');
+    });
+
+    it('should select an item', async () => {
+        await wrapper.vm.onOptionSelect({}, wrapper.vm.options[0]);
+
+        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([[wrapper.vm.options[0]]]);
+
+        await wrapper.setProps({ modelValue: [wrapper.vm.options[0]]});
+
+        expect(wrapper.findAll('li.p-multiselect-item')[0].classes()).toContain('p-highlight');
+        expect(wrapper.find('.p-multiselect-label').text()).toBe('New York');
+    });
+
+    it('should select multiple item', async () => {
+        await wrapper.setProps({ modelValue: [wrapper.vm.options[0]]});
+
+        await wrapper.vm.onOptionSelect({}, wrapper.vm.options[1]);
+
+        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([[wrapper.vm.options[0], wrapper.vm.options[1]]]);
+
+        await wrapper.setProps({ modelValue: [wrapper.vm.options[0], wrapper.vm.options[1]]});
+
+        expect(wrapper.findAll('li.p-multiselect-item')[0].classes()).toContain('p-highlight');
+        expect(wrapper.findAll('li.p-multiselect-item')[1].classes()).toContain('p-highlight');
+    });
+
+    it('should close panel', async () => {
+        await wrapper.vm.onCloseClick();
+        
+        expect(wrapper.find('.p-multiselect-panel').exists()).toBe(false);
+    });
+
+    it('should chip work', async () => {
+        await wrapper.setProps({ display: 'chip', modelValue: [wrapper.vm.options[0]] });
+        
+        expect(wrapper.find('.p-multiselect-token').exists()).toBe(true);
+        expect(wrapper.find('.p-multiselect-token-label').text()).toBe('New York');
+    });
+});

src/components/orderlist/OrderList.spec.js

@@ -0,0 +1,140 @@
+import { mount } from '@vue/test-utils';
+import OrderList from './OrderList.vue';
+
+describe('OrderList.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(OrderList, {
+            props: {
+                modelValue: [
+                    {
+                        "id": "1000",
+                        "code": "vbb124btr",
+                        "name": "Game Controller",
+                        "description": "Product Description",
+                        "image": "game-controller.jpg",
+                        "price": 99,
+                        "category": "Electronics",
+                        "quantity": 2,
+                        "inventoryStatus": "LOWSTOCK",
+                        "rating": 4
+                    },
+                    {
+                        "id": "1001",
+                        "code": "nvklal433",
+                        "name": "Black Watch",
+                        "description": "Product Description",
+                        "image": "black-watch.jpg",
+                        "price": 72,
+                        "category": "Accessories",
+                        "quantity": 61,
+                        "inventoryStatus": "INSTOCK",
+                        "rating": 4
+                    },
+                    {
+                        "id": "1002",
+                        "code": "zz21cz3c1",
+                        "name": "Blue Band",
+                        "description": "Product Description",
+                        "image": "blue-band.jpg",
+                        "price": 79,
+                        "category": "Fitness",
+                        "quantity": 2,
+                        "inventoryStatus": "LOWSTOCK",
+                        "rating": 3
+                    },
+                    {
+                        "id": "1003",
+                        "code": "244wgerg2",
+                        "name": "Blue T-Shirt",
+                        "description": "Product Description",
+                        "image": "blue-t-shirt.jpg",
+                        "price": 29,
+                        "category": "Clothing",
+                        "quantity": 25,
+                        "inventoryStatus": "INSTOCK",
+                        "rating": 5
+                    },
+                    {
+                        "id": "1004",
+                        "code": "h456wer53",
+                        "name": "Bracelet",
+                        "description": "Product Description",
+                        "image": "bracelet.jpg",
+                        "price": 15,
+                        "category": "Accessories",
+                        "quantity": 73,
+                        "inventoryStatus": "INSTOCK",
+                        "rating": 4
+                    },
+                    {
+                        "id": "1005",
+                        "code": "cm230f032",
+                        "name": "Gaming Set",
+                        "description": "Product Description",
+                        "image": "gaming-set.jpg",
+                        "price": 299,
+                        "category": "Electronics",
+                        "quantity": 63,
+                        "inventoryStatus": "INSTOCK",
+                        "rating": 3
+                    }
+                ]
+            },
+            slots: {
+                header: 'List of Products',
+                item: `
+                    <template #item="slotProps">
+                        <div class="product-item">
+                            <div class="image-container">
+                                <img :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                            </div>
+                            <div class="product-list-detail">
+                                <h6 class="mb-2">{{slotProps.item.name}}</h6>
+                                <i class="pi pi-tag product-category-icon"></i>
+                                <span class="product-category">{{slotProps.item.category}}</span>
+                            </div>
+                            <div class="product-list-action">
+                                <h6 class="mb-2">\${{slotProps.item.price}}</h6>
+                                <span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
+                            </div>
+                        </div>
+                    </template>
+                `
+            }
+        });
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-orderlist.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-orderlist-controls').exists()).toBe(true);
+        expect(wrapper.findAll('li.p-orderlist-item').length).toBe(6);
+    });
+
+    it('should select item', async () => {
+        await wrapper.vm.onItemClick({}, wrapper.vm.modelValue[0], 0);
+
+        expect(wrapper.emitted()['update:selection'][0]).toEqual([[wrapper.vm.modelValue[0]]]);
+
+        await wrapper.setProps({ selection: [wrapper.vm.modelValue[0]] });
+
+        expect(wrapper.findAll('li.p-orderlist-item')[0].classes()).toContain('p-highlight');
+    });
+
+    it('should slot works', () => {
+        expect(wrapper.find('.p-orderlist-header').text()).toBe('List of Products');
+        expect(wrapper.findAll('.product-item').length).toBe(6);
+    });
+
+    it('should change order', async () => {
+        await wrapper.setProps({ selection: [wrapper.vm.modelValue[2]] });
+        await wrapper.setData({ d_selection: [wrapper.vm.modelValue[2]] });
+
+        expect(wrapper.findAll('li.p-orderlist-item')[2].classes()).toContain('p-highlight');
+
+        await wrapper.vm.moveUp({});
+
+        expect(wrapper.emitted()['update:modelValue'][0][0][1]).toEqual(wrapper.vm.modelValue[2]);
+    });
+});

src/components/orderlist/OrderList.vue

@@ -96,7 +96,7 @@ export default {
         isSelected(item) {
             return ObjectUtils.findIndexInList(item, this.d_selection) != -1;
         },
-        moveUp() {
+        moveUp(event) {
             if (this.d_selection) {
                 let value = [...this.modelValue];
 
@@ -124,7 +124,7 @@ export default {
                 });
             }
         },
-        moveTop() {
+        moveTop(event) {
             if(this.d_selection) {
                 let value = [...this.modelValue];
 
@@ -150,7 +150,7 @@ export default {
                 });
             }
         },
-        moveDown() {
+        moveDown(event) {
             if(this.d_selection) {
                 let value = [...this.modelValue];
 
@@ -178,7 +178,7 @@ export default {
                 });
             }
         },
-        moveBottom() {
+        moveBottom(event) {
             if (this.d_selection) {
                 let value = [...this.modelValue];
 

src/components/organizationchart/OrganizationChart.spec.js

@@ -0,0 +1,160 @@
+import { mount } from '@vue/test-utils';
+import OrganizationChart from './OrganizationChart.vue';
+
+describe('OrganizationChart.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(OrganizationChart, {
+            props: {
+                value: {
+                    key: '0',
+                    type: 'person',
+                    styleClass: 'p-person',
+                    data: {label: 'CEO', name: 'Walter White', avatar: 'walter.jpg'},
+                    children: [
+                        {
+                            key: '0_0',
+                            type: 'person',
+                            styleClass: 'p-person',
+                            data: {label: 'CFO', name:'Saul Goodman', avatar: 'saul.jpg'},
+                            children:[{
+                                key: '0_0_0',
+                                data: {label: 'Tax'},
+                                selectable: false,
+                                styleClass: 'department-cfo'
+                            },
+                            {
+                                key: '0_0_1',
+                                data: {label: 'Legal'},
+                                selectable: false,
+                                styleClass: 'department-cfo'
+                            }],
+                        },
+                        {
+                            key: '0_1',
+                            type: 'person',
+                            styleClass: 'p-person',
+                            data: {label: 'COO', name:'Mike E.', avatar: 'mike.jpg'},
+                            children:[{
+                                key: '0_1_0',
+                                data: {label: 'Operations'},
+                                selectable: false,
+                                styleClass: 'department-coo'
+                            }]
+                        },
+                        {
+                            key: '0_2',
+                            type: 'person',
+                            styleClass: 'p-person',
+                            data: {label: 'CTO', name:'Jesse Pinkman', avatar: 'jesse.jpg'},
+                            children:[{
+                                key: '0_2_0',
+                                data: {label: 'Development'},
+                                selectable: false,
+                                styleClass: 'department-cto',
+                                children:[{
+                                    key: '0_2_0_0',
+                                    data: {label: 'Analysis'},
+                                    selectable: false,
+                                    styleClass: 'department-cto'
+                                },
+                                {
+                                    key: '0_2_0_1',
+                                    data: {label: 'Front End'},
+                                    selectable: false,
+                                    styleClass: 'department-cto'
+                                },
+                                {
+                                    key: '0_2_0_2',
+                                    data: {label: 'Back End'},
+                                    selectable: false,
+                                    styleClass: 'department-cto'
+                                }]
+                            },
+                            {
+                                key: '0_2_1',
+                                data: {label: 'QA'},
+                                selectable: false,
+                                styleClass: 'department-cto'
+                            },
+                            {
+                                key: '0_2_2',
+                                data: {label: 'R&D'},
+                                selectable: false,
+                                styleClass: 'department-cto'
+                            }]
+                        }
+                    ]
+                },
+                collapsible: true,
+                selectionMode: 'single',
+                selectionKeys: {}
+            },
+            slots: {
+                slots: {
+                    default: `
+                        <template #default="slotProps">
+                            <span>{{slotProps.node.data.label}}</span>
+                        </template>
+                    `,
+                    person: `
+                        <template #person="slotProps">
+                            <div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
+                            <div class="node-content">
+                                <img :src="'demo/images/organization/' + slotProps.node.data.avatar" width="32">
+                                <div>{{slotProps.node.data.name}}</div>
+                            </div>
+                        </template>
+                    `
+                }
+            }
+        });
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-organizationchart.p-component').exists()).toBe(true);
+        expect(wrapper.find('table.p-organizationchart-table').exists()).toBe(true);
+        expect(wrapper.findAll('.p-node-toggler-icon').length).toBe(5);
+        expect(wrapper.find('.p-node-toggler-icon').classes()).toContain('pi-chevron-down');
+    });
+
+    it('should collapsed and expand', async () => {
+        await wrapper.vm.onNodeToggle(wrapper.vm.value);
+
+        expect(wrapper.find('.p-node-toggler-icon').classes()).toContain('pi-chevron-up');
+        expect(wrapper.emitted()['node-collapse'][0]).toEqual([wrapper.vm.value]);
+        expect(wrapper.emitted()['update:collapsedKeys'][0]).toEqual([{ '0': true }]);
+        expect(wrapper.vm.d_collapsedKeys).toEqual({ '0': true });
+
+        await wrapper.vm.onNodeToggle(wrapper.vm.value);
+
+        expect(wrapper.find('.p-node-toggler-icon').classes()).toContain('pi-chevron-down');
+        expect(wrapper.emitted()['node-expand'][0]).toEqual([wrapper.vm.value]);
+        expect(wrapper.emitted()['update:collapsedKeys'][0]).toEqual([{}]);
+        expect(wrapper.vm.d_collapsedKeys).toEqual({});
+    });
+
+    it('should item select and unselect', async () => {
+        const contents = wrapper.findAll('.p-organizationchart-node-content');
+
+        await wrapper.vm.onNodeClick(wrapper.vm.value);
+
+        expect(wrapper.emitted()['node-select'][0]).toEqual([wrapper.vm.value]);
+        expect(wrapper.emitted()['update:selectionKeys'][0]).toEqual([{ '0': true }]);
+
+        await wrapper.setProps({ selectionKeys: { '0': true } });
+
+        expect(contents[0].classes()).toContain('p-highlight');
+
+
+        await wrapper.vm.onNodeClick(wrapper.vm.value);
+
+        expect(wrapper.emitted()['node-unselect'][0]).toEqual([wrapper.vm.value]);
+        expect(wrapper.emitted()['update:selectionKeys'][1]).toEqual([{}]);
+
+        await wrapper.setProps({ selectionKeys: {} });
+
+        expect(contents[0].classes()).not.toContain('p-highlight');
+    });
+});

src/components/overlaypanel/OverlayPanel.spec.js

@@ -0,0 +1,47 @@
+import { mount } from '@vue/test-utils';
+import PrimeVue from '@/components/config/PrimeVue';
+import OverlayPanel from './OverlayPanel.vue';
+
+describe('OverlayPanel.vue', () => {
+    let wrapper;
+
+    beforeEach(async () => {
+        wrapper = mount(OverlayPanel, {
+            global: {
+                plugins: [PrimeVue],
+                stubs: {
+                    teleport: true
+                }
+            },
+            props: {
+                showCloseIcon: true,
+                ariaCloseLabel: 'exit'
+            },
+            slots: {
+                default: 'PrimeVue'
+            }
+        });
+
+        await wrapper.vm.toggle({}, {});
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-overlaypanel.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-overlaypanel-content').exists()).toBe(true);
+        expect(wrapper.find('.p-overlaypanel-content').text()).toBe('PrimeVue');
+        expect(wrapper.find('.p-overlaypanel-close').exists()).toBe(true);
+        expect(wrapper.find('.p-overlaypanel-close').attributes()['aria-label']).toBe('exit');
+    });
+
+    it('should toggle itself', async () => {
+        await wrapper.vm.toggle({}, {});
+
+        expect(wrapper.find('.p-overlaypanel.p-component').exists()).toBe(false);
+    });
+
+    it('should close icon work', async () => {
+        await wrapper.vm.hide();
+
+        expect(wrapper.vm.visible).toBe(false);
+    });
+});

src/components/paginator/Paginator.spec.js

@@ -0,0 +1,49 @@
+import { mount } from '@vue/test-utils';
+import Paginator from './Paginator.vue';
+
+describe('Paginator.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(Paginator, {
+            props: {
+                rows: 10,
+                totalRecords: 120,
+                rowsPerPageOptions: [10,20,30]
+            }
+        });
+    });
+    
+    it('should exist', () => {
+        expect(wrapper.find('.p-paginator.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-paginator-icon.pi-angle-double-left').exists()).toBe(true);
+        expect(wrapper.find('.p-paginator-icon.pi-angle-right').exists()).toBe(true);
+        expect(wrapper.findAll('.p-paginator-page.p-paginator-element').length).toBe(5);
+        expect(wrapper.find('.p-dropdown.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-dropdown-label').text()).toBe('10');
+        expect(wrapper.find('.p-paginator-first').classes()).toContain('p-disabled');
+        expect(wrapper.find('.p-paginator-prev').classes()).toContain('p-disabled');
+        expect(wrapper.vm.pageCount).toBe(12);
+    });
+
+    it('show jump to the end', async () => {
+        await wrapper.vm.changePageToLast({ preventDefault: () => {} });
+
+        expect(wrapper.findAll('.p-paginator-page.p-paginator-element')[4].classes()).toContain('p-highlight');
+        expect(wrapper.findAll('.p-paginator-page.p-paginator-element')[4].text()).toBe('12');
+        expect(wrapper.find('.p-paginator-next').classes()).toContain('p-disabled');
+        expect(wrapper.find('.p-paginator-last').classes()).toContain('p-disabled');
+    });
+
+    it('should change row count', async () => {
+        await wrapper.vm.onRowChange(20);
+        
+        expect(wrapper.vm.d_rows).toBe(20);
+        expect(wrapper.emitted()['update:rows'][0]).toEqual([20]);
+        expect(wrapper.vm.pageCount).toBe(6);
+
+        await wrapper.setProps({ rows: 20 });
+
+        expect(wrapper.find('.p-dropdown-label').text()).toBe('20');
+    });
+});

src/components/panel/Panel.spec.js

@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils';
+import Panel from './Panel.vue';
+
+describe('Panel.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(Panel, {
+            props: {
+                header: 'PrimeVue'
+            },
+            slots: {
+                default: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>'
+            }
+        });
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-panel.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-panel-content').text()).toBe('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt');
+        expect(wrapper.find('.p-panel-title').text()).toBe('PrimeVue');
+    });
+
+    it('should be toggleable', async () => {
+        await wrapper.setProps({ toggleable: true });
+
+        expect(wrapper.find('.p-panel.p-component').classes()).toContain('p-panel-toggleable');
+
+        await wrapper.vm.toggle({});
+
+        expect(wrapper.emitted().toggle[0]).toEqual([{originalEvent: {}, value: true}]);
+    });
+});