primevue-mirror/components/orderlist/OrderList.spec.js

145 lines
5.7 KiB
JavaScript
Raw Normal View History

2022-09-06 12:03:37 +00:00
import { mount } from '@vue/test-utils';
2022-12-08 11:04:25 +00:00
import PrimeVue from 'primevue/config';
2022-09-06 12:03:37 +00:00
import OrderList from './OrderList.vue';
describe('OrderList.vue', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(OrderList, {
2022-12-08 11:04:25 +00:00
global: {
plugins: [PrimeVue]
},
2022-09-06 12:03:37 +00:00
props: {
modelValue: [
{
2022-09-14 11:26:01 +00:00
id: '1000',
code: 'vbb124btr',
name: 'Game Controller',
description: 'Product Description',
image: 'game-controller.jpg',
price: 99,
category: 'Electronics',
quantity: 2,
inventoryStatus: 'LOWSTOCK',
rating: 4
2022-09-06 12:03:37 +00:00
},
{
2022-09-14 11:26:01 +00:00
id: '1001',
code: 'nvklal433',
name: 'Black Watch',
description: 'Product Description',
image: 'black-watch.jpg',
price: 72,
category: 'Accessories',
quantity: 61,
inventoryStatus: 'INSTOCK',
rating: 4
2022-09-06 12:03:37 +00:00
},
{
2022-09-14 11:26:01 +00:00
id: '1002',
code: 'zz21cz3c1',
name: 'Blue Band',
description: 'Product Description',
image: 'blue-band.jpg',
price: 79,
category: 'Fitness',
quantity: 2,
inventoryStatus: 'LOWSTOCK',
rating: 3
2022-09-06 12:03:37 +00:00
},
{
2022-09-14 11:26:01 +00:00
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
2022-09-06 12:03:37 +00:00
},
{
2022-09-14 11:26:01 +00:00
id: '1004',
code: 'h456wer53',
name: 'Bracelet',
description: 'Product Description',
image: 'bracelet.jpg',
price: 15,
category: 'Accessories',
quantity: 73,
inventoryStatus: 'INSTOCK',
rating: 4
2022-09-06 12:03:37 +00:00
},
{
2022-09-14 11:26:01 +00:00
id: '1005',
code: 'cm230f032',
name: 'Gaming Set',
description: 'Product Description',
image: 'gaming-set.jpg',
price: 299,
category: 'Electronics',
quantity: 63,
inventoryStatus: 'INSTOCK',
rating: 3
2022-09-06 12:03:37 +00:00
}
]
},
slots: {
header: 'List of Products',
item: `
<template #item="slotProps">
<div class="product-item">
<div class="image-container">
<img :src="'images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
2022-09-06 12:03:37 +00:00
</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);
2022-12-08 14:26:45 +00:00
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');
2022-09-06 12:03:37 +00:00
});
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]);
});
2022-09-14 11:26:01 +00:00
});