OrderList tests added

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];