github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #622 from QingWei-Li/test/table 

Table: add test
pull/639/head
杨奕 2016-10-25 17:36:07 +08:00 committed by GitHub
parent 82232f64da 86a5f8f5d0
commit cfe8b895f2
7 changed files with 647 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.github/CONTRIBUTING.md vendored
View File

@ -38,10 +38,11 @@ npm run dev
# open http://localhost:8085
```
如果国内用户觉得安装慢可以使用 [npminstall](https://github.com/cnpm/npminstall)
如果国内用户觉得安装慢可以使用 [yarn](https://github.com/yarnpkg/yarn) 搭配 taobao registry
```shell
npm i npminstall -g
npminstall
npm i yarn -g
yarn config set registry https://registry.npm.taobao.org
yarn
npm run dev
# open http://localhost:8085

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

@ -814,17 +814,17 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| data | 显示的数据 | array | — | — |
| height | table 的高度，默认高度为空，即自动高度 | string | — | — |
| height | table 的高度，默认高度为空，即自动高度，单位 px | string, number | — | — |
| stripe | 是否为斑马纹 table | boolean | — | false |
| border | 是否带有纵向边框 | boolean | — | false |
| fit | 列的宽度是否自撑开 | boolean | — | true |
| row-class-name | 行的 className 的回调，会传入 row, index。 | Function | - | - |
| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的 | Function, String | - | |
| row-class-name | 行的 className 的回调。 | Function(row, index) | - | - |
| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的 | Function(row), String | - | - |
### Table Events
| 事件名 | 说明 | 参数 |
| ---- | ---- | ---- |
| select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection |
| select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row |
| select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection |
| selection-change | 当选择项发生变化时会触发该事件 | selection |
| cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event |
@ -843,13 +843,13 @@
| label | 显示的标题 | string | — | — |
| prop | 对应列内容的字段名，也可以使用 property 属性 | string | — | — |
| width | 对应列的宽度 | string | — | — |
| fixed | 列是否固定在左侧或者右侧 | string, boolean | true, left, right | - |
| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true, left, right | - |
| sortable | 对应列是否可以排序 | boolean | — | false |
| resizable | 对应列是否可以通过拖动改变宽度（如果需要，需在 el-table 上设置 border 属性为真） | boolean | — | false |
| resizable | 对应列是否可以通过拖动改变宽度（如果需要在 el-table 上设置 border 属性为真） | boolean | — | true |
| type | 对应列的类型。如果设置了 `selection` 则显示多选框，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | selection/index | — |
| formatter | 用来格式化内容，在 formatter 执行的时候，会传入 row 和 column | function | — | — |
| formatter | 用来格式化内容 | Function(row, column) | — | — |
| show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean | — | false |
| inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息，JSX 里通过 _self 获取当前上下文。此时不需要配置 prop 属性 | — | — |
| align | 对齐方式 | String | left, center, right | left |
| selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function | - | - |
| selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | - | - |
| reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。 | Boolean | - | false |

2
packages/table/src/table-body.js
View File

