primevue-mirror/components/picklist/PickList.spec.js

import { mount } from '@vue/test-utils';
import PickList from './PickList.vue';

describe('PickList.vue', () => {
    let wrapper;

    beforeEach(() => {
        wrapper = mount(PickList, {
            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
                        }
                    ],
                    []
                ]
            },
            slots: {
                sourceheader: 'Available',
                targetheader: 'Selected'
            }
        });
    });

    it('should exist', () => {
        expect(wrapper.find('.p-picklist.p-component').exists()).toBe(true);
        expect(wrapper.find('.p-picklist-list-wrapper.p-picklist-source-wrapper').exists()).toBe(true);
        expect(wrapper.find('.p-picklist-list-wrapper.p-picklist-target-wrapper').exists()).toBe(true);
    });

    it('should slots work', () => {
        expect(wrapper.find('.p-picklist-source-wrapper > .p-picklist-header').text()).toBe('Available');
        expect(wrapper.find('.p-picklist-target-wrapper > .p-picklist-header').text()).toBe('Selected');
    });

    it('should update sourceList and targetList', async () => {
        await wrapper.setProps({
            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
                    }
                ]
            ]
        });

        expect(wrapper.vm.sourceList.length).toBe(1);
        expect(wrapper.vm.targetList.length).toBe(1);
    });

    it('should select an item from source list', async () => {
        await wrapper.vm.onItemClick({}, wrapper.vm.modelValue[0][0], 0);

        expect(wrapper.emitted()['update:selection'][0][0]).toEqual([[wrapper.vm.modelValue[0][0]], []]);
    });

    it('should dblclick an item from source list', async () => {
        await wrapper.setProps({ selection: [[wrapper.vm.modelValue[0][0]], []] });

        await wrapper.vm.onItemDblClick({}, wrapper.vm.modelValue[0][0], 0);

        expect(wrapper.emitted()['update:modelValue'][0][0][1]).toEqual([wrapper.vm.modelValue[0][0]]);
        expect(wrapper.emitted()['move-to-target'][0]).toEqual([{ originalEvent: {}, items: [wrapper.vm.modelValue[0][0]] }]);
        expect(wrapper.emitted()['update:selection'][0][0]).toEqual([[], []]);
    });

    it('should move item up', async () => {
        await wrapper.setProps({ selection: [[wrapper.vm.modelValue[0][1]], []] });

        await wrapper.vm.moveUp({}, 0);

        expect(wrapper.emitted()['update:modelValue'][0][0]).toEqual([
            [
                {
                    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: '1000',
                    code: 'vbb124btr',
                    name: 'Game Controller',
                    description: 'Product Description',
                    image: 'game-controller.jpg',
                    price: 99,
                    category: 'Electronics',
                    quantity: 2,
                    inventoryStatus: 'LOWSTOCK',
                    rating: 4
                }
            ],
            []
        ]);
    });

    it('should should move all to target', async () => {
        await wrapper.vm.moveAllToTarget({});

        expect(wrapper.emitted()['update:modelValue'][0][0]).toEqual([
            [],
            [
                {
                    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
                }
            ]
        ]);
    });
});