2021-08-24 13:36:48 +08:00
|
|
|
import { defineComponent } from 'vue'
|
2020-07-29 16:57:17 +08:00
|
|
|
import { mount } from '@vue/test-utils'
|
2021-10-27 23:17:13 +08:00
|
|
|
import { MoreFilled } from '@element-plus/icons'
|
2020-07-29 16:57:17 +08:00
|
|
|
import TimeLine from '../src/index.vue'
|
|
|
|
import TimeLineItem from '../src/item.vue'
|
|
|
|
|
|
|
|
const Component = defineComponent({
|
|
|
|
components: {
|
|
|
|
'el-timeline': TimeLine,
|
|
|
|
'el-timeline-item': TimeLineItem,
|
|
|
|
},
|
|
|
|
props: [],
|
|
|
|
data() {
|
|
|
|
return {
|
2021-10-27 23:17:13 +08:00
|
|
|
iconMoreFilled: MoreFilled,
|
2021-09-04 19:29:28 +08:00
|
|
|
activities: [
|
|
|
|
{
|
|
|
|
content: 'Step 1: xxxxxx',
|
|
|
|
timestamp: '2018-04-11',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
content: 'Step 2: xxxxxx',
|
|
|
|
timestamp: '2018-04-13',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
content: 'Step 3: xxxxxx',
|
|
|
|
timestamp: '2018-04-15',
|
|
|
|
},
|
|
|
|
],
|
2020-07-29 16:57:17 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
template: `
|
|
|
|
<el-timeline>
|
|
|
|
<el-timeline-item
|
|
|
|
v-for="(activity, index) in activities"
|
|
|
|
:key="index"
|
|
|
|
:timestamp="activity.timestamp">
|
|
|
|
{{activity.content}}
|
|
|
|
</el-timeline-item>
|
|
|
|
</el-timeline>
|
|
|
|
`,
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('TimeLine.vue', () => {
|
|
|
|
test('create', () => {
|
|
|
|
const wrapper = mount(Component)
|
|
|
|
const vm = wrapper.vm
|
|
|
|
|
|
|
|
const contentWrappers = wrapper.findAll('.el-timeline-item__content')
|
|
|
|
contentWrappers.forEach((content, index) => {
|
|
|
|
expect(content.text()).toEqual(vm.activities[index].content)
|
|
|
|
})
|
|
|
|
|
|
|
|
const timestampWrappers = wrapper.findAll('.el-timeline-item__timestamp')
|
|
|
|
timestampWrappers.forEach((timestamp, index) => {
|
|
|
|
expect(timestamp.text()).toEqual(vm.activities[index].timestamp)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
test('placement', () => {
|
|
|
|
const wrapper = mount({
|
|
|
|
...Component,
|
|
|
|
template: `
|
|
|
|
<el-timeline>
|
|
|
|
<el-timeline-item
|
|
|
|
v-for="(activity, index) in activities"
|
|
|
|
:key="index"
|
|
|
|
:timestamp="activity.timestamp"
|
|
|
|
:placement="activity.placement">
|
|
|
|
{{activity.content}}
|
|
|
|
</el-timeline-item>
|
|
|
|
</el-timeline>
|
|
|
|
`,
|
|
|
|
data() {
|
|
|
|
return {
|
2021-09-04 19:29:28 +08:00
|
|
|
activities: [
|
|
|
|
{
|
|
|
|
content: 'Step 1: xxxxxx',
|
|
|
|
timestamp: '2018-04-11',
|
|
|
|
placement: 'top',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
content: 'Step 2: xxxxxx',
|
|
|
|
timestamp: '2018-04-13',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
content: 'Step 3: xxxxxx',
|
|
|
|
timestamp: '2018-04-15',
|
|
|
|
},
|
|
|
|
],
|
2020-07-29 16:57:17 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
})
|
|
|
|
const timestampWrapper = wrapper.findAll('.el-timeline-item__timestamp')[0]
|
|
|
|
expect(timestampWrapper.classes('is-top')).toBe(true)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('hide-timestamp', () => {
|
|
|
|
const wrapper = mount({
|
|
|
|
...Component,
|
|
|
|
template: `
|
|
|
|
<el-timeline>
|
|
|
|
<el-timeline-item
|
|
|
|
v-for="(activity, index) in activities"
|
|
|
|
:key="index"
|
|
|
|
:timestamp="activity.timestamp"
|
|
|
|
:hide-timestamp="activity.hideTimestamp">
|
|
|
|
{{activity.content}}
|
|
|
|
</el-timeline-item>
|
|
|
|
</el-timeline>
|
|
|
|
`,
|
|
|
|
data() {
|
|
|
|
return {
|
2021-09-04 19:29:28 +08:00
|
|
|
activities: [
|
|
|
|
{
|
|
|
|
content: 'Step 1: xxxxxx',
|
|
|
|
timestamp: '2018-04-11',
|
|
|
|
hideTimestamp: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
content: 'Step 2: xxxxxx',
|
|
|
|
timestamp: '2018-04-13',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
content: 'Step 3: xxxxxx',
|
|
|
|
timestamp: '2018-04-15',
|
|
|
|
},
|
|
|
|
],
|
2020-07-29 16:57:17 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
})
|
|
|
|
const timestampWrappers = wrapper.findAll('.el-timeline-item__timestamp')
|
|
|
|
expect(timestampWrappers.length).toEqual(2)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('color', () => {
|
|
|
|
const wrapper = mount({
|
|
|
|
...Component,
|
|
|
|
template: `
|
|
|
|
<el-timeline>
|
|
|
|
<el-timeline-item
|
|
|
|
timestamp="2018-04-11"
|
|
|
|
color="#f00">
|
|
|
|
Step 1: xxxxxx
|
|
|
|
</el-timeline-item>
|
|
|
|
</el-timeline>
|
|
|
|
`,
|
|
|
|
})
|
|
|
|
const vm = wrapper.vm
|
|
|
|
const nodeElm = vm.$el.querySelector('.el-timeline-item__node')
|
|
|
|
expect(nodeElm.style.backgroundColor).toEqual('rgb(255, 0, 0)')
|
|
|
|
})
|
|
|
|
|
|
|
|
test('type', () => {
|
|
|
|
const wrapper = mount({
|
|
|
|
...Component,
|
|
|
|
template: `
|
|
|
|
<el-timeline>
|
|
|
|
<el-timeline-item
|
|
|
|
timestamp="2018-04-11"
|
|
|
|
type="primary">
|
|
|
|
Step 1: xxxxxx
|
|
|
|
</el-timeline-item>
|
|
|
|
</el-timeline>
|
|
|
|
`,
|
|
|
|
})
|
|
|
|
const nodeWrapper = wrapper.find('.el-timeline-item__node')
|
|
|
|
expect(nodeWrapper.classes('el-timeline-item__node--primary')).toBe(true)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('size', () => {
|
|
|
|
const wrapper = mount({
|
|
|
|
...Component,
|
|
|
|
template: `
|
|
|
|
<el-timeline>
|
|
|
|
<el-timeline-item
|
|
|
|
timestamp="2018-04-11"
|
|
|
|
type="large">
|
|
|
|
Step 1: xxxxxx
|
|
|
|
</el-timeline-item>
|
|
|
|
</el-timeline>
|
|
|
|
`,
|
|
|
|
})
|
|
|
|
const nodeWrapper = wrapper.find('.el-timeline-item__node')
|
|
|
|
expect(nodeWrapper.classes('el-timeline-item__node--large')).toBe(true)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('icon', () => {
|
|
|
|
const wrapper = mount({
|
|
|
|
...Component,
|
|
|
|
template: `
|
|
|
|
<el-timeline>
|
|
|
|
<el-timeline-item
|
|
|
|
timestamp="2018-04-11"
|
2021-10-27 23:17:13 +08:00
|
|
|
:icon="iconMoreFilled">
|
2020-07-29 16:57:17 +08:00
|
|
|
Step 1: xxxxxx
|
|
|
|
</el-timeline-item>
|
|
|
|
</el-timeline>
|
|
|
|
`,
|
|
|
|
})
|
2021-10-27 23:17:13 +08:00
|
|
|
expect(wrapper.find('.el-timeline-item__icon').exists()).toBe(true)
|
|
|
|
expect(wrapper.findComponent(MoreFilled).exists()).toBe(true)
|
2020-07-29 16:57:17 +08:00
|
|
|
})
|
|
|
|
|
2021-09-05 11:07:24 +08:00
|
|
|
test('hollow', () => {
|
|
|
|
const wrapper = mount({
|
|
|
|
...Component,
|
|
|
|
template: `
|
|
|
|
<el-timeline>
|
|
|
|
<el-timeline-item
|
|
|
|
timestamp="2018-04-11"
|
|
|
|
hollow>
|
|
|
|
Step 1: xxxxxx
|
|
|
|
</el-timeline-item>
|
|
|
|
</el-timeline>
|
|
|
|
`,
|
|
|
|
})
|
|
|
|
const nodeWrapper = wrapper.find('.el-timeline-item__node')
|
|
|
|
expect(nodeWrapper.classes('is-hollow')).toBe(true)
|
|
|
|
})
|
|
|
|
|
2020-07-29 16:57:17 +08:00
|
|
|
test('dot', () => {
|
|
|
|
const wrapper = mount({
|
|
|
|
...Component,
|
|
|
|
template: `
|
|
|
|
<el-timeline>
|
|
|
|
<el-timeline-item
|
|
|
|
timestamp="2018-04-11"
|
|
|
|
>
|
2020-11-29 18:50:46 +08:00
|
|
|
<template #dot>
|
2020-07-29 16:57:17 +08:00
|
|
|
dot
|
|
|
|
</template>
|
|
|
|
</el-timeline-item>
|
|
|
|
</el-timeline>
|
|
|
|
`,
|
|
|
|
})
|
|
|
|
|
|
|
|
const dotWrapper = wrapper.find('.el-timeline-item__dot')
|
|
|
|
expect(dotWrapper.text()).toEqual('dot')
|
|
|
|
expect(wrapper.find('.el-timeline-item__node').exists()).toBe(false)
|
|
|
|
})
|
2021-09-18 11:31:58 +08:00
|
|
|
|
|
|
|
test('center', () => {
|
|
|
|
const wrapper = mount({
|
|
|
|
...Component,
|
|
|
|
template: `
|
|
|
|
<el-timeline>
|
|
|
|
<el-timeline-item
|
|
|
|
v-for="(activity, index) in activities"
|
|
|
|
:key="index"
|
|
|
|
:center="index === 1"
|
|
|
|
>
|
|
|
|
{{activity.content}}
|
|
|
|
</el-timeline-item>
|
|
|
|
</el-timeline>
|
|
|
|
`,
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
activities: [
|
|
|
|
{
|
|
|
|
content: 'Step 1: xxxxxx',
|
|
|
|
timestamp: '2018-04-11',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
content: 'Step 2: xxxxxx',
|
|
|
|
timestamp: '2018-04-13',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
content: 'Step 3: xxxxxx',
|
|
|
|
timestamp: '2018-04-15',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
}
|
|
|
|
},
|
|
|
|
})
|
|
|
|
const timestampWrappers = wrapper.findAll('.el-timeline-item')
|
|
|
|
expect(timestampWrappers[1].classes()).toContain('el-timeline-item__center')
|
|
|
|
})
|
2020-07-29 16:57:17 +08:00
|
|
|
})
|