diff --git a/examples/docs/zh-cn/table.md b/examples/docs/zh-cn/table.md index 387b829fc4b..43c08ab08aa 100644 --- a/examples/docs/zh-cn/table.md +++ b/examples/docs/zh-cn/table.md @@ -814,12 +814,12 @@ | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | 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-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的 | Function, String | - | - | ### Table Events | 事件名 | 说明 | 参数 | @@ -843,9 +843,9 @@ | 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 | — | — | | show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean | — | false | diff --git a/packages/table/src/table-column.js b/packages/table/src/table-column.js index c592bc14895..6a7cdcc8b31 100644 --- a/packages/table/src/table-column.js +++ b/packages/table/src/table-column.js @@ -192,7 +192,7 @@ export default { let column = getDefaultColumn(type, { id: columnId, label: this.label, - property: this.property, + property, type, template, minWidth, diff --git a/src/index.js b/src/index.js index 2190e273679..24b2d527ec7 100644 --- a/src/index.js +++ b/src/index.js @@ -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, diff --git a/test/unit/index.js b/test/unit/index.js index c1157e780fb..1494d486a16 100644 --- a/test/unit/index.js +++ b/test/unit/index.js @@ -4,7 +4,7 @@ Function.prototype.bind = require('function-bind'); require('packages/theme-default/src/index.css'); // require all test files (files that ends with .spec.js) -const testsContext = require.context('./specs', true, /\.spec$/); +const testsContext = require.context('./specs', true, /table\.spec$/); testsContext.keys().forEach(testsContext); // require all src files except main.js for coverage. diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js new file mode 100644 index 00000000000..cab25c71eea --- /dev/null +++ b/test/unit/specs/table.spec.js @@ -0,0 +1,395 @@ +import { createVue, triggerEvent } from '../util'; + +const DELAY = 50; +const testData = [ + { 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 } +]; +const testDataArr = []; +const toArray = function(obj) { + return [].slice.call(obj); +}; + +testData.forEach(cur => { + Object.keys(cur).forEach(prop => { + testDataArr.push(cur[prop].toString()); + }); +}); + +describe('Table', () => { + describe('rendering data is correct', () => { + const vm = createVue({ + template: ` + + + + + + + `, + + created() { + this.testData = testData; + } + }); + + 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(testData.length); + }); + + it('row data', () => { + const cells = toArray(vm.$el.querySelectorAll('.cell')) + .map(node => node.textContent); + + expect(cells).to.eql(testDataArr); + }); + }); + + describe('Table attributes', () => { + const createTable = function(props, opts) { + return createVue(Object.assign({ + template: ` + + + + + + + `, + + created() { + this.testData = testData; + } + }, opts)); + }; + + it('height', done => { + const vm = createTable('height="134"'); + setTimeout(_ => { + expect(vm.$el.style.height).to.equal('134px'); + done(); + }, DELAY); + }); + + it('stripe', done => { + const vm = createTable('stripe'); + setTimeout(_ => { + expect(vm.$el.classList.contains('el-table--striped')).to.true; + done(); + }, DELAY); + }); + + it('border', done => { + const vm = createTable('border'); + setTimeout(_ => { + expect(vm.$el.classList.contains('el-table--border')).to.true; + done(); + }, DELAY); + }); + + it('fit', done => { + const vm = createTable(':fit="false"'); + setTimeout(_ => { + expect(vm.$el.classList.contains('el-table--fit')).to.false; + 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); + done(); + }, DELAY); + }); + + // TODO: row-key + }); + + describe('Table events', () => {}); + + describe('Table methods', () => {}); + + describe('Table Column attributes', () => { + const createTable = function(props1, props2, props3, props4, opts, tableProps) { + return createVue(Object.assign({ + template: ` + + + + + + + `, + + created() { + this.testData = testData; + } + }, 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(['啊哈哈哈', '啊啦啦啦']); + 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'); + 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']); + 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'); + const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child'); + + triggerEvent(elm.parentNode, 'click'); + setTimeout(_ => { + 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'); + const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child'); + + triggerEvent(elm.parentNode, 'click'); + setTimeout(_ => { + expect(toArray(lastCells).map(node => node.textContent)) + .to.eql(['100', '95', '92', '92', '80']); + 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'); + done(); + }, DELAY); + }); + + describe('type', () => { + const createTable = function(type) { + return createVue({ + template: ` + + + + + + + + `, + + created() { + this.testData = testData; + }, + + 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(testData.length + 1); + done(); + }, DELAY); + }); + + it('select all', done => { + vm.$el.querySelector('.el-checkbox').click(); + + setTimeout(_ => { + expect(vm.selected).to.length(testData.length); + done(); + }, DELAY); + }); + + it('cancel all', done => { + vm.$el.querySelector('.el-checkbox').click(); + + setTimeout(_ => { + expect(vm.selected).to.length(0); + done(); + }, DELAY); + }); + + it('select one', done => { + vm.$el.querySelectorAll('.el-checkbox')[1].click(); + + setTimeout(_ => { + expect(vm.selected).to.length(1); + expect(vm.selected[0].name).to.equal(testData[0].name); + done(); + }, 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']); + 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(testData.map(o => `[${o.name}]`)); + done(); + }, DELAY); + }); + + it('showTooltipWhenOverflow', done => { + const vm = createTable('show-tooltip-when-overflow'); + setTimeout(_ => { + expect(vm.$el.querySelectorAll('.el-tooltip')).to.length(5); + done(); + }, DELAY); + }); + + it('inline-template', done => { + const vm = createVue({ + template: ` + + + [{{ row.name }}] + + + + + + `, + + created() { + this.testData = testData; + } + }); + + setTimeout(_ => { + const cells = toArray(vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:first-child')); + expect(cells.map(n => n.textContent)).to.eql(testData.map(o => `[${o.name}]`)); + done(); + }, DELAY); + }); + + it('align', done => { + const vm = createTable('align="left"', 'align="right"', 'align="center"'); + setTimeout(_ => { + expect(vm.$el.querySelectorAll('.is-left')).to.length(testData.length + 1); + expect(vm.$el.querySelectorAll('.is-right')).to.length(testData.length + 1); + expect(vm.$el.querySelectorAll('.is-center')).to.length(testData.length + 1); + done(); + }, DELAY); + }); + }); +}); diff --git a/test/unit/util.js b/test/unit/util.js index 42920e80a42..68509d7144f 100644 --- a/test/unit/util.js +++ b/test/unit/util.js @@ -70,4 +70,6 @@ exports.triggerEvent = function(elm, name, opts) { elm.dispatchEvent ? elm.dispatchEvent(evt) : elm.fireEvent('on' + name, evt); + + return elm; };