primevue-mirror/components/organizationchart/OrganizationChart.spec.js

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');
    });
});