From f7d9a40adbaf7cf1c84476e84c0b4b2a6b2117b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 18 Mar 2022 14:34:17 +0300
Subject: [PATCH] Create OrganizationChart.spec.js

---
 .../OrganizationChart.spec.js                 | 160 ++++++++++++++++++
 1 file changed, 160 insertions(+)
 create mode 100644 src/components/organizationchart/OrganizationChart.spec.js

diff --git a/src/components/organizationchart/OrganizationChart.spec.js b/src/components/organizationchart/OrganizationChart.spec.js
new file mode 100644
index 000000000..69b9036c6
--- /dev/null
+++ b/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');
+    });
+});
\ No newline at end of file