test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-11-29 18:57:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Table: add filter test

Browse Source 
a

a
This commit is contained in:
qingwei.li 2016-10-27 23:25:03 +08:00
parent 14495f6189
commit 8502c891d2
7 changed files with 215 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -1,5 +1,6 @@
# Element
[![Build Status](https://travis-ci.org/ElemeFE/element.svg?branch=master)](https://travis-ci.org/ElemeFE/element)
[![Coverage Status](https://coveralls.io/repos/github/ElemeFE/element/badge.svg?branch=master)](https://coveralls.io/github/ElemeFE/element?branch=master)
[![npm package](https://img.shields.io/npm/v/element-ui.svg)](https://www.npmjs.org/package/element-ui)
[![NPM downloads](http://img.shields.io/npm/dm/element-ui.svg)](https://npmjs.org/package/element-ui)
![JS gzip size](http://img.badgesize.io/https://unpkg.com/element-ui@next/lib/index.js?compression=gzip&label=gzip%20size:%20JS)

2
examples/docs/zh-cn/table.md
View File

@ -822,7 +822,7 @@
对表格进行筛选，可快速查找到自己想看的数据。
:::demo 在列中设置`filters``filter-method`属性即可开启该列的筛选，filters 是一个数组，`filter-method`是一个方法，它用于决定某些数据是否显示，会传入两个参数：`value`和`row`。
:::demo 在列中设置`filters` `filter-method`属性即可开启该列的筛选，filters 是一个数组，`filter-method`是一个方法，它用于决定某些数据是否显示，会传入两个参数：`value`和`row`。
```html
<template>
<el-table

2
packages/table/src/filter-panel.vue
View File

@ -30,7 +30,7 @@
</transition>
</template>
<script type="text/jsx">
<script type="text/babel">
import Popper from 'element-ui/src/utils/vue-popper';
import Locale from 'element-ui/src/mixins/locale';
import Clickoutside from 'element-ui/src/utils/clickoutside';

18
packages/table/src/table-column.js
View File

@ -48,16 +48,16 @@ const forced = {
return <div>{ $index + 1 }</div>;
},
sortable: false
},
filter: {
headerTemplate: function(h) {
return '#';
},
template: function(h, { row, column }) {
return <el-tag type="primary" style="height: 16px; line-height: 16px; min-width: 40px; text-align: center">{ row[column.property] }</el-tag>;
},
resizable: false
}
// filter: {
// headerTemplate: function(h) {
// return '#';
// },
// template: function(h, { row, column }) {
// return <el-tag type="primary" style="height: 16px; line-height: 16px; min-width: 40px; text-align: center">{ row[column.property] }</el-tag>;
// },
// resizable: false
// }
};
const getDefaultColumn = function(type, options) {

1
packages/table/src/table-header.js
View File

@ -163,6 +163,7 @@ export default {
},
handleMouseDown(event, column) {
/* istanbul ignore if */
if (this.draggingColumn && this.border) {
this.dragging = true;

230
test/unit/specs/table.spec.js
View File

@ -138,8 +138,103 @@ describe('Table', () => {
done();
}, DELAY);
});
});
// TODO: row-key
describe('filter', () => {
let vm;
beforeEach(done => {
vm = createVue({
template: `
<el-table ref="table" :data="testData">
<el-table-column prop="name" label="片名" />
<el-table-column prop="release" label="发行日期" />
<el-table-column
prop="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;
}
}
}, true);
setTimeout(done, DELAY);
});
afterEach(() => destroyVM(vm));
it('render', () => {
expect(vm.$el.querySelector('.el-table__column-filter-trigger')).to.exist;
});
it('click dropdown', done => {
const btn = vm.$el.querySelector('.el-table__column-filter-trigger');
triggerEvent(btn, 'click', true, false);
setTimeout(_ => {
const filter = document.body.querySelector('.el-table-filter');
expect(filter).to.exist;
document.body.removeChild(filter);
done();
}, 100);
});
it('click filter', done => {
const btn = vm.$el.querySelector('.el-table__column-filter-trigger');
triggerEvent(btn, 'click', true, false);
setTimeout(_ => {
const filter = document.body.querySelector('.el-table-filter');
// John Lasseter
triggerEvent(filter.querySelector('.el-checkbox'), 'click', true, false);
// confrim button
setTimeout(_ => {
triggerEvent(filter.querySelector('.el-table-filter__bottom button'), 'click', true, false);
setTimeout(_ => {
expect(vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr')).to.length(3);
document.body.removeChild(filter);
done();
}, DELAY);
}, 100);
}, 100);
});
it('click reset', done => {
const btn = vm.$el.querySelector('.el-table__column-filter-trigger');
triggerEvent(btn, 'click', true, false);
setTimeout(_ => {
const filter = document.body.querySelector('.el-table-filter');
// John Lasseter
triggerEvent(filter.querySelector('.el-checkbox'), 'click', true, false);
setTimeout(_ => {
// reset button
triggerEvent(filter.querySelectorAll('.el-table-filter__bottom button')[1], 'click', true, false);
setTimeout(_ => {
expect(filter.querySelector('.el-table-filter__bottom button').classList.contains('is-disabled')).to.true;
document.body.removeChild(filter);
destroyVM(vm);
done();
}, DELAY);
}, 100);
}, 100);
});
});
describe('events', () => {
@ -265,8 +360,6 @@ describe('Table', () => {
});
});
describe('methods', () => {});
describe('column attributes', () => {
const createTable = function(props1, props2, props3, props4, opts, tableProps) {
return createVue(Object.assign({
@ -452,39 +545,83 @@ describe('Table', () => {
}, DELAY);
});
// TODO
// it('reserve-selection', done => {
// const vm = createVue({
// template: `
// <el-table :data="testData" @selection-change="change">
// <el-table-column type="selection" reserve-selection />
// <el-table-column prop="name" label="片名" />
// <el-table-column prop="release" label="release" />
// <el-table-column prop="director" label="director" />
// <el-table-column prop="runtime" label="runtime" />
// </el-table>
// `,
it('reserve-selection', done => {
const getData = function(page = 0) {
let id = 0;
const rows = [];
const row = () => {
return {
id: ++id + page * 10,
date: new Date().getTime()
};
};
let count = 10;
// created() {
// this.testData = getTestData();
// },
while (--count) {
rows.push(row());
}
return rows;
};
const vm = createVue({
template: `
<el-table ref="table" :row-key="rowKey" :data="testData" @selection-change="change">
<el-table-column type="selection" reserve-selection />
<el-table-column prop="id" label="id" />
<el-table-column prop="date" label="date" />
</el-table>
`,
// data() {
// return { selected: [] };
// },
created() {
this.testData = getData();
},
// methods: {
// change(rows) {
// this.selected = rows;
// }
// }
// }, true);
data() {
return { selected: [], testData: [] };
},
// setTimeout(_ => {
methods: {
rowKey(row) {
return row.id;
},
// done();
// }, DELAY);
// });
change(rows) {
this.selected = rows;
}
}
}, true);
setTimeout(_ => {
// click first
vm.$el.querySelectorAll('.el-checkbox')[1].click();
setTimeout(_ => {
expect(vm.$el.querySelectorAll('.el-checkbox__inner.is-checked')).to.length(1);
// go to second page
vm.testData = getData(1);
setTimeout(_ => {
// expect no checked
expect(vm.$el.querySelectorAll('.el-checkbox__inner.is-checked')).to.length(0);
// click first checkbox
vm.$el.querySelectorAll('.el-checkbox')[1].click();
vm.$el.querySelectorAll('.el-checkbox')[2].click();
setTimeout(_ => {
// back first page
vm.testData = getData();
setTimeout(_ => {
expect(vm.$el.querySelectorAll('.el-checkbox__inner.is-checked')).to.length(1);
// clear
vm.$refs.table.clearSelection();
setTimeout(_ => {
expect(vm.$el.querySelectorAll('.el-checkbox__inner.is-checked')).to.length(0);
destroyVM(vm);
done();
}, DELAY);
}, DELAY);
}, DELAY);
}, DELAY);
}, DELAY);
}, DELAY);
});
describe('type', () => {
const createTable = function(type) {
@ -580,6 +717,7 @@ describe('Table', () => {
it('render', done => {
setTimeout(_ => {
expect(vm.$el.querySelectorAll('.caret-wrapper')).to.length(1);
destroyVM(vm);
done();
}, DELAY);
});
@ -614,4 +752,34 @@ describe('Table', () => {
});
});
});
it('hover', done => {
const vm = createVue({
template: `
<el-table :data="testData">
<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();
}
}, true);
setTimeout(_ => {
const tr = vm.$el.querySelector('.el-table__body-wrapper tbody tr');
triggerEvent(tr, 'mouseenter', true, false);
setTimeout(_ => {
expect(tr.classList.contains('hover-row')).to.true;
triggerEvent(tr, 'mouseleave', true, false);
setTimeout(_ => {
expect(tr.classList.contains('hover-row')).to.false;
destroyVM(vm);
done();
}, DELAY);
}, DELAY);
}, DELAY);
});
});

6
test/unit/specs/time-picker.spec.js
View File

@ -202,7 +202,7 @@ describe('TimePicker(range)', () => {
it('minTime < maxTime', done => {
const vm2 = createTest(TimePicker, {
isRange: true,
value: [new Date(2016, 9, 10, 21, 40), new Date(2016, 9, 10, 20, 40)]
value: [new Date(2016, 9, 10, 23, 40), new Date(2016, 9, 10, 10, 40)]
}, true);
const input = vm2.$el.querySelector('input');
@ -210,10 +210,10 @@ describe('TimePicker(range)', () => {
input.focus();
input.blur();
setTimeout(() => {
expect(vm2.picker.maxTime > vm2.picker.minTime).to.true;
expect(vm2.picker.maxTime >= vm2.picker.minTime).to.true;
destroyVM(vm2);
done();
}, 20);
}, 100);
});
it('click cancel button', done => {