From 07150c09653a4f72f284696c93f673dacb8e29f8 Mon Sep 17 00:00:00 2001 From: tjz <415800467@qq.com> Date: Sat, 26 May 2018 22:48:16 +0800 Subject: [PATCH] test: add table test --- .../table/__tests__/Table.pagination.test.js | 217 ++++++++++++++++++ components/table/__tests__/Table.test.js | 102 ++++++++ .../Table.pagination.test.js.snap | 39 ++++ .../__snapshots__/Table.test.js.snap | 34 +++ .../__snapshots__/empty.test.js.snap | 154 +++++++++++++ components/table/__tests__/empty.test.js | 100 ++++++++ 6 files changed, 646 insertions(+) create mode 100644 components/table/__tests__/Table.pagination.test.js create mode 100644 components/table/__tests__/Table.test.js create mode 100644 components/table/__tests__/__snapshots__/Table.pagination.test.js.snap create mode 100644 components/table/__tests__/__snapshots__/Table.test.js.snap create mode 100644 components/table/__tests__/__snapshots__/empty.test.js.snap create mode 100644 components/table/__tests__/empty.test.js diff --git a/components/table/__tests__/Table.pagination.test.js b/components/table/__tests__/Table.pagination.test.js new file mode 100644 index 000000000..3cba75858 --- /dev/null +++ b/components/table/__tests__/Table.pagination.test.js @@ -0,0 +1,217 @@ + +import { mount } from '@vue/test-utils' +import Table from '..' +import Vue from 'vue' + +describe('Table.pagination', () => { + const columns = [{ + title: 'Name', + dataIndex: 'name', + }] + + const data = [ + { key: 0, name: 'Jack' }, + { key: 1, name: 'Lucy' }, + { key: 2, name: 'Tom' }, + { key: 3, name: 'Jerry' }, + ] + + const pagination = { class: 'my-page', pageSize: 2 } + + function getTableOptions (props = {}, listeners = {}) { + return { + propsData: { + columns, + dataSource: data, + pagination, + ...props, + }, + listeners: { + ...listeners, + }, + sync: false, + } + // return { + // render () { + // return ( + // + // ) + // }, + // } + } + + function renderedNames (wrapper) { + return wrapper.findAll({ name: 'TableRow' }).wrappers.map(row => { + return row.props().record.name + }) + } + + it('renders pagination correctly', (done) => { + const wrapper = mount(Table, getTableOptions()) + Vue.nextTick(() => { + expect(wrapper.html()).toMatchSnapshot() + done() + }) + }) + + it('should not show pager if pagination.hideOnSinglePage is true and only 1 page', (done) => { + const wrapper = mount(Table, getTableOptions({ pagination: { pageSize: 3, hideOnSinglePage: true }})) + Vue.nextTick(() => { + expect(wrapper.findAll('.ant-pagination')).toHaveLength(1) + wrapper.setProps({ pagination: { pageSize: 3, hideOnSinglePage: false }}) + Vue.nextTick(() => { + expect(wrapper.findAll('.ant-pagination')).toHaveLength(1) + wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: true }}) + Vue.nextTick(() => { + expect(wrapper.findAll('.ant-pagination')).toHaveLength(0) + wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: false }}) + Vue.nextTick(() => { + expect(wrapper.findAll('.ant-pagination')).toHaveLength(1) + wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: true }}) + Vue.nextTick(() => { + expect(wrapper.findAll('.ant-pagination')).toHaveLength(0) + wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: false }}) + Vue.nextTick(() => { + expect(wrapper.findAll('.ant-pagination')).toHaveLength(1) + done() + }) + }) + }) + }) + }) + }) + }) + + it('paginate data', (done) => { + const wrapper = mount(Table, getTableOptions()) + Vue.nextTick(() => { + expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy']) + const pager = wrapper.findAll({ name: 'Pager' }) + pager.at(pager.length - 1).trigger('click') + Vue.nextTick(() => { + expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']) + done() + }) + }) + }) + + it('repaginates when pageSize change', () => { + const wrapper = mount(Table, getTableOptions()) + wrapper.setProps({ pagination: { pageSize: 1 }}) + Vue.nextTick(() => { + expect(renderedNames(wrapper)).toEqual(['Jack']) + }) + }) + + it('fires change event', (done) => { + const handleChange = jest.fn() + const handlePaginationChange = jest.fn() + const noop = () => {} + const wrapper = mount(Table, getTableOptions({ + pagination: { ...pagination, onChange: handlePaginationChange, onShowSizeChange: noop }, + + }, { change: handleChange })) + Vue.nextTick(() => { + const pager = wrapper.findAll({ name: 'Pager' }) + pager.at(pager.length - 1).trigger('click') + + expect(handleChange).toBeCalledWith( + { + class: 'my-page', + current: 2, + pageSize: 2, + }, + {}, + {} + ) + + expect(handlePaginationChange).toBeCalledWith(2, 2) + done() + }) + }) + + // https://github.com/ant-design/ant-design/issues/4532 + // https://codepen.io/afc163/pen/dVeNoP?editors=001 + it('should have pager when change pagination from false to undefined', (done) => { + const wrapper = mount(Table, getTableOptions({ pagination: false })) + Vue.nextTick(() => { + expect(wrapper.findAll('.ant-pagination')).toHaveLength(0) + wrapper.setProps({ pagination: undefined }) + Vue.nextTick(() => { + expect(wrapper.findAll('.ant-pagination')).toHaveLength(1) + expect(wrapper.findAll('.ant-pagination-item-active')).toHaveLength(1) + done() + }) + }) + }) + + // https://github.com/ant-design/ant-design/issues/4532 + // https://codepen.io/afc163/pen/pWVRJV?editors=001 + it('should display pagination as prop pagination change between true and false', (done) => { + const wrapper = mount(Table, getTableOptions()) + Vue.nextTick(() => { + expect(wrapper.findAll('.ant-pagination')).toHaveLength(1) + expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(2) + wrapper.setProps({ pagination: false }) + Vue.nextTick(() => { + expect(wrapper.findAll('.ant-pagination')).toHaveLength(0) + wrapper.setProps({ pagination }) + // wrapper.update() + Vue.nextTick(() => { + expect(wrapper.findAll('.ant-pagination')).toHaveLength(1) + expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(2) + wrapper.find('.ant-pagination-item-2').trigger('click') + Vue.nextTick(() => { + expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']) + wrapper.setProps({ pagination: false }) + Vue.nextTick(() => { + expect(wrapper.findAll('.ant-pagination')).toHaveLength(0) + wrapper.setProps({ pagination: true }) + Vue.nextTick(() => { + expect(wrapper.findAll('.ant-pagination')).toHaveLength(1) + expect(wrapper.findAll('.ant-pagination-item')).toHaveLength(1) // pageSize will be 10 + expect(renderedNames(wrapper)).toHaveLength(4) + done() + }) + }) + }) + }) + }) + }) + }) + + // https://github.com/ant-design/ant-design/issues/5259 + it('change to correct page when data source changes', (done) => { + const wrapper = mount(Table, getTableOptions({ pagination: { pageSize: 1 }})) + Vue.nextTick(() => { + wrapper.find('.ant-pagination-item-3').trigger('click') + wrapper.setProps({ dataSource: [data[0]] }) + Vue.nextTick(() => { + expect(wrapper.find('.ant-pagination-item-1').classes()).toContain('ant-pagination-item-active') + done() + }) + }) + }) + + it('specify the position of pagination', (done) => { + const wrapper = mount(Table, getTableOptions({ pagination: { position: 'top' }})) + Vue.nextTick(() => { + expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(2) + expect(wrapper.findAll('.ant-spin-container > *').at(0).findAll('.ant-pagination')).toHaveLength(1) + wrapper.setProps({ pagination: { position: 'bottom' }}) + Vue.nextTick(() => { + expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(2) + expect(wrapper.findAll('.ant-spin-container > *').at(1).findAll('.ant-pagination')).toHaveLength(1) + wrapper.setProps({ pagination: { position: 'both' }}) + Vue.nextTick(() => { + expect(wrapper.findAll('.ant-spin-container > *')).toHaveLength(3) + expect(wrapper.findAll('.ant-spin-container > *').at(0).findAll('.ant-pagination')).toHaveLength(1) + expect(wrapper.findAll('.ant-spin-container > *').at(2).findAll('.ant-pagination')).toHaveLength(1) + done() + }) + }) + }) + }) +}) diff --git a/components/table/__tests__/Table.test.js b/components/table/__tests__/Table.test.js new file mode 100644 index 000000000..d9fe492f3 --- /dev/null +++ b/components/table/__tests__/Table.test.js @@ -0,0 +1,102 @@ +import { shallowMount as shallow, mount } from '@vue/test-utils' +import Table from '..' +import Vue from 'vue' + +const { Column, ColumnGroup } = Table + +describe('Table', () => { + it('renders JSX correctly', (done) => { + const data = [{ + key: '1', + firstName: 'John', + lastName: 'Brown', + age: 32, + }, { + key: '2', + firstName: 'Jim', + lastName: 'Green', + age: 42, + }] + + const wrapper = mount({ + render () { + return ( +
+ + + + + +
+ ) + }, + }, { sync: false } + ) + + Vue.nextTick(() => { + expect(wrapper.html()).toMatchSnapshot() + done() + }) + }) + + it('updates columns when receiving props', (done) => { + const columns = [{ + title: 'Name', + key: 'name', + dataIndex: 'name', + }] + const wrapper = shallow(Table, { + propsData: { + columns, + }, + sync: false, + }) + const newColumns = [{ + title: 'Title', + key: 'title', + dataIndex: 'title', + }] + wrapper.setProps({ columns: newColumns }) + Vue.nextTick(() => { + expect(wrapper.vm.columns).toBe(newColumns) + done() + }) + }) + + it('loading with Spin', (done) => { + const loading = { + spinning: false, + delay: 500, + } + const wrapper = mount(Table, { + propsData: { + loading, + }, + sync: false, + }) + Vue.nextTick(async () => { + expect(wrapper.findAll('.ant-spin')).toHaveLength(0) + expect(wrapper.find('.ant-table-placeholder').text()).not.toEqual('') + + loading.spinning = true + wrapper.setProps({ loading }) + expect(wrapper.findAll('.ant-spin')).toHaveLength(0) + + await new Promise(resolve => setTimeout(resolve, 1000)) + expect(wrapper.findAll('.ant-spin')).toHaveLength(1) + done() + }) + }) +}) diff --git a/components/table/__tests__/__snapshots__/Table.pagination.test.js.snap b/components/table/__tests__/__snapshots__/Table.pagination.test.js.snap new file mode 100644 index 000000000..fe8459654 --- /dev/null +++ b/components/table/__tests__/__snapshots__/Table.pagination.test.js.snap @@ -0,0 +1,39 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Table.pagination renders pagination correctly 1`] = ` +
+ + + + + + + + + + +
Name
+ Jack
+ Lucy
+
+
+
+
    +
  • + +
    • +
  • + 1 +
    • +
  • + 2 +
    • +
  • + +
    • + +
