Create Timeline.spec.js

src/components/timeline/Timeline.spec.js

@@ -0,0 +1,83 @@
+import { mount } from '@vue/test-utils';
+import Timeline from './Timeline.vue';
+
+describe('Timeline.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(Timeline, {
+            props: {
+                value: [
+                    {status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
+                    {status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
+                    {status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
+                    {status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
+                ]
+            },
+            slots: {
+                content: `
+                    <template #content="slotProps">
+                        {{slotProps.item.status}}
+                    </template>
+                `
+            }
+        });
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-timeline.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-timeline').classes()).toContain('p-timeline-left');
+        expect(wrapper.find('.p-timeline').classes()).toContain('p-timeline-vertical');
+        expect(wrapper.findAll('.p-timeline-event-separator').length).toBe(4);
+    });
+
+    it('should align right', async () => {
+        await wrapper.setProps({ align: 'right' });
+
+        expect(wrapper.find('.p-timeline').classes()).toContain('p-timeline-right');
+    });
+
+    it('should horizontal layout', async () => {
+        await wrapper.setProps({ layout: 'horizontal' });
+
+        expect(wrapper.find('.p-timeline').classes()).toContain('p-timeline-horizontal');
+    });
+});
+
+describe('customized timeline', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(Timeline, {
+            slots: {
+                opposite: `
+                    <template #opposite="slotProps">
+                        <small class="p-text-secondary">{{slotProps.item.date}}</small>
+                    </template>
+                `,
+                marker: `
+                    <template #marker="slotProps">
+                        <span class="custom-marker shadow-2" :style="{backgroundColor: slotProps.item.color}">
+                            <i :class="slotProps.item.icon"></i>
+                        </span>
+                    </template>
+                `
+            },
+            props: {
+                value: [
+                    {status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
+                    {status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
+                    {status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
+                    {status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
+                ]
+            }
+        });
+    });
+
+    it('should have templating', () => {
+        const firstItem = wrapper.findAll('.p-timeline-event')[0];
+
+        expect(firstItem.find('.p-text-secondary').text()).toBe('15/10/2020 10:30');
+        expect(firstItem.find('.custom-marker').attributes().style.backgroundColor).not.toBe('');
+    });
+});