mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 09:50:58 +08:00
84321952e0
* style(slider): slider button style change slider button add box-sizing: border-box and change the default size to make sure the style is the same of before. * style(slider): remove outline * fix(docs): replace error v-slot/slot to correct Replace all `v-slot` to `#default`, `v-slot:xxx` to `#xxx`, `slot="xxx"` to `#xxx`. fix #704 * docs: v-slot can not bind on div * fix: fix v-slot
2199 lines
62 KiB
TypeScript
2199 lines
62 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 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()
|
|
})
|
|
})
|
|
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('cancel all', async done => {
|
|
wrapper.find('.el-checkbox').trigger('click')
|
|
await nextTick()
|
|
expect(wrapper.vm.selected.length).toEqual(0)
|
|
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()
|
|
})
|
|
})
|
|
})
|
|
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
|
|
})
|
|
})
|
|
})
|