import { mount } from '@vue/test-utils'
import Descriptions from '../src/index.vue'
import DescriptionsItem from '../src/description-item'
import { nextTick } from 'vue'
const _mount = (template: string, data?: () => void, methods?: any) =>
mount({
components: {
'el-descriptions': Descriptions,
'el-descriptions-item': DescriptionsItem,
},
template,
data,
methods,
})
describe('Descriptions.vue', () => {
test('render test', () => {
const wrapper = _mount(`
`)
expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
expect(wrapper.find('.el-descriptions__extra').text()).toEqual('extra')
expect(wrapper.findAll('.el-descriptions__label').length).toEqual(4)
})
test('should render border props', () => {
const wrapper = _mount(`
{{ item }}
`)
expect(wrapper.find('table').classes()).toContain('is-bordered')
})
test('should render align props', () => {
const wrapper = _mount(`
{{ item }}
`)
expect(wrapper.find('.el-descriptions__label').classes()).toContain('is-center')
expect(wrapper.find('.el-descriptions__content').classes()).toContain('is-right')
})
test('should render width props', () => {
const wrapper = _mount(`
{{ item }}
`)
expect(wrapper.find('.el-descriptions__label').attributes('style')).toContain('width: 50px; min-width: 60px;')
expect(wrapper.find('.el-descriptions__content').attributes('style')).toContain('width: 50px; min-width: 60px;')
})
test('should render class props', () => {
const wrapper = _mount(`
{{ item }}
`)
expect(wrapper.find('.el-descriptions__label').classes()).toContain('label-class-name')
expect(wrapper.find('.el-descriptions__content').classes()).toContain('class-name')
})
test('should render width props', () => {
const wrapper = _mount(`
{{ item }}
`)
expect(wrapper.find('.el-descriptions__label').attributes('style')).toContain('width: 50px; min-width: 60px;')
expect(wrapper.find('.el-descriptions__content').attributes('style')).toContain('width: 50px; min-width: 60px;')
})
test('should render column props', async () => {
const wrapper = _mount(`
{{ item }}
`, () => {
return {
border: false,
}
})
expect(wrapper.find('tr').element.children.length).toEqual(5)
wrapper.vm.border = true
await nextTick()
expect(wrapper.find('tr').element.children.length).toEqual(10)
})
test('should render direction props', async () => {
const wrapper = _mount(`
{{ item }}
`, () => {
return {
direction: 'horizontal',
}
})
expect(wrapper.find('tr').element.children.length).toEqual(10)
expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(wrapper.findAll('tr')[0].element.children[1].innerHTML)
wrapper.vm.direction = 'vertical'
await nextTick()
expect(wrapper.find('tr').element.children.length).toEqual(5)
expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(wrapper.findAll('tr')[1].element.children[0].innerHTML)
})
test('should render title slots', async () => {
const wrapper = _mount(`
title
{{ item }}
`)
expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
})
test('should render span props', async () => {
const wrapper = _mount(`
1
2
3
4
`)
expect(wrapper.findAll('td')[1].element.getAttribute('colSpan')).toEqual('2')
expect(wrapper.findAll('td')[3].element.getAttribute('colSpan')).toEqual('2')
})
test('re-rendered when slots is updated', async () => {
const CHANGE_VALUE = 'company'
const wrapper = _mount(`
{{remark}}
`, () => {
return {
remarks: ['school', 'hospital'],
}
}, {
onClick() {
this.remarks[0] = CHANGE_VALUE
},
})
wrapper.find('button').trigger('click')
await nextTick()
expect(wrapper.find('el-tag').text()).toBe(CHANGE_VALUE)
})
})