mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 18:01:24 +08:00
41b27b143a
When rendering columns by default, default parameters should not be provided. Default parameters cannot be passed in as props of other components, which will cause other components to report errors fix #1232 Co-authored-by: winerlu <winerlu@tencent.com>
2313 lines
65 KiB
TypeScript
2313 lines
65 KiB
TypeScript
import { mount as _mount, VueWrapper } from '@vue/test-utils'
|
|
import { ComponentPublicInstance, nextTick } from 'vue'
|
|
import ElTable from '../src/table.vue'
|
|
import ElTableColumn from '../src/table-column/index'
|
|
import ElCheckboxGroup from '@element-plus/checkbox-group'
|
|
import ElCheckbox from '@element-plus/checkbox'
|
|
import sinon from 'sinon'
|
|
|
|
const testDataArr = []
|
|
const toArray = function(obj) {
|
|
return [].slice.call(obj)
|
|
}
|
|
|
|
const mount = (opt: any) =>
|
|
_mount(opt, {
|
|
attachTo: 'body',
|
|
})
|
|
|
|
const triggerEvent = function(elm, name, ...opts) {
|
|
let eventName
|
|
|
|
if (/^mouse|click/.test(name)) {
|
|
eventName = 'MouseEvents'
|
|
} else if (/^key/.test(name)) {
|
|
eventName = 'KeyboardEvent'
|
|
} else {
|
|
eventName = 'HTMLEvents'
|
|
}
|
|
const evt = document.createEvent(eventName)
|
|
|
|
evt.initEvent(name, ...opts)
|
|
elm.dispatchEvent ? elm.dispatchEvent(evt) : elm.fireEvent('on' + name, evt)
|
|
|
|
return elm
|
|
}
|
|
const getTestData = function() {
|
|
return [
|
|
{
|
|
id: 1,
|
|
name: 'Toy Story',
|
|
release: '1995-11-22',
|
|
director: 'John Lasseter',
|
|
runtime: 80,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "A Bug's Life",
|
|
release: '1998-11-25',
|
|
director: 'John Lasseter',
|
|
runtime: 95,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Toy Story 2',
|
|
release: '1999-11-24',
|
|
director: 'John Lasseter',
|
|
runtime: 92,
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'Monsters, Inc.',
|
|
release: '2001-11-2',
|
|
director: 'Peter Docter',
|
|
runtime: 92,
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'Finding Nemo',
|
|
release: '2003-5-30',
|
|
director: 'Andrew Stanton',
|
|
runtime: 100,
|
|
},
|
|
]
|
|
}
|
|
|
|
getTestData().forEach(cur => {
|
|
Object.keys(cur).forEach(prop => {
|
|
testDataArr.push(cur[prop].toString())
|
|
})
|
|
})
|
|
|
|
function equalArray(list: unknown[], arr: unknown[]) {
|
|
arr.forEach(item => {
|
|
expect(list).toContain(item)
|
|
})
|
|
}
|
|
|
|
describe('Table.vue', () => {
|
|
describe('rendering data is correct', () => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData">
|
|
<el-table-column prop="id" />
|
|
<el-table-column prop="name" label="片名" />
|
|
<el-table-column prop="release" label="发行日期" />
|
|
<el-table-column prop="director" label="导演" />
|
|
<el-table-column prop="runtime" label="时长（分）" />
|
|
</el-table>
|
|
`,
|
|
created() {
|
|
this.testData = getTestData()
|
|
},
|
|
})
|
|
it('head', async done => {
|
|
await nextTick()
|
|
const ths = toArray(wrapper.findAll('thead th'))
|
|
equalArray(
|
|
ths.map(node => node.text()).filter(o => o),
|
|
['片名', '发行日期', '导演', '时长（分）'],
|
|
)
|
|
done()
|
|
})
|
|
|
|
it('row length', () => {
|
|
expect(
|
|
wrapper.findAll('.el-table__body-wrapper tbody tr').length,
|
|
).toEqual(getTestData().length)
|
|
})
|
|
it('row data', () => {
|
|
const cells = toArray(wrapper.findAll('td .cell')).map(node =>
|
|
node.text(),
|
|
)
|
|
equalArray(cells, testDataArr)
|
|
wrapper.unmount()
|
|
})
|
|
})
|
|
|
|
it('custom template', async () => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
ElCheckboxGroup,
|
|
ElCheckbox,
|
|
},
|
|
template: `
|
|
<el-table :data="tableData">
|
|
<el-table-column label="someLabel">
|
|
<template #default="{ row }">
|
|
<el-checkbox-group v-model="row.checkList">
|
|
<el-checkbox label="复选框 A"></el-checkbox>
|
|
<el-checkbox label="复选框 B"></el-checkbox>
|
|
</el-checkbox-group>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
`,
|
|
data() {
|
|
return {
|
|
tableData: [
|
|
{
|
|
checkList: [],
|
|
},
|
|
{
|
|
checkList: ['复选框 A'],
|
|
},
|
|
{
|
|
checkList: ['复选框 A', '复选框 B'],
|
|
},
|
|
],
|
|
}
|
|
},
|
|
})
|
|
const vm = wrapper.vm
|
|
await nextTick()
|
|
const checkGroup = vm.$el.querySelectorAll(
|
|
'.el-table__body-wrapper .el-checkbox-group',
|
|
)
|
|
expect(checkGroup.length).toBe(3)
|
|
const checkbox = vm.$el.querySelectorAll(
|
|
'.el-table__body-wrapper .el-checkbox',
|
|
)
|
|
expect(checkbox.length).toBe(6)
|
|
const checkSelect = vm.$el.querySelectorAll(
|
|
'.el-table__body-wrapper label.is-checked',
|
|
)
|
|
expect(checkSelect.length).toBe(3)
|
|
})
|
|
describe('attributes', () => {
|
|
const createTable = function(props, opts?) {
|
|
return mount(
|
|
Object.assign(
|
|
{
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData" ${props}>
|
|
<el-table-column prop="name" label="片名" />
|
|
<el-table-column prop="release" label="发行日期" />
|
|
<el-table-column prop="director" label="导演" />
|
|
<el-table-column prop="runtime" label="时长（分）" />
|
|
</el-table>
|
|
`,
|
|
created() {
|
|
this.testData = getTestData()
|
|
},
|
|
},
|
|
opts,
|
|
),
|
|
)
|
|
}
|
|
|
|
it('height', async done => {
|
|
const wrapper = createTable('height="134"')
|
|
await nextTick()
|
|
expect(wrapper.attributes('style')).toContain('height: 134px')
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('height as string', async done => {
|
|
const wrapper = createTable('height="100px"')
|
|
await nextTick()
|
|
expect(wrapper.attributes('style')).toContain('height: 100px')
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('maxHeight', async done => {
|
|
const wrapper = createTable('max-height="134"')
|
|
await nextTick()
|
|
expect(wrapper.attributes('style')).toContain('max-height: 134px')
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('stripe', async done => {
|
|
const wrapper = createTable('stripe')
|
|
await nextTick()
|
|
expect(wrapper.classes().includes('el-table--striped')).toBeTruthy
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('border', async done => {
|
|
const wrapper = createTable('border')
|
|
await nextTick()
|
|
expect(wrapper.classes().includes('el-table--border')).toBeTruthy
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('fit', async done => {
|
|
const wrapper = createTable(':fit="false"')
|
|
await nextTick()
|
|
expect(wrapper.classes().includes('el-table--fit')).toBeFalsy
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('show-header', async done => {
|
|
const wrapper = createTable(':show-header="false"')
|
|
await nextTick()
|
|
expect(wrapper.findAll('.el-table__header-wrapper').length).toEqual(0)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('tableRowClassName', async done => {
|
|
const wrapper = createTable(':row-class-name="tableRowClassName"', {
|
|
methods: {
|
|
tableRowClassName({ rowIndex }) {
|
|
if (rowIndex === 1) {
|
|
return 'info-row'
|
|
} else if (rowIndex === 3) {
|
|
return 'positive-row'
|
|
}
|
|
|
|
return ''
|
|
},
|
|
},
|
|
})
|
|
await nextTick()
|
|
expect(wrapper.findAll('.info-row').length).toEqual(1)
|
|
expect(wrapper.findAll('.positive-row').length).toEqual(1)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('tableRowStyle[Object]', async done => {
|
|
const wrapper = createTable(':row-style="{ height: \'60px\' }"', {})
|
|
await nextTick()
|
|
expect(wrapper.find('.el-table__body tr').attributes('style')).toContain(
|
|
'height: 60px',
|
|
)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('tableRowStyle[Function]', async done => {
|
|
const wrapper = createTable(':row-style="tableRowStyle"', {
|
|
methods: {
|
|
tableRowStyle({ rowIndex }) {
|
|
if (rowIndex === 1) {
|
|
return { height: '60px', display: 'none' }
|
|
}
|
|
|
|
return null
|
|
},
|
|
},
|
|
})
|
|
|
|
await nextTick()
|
|
const child1 = wrapper.find('.el-table__body tr:nth-child(1)')
|
|
const child2 = wrapper.find('.el-table__body tr:nth-child(2)')
|
|
expect(child1.attributes('style')).toBeUndefined
|
|
expect(child2.attributes('style')).toContain('height: 60px')
|
|
expect(child2.attributes('style')).toContain('display: none')
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('current-row-key', async done => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData" row-key="id" highlight-current-row :current-row-key="currentRowKey">
|
|
<el-table-column prop="name" label="片名" />
|
|
<el-table-column prop="release" label="发行日期" />
|
|
<el-table-column prop="director" label="导演" />
|
|
<el-table-column prop="runtime" label="时长（分）" />
|
|
</el-table>
|
|
`,
|
|
created() {
|
|
this.testData = getTestData()
|
|
},
|
|
data() {
|
|
return { currentRowKey: null }
|
|
},
|
|
})
|
|
await nextTick()
|
|
wrapper.vm.currentRowKey = 1
|
|
const tr = wrapper.find('.el-table__body-wrapper tbody tr')
|
|
await nextTick()
|
|
expect(tr.classes().includes('current-row')).toBeTruthy
|
|
wrapper.vm.currentRowKey = 2
|
|
|
|
const rows = wrapper.findAll('.el-table__body-wrapper tbody tr')
|
|
await nextTick()
|
|
expect(tr.classes().includes('current-row')).toBeFalsy
|
|
expect(rows[1].classes().includes('current-row')).toBeTruthy
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
})
|
|
describe('filter', () => {
|
|
let wrapper: VueWrapper<ComponentPublicInstance>
|
|
|
|
beforeEach(async done => {
|
|
wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table ref="table" :data="testData" @filter-change="handleFilterChange">
|
|
<el-table-column prop="name" label="片名" />
|
|
<el-table-column prop="release" label="发行日期" />
|
|
<el-table-column
|
|
prop="director"
|
|
column-key="director"
|
|
:filters="[
|
|
{ text: 'John Lasseter', value: 'John Lasseter' },
|
|
{ text: 'Peter Docter', value: 'Peter Docter' },
|
|
{ text: 'Andrew Stanton', value: 'Andrew Stanton' }
|
|
]"
|
|
:filter-method="filterMethod"
|
|
label="导演" />
|
|
<el-table-column prop="runtime" label="时长（分）" />
|
|
</el-table>
|
|
`,
|
|
|
|
created() {
|
|
this.testData = getTestData()
|
|
},
|
|
|
|
methods: {
|
|
filterMethod(value, row) {
|
|
return value === row.director
|
|
},
|
|
handleFilterChange(filters) {
|
|
this.filters = filters
|
|
},
|
|
},
|
|
})
|
|
await nextTick()
|
|
done()
|
|
})
|
|
|
|
afterEach(() => wrapper.unmount())
|
|
|
|
it('render', () => {
|
|
expect(wrapper.find('.el-table__column-filter-trigger')).not.toBeUndefined
|
|
})
|
|
|
|
it('click dropdown', async done => {
|
|
const btn = wrapper.find('.el-table__column-filter-trigger')
|
|
btn.trigger('click')
|
|
await nextTick()
|
|
const filter = document.body.querySelector('.el-table-filter')
|
|
expect(filter).not.toBeUndefined
|
|
filter.parentNode.removeChild(filter)
|
|
done()
|
|
})
|
|
|
|
it('click filter', async done => {
|
|
const btn = wrapper.find('.el-table__column-filter-trigger')
|
|
|
|
btn.trigger('click')
|
|
await nextTick()
|
|
const filter = document.body.querySelector('.el-table-filter')
|
|
|
|
triggerEvent(filter.querySelector('.el-checkbox'), 'click', true, false)
|
|
// confrim button
|
|
await nextTick()
|
|
triggerEvent(
|
|
filter.querySelector('.el-table-filter__bottom button'),
|
|
'click',
|
|
true,
|
|
false,
|
|
)
|
|
await nextTick()
|
|
expect(
|
|
(wrapper.vm as ComponentPublicInstance & { filters: any; }).filters[
|
|
'director'
|
|
],
|
|
).toEqual(['John Lasseter'])
|
|
expect(
|
|
wrapper.findAll('.el-table__body-wrapper tbody tr').length,
|
|
).toEqual(3)
|
|
filter.parentNode.removeChild(filter)
|
|
done()
|
|
})
|
|
|
|
it('click reset', async done => {
|
|
const btn = wrapper.find('.el-table__column-filter-trigger')
|
|
btn.trigger('click')
|
|
await nextTick()
|
|
const filter = document.body.querySelector('.el-table-filter')
|
|
|
|
triggerEvent(filter.querySelector('.el-checkbox'), 'click', true, false)
|
|
await nextTick()
|
|
triggerEvent(
|
|
filter.querySelectorAll('.el-table-filter__bottom button')[1],
|
|
'click',
|
|
true,
|
|
false,
|
|
)
|
|
await nextTick()
|
|
expect(
|
|
(wrapper.vm as ComponentPublicInstance & { filters: any; }).filters[
|
|
'director'
|
|
],
|
|
).toEqual([])
|
|
expect(
|
|
filter
|
|
.querySelector('.el-table-filter__bottom button')
|
|
.classList.contains('is-disabled'),
|
|
).toBeTruthy
|
|
filter.parentNode.removeChild(filter)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
})
|
|
|
|
describe('events', () => {
|
|
const createTable = function(prop = '') {
|
|
return mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData" @${prop}="handleEvent">
|
|
<el-table-column type="selection" />
|
|
<el-table-column prop="name" />
|
|
<el-table-column prop="release" />
|
|
<el-table-column prop="director" />
|
|
<el-table-column prop="runtime"/>
|
|
</el-table>
|
|
`,
|
|
|
|
methods: {
|
|
handleEvent(...args) {
|
|
this.result = args
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return { result: '', testData: getTestData() }
|
|
},
|
|
})
|
|
}
|
|
|
|
it('select', async done => {
|
|
const wrapper = createTable('select')
|
|
await nextTick()
|
|
wrapper.findAll('.el-checkbox')[1].trigger('click')
|
|
expect(wrapper.vm.result.length).toEqual(2)
|
|
expect(wrapper.vm.result[1]).toHaveProperty('name')
|
|
expect(wrapper.vm.result[1]['name']).toEqual(getTestData()[0].name)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('selection-change', async done => {
|
|
const wrapper = createTable('selection-change')
|
|
await nextTick()
|
|
wrapper.findAll('.el-checkbox')[1].trigger('click')
|
|
expect(wrapper.vm.result.length).toEqual(1)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('cell-mouse-enter', async done => {
|
|
const wrapper = createTable('cell-mouse-enter')
|
|
await nextTick()
|
|
const cell = wrapper.findAll('.el-table__body .cell')[2] // first row
|
|
triggerEvent(cell.element.parentNode, 'mouseenter')
|
|
expect(wrapper.vm.result.length).toEqual(4) // row, column, cell, event
|
|
expect(wrapper.vm.result[0]).toHaveProperty('name')
|
|
expect(wrapper.vm.result[0]['name']).toEqual(getTestData()[0].name)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('cell-mouse-leave', async done => {
|
|
const wrapper = createTable('cell-mouse-leave')
|
|
await nextTick()
|
|
const cell = wrapper.findAll('.el-table__body .cell')[7] // second row
|
|
const cell2 = wrapper.findAll('.el-table__body .cell')[2] // first row
|
|
|
|
triggerEvent(cell2.element.parentNode, 'mouseenter')
|
|
triggerEvent(cell.element.parentNode, 'mouseleave')
|
|
expect(wrapper.vm.result.length).toEqual(4) // row, column, cell, event
|
|
expect(wrapper.vm.result[0]).toHaveProperty('name')
|
|
expect(wrapper.vm.result[0]['name']).toEqual(getTestData()[0].name)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('row-click', async done => {
|
|
const wrapper = createTable('row-click')
|
|
await nextTick()
|
|
const cell = wrapper.findAll('.el-table__body .cell')[2] // first row
|
|
|
|
triggerEvent(cell.element.parentNode.parentNode, 'click')
|
|
expect(wrapper.vm.result.length).toEqual(3) // row, event, column
|
|
expect(wrapper.vm.result[0]).toHaveProperty('name')
|
|
expect(wrapper.vm.result[0]['name']).toEqual(getTestData()[0].name)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('row-dblclick', async done => {
|
|
const wrapper = createTable('row-dblclick')
|
|
await nextTick()
|
|
const cell = wrapper.findAll('.el-table__body .cell')[2] // first row
|
|
|
|
triggerEvent(cell.element.parentNode.parentNode, 'dblclick')
|
|
expect(wrapper.vm.result.length).toEqual(3) // row, event, column
|
|
expect(wrapper.vm.result[0]).toHaveProperty('name')
|
|
expect(wrapper.vm.result[0]['name']).toEqual(getTestData()[0].name)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('header-click', async done => {
|
|
const wrapper = createTable('header-click')
|
|
await nextTick()
|
|
const cell = wrapper.findAll('.el-table__header th')[1] // header[prop='name']
|
|
cell.trigger('click')
|
|
expect(wrapper.vm.result.length).toEqual(2) // column, event
|
|
expect(wrapper.vm.result[0]['name']).toBeUndefined
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
})
|
|
describe('column attributes', () => {
|
|
const createTable = function(
|
|
props1?,
|
|
props2?,
|
|
props3?,
|
|
props4?,
|
|
opts?,
|
|
tableProps?,
|
|
) {
|
|
return mount(
|
|
Object.assign(
|
|
{
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData" ${tableProps || ''}>
|
|
<el-table-column prop="name" ${props1 || ''} />
|
|
<el-table-column prop="release" ${props2 || ''} />
|
|
<el-table-column prop="director" ${props3 || ''} />
|
|
<el-table-column prop="runtime" ${props4 || ''} />
|
|
</el-table>
|
|
`,
|
|
|
|
created() {
|
|
this.testData = getTestData()
|
|
},
|
|
},
|
|
opts,
|
|
),
|
|
)
|
|
}
|
|
|
|
it('label', async done => {
|
|
const wrapper = createTable('label="啊哈哈哈"', 'label="啊啦啦啦"')
|
|
await nextTick()
|
|
const ths = toArray(wrapper.findAll('thead th'))
|
|
.map(node => node.text())
|
|
.filter(o => o)
|
|
|
|
expect(ths).toEqual(['啊哈哈哈', '啊啦啦啦'])
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('width', async done => {
|
|
const wrapper = createTable('width="123px"', ':width="102"', 'width="39"')
|
|
await nextTick()
|
|
const ths = toArray(wrapper.findAll('.el-table__header-wrapper col'))
|
|
.map(node => node.width)
|
|
.filter(o => o)
|
|
expect(ths.includes('123')).toBeTruthy
|
|
expect(ths.includes('102')).toBeTruthy
|
|
expect(ths.includes('39')).toBeTruthy
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('fixed', async done => {
|
|
const wrapper = createTable(
|
|
'fixed label="test1"',
|
|
'fixed="right" label="test2"',
|
|
'fixed="left" label="test3"',
|
|
)
|
|
await nextTick()
|
|
expect(
|
|
toArray(
|
|
wrapper.findAll('.el-table__fixed th:not(.is-hidden)'),
|
|
).map(node => node.text()),
|
|
).toEqual(['test1', 'test3'])
|
|
|
|
expect(
|
|
toArray(
|
|
wrapper.findAll('.el-table__fixed-right th:not(.is-hidden)'),
|
|
).map(node => node.text()),
|
|
).toEqual(['test2'])
|
|
expect(wrapper.find('.el-table__body-wrapper').attributes('style'))
|
|
.toBeFalsy
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('resizable', async done => {
|
|
const wrapper = createTable(
|
|
'resizable',
|
|
':resizable="false"',
|
|
'',
|
|
'',
|
|
{},
|
|
'border',
|
|
)
|
|
await nextTick()
|
|
const firstCol = wrapper.find('thead th')
|
|
triggerEvent(firstCol.element, 'mousemove')
|
|
triggerEvent(firstCol.element, 'mousedown')
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('formatter', async done => {
|
|
const wrapper = createTable(':formatter="renderCell"', '', '', '', {
|
|
methods: {
|
|
renderCell(row) {
|
|
return `[${row.name}]`
|
|
},
|
|
},
|
|
})
|
|
|
|
await nextTick()
|
|
const cells = toArray(
|
|
wrapper.findAll('.el-table__body-wrapper tbody tr td:first-child'),
|
|
)
|
|
expect(cells.map(n => n.text())).toEqual(
|
|
getTestData().map(o => `[${o.name}]`),
|
|
)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('show-overflow-tooltip', async done => {
|
|
const wrapper = createTable('show-overflow-tooltip')
|
|
await nextTick()
|
|
expect(wrapper.findAll('.el-tooltip').length).toEqual(5)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
// it('show-tooltip-when-overflow', async (done) => {
|
|
// // old version prop name
|
|
// const wrapper = createTable('show-tooltip-when-overflow')
|
|
// await nextTick()
|
|
// expect(wrapper.findAll('.el-tooltip').length).toEqual(5)
|
|
// wrapper.unmount()
|
|
// done()
|
|
// })
|
|
|
|
it('align', async done => {
|
|
const wrapper = createTable(
|
|
'align="left"',
|
|
'align="right"',
|
|
'align="center"',
|
|
)
|
|
await nextTick()
|
|
const len = getTestData().length + 1
|
|
expect(wrapper.findAll('.is-left').length).toEqual(len)
|
|
expect(wrapper.findAll('.is-right').length).toEqual(len)
|
|
expect(wrapper.findAll('.is-center').length).toEqual(len)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('class-name', async done => {
|
|
const wrapper = createTable(
|
|
'class-name="column-1"',
|
|
'class-name="column-2 column-class-a"',
|
|
'class-name="column-class-a"',
|
|
)
|
|
await nextTick()
|
|
const len = getTestData().length + 1
|
|
expect(wrapper.findAll('.column-1').length).toEqual(len)
|
|
expect(wrapper.findAll('.column-2').length).toEqual(len)
|
|
expect(wrapper.findAll('.column-class-a').length).toEqual(len * 2)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('selectable === false & check selectAll status', async done => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData" @selection-change="change">
|
|
<el-table-column type="selection" :selectable="filterSelect" />
|
|
<el-table-column prop="name" label="name" />
|
|
<el-table-column prop="release" label="release" />
|
|
<el-table-column prop="director" label="director" />
|
|
<el-table-column prop="runtime" label="runtime" />
|
|
</el-table>
|
|
`,
|
|
|
|
data() {
|
|
return { selected: [], testData: getTestData() }
|
|
},
|
|
|
|
methods: {
|
|
change(rows) {
|
|
this.selected = rows
|
|
},
|
|
|
|
filterSelect() {
|
|
return false
|
|
},
|
|
},
|
|
})
|
|
|
|
await nextTick()
|
|
expect(wrapper.find('.el-checkbox').attributes('checked')).toBeFalsy
|
|
await nextTick()
|
|
expect(wrapper.vm.selected.length).toEqual(0)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
describe('type', () => {
|
|
const createTable = function(type) {
|
|
return mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData" @selection-change="change">
|
|
<el-table-column type="${type}" />
|
|
<el-table-column prop="name" label="name" />
|
|
<el-table-column prop="release" label="release" />
|
|
<el-table-column prop="director" label="director" />
|
|
<el-table-column prop="runtime" label="runtime" />
|
|
</el-table>
|
|
`,
|
|
|
|
created() {
|
|
this.testData = getTestData()
|
|
},
|
|
|
|
data() {
|
|
return { selected: [] }
|
|
},
|
|
|
|
methods: {
|
|
change(rows) {
|
|
this.selected = rows
|
|
},
|
|
},
|
|
})
|
|
}
|
|
|
|
describe('= selection', () => {
|
|
const wrapper = createTable('selection')
|
|
|
|
it('render', async done => {
|
|
await nextTick()
|
|
expect(wrapper.findAll('.el-checkbox').length).toEqual(
|
|
getTestData().length + 1,
|
|
)
|
|
done()
|
|
})
|
|
|
|
it('select all', async done => {
|
|
wrapper.find('.el-checkbox').trigger('click')
|
|
await nextTick()
|
|
expect(wrapper.vm.selected.length).toEqual(5)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('select one', async done => {
|
|
const wrapper2 = createTable('selection')
|
|
|
|
await nextTick()
|
|
wrapper2.findAll('.el-checkbox')[1].trigger('click')
|
|
|
|
await nextTick()
|
|
expect(wrapper2.vm.selected.length).toEqual(1)
|
|
expect(wrapper2.vm.selected[0].name).toEqual(getTestData()[0].name)
|
|
wrapper2.unmount()
|
|
done()
|
|
})
|
|
})
|
|
|
|
describe('= index', () => {
|
|
const wrapper = createTable('index')
|
|
|
|
it('render', async done => {
|
|
await nextTick()
|
|
expect(
|
|
toArray(
|
|
wrapper.findAll(
|
|
'.el-table__body-wrapper tbody tr td:first-child',
|
|
),
|
|
).map(node => node.text()),
|
|
).toEqual(['1', '2', '3', '4', '5'])
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
})
|
|
|
|
describe('= expand', () => {
|
|
const createInstance = function(extra?) {
|
|
extra = extra || ''
|
|
return mount({
|
|
components: {
|
|
ElTableColumn,
|
|
ElTable,
|
|
},
|
|
template: `
|
|
<el-table row-key="id" :data="testData" @expand-change="handleExpand" ${extra}>
|
|
<el-table-column type="expand">
|
|
<template #default="props">
|
|
<div>{{props.row.name}}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="release" label="release" />
|
|
<el-table-column prop="director" label="director" />
|
|
<el-table-column prop="runtime" label="runtime" />
|
|
</el-table>
|
|
`,
|
|
|
|
data() {
|
|
return {
|
|
expandCount: 0,
|
|
expandRowKeys: [],
|
|
testData: getTestData(),
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
handleExpand() {
|
|
this.expandCount++
|
|
},
|
|
refreshData() {
|
|
this.testData = getTestData()
|
|
},
|
|
},
|
|
})
|
|
}
|
|
|
|
it('works', async done => {
|
|
const wrapper = createInstance()
|
|
await nextTick()
|
|
expect(wrapper.findAll('td.el-table__expand-column').length).toEqual(
|
|
5,
|
|
)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('sortable', () => {
|
|
it('render', async done => {
|
|
const wrapper = createTable('', '', '', 'sortable')
|
|
await nextTick()
|
|
expect(wrapper.findAll('.caret-wrapper').length).toEqual(1)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('sortable orders', async done => {
|
|
const wrapper = createTable(
|
|
'',
|
|
'',
|
|
'',
|
|
"sortable :sort-orders=\"['descending', 'ascending']\"",
|
|
{},
|
|
)
|
|
|
|
await nextTick()
|
|
const elm = wrapper.find('.caret-wrapper')
|
|
elm.trigger('click')
|
|
|
|
await nextTick()
|
|
const lastCells = wrapper.findAll(
|
|
'.el-table__body-wrapper tbody tr td:last-child',
|
|
)
|
|
expect(toArray(lastCells).map(node => node.text())).toEqual([
|
|
'100',
|
|
'95',
|
|
'92',
|
|
'92',
|
|
'80',
|
|
])
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('sortable method', async done => {
|
|
const wrapper = createTable(
|
|
'sortable :sort-method="sortMethod"',
|
|
'',
|
|
'',
|
|
'',
|
|
{
|
|
methods: {
|
|
sortMethod(a, b) {
|
|
// sort method should return number
|
|
if (a.runtime < b.runtime) {
|
|
return 1
|
|
}
|
|
if (a.runtime > b.runtime) {
|
|
return -1
|
|
}
|
|
return 0
|
|
},
|
|
},
|
|
},
|
|
)
|
|
|
|
await nextTick()
|
|
const elm = wrapper.find('.caret-wrapper')
|
|
elm.trigger('click')
|
|
|
|
await nextTick()
|
|
const lastCells = wrapper.findAll(
|
|
'.el-table__body-wrapper tbody tr td:last-child',
|
|
)
|
|
expect(toArray(lastCells).map(node => node.text())).toEqual([
|
|
'100',
|
|
'95',
|
|
'92',
|
|
'92',
|
|
'80',
|
|
])
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('sortable by method', async done => {
|
|
const wrapper = createTable('sortable :sort-by="sortBy"', '', '', '', {
|
|
methods: {
|
|
sortBy(a) {
|
|
return -a.runtime
|
|
},
|
|
},
|
|
})
|
|
|
|
await nextTick()
|
|
const elm = wrapper.find('.caret-wrapper')
|
|
elm.trigger('click')
|
|
|
|
await nextTick()
|
|
const lastCells = wrapper.findAll(
|
|
'.el-table__body-wrapper tbody tr td:last-child',
|
|
)
|
|
expect(toArray(lastCells).map(node => node.text())).toEqual([
|
|
'100',
|
|
'95',
|
|
'92',
|
|
'92',
|
|
'80',
|
|
])
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('sortable by property', async done => {
|
|
const wrapper = createTable(
|
|
'sortable sort-by="runtime"',
|
|
'',
|
|
'',
|
|
'',
|
|
{},
|
|
)
|
|
|
|
await nextTick()
|
|
const elm = wrapper.find('.caret-wrapper')
|
|
elm.trigger('click')
|
|
|
|
await nextTick()
|
|
const lastCells = wrapper.findAll(
|
|
'.el-table__body-wrapper tbody tr td:last-child',
|
|
)
|
|
expect(toArray(lastCells).map(node => node.text())).toEqual([
|
|
'80',
|
|
'92',
|
|
'92',
|
|
'95',
|
|
'100',
|
|
])
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
})
|
|
|
|
describe('click sortable column', () => {
|
|
const wrapper = createTable('', '', '', 'sortable')
|
|
|
|
it('ascending', async done => {
|
|
const elm = wrapper.find('.caret-wrapper')
|
|
|
|
elm.trigger('click')
|
|
await nextTick()
|
|
const lastCells = wrapper.findAll(
|
|
'.el-table__body-wrapper tbody tr td:last-child',
|
|
)
|
|
expect(toArray(lastCells).map(node => node.text())).toEqual([
|
|
'80',
|
|
'92',
|
|
'92',
|
|
'95',
|
|
'100',
|
|
])
|
|
done()
|
|
})
|
|
|
|
it('descending', async done => {
|
|
const elm = wrapper.find('.caret-wrapper')
|
|
|
|
elm.trigger('click')
|
|
await nextTick()
|
|
const lastCells = wrapper.findAll(
|
|
'.el-table__body-wrapper tbody tr td:last-child',
|
|
)
|
|
expect(toArray(lastCells).map(node => node.text())).toEqual([
|
|
'100',
|
|
'95',
|
|
'92',
|
|
'92',
|
|
'80',
|
|
])
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
})
|
|
|
|
it('change column configuration', async done => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<template>
|
|
<button
|
|
id="addBut"
|
|
@click="
|
|
() => {
|
|
cols.push('b')
|
|
}
|
|
"
|
|
>+</button>
|
|
<button
|
|
id="delBut"
|
|
@click="
|
|
() => {
|
|
cols.pop()
|
|
}
|
|
"
|
|
>-</button>
|
|
<el-table :data="data">
|
|
<el-table-column
|
|
v-for="item of cols"
|
|
:prop="item"
|
|
:label="item"
|
|
:key="item"
|
|
></el-table-column>
|
|
</el-table>
|
|
</template>
|
|
`,
|
|
|
|
data() {
|
|
return { cols: ['a', 'v', 'b'], data: [{ a: 1, v: 2, b: 3 }] }
|
|
},
|
|
})
|
|
|
|
await nextTick()
|
|
expect(wrapper.findAll('.el-table__header-wrapper th').length).toEqual(3)
|
|
const addBut = wrapper.find('#addBut')
|
|
const delBut = wrapper.find('#delBut')
|
|
addBut.trigger('click')
|
|
await nextTick()
|
|
expect(wrapper.findAll('.el-table__header-wrapper th').length).toEqual(4)
|
|
addBut.trigger('click')
|
|
await nextTick()
|
|
expect(wrapper.findAll('.el-table__header-wrapper th').length).toEqual(5)
|
|
delBut.trigger('click')
|
|
await nextTick()
|
|
expect(wrapper.findAll('.el-table__header-wrapper th').length).toEqual(4)
|
|
delBut.trigger('click')
|
|
await nextTick()
|
|
expect(wrapper.findAll('.el-table__header-wrapper th').length).toEqual(3)
|
|
done()
|
|
})
|
|
})
|
|
describe('summary row', () => {
|
|
it('should render', async done => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData" show-summary>
|
|
<el-table-column prop="name" />
|
|
<el-table-column prop="release"/>
|
|
<el-table-column prop="director"/>
|
|
<el-table-column prop="runtime"/>
|
|
</el-table>
|
|
`,
|
|
|
|
created() {
|
|
this.testData = getTestData()
|
|
},
|
|
})
|
|
|
|
await nextTick()
|
|
const footer = wrapper.find('.el-table__footer')
|
|
expect(footer).not.toBeUndefined
|
|
const cells = toArray(footer.findAll('.cell'))
|
|
expect(cells[cells.length - 1].text()).toEqual('459')
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('custom sum text', async done => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData" show-summary sum-text="Time">
|
|
<el-table-column prop="name" />
|
|
<el-table-column prop="release"/>
|
|
<el-table-column prop="director"/>
|
|
<el-table-column prop="runtime"/>
|
|
</el-table>
|
|
`,
|
|
|
|
created() {
|
|
this.testData = getTestData()
|
|
},
|
|
})
|
|
|
|
await nextTick()
|
|
const cells = toArray(wrapper.findAll('.el-table__footer .cell'))
|
|
expect(cells[0].text()).toEqual('Time')
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('custom summary method', async done => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData" show-summary :summary-method="getSummary">
|
|
<el-table-column prop="name" />
|
|
<el-table-column prop="release"/>
|
|
<el-table-column prop="director"/>
|
|
<el-table-column prop="runtime"/>
|
|
</el-table>
|
|
`,
|
|
|
|
created() {
|
|
this.testData = getTestData()
|
|
},
|
|
|
|
methods: {
|
|
getSummary(param) {
|
|
const { columns, data } = param
|
|
const result = []
|
|
columns.forEach(column => {
|
|
const prop = column.property
|
|
if (prop === 'release') {
|
|
const dates = data.map(item => item[prop])
|
|
const releaseYears = dates.map(date => Number(date.slice(0, 4)))
|
|
result.push(
|
|
releaseYears.reduce((prev, curr) => {
|
|
return prev + curr
|
|
}),
|
|
)
|
|
} else {
|
|
result.push('')
|
|
}
|
|
})
|
|
return result
|
|
},
|
|
},
|
|
})
|
|
|
|
await nextTick()
|
|
const cells = toArray(wrapper.findAll('.el-table__footer .cell'))
|
|
expect(cells[1].text()).toEqual('9996')
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
})
|
|
describe('multi level column', () => {
|
|
it('should works', async done => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData">
|
|
<el-table-column prop="name" />
|
|
<el-table-column label="group">
|
|
<el-table-column prop="release"/>
|
|
<el-table-column prop="director"/>
|
|
</el-table-column>
|
|
<el-table-column prop="runtime"/>
|
|
</el-table>
|
|
`,
|
|
|
|
created() {
|
|
this.testData = null
|
|
},
|
|
})
|
|
|
|
await nextTick()
|
|
const trs = wrapper.findAll('.el-table__header tr')
|
|
expect(trs.length).toEqual(2)
|
|
const firstRowHeader = trs[0].findAll('th .cell').length
|
|
const secondRowHeader = trs[1].findAll('th .cell').length
|
|
expect(firstRowHeader).toEqual(3)
|
|
expect(secondRowHeader).toEqual(2)
|
|
|
|
expect(trs[0].find('th:first-child').attributes('rowspan')).toEqual('2')
|
|
expect(trs[0].find('th:nth-child(2)').attributes('colspan')).toEqual('2')
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
// TODO
|
|
// it('should works', async done => {
|
|
// const wrapper = mount({
|
|
// components: {
|
|
// ElTable,
|
|
// ElTableColumn,
|
|
// },
|
|
// template: `
|
|
// <el-table :data="testData">
|
|
// <el-table-column prop="name" />
|
|
// <el-table-column label="group">
|
|
// <el-table-column label="group's group">
|
|
// <el-table-column prop="release" />
|
|
// <el-table-column prop="runtime"/>
|
|
// </el-table-column>
|
|
// <el-table-column prop="director" />
|
|
// </el-table-column>
|
|
// <el-table-column prop="runtime"/>
|
|
// </el-table>
|
|
// `,
|
|
|
|
// created() {
|
|
// this.testData = null
|
|
// },
|
|
// })
|
|
|
|
// await nextTick()
|
|
// const trs = wrapper.findAll('.el-table__header tr')
|
|
// expect(trs.length).toEqual(3)
|
|
// const firstRowHeader = trs[0].findAll('th .cell').length
|
|
// const secondRowHeader = trs[1].findAll('th .cell').length
|
|
// const thirdRowHeader = trs[2].findAll('th .cell').length
|
|
// expect(firstRowHeader).toEqual(3)
|
|
// expect(secondRowHeader).toEqual(2)
|
|
// expect(thirdRowHeader).toEqual(2)
|
|
|
|
// expect(trs[0].find('th:first-child').attributes('rowspan')).toEqual('3')
|
|
// expect(trs[0].find('th:nth-child(2)').attributes('colspan')).toEqual('3')
|
|
// expect(trs[1].find('th:first-child').attributes('colspan')).toEqual('2')
|
|
// expect(trs[1].find('th:nth-child(2)').attributes('rowspan')).toEqual('2')
|
|
|
|
// wrapper.unmount()
|
|
// done()
|
|
// })
|
|
|
|
it('should work in one column', async done => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData">
|
|
<el-table-column label="group">
|
|
<el-table-column prop="release"/>
|
|
</el-table-column>
|
|
</el-table>
|
|
`,
|
|
|
|
created() {
|
|
this.testData = null
|
|
},
|
|
})
|
|
|
|
await nextTick()
|
|
const trs = wrapper.findAll('.el-table__header tr')
|
|
expect(trs.length).toEqual(2)
|
|
const firstRowLength = trs[0].findAll('th .cell').length
|
|
const secondRowLength = trs[1].findAll('th .cell').length
|
|
expect(firstRowLength).toEqual(1)
|
|
expect(secondRowLength).toEqual(1)
|
|
|
|
expect(trs[0].find('th:first-child').attributes('rowspan')).toEqual('1')
|
|
expect(trs[0].find('th:first-child').attributes('colspan')).toEqual('1')
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
})
|
|
describe('dynamic column attribtes', () => {
|
|
it('label', async done => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData">
|
|
<el-table-column prop="name" :label="label"/>
|
|
<el-table-column prop="release" />
|
|
<el-table-column prop="director" />
|
|
<el-table-column prop="runtime" />
|
|
</el-table>
|
|
`,
|
|
data() {
|
|
return {
|
|
label: 'name',
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.testData = getTestData()
|
|
},
|
|
})
|
|
|
|
await nextTick()
|
|
expect(wrapper.find('.el-table__header th .cell').text()).toEqual('name')
|
|
wrapper.vm.label = 'NAME'
|
|
wrapper.vm.$nextTick(() => {
|
|
expect(wrapper.find('.el-table__header th .cell').text()).toEqual(
|
|
'NAME',
|
|
)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
})
|
|
|
|
it('align', async done => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData">
|
|
<el-table-column prop="name" :align="align"/>
|
|
</el-table>
|
|
`,
|
|
|
|
data() {
|
|
return {
|
|
align: 'left',
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.testData = getTestData()
|
|
},
|
|
})
|
|
|
|
await nextTick()
|
|
expect(wrapper.findAll('.el-table__body td.is-right').length === 0)
|
|
.toBeTruthy
|
|
wrapper.vm.align = 'right'
|
|
wrapper.vm.$nextTick(() => {
|
|
expect(wrapper.findAll('.el-table__body td.is-right').length > 0)
|
|
.toBeTruthy
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
})
|
|
it('header-align', async done => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData">
|
|
<el-table-column prop="name" :align="align" :header-align="headerAlign"/>
|
|
</el-table>
|
|
`,
|
|
|
|
data() {
|
|
return {
|
|
align: 'left',
|
|
headerAlign: null,
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.testData = getTestData()
|
|
},
|
|
})
|
|
await nextTick()
|
|
expect(
|
|
wrapper.findAll('.el-table__header th.is-left').length,
|
|
).toBeGreaterThanOrEqual(0)
|
|
expect(wrapper.findAll('.el-table__header th.is-center').length).toEqual(
|
|
0,
|
|
)
|
|
expect(wrapper.findAll('.el-table__header th.is-right').length).toEqual(0)
|
|
wrapper.vm.align = 'right'
|
|
await nextTick()
|
|
expect(wrapper.findAll('.el-table__header th.is-left').length).toEqual(0)
|
|
expect(wrapper.findAll('.el-table__header th.is-center').length).toEqual(
|
|
0,
|
|
)
|
|
expect(
|
|
wrapper.findAll('.el-table__header th.is-right').length,
|
|
).toBeGreaterThanOrEqual(0)
|
|
wrapper.vm.headerAlign = 'center'
|
|
await nextTick()
|
|
expect(wrapper.findAll('.el-table__header th.is-left').length).toEqual(0)
|
|
expect(
|
|
wrapper.findAll('.el-table__header th.is-center').length,
|
|
).toBeGreaterThanOrEqual(0)
|
|
expect(wrapper.findAll('.el-table__header th.is-right').length).toEqual(0)
|
|
wrapper.vm.headerAlign = null
|
|
await nextTick()
|
|
expect(wrapper.findAll('.el-table__header th.is-left').length).toEqual(0)
|
|
expect(wrapper.findAll('.el-table__header th.is-center').length).toEqual(
|
|
0,
|
|
)
|
|
expect(
|
|
wrapper.findAll('.el-table__header th.is-right').length,
|
|
).toBeGreaterThanOrEqual(0)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('width', async done => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData" :fit="false">
|
|
<el-table-column prop="name" :width="width"/>
|
|
</el-table>
|
|
`,
|
|
|
|
data() {
|
|
return {
|
|
width: 100,
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.testData = getTestData()
|
|
},
|
|
})
|
|
|
|
await nextTick()
|
|
expect(wrapper.find('.el-table__body col').attributes('width')).toEqual(
|
|
'100',
|
|
)
|
|
wrapper.vm.width = 200
|
|
await nextTick()
|
|
expect(wrapper.find('.el-table__body col').attributes('width')).toEqual(
|
|
'200',
|
|
)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('min-width', async done => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData" :fit="false">
|
|
<el-table-column prop="name" :min-width="width"/>
|
|
</el-table>
|
|
`,
|
|
|
|
data() {
|
|
return {
|
|
width: 100,
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.testData = getTestData()
|
|
},
|
|
})
|
|
|
|
await nextTick()
|
|
expect(wrapper.find('.el-table__body col').attributes('width')).toEqual(
|
|
'100',
|
|
)
|
|
wrapper.vm.width = 200
|
|
await nextTick()
|
|
expect(wrapper.find('.el-table__body col').attributes('width')).toEqual(
|
|
'200',
|
|
)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('fixed', async done => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData">
|
|
<el-table-column :fixed="fixed" />
|
|
<el-table-column prop="release" />
|
|
<el-table-column prop="director" />
|
|
<el-table-column prop="runtime" />
|
|
</el-table>
|
|
`,
|
|
|
|
data() {
|
|
return {
|
|
fixed: false,
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.testData = getTestData()
|
|
},
|
|
})
|
|
|
|
await nextTick()
|
|
expect(!wrapper.find('.el-table__fixed')).toBeTruthy
|
|
wrapper.vm.fixed = true
|
|
await nextTick()
|
|
expect(!!wrapper.find('.el-table__fixed')).toBeTruthy
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('prop', async done => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData">
|
|
<el-table-column :prop="prop" />
|
|
<el-table-column prop="release" />
|
|
<el-table-column prop="director" />
|
|
<el-table-column prop="runtime" />
|
|
</el-table>
|
|
`,
|
|
|
|
data() {
|
|
return {
|
|
prop: 'name',
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.testData = getTestData()
|
|
},
|
|
})
|
|
|
|
await nextTick()
|
|
let firstColumnContent = wrapper.find('.el-table__body td .cell').text()
|
|
let secondColumnContent = wrapper
|
|
.find('.el-table__body td:nth-child(2) .cell')
|
|
.text()
|
|
expect(firstColumnContent !== secondColumnContent).toBeTruthy
|
|
wrapper.vm.prop = 'release'
|
|
await nextTick()
|
|
firstColumnContent = wrapper.find('.el-table__body td .cell').text()
|
|
secondColumnContent = wrapper
|
|
.find('.el-table__body td:nth-child(2) .cell')
|
|
.text()
|
|
expect(firstColumnContent === secondColumnContent).toBeTruthy
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
})
|
|
describe('methods', () => {
|
|
const createTable = function(prop = '') {
|
|
return mount({
|
|
components: {
|
|
ElTableColumn,
|
|
ElTable,
|
|
},
|
|
template: `
|
|
<el-table ref="table" :data="testData" @${prop}="handleEvent">
|
|
<el-table-column type="selection" />
|
|
<el-table-column prop="name" />
|
|
<el-table-column prop="release" />
|
|
<el-table-column prop="director" />
|
|
<el-table-column prop="runtime"/>
|
|
</el-table>
|
|
`,
|
|
|
|
methods: {
|
|
handleEvent(selection) {
|
|
this.fireCount++
|
|
this.selection = selection
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return { selection: null, testData: getTestData(), fireCount: 0 }
|
|
},
|
|
})
|
|
}
|
|
|
|
it('toggleRowSelection', () => {
|
|
const wrapper = createTable('selection-change')
|
|
const vm = wrapper.vm
|
|
vm.$refs.table.toggleRowSelection(vm.testData[0])
|
|
expect(vm.selection.length).toEqual(1)
|
|
expect(vm.fireCount).toEqual(1)
|
|
|
|
// test use second parameter
|
|
vm.$refs.table.toggleRowSelection(vm.testData[0])
|
|
expect(vm.fireCount).toEqual(2)
|
|
|
|
vm.$refs.table.toggleRowSelection(vm.testData[0], false)
|
|
expect(vm.fireCount).toEqual(2)
|
|
expect(vm.selection.length).toEqual(0)
|
|
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it('toggleAllSelection', async done => {
|
|
const wrapper = createTable('selection-change')
|
|
const vm = wrapper.vm
|
|
vm.$refs.table.toggleAllSelection()
|
|
await nextTick()
|
|
expect(vm.selection.length).toEqual(5)
|
|
|
|
vm.$refs.table.toggleAllSelection()
|
|
await nextTick()
|
|
expect(vm.selection.length).toEqual(0)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('clearSelection', () => {
|
|
const wrapper = createTable('selection-change')
|
|
const vm = wrapper.vm
|
|
vm.$refs.table.toggleRowSelection(vm.testData[0])
|
|
expect(vm.selection.length).toEqual(1)
|
|
expect(vm.fireCount).toEqual(1)
|
|
|
|
// clear selection
|
|
vm.$refs.table.clearSelection()
|
|
expect(vm.fireCount).toEqual(2)
|
|
expect(vm.selection.length).toEqual(0)
|
|
|
|
vm.$refs.table.clearSelection()
|
|
expect(vm.fireCount).toEqual(2)
|
|
|
|
wrapper.unmount()
|
|
})
|
|
// TODO
|
|
it('sort', async done => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTableColumn,
|
|
ElTable,
|
|
},
|
|
template: `
|
|
<el-table ref="table" :data="testData" :default-sort = "{prop: 'runtime', order: 'ascending'}">
|
|
<el-table-column prop="name" />
|
|
<el-table-column prop="release" />
|
|
<el-table-column prop="director" />
|
|
<el-table-column prop="runtime"/>
|
|
</el-table>
|
|
`,
|
|
data() {
|
|
return { testData: getTestData() }
|
|
},
|
|
})
|
|
|
|
const vm = wrapper.vm
|
|
await nextTick()
|
|
const lastCells = wrapper.findAll(
|
|
'.el-table__body-wrapper tbody tr td:last-child',
|
|
)
|
|
equalArray(
|
|
toArray(lastCells).map(node => node.text()),
|
|
['80', '95', '92', '92', '100'],
|
|
)
|
|
await nextTick()
|
|
vm.testData = vm.testData.map(data =>
|
|
Object.assign(data, { runtime: -data.runtime }),
|
|
)
|
|
vm.$refs.table.sort('runtime', 'ascending')
|
|
await nextTick()
|
|
equalArray(
|
|
toArray(lastCells).map(node => node.text()),
|
|
['-100', '-95', '-92', '-92', '-80'],
|
|
)
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('sort correct change icon', async () => {
|
|
function assertSortIconCount($el, msg, count = 1) {
|
|
const sortIconCount = $el.querySelectorAll(
|
|
'th.ascending, th.descending',
|
|
).length
|
|
expect(sortIconCount).toEqual(count)
|
|
}
|
|
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table ref="table" :data="testData" >
|
|
<el-table-column prop="name" sortable />
|
|
<el-table-column prop="release" sortable />
|
|
<el-table-column prop="director" sortable />
|
|
<el-table-column prop="runtime" sortable />
|
|
</el-table>
|
|
`,
|
|
data() {
|
|
return { testData: getTestData() }
|
|
},
|
|
})
|
|
const vm = wrapper.vm
|
|
await nextTick()
|
|
assertSortIconCount(
|
|
wrapper.element,
|
|
'sorting icon is not empty after mount',
|
|
0,
|
|
)
|
|
// manual click first column header
|
|
const elm = wrapper.find('.caret-wrapper')
|
|
elm.trigger('click')
|
|
await nextTick()
|
|
assertSortIconCount(
|
|
wrapper.element,
|
|
'sorting icon is not one after click header',
|
|
)
|
|
vm.$refs.table.sort('director', 'descending')
|
|
await nextTick()
|
|
assertSortIconCount(
|
|
wrapper.element,
|
|
'sorting icon is not one after call sort',
|
|
)
|
|
vm.$refs.table.sort('director', 'ascending')
|
|
await nextTick()
|
|
assertSortIconCount(
|
|
wrapper.element,
|
|
'sorting icon is not one after sort same column',
|
|
)
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it('setCurrentRow', async () => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<div>
|
|
<el-table ref="table" :data="testData" highlight-current-row>
|
|
<el-table-column prop="name" sortable />
|
|
<el-table-column prop="release" sortable />
|
|
<el-table-column prop="director" sortable />
|
|
<el-table-column prop="runtime" sortable />
|
|
</el-table>
|
|
<button class="clear" @click="clear">clear</button>
|
|
</div>
|
|
`,
|
|
data() {
|
|
return { testData: getTestData() }
|
|
},
|
|
methods: {
|
|
clear() {
|
|
this.$refs.table.setCurrentRow()
|
|
},
|
|
},
|
|
})
|
|
const vm = wrapper.vm
|
|
|
|
vm.$refs.table.setCurrentRow(vm.testData[1])
|
|
await nextTick()
|
|
const secondRow = vm.$el.querySelectorAll('.el-table__row')[1]
|
|
expect(secondRow.classList.contains('current-row')).toBeTruthy
|
|
|
|
vm.$el.querySelector('.clear').click()
|
|
await nextTick()
|
|
expect(secondRow.classList.contains('current-row')).toBeFalsy
|
|
|
|
wrapper.unmount()
|
|
})
|
|
})
|
|
|
|
it('hover', async () => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData">
|
|
<el-table-column prop="name" label="片名" fixed />
|
|
<el-table-column prop="release" label="发行日期" />
|
|
<el-table-column prop="director" label="导演" />
|
|
<el-table-column prop="runtime" label="时长（分）" />
|
|
</el-table>
|
|
`,
|
|
data() {
|
|
return {
|
|
testData: getTestData(),
|
|
}
|
|
},
|
|
})
|
|
const vm = wrapper.vm
|
|
await nextTick()
|
|
const tr = vm.$el.querySelector('.el-table__body-wrapper tbody tr')
|
|
triggerEvent(tr, 'mouseenter', true, false)
|
|
|
|
await nextTick()
|
|
expect(tr.classList.contains('hover-row')).toBeTruthy
|
|
triggerEvent(tr, 'mouseleave', true, false)
|
|
|
|
await nextTick()
|
|
expect(tr.classList.contains('hover-row')).toBeFalsy
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it('highlight-current-row', async done => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData" highlight-current-row>
|
|
<el-table-column prop="name" label="片名" />
|
|
<el-table-column prop="release" label="发行日期" />
|
|
<el-table-column prop="director" label="导演" />
|
|
<el-table-column prop="runtime" label="时长（分）" sortable />
|
|
</el-table>
|
|
`,
|
|
|
|
created() {
|
|
this.testData = getTestData()
|
|
},
|
|
})
|
|
const vm = wrapper.vm
|
|
await nextTick()
|
|
const tr = vm.$el.querySelector('.el-table__body-wrapper tbody tr')
|
|
triggerEvent(tr, 'click', true, false)
|
|
await nextTick()
|
|
expect(tr.classList.contains('current-row')).toBeTruthy
|
|
let rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr')
|
|
|
|
triggerEvent(rows[1], 'click', true, false)
|
|
await nextTick()
|
|
expect(tr.classList.contains('current-row')).toBeFalsy
|
|
expect(rows[1].classList.contains('current-row')).toBeTruthy
|
|
|
|
const ths = vm.$el.querySelectorAll('.el-table__header-wrapper thead th')
|
|
triggerEvent(ths[3], 'click', true, false)
|
|
|
|
await nextTick()
|
|
rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr')
|
|
|
|
expect(rows[1].classList.contains('current-row')).toBeFalsy
|
|
expect(rows[3].classList.contains('current-row')).toBeTruthy
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('keep highlight row when data change', async done => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData" highlight-current-row row-key="release">
|
|
<el-table-column prop="name" label="片名" />
|
|
<el-table-column prop="release" label="发行日期" />
|
|
<el-table-column prop="director" label="导演" />
|
|
<el-table-column prop="runtime" label="时长（分）" sortable />
|
|
</el-table>
|
|
`,
|
|
data() {
|
|
return {
|
|
testData: getTestData(),
|
|
}
|
|
},
|
|
})
|
|
const vm = wrapper.vm
|
|
await nextTick()
|
|
let rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr')
|
|
triggerEvent(rows[2], 'click', true, false)
|
|
await nextTick()
|
|
expect(rows[2].classList.contains('current-row')).toBeTruthy
|
|
const data = getTestData()
|
|
data.splice(0, 0, {
|
|
id: 8,
|
|
name: 'Monsters, Inc.',
|
|
release: '2018-02-01',
|
|
director: 'Peter Docter',
|
|
runtime: 92,
|
|
})
|
|
data[2].name = 'Modified Name'
|
|
vm.testData = data
|
|
|
|
await nextTick()
|
|
rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr')
|
|
expect(rows[3].classList.contains('current-row')).toBeTruthy
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('keep highlight row after sort', async done => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData" row-key="release" highlight-current-row >
|
|
<el-table-column prop="name" label="片名" />
|
|
<el-table-column prop="release" label="发行日期" />
|
|
<el-table-column prop="director" label="导演" />
|
|
<el-table-column prop="runtime" label="时长（分）" sortable />
|
|
</el-table>
|
|
`,
|
|
data() {
|
|
return {
|
|
testData: getTestData(),
|
|
}
|
|
},
|
|
})
|
|
const vm = wrapper.vm
|
|
await nextTick()
|
|
let rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr')
|
|
triggerEvent(rows[1], 'click', true, false)
|
|
await nextTick()
|
|
expect(rows[1].classList.contains('current-row')).toBeTruthy
|
|
const cells = vm.$el.querySelectorAll(
|
|
'.el-table__header-wrapper thead th > .cell',
|
|
)
|
|
triggerEvent(cells[3], 'click', true, false)
|
|
|
|
await nextTick()
|
|
rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr')
|
|
expect(rows[3].classList.contains('current-row')).toBeTruthy
|
|
wrapper.unmount()
|
|
done()
|
|
})
|
|
|
|
it('table append is visible in viewport if height is 100%', async () => {
|
|
const wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="[]" height="100%">
|
|
<el-table-column prop="name" label="片名" />
|
|
<el-table-column prop="release" label="发行日期" />
|
|
<el-table-column prop="director" label="导演" />
|
|
<el-table-column prop="runtime" label="时长（分）" />
|
|
<template #append>
|
|
<div class="append-content" style="height: 48px;">
|
|
append 区域始终出现在视图内
|
|
</div>
|
|
</template>
|
|
</el-table>
|
|
`,
|
|
})
|
|
await nextTick()
|
|
const emptyBlockEl = wrapper.find('.el-table__empty-block')
|
|
expect(emptyBlockEl.attributes('style')).toContain('height: 100%')
|
|
wrapper.unmount()
|
|
})
|
|
|
|
describe('tree', () => {
|
|
let wrapper: VueWrapper<ComponentPublicInstance>
|
|
afterEach(() => wrapper?.unmount())
|
|
it('render tree structual data', async () => {
|
|
wrapper = mount({
|
|
components: {
|
|
ElTableColumn,
|
|
ElTable,
|
|
},
|
|
template: `
|
|
<el-table :data="testData" row-key="release">
|
|
<el-table-column prop="name" label="片名" />
|
|
<el-table-column prop="release" label="发行日期" />
|
|
<el-table-column prop="director" label="导演" />
|
|
<el-table-column prop="runtime" label="时长（分）" />
|
|
</el-table>
|
|
`,
|
|
data() {
|
|
const testData = getTestData() as any
|
|
testData[1].children = [
|
|
{
|
|
name: "A Bug's Life copy 1",
|
|
release: '1998-11-25-1',
|
|
director: 'John Lasseter',
|
|
runtime: 95,
|
|
},
|
|
{
|
|
name: "A Bug's Life copy 2",
|
|
release: '1998-11-25-2',
|
|
director: 'John Lasseter',
|
|
runtime: 95,
|
|
},
|
|
]
|
|
return {
|
|
testData: testData,
|
|
}
|
|
},
|
|
})
|
|
await nextTick()
|
|
const rows = wrapper.findAll('.el-table__row')
|
|
expect(rows.length).toEqual(7)
|
|
const childRows = wrapper.findAll('.el-table__row--level-1')
|
|
expect(childRows.length).toEqual(2)
|
|
childRows.forEach(item => {
|
|
expect(item.attributes('style')).toContain('display: none')
|
|
})
|
|
wrapper.find('.el-table__expand-icon').trigger('click')
|
|
|
|
await nextTick()
|
|
childRows.forEach(item => {
|
|
expect(item.attributes('style')).toBeUndefined
|
|
})
|
|
})
|
|
|
|
it('load substree row data', async () => {
|
|
wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData" row-key="release" lazy :load="load">
|
|
<el-table-column prop="name" label="片名" />
|
|
<el-table-column prop="release" label="发行日期" />
|
|
<el-table-column prop="director" label="导演" />
|
|
<el-table-column prop="runtime" label="时长（分）" />
|
|
</el-table>
|
|
`,
|
|
data() {
|
|
const testData = getTestData() as any
|
|
testData[testData.length - 1].children = [
|
|
{
|
|
name: "A Bug's Life copy 1",
|
|
release: '2008-1-25-1',
|
|
director: 'John Lasseter',
|
|
runtime: 95,
|
|
},
|
|
]
|
|
testData[1].hasChildren = true
|
|
return {
|
|
testData: testData,
|
|
}
|
|
},
|
|
methods: {
|
|
load(row, treeNode, resolve) {
|
|
resolve([
|
|
{
|
|
name: "A Bug's Life copy 1",
|
|
release: '1998-11-25-1',
|
|
director: 'John Lasseter',
|
|
runtime: 95,
|
|
},
|
|
{
|
|
name: "A Bug's Life copy 2",
|
|
release: '1998-11-25-2',
|
|
director: 'John Lasseter',
|
|
runtime: 95,
|
|
},
|
|
])
|
|
},
|
|
},
|
|
})
|
|
await nextTick()
|
|
const expandIcon = wrapper.find('.el-table__expand-icon')
|
|
expandIcon.trigger('click')
|
|
|
|
await nextTick()
|
|
expect(expandIcon.classes().includes('el-table__expand-icon--expanded'))
|
|
.toBeTruthy
|
|
expect(wrapper.findAll('.el-table__row').length).toEqual(8)
|
|
})
|
|
|
|
it('tree-props & default-expand-all & expand-change', async () => {
|
|
const spy = sinon.spy()
|
|
wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table
|
|
:data="testData" lazy default-expand-all row-key="release" :tree-props="{children: 'childrenTest', hasChildren: 'hasChildrenTest'}"
|
|
:load="load" @expand-change="change">
|
|
<el-table-column prop="name" label="片名" />
|
|
<el-table-column prop="release" label="发行日期" />
|
|
<el-table-column prop="director" label="导演" />
|
|
<el-table-column prop="runtime" label="时长（分）" />
|
|
</el-table>
|
|
`,
|
|
data() {
|
|
const testData = getTestData() as any
|
|
testData[testData.length - 1].childrenTest = [
|
|
{
|
|
name: "A Bug's Life copy 1",
|
|
release: '2008-1-25-1',
|
|
director: 'John Lasseter',
|
|
runtime: 95,
|
|
},
|
|
]
|
|
testData[1].hasChildrenTest = true
|
|
return {
|
|
testData: testData,
|
|
}
|
|
},
|
|
methods: {
|
|
load(row, treeNode, resolve) {
|
|
resolve([
|
|
{
|
|
name: "A Bug's Life copy 1",
|
|
release: '1998-11-25-1',
|
|
director: 'John Lasseter',
|
|
runtime: 95,
|
|
},
|
|
{
|
|
name: "A Bug's Life copy 2",
|
|
release: '1998-11-25-2',
|
|
director: 'John Lasseter',
|
|
runtime: 95,
|
|
},
|
|
])
|
|
},
|
|
change: spy,
|
|
},
|
|
})
|
|
await nextTick()
|
|
const childRows = wrapper.findAll('.el-table__row--level-1')
|
|
childRows.forEach(item => {
|
|
expect(item.attributes('style')).toBeUndefined
|
|
})
|
|
const expandIcon = wrapper.find('.el-table__expand-icon')
|
|
expandIcon.trigger('click')
|
|
await nextTick()
|
|
expect(expandIcon.classes().includes('el-table__expand-icon--expanded'))
|
|
.toBeTruthy
|
|
expect(wrapper.findAll('.el-table__row').length).toEqual(8)
|
|
expect(spy.args[0][0]).toBeInstanceOf(Object)
|
|
expect(spy.args[0][1]).toBeTruthy
|
|
})
|
|
|
|
it('expand-row-keys & toggleRowExpansion', async () => {
|
|
wrapper = mount({
|
|
components: {
|
|
ElTable,
|
|
ElTableColumn,
|
|
},
|
|
template: `
|
|
<el-table :data="testData" row-key="release" lazy :load="load" :expand-row-keys="['2003-5-30']" ref="table">
|
|
<el-table-column prop="name" label="片名" />
|
|
<el-table-column prop="release" label="发行日期" />
|
|
<el-table-column prop="director" label="导演" />
|
|
<el-table-column prop="runtime" label="时长（分）" />
|
|
</el-table>
|
|
`,
|
|
data() {
|
|
const testData = getTestData() as any
|
|
testData[testData.length - 1].children = [
|
|
{
|
|
name: "A Bug's Life copy 1",
|
|
release: '2003-5-30-1',
|
|
director: 'John Lasseter',
|
|
runtime: 95,
|
|
hasChildren: true,
|
|
},
|
|
]
|
|
return {
|
|
testData: testData,
|
|
}
|
|
},
|
|
methods: {
|
|
load(row, treeNode, resolve) {
|
|
resolve([
|
|
{
|
|
name: "A Bug's Life copy 1",
|
|
release: '2003-5-30-2',
|
|
director: 'John Lasseter',
|
|
runtime: 95,
|
|
},
|
|
])
|
|
},
|
|
closeExpandRow() {
|
|
const testData = this.testData
|
|
const row = testData[testData.length - 1].children[0]
|
|
this.$refs.table.toggleRowExpansion(row)
|
|
},
|
|
},
|
|
})
|
|
await nextTick()
|
|
const childRows = wrapper.findAll('.el-table__row--level-1')
|
|
childRows.forEach(item => {
|
|
expect(item.attributes('style')).toBeUndefined
|
|
})
|
|
const expandIcon = childRows[0].find('.el-table__expand-icon')
|
|
expandIcon.trigger('click')
|
|
await nextTick()
|
|
expect(expandIcon.classes().includes('el-table__expand-icon--expanded'))
|
|
.toBeTruthy
|
|
wrapper.vm.closeExpandRow()
|
|
await nextTick()
|
|
expect(expandIcon.classes().includes('el-table__expand-icon--expanded'))
|
|
.toBeTruthy
|
|
})
|
|
})
|
|
})
|