@ -11,7 +11,7 @@ const getColumnById = function(table, columnId) {
};
const getColumnByCell = function(table, cell) {
const matches = (cell.className || '').match(/table_[^\s]+/gm);
const matches = (cell.className || '').match(/el-table_[^\s]+/gm);
if (matches) {
return getColumnById(table, matches[0]);
}

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

@ -192,7 +192,7 @@ export default {
let column = getDefaultColumn(type, {
id: columnId,
label: this.label,
property: this.property,
property,
type,
template,
minWidth,

3
src/index.js
View File

@ -1,4 +1,3 @@
import Sync from './utils/sync';
import Pagination from '../packages/pagination/index.js';
import Dialog from '../packages/dialog/index.js';
import Autocomplete from '../packages/autocomplete/index.js';
@ -59,7 +58,6 @@ const install = function(Vue) {
/* istanbul ignore if */
if (install.installed) return;
Vue.directive('sync', Sync);
Vue.component(Pagination.name, Pagination);
Vue.component(Dialog.name, Dialog);
Vue.component(Autocomplete.name, Autocomplete);
@ -130,7 +128,6 @@ if (typeof window !== 'undefined' && window.Vue) {
module.exports = {
version: '1.0.0-rc.7',
install,
Sync,
Pagination,
Dialog,
Autocomplete,

617
test/unit/specs/table.spec.js Normal file
View File

@ -0,0 +1,617 @@
import { createVue, triggerEvent, destroyVM } from '../util';
const DELAY = 10;
const testDataArr = [];
const toArray = function(obj) {
return [].slice.call(obj);
};
const getTestData = function() {
return [
{ name: 'Toy Story', release: '1995-11-22', director: 'John Lasseter', runtime: 80 },
{ name: 'A Bug\'s Life', release: '1998-11-25', director: 'John Lasseter', runtime: 95 },
{ name: 'Toy Story 2', release: '1999-11-24', director: 'John Lasseter', runtime: 92 },
{ name: 'Monsters, Inc.', release: '2001-11-2', director: 'Peter Docter', runtime: 92 },
{ 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());
});
});
describe('Table', () => {
describe('rendering data is correct', () => {
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();
}
});
it('head', done => {
setTimeout(_ => {
const ths = toArray(vm.$el.querySelectorAll('thead th'));
expect(ths.map(node => node.textContent).filter(o => o))
.to.eql(['片名', '发行日期', '导演', '时长（分）']);
done();
}, DELAY);
});
it('row length', () => {
expect(vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr')).to.length(getTestData().length);
});
it('row data', () => {
const cells = toArray(vm.$el.querySelectorAll('.cell'))
.map(node => node.textContent);
expect(cells).to.eql(testDataArr);
destroyVM(vm);
});
});
describe('attributes', () => {
const createTable = function(props, opts) {
return createVue(Object.assign({
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', done => {
const vm = createTable('height="134"');
setTimeout(_ => {
expect(vm.$el.style.height).to.equal('134px');
destroyVM(vm);
done();
}, DELAY);
});
it('stripe', done => {
const vm = createTable('stripe');
setTimeout(_ => {
expect(vm.$el.classList.contains('el-table--striped')).to.true;
destroyVM(vm);
done();
}, DELAY);
});
it('border', done => {
const vm = createTable('border');
setTimeout(_ => {
expect(vm.$el.classList.contains('el-table--border')).to.true;
destroyVM(vm);
done();
}, DELAY);
});
it('fit', done => {
const vm = createTable(':fit="false"');
setTimeout(_ => {
expect(vm.$el.classList.contains('el-table--fit')).to.false;
destroyVM(vm);
done();
}, DELAY);
});
it('tableRowClassName', done => {
const vm = createTable(':row-class-name="tableRowClassName"', {
methods: {
tableRowClassName(row, index) {
if (index === 1) {
return 'info-row';
} else if (index === 3) {
return 'positive-row';
}
return '';
}
}
});
setTimeout(_ => {
expect(vm.$el.querySelectorAll('.info-row')).to.length(1);
expect(vm.$el.querySelectorAll('.positive-row')).to.length(1);
destroyVM(vm);
done();
}, DELAY);
});
// TODO: row-key
});
describe('events', () => {
const createTable = function(prop = '', opts) {
return createVue({
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;
}
},
created() {
this.testData = getTestData();
},
data() {
return { result: '' };
}
}, true);
};
it('select', done => {
const vm = createTable('select');
setTimeout(_ => {
vm.$el.querySelectorAll('.el-checkbox')[1].click();
expect(vm.result).to.length(2);
expect(vm.result[1]).to.have.property('name').to.equal(getTestData()[0].name);
destroyVM(vm);
done();
}, DELAY);
});
it('select-all', done => {
const vm = createTable('select-all');
setTimeout(_ => {
vm.$el.querySelector('.el-checkbox').click();
setTimeout(_ => {
expect(vm.result).to.length(1);
expect(vm.result[0]).to.length(getTestData().length);
destroyVM(vm);
done();
}, DELAY);
}, DELAY);
});
it('selection-change', done => {
const vm = createTable('selection-change');
setTimeout(_ => {
vm.$el.querySelectorAll('.el-checkbox')[1].click();
expect(vm.result).to.length(1);
destroyVM(vm);
done();
}, DELAY);
});
it('cell-mouse-enter', done => {
const vm = createTable('cell-mouse-enter');
setTimeout(_ => {
const cell = vm.$el.querySelectorAll('.el-table__body .cell')[2]; // first row
triggerEvent(cell.parentNode, 'mouseenter');
expect(vm.result).to.length(4); // row, column, cell, event
expect(vm.result[0]).to.have.property('name').to.equal(getTestData()[0].name);
destroyVM(vm);
done();
}, DELAY);
});
it('cell-mouse-leave', done => {
const vm = createTable('cell-mouse-leave');
setTimeout(_ => {
const cell = vm.$el.querySelectorAll('.el-table__body .cell')[7]; // second row
const cell2 = vm.$el.querySelectorAll('.el-table__body .cell')[2]; // first row
triggerEvent(cell2.parentNode, 'mouseenter');
triggerEvent(cell.parentNode, 'mouseleave');
expect(vm.result).to.length(4); // row, column, cell, event
expect(vm.result[0]).to.have.property('name').to.equal(getTestData()[0].name);
destroyVM(vm);
done();
}, DELAY);
});
it('cell-click', done => {
const vm = createTable('cell-click');
setTimeout(_ => {
const cell = vm.$el.querySelectorAll('.el-table__body .cell')[2]; // first row
cell.parentNode.click();
expect(vm.result).to.length(4); // row, column, cell, event
expect(vm.result[0]).to.have.property('name').to.equal(getTestData()[0].name);
destroyVM(vm);
done();
}, DELAY);
});
it('row-click', done => {
const vm = createTable('row-click');
setTimeout(_ => {
const cell = vm.$el.querySelectorAll('.el-table__body .cell')[2]; // first row
triggerEvent(cell.parentNode.parentNode, 'click');
expect(vm.result).to.length(2); // row, event
expect(vm.result[0]).to.have.property('name').to.equal(getTestData()[0].name);
destroyVM(vm);
done();
}, DELAY);
});
});
describe('methods', () => {});
describe('column attributes', () => {
const createTable = function(props1, props2, props3, props4, opts, tableProps) {
return createVue(Object.assign({
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', done => {
const vm = createTable('label="啊哈哈哈"', 'label="啊啦啦啦"');
setTimeout(_ => {
const ths = toArray(vm.$el.querySelectorAll('thead th'))
.map(node => node.textContent).filter(o => o);
expect(ths).to.eql(['啊哈哈哈', '啊啦啦啦']);
destroyVM(vm);
done();
}, DELAY);
});
it('width', done => {
const vm = createTable('width="123px"', ':width="102"', 'width="39"');
setTimeout(_ => {
const ths = toArray(vm.$el.querySelectorAll('.el-table__header-wrapper colgroup'))
.map(node => node.width).filter(o => o);
expect(ths).to.include('123').include('102').include('39');
destroyVM(vm);
done();
}, DELAY);
});
it('fixed', done => {
const vm = createTable(
'fixed label="test1"',
'fixed="right" label="test2"',
'fixed="left" label="test3"');
setTimeout(_ => {
expect(toArray(vm.$el.querySelectorAll('.el-table__fixed th:not(.hidden)'))
.map(node => node.textContent))
.to.eql(['test1', 'test3']);
expect(toArray(vm.$el.querySelectorAll('.el-table__fixed-right th:not(.hidden)'))
.map(node => node.textContent))
.to.eql(['test2']);
destroyVM(vm);
done();
}, DELAY);
});
// TODO
it('resizable', done => {
const vm = createTable(
'resizable',
':resizable="false"',
'',
'',
{},
'border');
setTimeout(_ => {
const firstCol = vm.$el.querySelector('thead th');
triggerEvent(firstCol, 'mousemove');
triggerEvent(firstCol, 'mousedown');
destroyVM(vm);
done();
}, DELAY);
});
it('formatter', done => {
const vm = createTable(
':formatter="renderCell"', '', '', '', {
methods: {
renderCell(row, column) {
return `[${row.name}]`;
}
}
});
setTimeout(_ => {
const cells = toArray(vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:first-child'));
expect(cells.map(n => n.textContent)).to.eql(getTestData().map(o => `[${o.name}]`));
destroyVM(vm);
done();
}, DELAY);
});
it('show-tooltip-when-overflow', done => {
const vm = createTable('show-tooltip-when-overflow');
setTimeout(_ => {
expect(vm.$el.querySelectorAll('.el-tooltip')).to.length(5);
destroyVM(vm);
done();
}, DELAY);
});
it('inline-template', done => {
const vm = createVue({
template: `
<el-table :data="testData">
<el-table-column prop="name" inline-template>
<span>[{{ row.name }}]</span>
</el-table-column>
<el-table-column prop="release"/>
<el-table-column prop="director"/>
<el-table-column prop="runtime"/>
</el-table>
`,
created() {
this.testData = getTestData();
}
});
setTimeout(_ => {
const cells = toArray(vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:first-child'));
expect(cells.map(n => n.textContent)).to.eql(getTestData().map(o => `[${o.name}]`));
destroyVM(vm);
done();
}, DELAY);
});
it('align', done => {
const vm = createTable('align="left"', 'align="right"', 'align="center"');
setTimeout(_ => {
var len = getTestData().length + 1;
expect(vm.$el.querySelectorAll('.is-left')).to.length(len);
expect(vm.$el.querySelectorAll('.is-right')).to.length(len);
expect(vm.$el.querySelectorAll('.is-center')).to.length(len);
destroyVM(vm);
done();
}, DELAY);
});
it('selectable', done => {
const vm = createVue({
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>
`,
created() {
this.testData = getTestData();
},
data() {
return { selected: [] };
},
methods: {
change(rows) {
this.selected = rows;
},
filterSelect(row, index) {
return index > 2;
}
}
}, true);
setTimeout(_ => {
vm.$el.querySelector('.el-checkbox').click();
setTimeout(_ => {
expect(vm.selected).to.length(2);
destroyVM(vm);
done();
}, DELAY);
}, 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>
// `,
// created() {
// this.testData = getTestData();
// },
// data() {
// return { selected: [] };
// },
// methods: {
// change(rows) {
// this.selected = rows;
// }
// }
// }, true);
// setTimeout(_ => {
// done();
// }, DELAY);
// });
describe('type', () => {
const createTable = function(type) {
return createVue({
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;
}
}
}, true);
};
describe('= selection', () => {
const vm = createTable('selection');
it('render', done => {
setTimeout(_ => {
expect(vm.$el.querySelectorAll('.el-checkbox')).to.length(getTestData().length + 1);
done();
}, DELAY);
});
it('select all', done => {
vm.$el.querySelector('.el-checkbox').click();
setTimeout(_ => {
expect(vm.selected).to.length(getTestData().length);
done();
}, DELAY);
});
it('cancel all', done => {
vm.$el.querySelector('.el-checkbox').click();
setTimeout(_ => {
expect(vm.selected).to.length(0);
destroyVM(vm);
done();
}, DELAY);
});
it('select one', done => {
const vm2 = createTable('selection');
setTimeout(_ => {
vm2.$el.querySelectorAll('.el-checkbox')[1].click();
setTimeout(_ => {
expect(vm2.selected).to.length(1);
expect(vm2.selected[0].name).to.equal(getTestData()[0].name);
destroyVM(vm2);
done();
}, DELAY);
}, DELAY);
});
});
describe('= index', () => {
const vm = createTable('index');
it('render', done => {
setTimeout(_ => {
expect(toArray(vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:first-child'))
.map(node => node.textContent)).to.eql(['1', '2', '3', '4', '5']);
destroyVM(vm);
done();
}, DELAY);
});
});
});
describe('sortable', () => {
const vm = createTable('', '', '', 'sortable');
it('render', done => {
setTimeout(_ => {
expect(vm.$el.querySelectorAll('.caret-wrapper')).to.length(1);
done();
}, DELAY);
});
});
describe('click sortable column', () => {
const vm = createTable('', '', '', 'sortable');
it('ascending', done => {
const elm = vm.$el.querySelector('.caret-wrapper');
elm.parentNode.click();
setTimeout(_ => {
const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');
expect(toArray(lastCells).map(node => node.textContent))
.to.eql(['80', '92', '92', '95', '100']);
done();
}, DELAY);
});
it('descending', done => {
const elm = vm.$el.querySelector('.caret-wrapper');
elm.parentNode.click();
setTimeout(_ => {
const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');
expect(toArray(lastCells).map(node => node.textContent))
.to.eql(['100', '95', '92', '92', '80']);
destroyVM(vm);
done();
}, DELAY);
});
});
});
});

19
test/unit/util.js
View File

@ -14,6 +14,17 @@ const createElm = function() {
return elm;
};
/**
* 回收 vm
* @param {Object} vm
*/
exports.destroyVM = function(vm) {
vm.$el &&
vm.$el.parentNode &&
vm.$el.parentNode.removeChild(vm.$el);
vm.$destroy && vm.$destroy();
};
/**
* 创建一个 Vue 的实例对象
* @param {Object|String} Compo 组件配置，可直接传 template
@ -51,10 +62,10 @@ exports.createTest = function(Compo, propsData = {}, mounted = false) {
* 触发一个事件
* mouseenter, mouseleave, mouseover, keyup, change, click 等
* @param {Element} elm
* @param {EventName} name
* @param {options} opts
* @param {String} name
* @param {*} opts
*/
exports.triggerEvent = function(elm, name, opts) {
exports.triggerEvent = function(elm, name, ...opts) {
let eventName;
if (/^mouse|click/.test(name)) {
@ -70,4 +81,6 @@ exports.triggerEvent = function(elm, name, opts) {
elm.dispatchEvent
? elm.dispatchEvent(evt)
: elm.fireEvent('on' + name, evt);
return elm;
};