vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Create Timeline.spec.js

pull/2402/head
Tuğçe Küçükoğlu 2022-04-06 16:36:08 +03:00
parent 27f66ce25c
commit cb91a61b0d
1 changed files with 83 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/timeline/Timeline.spec.js Normal file
View File

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