diff --git a/src/table/__tests__/column.test.jsx b/src/table/__tests__/column.test.jsx index ce559976a..5bcc3865b 100644 --- a/src/table/__tests__/column.test.jsx +++ b/src/table/__tests__/column.test.jsx @@ -21,7 +21,7 @@ TABLES.forEach((TTable) => { const columns = [ { title: 'Index', colKey: 'index', align: 'center' }, { title: 'Instance', colKey: 'instance', align: 'left' }, - { title: 'description', colKey: 'instance' }, + { title: 'description', colKey: 'description' }, { title: 'Owner', colKey: 'owner', align: 'right' }, ]; const wrapper = mount({ @@ -41,7 +41,7 @@ TABLES.forEach((TTable) => { const columns = [ { title: 'Index', colKey: 'index' }, { title: 'Instance', colKey: 'instance', attrs: { 'col-key': 'instance' } }, - { title: 'description', colKey: 'instance' }, + { title: 'description', colKey: 'description' }, { title: 'Owner', colKey: 'owner' }, ]; const wrapper = mount({ @@ -58,7 +58,7 @@ TABLES.forEach((TTable) => { const columns = [ { title: 'Index', colKey: 'index', className: () => ['tdesign-class'] }, { title: 'Instance', colKey: 'instance', className: 'tdesign-class' }, - { title: 'description', colKey: 'instance', className: [{ 'tdesign-class': true }] }, + { title: 'description', colKey: 'description', className: [{ 'tdesign-class': true }] }, { title: 'Owner', colKey: 'owner', className: { 'tdesign-class': true, 'tdesign-class1': false } }, ]; const wrapper = mount({ diff --git a/src/table/__tests__/pagination/controlled.test.jsx b/src/table/__tests__/pagination/controlled.test.jsx new file mode 100644 index 000000000..cccd71698 --- /dev/null +++ b/src/table/__tests__/pagination/controlled.test.jsx @@ -0,0 +1,173 @@ +import { mockDelay } from '@test/utils'; +import { afterEach } from 'vitest'; +import { + Table, BaseTable, PrimaryTable, EnhancedTable, +} from '@/src/table/index.ts'; +import { getAjaxDataTableMount, getLocalDataTableMount, getSwitchPaginationTableMount } from './mount'; + +// 4 类表格组件同时测试 +const TABLES = [Table, BaseTable, PrimaryTable, EnhancedTable]; + +TABLES.forEach((TTable) => { + describe(TTable.name, () => { + describe('ajax data pagination: data.length = pageSize', () => { + afterEach(() => { + document.querySelector('.t-popup')?.remove(); + document.querySelector('.t-table')?.remove(); + }); + + it('toggle pagination show', async () => { + const wrapper = getSwitchPaginationTableMount(TTable); + expect(wrapper.find('.t-table__pagination').exists()).toBeFalsy(); + expect(wrapper.findAll('.t-table tbody tr').length).toBe(38); + await wrapper.find('.toggle-pagination input[type=checkbox]').setChecked(true); + await wrapper.vm.$nextTick(); + expect(wrapper.find('.t-table__pagination').exists()).toBeTruthy(); + expect(wrapper.findAll('.t-table tbody tr').length).toBe(5); + await wrapper.find('.toggle-pagination input[type=checkbox]').setChecked(false); + expect(wrapper.find('.t-table__pagination').exists()).toBeFalsy(); + }); + + it('pagination props change', async () => { + const wrapper = getAjaxDataTableMount(TTable); + + const firstSerialNumberClass = '.t-table tbody tr td:first-child'; + const firstInstanceColClass = '.t-table tbody tr td.custom-instance-class-name'; + expect(wrapper.find('.t-table__pagination').exists()).toBeTruthy(); + expect(wrapper.findAll('.t-table tbody tr').length).toBe(5); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('1'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance10_5'); + + await wrapper.find('.next-page').trigger('click'); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance20_5'); + + await wrapper.find('.next-page').trigger('click'); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance30_5'); + + await wrapper.find('.prev-page').trigger('click'); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance20_5'); + + await wrapper.find('.change-page-size').trigger('click'); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance20_10'); + }); + + it('pagination inner change', async () => { + const wrapper = getAjaxDataTableMount(TTable); + + const firstSerialNumberClass = '.t-table tbody tr td:first-child'; + const firstInstanceColClass = '.t-table tbody tr td.custom-instance-class-name'; + expect(wrapper.find('.t-table__pagination').exists()).toBeTruthy(); + expect(wrapper.findAll('.t-table tbody tr').length).toBe(5); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('1'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance10_5'); + + await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(2)').trigger('click'); + await wrapper.vm.$nextTick(); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance20_5'); + + await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(3)').trigger('click'); + await wrapper.vm.$nextTick(); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance30_5'); + + await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(2)').trigger('click'); + await wrapper.vm.$nextTick(); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance20_5'); + + await wrapper.find('.t-pagination__select .t-select-input > .t-input__wrap').trigger('click'); + document.querySelector('.t-select__list li.t-select-option:nth-child(2)').click(); + await wrapper.vm.$nextTick(); + expect(wrapper.findAll('.t-table tbody tr').length).toBe(10); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance20_10'); + + await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(3)').trigger('click'); + await wrapper.vm.$nextTick(); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('21'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance30_10'); + }); + }); + + describe('local data pagination: data.length > pageSize ', () => { + afterEach(() => { + document.querySelector('.t-popup')?.remove(); + document.querySelector('.t-table')?.remove(); + }); + + it('pagination props change', async () => { + const wrapper = getLocalDataTableMount(TTable); + + const firstSerialNumberClass = '.t-table tbody tr td:first-child'; + const firstInstanceColClass = '.t-table tbody tr td.custom-instance-class-name'; + expect(wrapper.find('.t-table__pagination').exists()).toBeTruthy(); + expect(wrapper.findAll('.t-table tbody tr').length).toBe(5); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('1'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance0'); + + await wrapper.find('.next-page').trigger('click'); + await wrapper.vm.$nextTick(); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance5'); + + await wrapper.find('.next-page').trigger('click'); + await wrapper.vm.$nextTick(); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance10'); + + await wrapper.find('.prev-page').trigger('click'); + await wrapper.vm.$nextTick(); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance5'); + + await wrapper.find('.change-page-size').trigger('click'); + await wrapper.vm.$nextTick(); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance10'); + }); + + it('pagination inner change', async () => { + const wrapper = getLocalDataTableMount(TTable); + + const firstSerialNumberClass = '.t-table tbody tr td:first-child'; + const firstInstanceColClass = '.t-table tbody tr td.custom-instance-class-name'; + expect(wrapper.find('.t-table__pagination').exists()).toBeTruthy(); + expect(wrapper.findAll('.t-table tbody tr').length).toBe(5); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('1'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance0'); + + await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(2)').trigger('click'); + await wrapper.vm.$nextTick(); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance5'); + + await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(3)').trigger('click'); + await wrapper.vm.$nextTick(); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance10'); + + await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(2)').trigger('click'); + await wrapper.vm.$nextTick(); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance5'); + + await wrapper.find('.t-pagination__select .t-select-input > .t-input__wrap').trigger('click'); + await wrapper.vm.$nextTick(); + document.querySelector('.t-select__list li.t-select-option:nth-child(2)').click(); + await mockDelay(60); + expect(wrapper.findAll('.t-table tbody tr').length).toBe(10); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance10'); + + await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(3)').trigger('click'); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('21'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance20'); + }); + }); + }); +}); diff --git a/src/table/__tests__/pagination/mount.jsx b/src/table/__tests__/pagination/mount.jsx new file mode 100644 index 000000000..272e1d849 --- /dev/null +++ b/src/table/__tests__/pagination/mount.jsx @@ -0,0 +1,323 @@ +import { mount } from '@vue/test-utils'; +import { Checkbox } from '@/src/checkbox/index.ts'; + +function getAjaxTableData(total, currentPage = 1, pageSize = 5) { + return new Array(total).fill(null).map((item, index) => ({ + id: Math.random() + index + 100, + instance: `Instance${index + currentPage * 10}_${pageSize}`, + status: index % 2, + owner: 'jenny;peter', + description: 'test', + })); +} + +const SIMPLE_COLUMNS = [ + { title: 'SerialNumber', colKey: 'serial-number' }, + { title: 'ID', colKey: 'id' }, + { title: 'Instance', colKey: 'instance', className: 'custom-instance-class-name' }, + { title: 'Status', colKey: 'status' }, +]; + +/** 远程数据分页；分页属性为受控属性 */ +export function getAjaxDataTableMount(TTable) { + const DATA_TOTAL = 5; + return mount({ + data() { + return { + data: getAjaxTableData(DATA_TOTAL), + pagination: { + current: 1, + pageSize: 5, + total: 38, + }, + }; + }, + methods: { + // props change + goToPrevPage() { + this.pagination.current = Math.max(this.pagination.current - 1, 1); + this.data = getAjaxTableData(DATA_TOTAL, this.pagination.current); + }, + // props change + goToNextPage() { + const { current, total, pageSize } = this.pagination; + this.pagination.current = Math.min(current + 1, Math.ceil(total / pageSize)); + this.data = getAjaxTableData(DATA_TOTAL, this.pagination.current); + }, + // props change + changePageSize() { + const newPageSize = 10; + this.pagination.pageSize = newPageSize; + this.data = getAjaxTableData(DATA_TOTAL, this.pagination.current, newPageSize); + }, + // inner change + onPaginationChange(pageInfo) { + this.pagination.current = pageInfo.current; + this.pagination.pageSize = pageInfo.pageSize; + this.data = getAjaxTableData(pageInfo.pageSize, pageInfo.current, pageInfo.pageSize); + }, + }, + render() { + return ( +
+ + + + +
+ ); + }, + }); +} + +export function getSwitchPaginationTableMount(TTable) { + const DATA_TOTAL = 38; + return mount({ + data() { + return { + showPagination: false, + data: getLocalTableData(DATA_TOTAL), + }; + }, + computed: { + pagination() { + return this.showPagination + ? { + current: 1, + pageSize: 5, + total: DATA_TOTAL, + } + : undefined; + }, + }, + methods: { + // inner change + onPaginationChange(pageInfo) { + this.pagination.current = pageInfo.current; + this.pagination.pageSize = pageInfo.pageSize; + }, + onCheckboxChange(val) { + this.showPagination = val; + }, + }, + render() { + return ( +
+ + Toggle Pagination + + +
+ ); + }, + }); +} + +/** 远程数据分页；分页属性为非受控属性 */ +export function getDefaultPaginationAjaxDataTableMount(TTable) { + const DATA_TOTAL = 5; + return mount({ + data() { + return { + data: getAjaxTableData(DATA_TOTAL), + pagination: { + defaultCurrent: 1, + defaultPageSize: 5, + total: 38, + }, + }; + }, + methods: { + // inner change + onPaginationChange(pageInfo) { + this.pagination.current = pageInfo.current; + this.pagination.pageSize = pageInfo.pageSize; + this.data = getAjaxTableData(pageInfo.pageSize, pageInfo.current, pageInfo.pageSize); + }, + }, + render() { + return ( +
+ +
+ ); + }, + }); +} + +function getLocalTableData(total) { + return new Array(total).fill(null).map((item, index) => ({ + id: Math.random() + index + 100, + instance: `Instance${index}`, + status: index % 2, + owner: 'jenny;peter', + description: 'test', + })); +} + +export function getLocalDataTableMount(TTable) { + const DATA_TOTAL = 38; + return mount({ + data() { + return { + data: getLocalTableData(DATA_TOTAL), + pagination: { + current: 1, + pageSize: 5, + total: DATA_TOTAL, + }, + }; + }, + methods: { + // props change + goToPrevPage() { + this.pagination.current = Math.max(this.pagination.current - 1, 1); + }, + // props change + goToNextPage() { + const { current, total, pageSize } = this.pagination; + this.pagination.current = Math.min(current + 1, Math.ceil(total / pageSize)); + }, + // props change + changePageSize() { + const newPageSize = 10; + this.pagination.pageSize = newPageSize; + }, + // inner change + onPaginationChange(pageInfo) { + this.pagination.current = pageInfo.current; + this.pagination.pageSize = pageInfo.pageSize; + }, + }, + render() { + return ( +
+ + + + +
+ ); + }, + }); +} + +export function getDefaultPaginationLocalDataTableMount(TTable) { + const DATA_TOTAL = 38; + return mount({ + data() { + return { + data: getLocalTableData(DATA_TOTAL), + pagination: { + defaultCurrent: 1, + defaultPageSize: 5, + total: DATA_TOTAL, + }, + }; + }, + methods: { + // inner change + onPaginationChange(pageInfo) { + this.pagination.current = pageInfo.current; + this.pagination.pageSize = pageInfo.pageSize; + }, + }, + render() { + return ( +
+ +
+ ); + }, + }); +} + +export function getSwitchDefaultPaginationTableMount(TTable) { + const DATA_TOTAL = 36; + return mount({ + data() { + return { + showPagination: false, + data: getLocalTableData(DATA_TOTAL), + }; + }, + computed: { + pagination() { + return this.showPagination + ? { + defaultCurrent: 1, + defaultPageSize: 5, + total: DATA_TOTAL, + } + : undefined; + }, + }, + methods: { + onCheckboxChange(val) { + this.showPagination = val; + }, + }, + render() { + return ( +
+ + Toggle Pagination + + +
+ ); + }, + }); +} diff --git a/src/table/__tests__/pagination/uncontrolled.test.jsx b/src/table/__tests__/pagination/uncontrolled.test.jsx new file mode 100644 index 000000000..b0c3ca6b0 --- /dev/null +++ b/src/table/__tests__/pagination/uncontrolled.test.jsx @@ -0,0 +1,114 @@ +import { mockDelay } from '@test/utils'; +import { afterEach } from 'vitest'; +import { + Table, BaseTable, PrimaryTable, EnhancedTable, +} from '@/src/table/index.ts'; +import { + getDefaultPaginationAjaxDataTableMount, + getDefaultPaginationLocalDataTableMount, + getSwitchDefaultPaginationTableMount, +} from './mount'; + +// 4 类表格组件同时测试 +const TABLES = [Table, BaseTable, PrimaryTable, EnhancedTable]; + +TABLES.forEach((TTable) => { + describe(TTable.name, () => { + afterEach(() => { + document.querySelector('.t-popup')?.remove(); + document.querySelector('.t-table')?.remove(); + }); + describe('ajax data pagination: data.length = pageSize', () => { + afterEach(() => { + document.querySelector('.t-popup')?.remove(); + document.querySelector('.t-table')?.remove(); + }); + + it('toggle pagination show', async () => { + const wrapper = getSwitchDefaultPaginationTableMount(TTable); + expect(wrapper.find('.t-table__pagination').exists()).toBeFalsy(); + await wrapper.find('.toggle-pagination input[type=checkbox]').setChecked(true); + await wrapper.vm.$nextTick(); + expect(wrapper.find('.t-table__pagination').exists()).toBeTruthy(); + expect(wrapper.findAll('.t-table tbody tr').length).toBe(5); + await wrapper.find('.toggle-pagination input[type=checkbox]').setChecked(false); + expect(wrapper.find('.t-table__pagination').exists()).toBeFalsy(); + }); + + it('pagination inner change', async () => { + const wrapper = getDefaultPaginationAjaxDataTableMount(TTable); + + const firstSerialNumberClass = '.t-table tbody tr td:first-child'; + const firstInstanceColClass = '.t-table tbody tr td.custom-instance-class-name'; + expect(wrapper.find('.t-table__pagination').exists()).toBeTruthy(); + expect(wrapper.findAll('.t-table tbody tr').length).toBe(5); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('1'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance10_5'); + + await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(2)').trigger('click'); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance20_5'); + + await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(3)').trigger('click'); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance30_5'); + + await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(2)').trigger('click'); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance20_5'); + + await wrapper.find('.t-pagination__select .t-select-input > .t-input__wrap').trigger('click'); + document.querySelector('.t-select__list li.t-select-option:nth-child(2)').click(); + await mockDelay(60); + expect(wrapper.findAll('.t-table tbody tr').length).toBe(10); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance20_10'); + + await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(3)').trigger('click'); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('21'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance30_10'); + }); + }); + + describe('local data pagination: data.length > pageSize ', () => { + afterEach(() => { + document.querySelector('.t-popup')?.remove(); + document.querySelector('.t-table')?.remove(); + }); + + it('pagination inner change', async () => { + const wrapper = getDefaultPaginationLocalDataTableMount(TTable); + + const firstSerialNumberClass = '.t-table tbody tr td:first-child'; + const firstInstanceColClass = '.t-table tbody tr td.custom-instance-class-name'; + expect(wrapper.find('.t-table__pagination').exists()).toBeTruthy(); + expect(wrapper.findAll('.t-table tbody tr').length).toBe(5); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('1'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance0'); + + await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(2)').trigger('click'); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance5'); + + await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(3)').trigger('click'); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance10'); + + await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(2)').trigger('click'); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance5'); + + await wrapper.find('.t-pagination__select .t-select-input > .t-input__wrap').trigger('click'); + document.querySelector('.t-select__list li.t-select-option:nth-child(2)').click(); + await mockDelay(60); + expect(wrapper.findAll('.t-table tbody tr').length).toBe(10); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('11'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance10'); + + await wrapper.find('.t-pagination__pager .t-pagination__number:nth-child(3)').trigger('click'); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('21'); + expect(wrapper.find(firstInstanceColClass).element.innerHTML).toBe('Instance20'); + }); + }); + }); +}); diff --git a/src/table/__tests__/serial-number/controlled.test.jsx b/src/table/__tests__/serial-number/controlled.test.jsx new file mode 100644 index 000000000..79ed07470 --- /dev/null +++ b/src/table/__tests__/serial-number/controlled.test.jsx @@ -0,0 +1,102 @@ +import { mount } from '@vue/test-utils'; +import { + Table, BaseTable, PrimaryTable, EnhancedTable, +} from '@/src/table/index.ts'; +import { mockDelay } from '@test/utils'; +import { afterEach } from 'vitest'; + +// 4 类表格组件同时测试 +const TABLES = [Table, BaseTable, PrimaryTable, EnhancedTable]; + +function getTableData(total) { + return new Array(total).fill(null).map((item, index) => ({ + id: Math.random() + index + 100, + instance: `JQTest${index + 1}`, + status: index % 2, + owner: 'jenny;peter', + description: 'test', + })); +} + +const SIMPLE_COLUMNS = [ + { title: 'SerialNumber', colKey: 'serial-number' }, + { title: 'Status', colKey: 'status' }, + { title: 'Instance', colKey: 'instance' }, +]; + +function getTableMount() { + return mount({ + data() { + return { + data: getTableData(5), + pagination: { + current: 1, + pageSize: 5, + total: 102, + }, + }; + }, + methods: { + goToPrevPage() { + this.pagination.current = Math.max(this.pagination.current - 1, 1); + }, + goToNextPage() { + const { current, total, pageSize } = this.pagination; + this.pagination.current = Math.min(current + 1, Math.ceil(total / pageSize) ); + }, + onPaginationChange(pageInfo) { + this.pagination.current = pageInfo.current; + this.pagination.pageSize = pageInfo.pageSize; + this.data = getTableData(pageInfo.pageSize); + }, + }, + render() { + return ( +
+ + + +
+ ); + }, + }); +} + +TABLES.forEach((TTable) => { + describe(TTable.name, () => { + describe('serial-number', () => { + afterEach(() => { + document.querySelector('.t-popup')?.remove(); + document.querySelector('.t-table')?.remove(); + }); + + it('controlled mode', async () => { + const wrapper = getTableMount(); + + const firstSerialNumberClass = '.t-table tbody tr td:first-child'; + expect(wrapper.find('.t-table__pagination').exists()).toBeTruthy(); + expect(wrapper.findAll('.t-table tbody tr').length).toBe(5); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('1'); + + await wrapper.find('.next-page').trigger('click'); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('6'); + + await wrapper.find('.t-pagination__select .t-select-input > .t-input__wrap').trigger('click'); + document.querySelector('.t-select__list li.t-select-option:nth-child(2)').click(); + await mockDelay(60); + expect(wrapper.findAll('.t-table tbody tr').length).toBe(10); + + await wrapper.find('.next-page').trigger('click'); + expect(wrapper.find(firstSerialNumberClass).element.innerHTML).toBe('21'); + }); + }); + }); +}); diff --git a/src/table/_example/drag-sort.vue b/src/table/_example/drag-sort.vue index 9e5077b5b..92d45c78c 100644 --- a/src/table/_example/drag-sort.vue +++ b/src/table/_example/drag-sort.vue @@ -10,7 +10,6 @@ :pagination="pagination1" dragSort="row" @drag-sort="onDragSort" - @page-change="onPageChange" lazyLoad >