+
+ +
+`; diff --git a/components/table/__tests__/__snapshots__/Table.test.js.snap b/components/table/__tests__/__snapshots__/Table.test.js.snap new file mode 100644 index 000000000..9cec8794a --- /dev/null +++ b/components/table/__tests__/__snapshots__/Table.test.js.snap @@ -0,0 +1,34 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Table renders JSX correctly 1`] = ` +
+ + + + + + + + + + + + + + + + + + + +
NameAge
First NameLast Name
+ JohnBrown32
+ JimGreen42
+
+
+
+
+ +
+`; diff --git a/components/table/__tests__/__snapshots__/empty.test.js.snap b/components/table/__tests__/__snapshots__/empty.test.js.snap new file mode 100644 index 000000000..d11ef2042 --- /dev/null +++ b/components/table/__tests__/__snapshots__/empty.test.js.snap @@ -0,0 +1,154 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Table renders empty table 1`] = ` +
+ + + + + + + + + + +
Column 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8
+
+
No data
+
+
+
+ +
+`; + +exports[`Table renders empty table with custom emptyText 1`] = ` +
+ + + + + + + + + + +
Column 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8
+
+
custom empty text
+
+
+
+ +
+`; + +exports[`Table renders empty table with fixed columns 1`] = ` +
+ + + + + + + + + + + + + +
Full NameAgeColumn 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8Action
+
+
No data
+
+
+ +
+
+ + + + + + + + + + + + +
Full NameAge
+
+
+
+
+ +
+
+ + + + + + + + + + +
Action
+
+
+
+
+
+
+ +
+`; + +exports[`Table renders empty table without emptyText when loading 1`] = ` +
+
+
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
Column 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8
+
+
+
+
+
+ +
+`; diff --git a/components/table/__tests__/empty.test.js b/components/table/__tests__/empty.test.js new file mode 100644 index 000000000..19079a757 --- /dev/null +++ b/components/table/__tests__/empty.test.js @@ -0,0 +1,100 @@ +import { mount } from '@vue/test-utils' +import Table from '..' +import Vue from 'vue' + +const columns = [ + { title: 'Column 1', dataIndex: 'address', key: '1' }, + { title: 'Column 2', dataIndex: 'address', key: '2' }, + { title: 'Column 3', dataIndex: 'address', key: '3' }, + { title: 'Column 4', dataIndex: 'address', key: '4' }, + { title: 'Column 5', dataIndex: 'address', key: '5' }, + { title: 'Column 6', dataIndex: 'address', key: '6' }, + { title: 'Column 7', dataIndex: 'address', key: '7' }, + { title: 'Column 8', dataIndex: 'address', key: '8' }, +] + +const columnsFixed = [ + { + title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left', + }, + { + title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left', + }, + { title: 'Column 1', dataIndex: 'address', key: '1' }, + { title: 'Column 2', dataIndex: 'address', key: '2' }, + { title: 'Column 3', dataIndex: 'address', key: '3' }, + { title: 'Column 4', dataIndex: 'address', key: '4' }, + { title: 'Column 5', dataIndex: 'address', key: '5' }, + { title: 'Column 6', dataIndex: 'address', key: '6' }, + { title: 'Column 7', dataIndex: 'address', key: '7' }, + { title: 'Column 8', dataIndex: 'address', key: '8' }, + { + title: 'Action', + key: 'address', + fixed: 'right', + width: 100, + }, +] + +describe('Table', () => { + it('renders empty table', (done) => { + const wrapper = mount({ + render () { + return ( + + ) + }, + }, { sync: false }) + Vue.nextTick(() => { + expect(wrapper.html()).toMatchSnapshot() + done() + }) + }) + + it('renders empty table with fixed columns', (done) => { + const wrapper = mount({ + render () { + return ( +
+ ) + }, + }, { sync: false }) + Vue.nextTick(() => { + expect(wrapper.html()).toMatchSnapshot() + done() + }) + }) + + it('renders empty table with custom emptyText', (done) => { + const wrapper = mount({ + render () { + return ( +
+ ) + }, + }, { sync: false }) + Vue.nextTick(() => { + expect(wrapper.html()).toMatchSnapshot() + done() + }) + }) + + it('renders empty table without emptyText when loading', (done) => { + const wrapper = mount({ + render () { + return ( +
+ ) + }, + }, { sync: false }) + Vue.nextTick(() => { + expect(wrapper.html()).toMatchSnapshot() + done() + }) + }) +})