2019-01-12 11:33:27 +08:00
|
|
|
import { mount } from '@vue/test-utils';
|
|
|
|
import { asyncExpect } from '@/tests/utils';
|
|
|
|
import Table from '..';
|
2018-06-06 22:33:09 +08:00
|
|
|
|
|
|
|
describe('Table.rowSelection', () => {
|
2019-01-12 11:33:27 +08:00
|
|
|
const columns = [
|
|
|
|
{
|
|
|
|
title: 'Name',
|
|
|
|
dataIndex: 'name',
|
|
|
|
},
|
|
|
|
];
|
2018-06-06 22:33:09 +08:00
|
|
|
|
|
|
|
const data = [
|
|
|
|
{ key: 0, name: 'Jack' },
|
|
|
|
{ key: 1, name: 'Lucy' },
|
|
|
|
{ key: 2, name: 'Tom' },
|
|
|
|
{ key: 3, name: 'Jerry' },
|
2019-01-12 11:33:27 +08:00
|
|
|
];
|
|
|
|
function getTableOptions(props = {}, listeners = {}) {
|
2018-06-06 22:33:09 +08:00
|
|
|
return {
|
|
|
|
propsData: {
|
|
|
|
columns,
|
|
|
|
dataSource: data,
|
|
|
|
rowSelection: {},
|
|
|
|
...props,
|
|
|
|
},
|
|
|
|
listeners: {
|
|
|
|
...listeners,
|
|
|
|
},
|
|
|
|
sync: false,
|
|
|
|
attachedToDocument: true,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-06-06 22:33:09 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
function renderedNames(wrapper) {
|
2018-06-06 22:33:09 +08:00
|
|
|
return wrapper.findAll({ name: 'TableRow' }).wrappers.map(row => {
|
2019-01-12 11:33:27 +08:00
|
|
|
return row.props().record.name;
|
|
|
|
});
|
2018-06-06 22:33:09 +08:00
|
|
|
}
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
function getStore(wrapper) {
|
|
|
|
return wrapper.vm._vnode.componentInstance.store;
|
2018-06-06 22:33:09 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
it('select by checkbox', async () => {
|
2019-01-12 11:33:27 +08:00
|
|
|
const wrapper = mount(Table, getTableOptions());
|
|
|
|
const checkboxes = wrapper.findAll('input');
|
|
|
|
const checkboxAll = checkboxes.at(0);
|
|
|
|
checkboxAll.element.checked = true;
|
|
|
|
checkboxAll.trigger('change');
|
2018-06-06 22:33:09 +08:00
|
|
|
await asyncExpect(() => {
|
|
|
|
expect(getStore(wrapper).getState()).toEqual({
|
|
|
|
selectedRowKeys: [0, 1, 2, 3],
|
|
|
|
selectionDirty: true,
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
|
|
|
});
|
|
|
|
checkboxes.at(1).element.checked = false;
|
|
|
|
checkboxes.at(1).trigger('change');
|
2018-06-06 22:33:09 +08:00
|
|
|
await asyncExpect(() => {
|
|
|
|
expect(getStore(wrapper).getState()).toEqual({
|
|
|
|
selectedRowKeys: [1, 2, 3],
|
|
|
|
selectionDirty: true,
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
|
|
|
});
|
|
|
|
checkboxes.at(1).element.checked = true;
|
|
|
|
checkboxes.at(1).trigger('change');
|
2018-06-06 22:33:09 +08:00
|
|
|
await asyncExpect(() => {
|
|
|
|
expect(getStore(wrapper).getState()).toEqual({
|
|
|
|
selectedRowKeys: [1, 2, 3, 0],
|
|
|
|
selectionDirty: true,
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2018-06-06 22:33:09 +08:00
|
|
|
|
|
|
|
it('select by radio', async () => {
|
2019-01-12 11:33:27 +08:00
|
|
|
const wrapper = mount(Table, getTableOptions({ rowSelection: { type: 'radio' } }));
|
|
|
|
const radios = wrapper.findAll('input');
|
2018-06-06 22:33:09 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(radios.length).toBe(4);
|
|
|
|
radios.at(0).element.checked = true;
|
|
|
|
radios.at(0).trigger('change');
|
2018-06-06 22:33:09 +08:00
|
|
|
await asyncExpect(() => {
|
|
|
|
expect(getStore(wrapper).getState()).toEqual({
|
|
|
|
selectedRowKeys: [0],
|
|
|
|
selectionDirty: true,
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
|
|
|
});
|
|
|
|
radios.at(radios.length - 1).element.checked = true;
|
|
|
|
radios.at(radios.length - 1).trigger('change');
|
2018-06-06 22:33:09 +08:00
|
|
|
await asyncExpect(() => {
|
|
|
|
expect(getStore(wrapper).getState()).toEqual({
|
|
|
|
selectedRowKeys: [3],
|
|
|
|
selectionDirty: true,
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2018-06-06 22:33:09 +08:00
|
|
|
|
|
|
|
it('pass getCheckboxProps to checkbox', () => {
|
|
|
|
const rowSelection = {
|
2019-01-12 11:33:27 +08:00
|
|
|
getCheckboxProps: record => ({
|
|
|
|
props: {
|
|
|
|
disabled: record.name === 'Lucy',
|
|
|
|
name: record.name,
|
|
|
|
},
|
|
|
|
}),
|
|
|
|
};
|
2018-06-06 22:33:09 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
const wrapper = mount(Table, getTableOptions({ rowSelection }));
|
|
|
|
const checkboxes = wrapper.findAll('input').wrappers;
|
|
|
|
expect(checkboxes[1].vnode.data.attrs.disabled).toBe(false);
|
|
|
|
expect(checkboxes[1].vnode.data.attrs.name).toEqual(data[0].name);
|
|
|
|
expect(checkboxes[2].vnode.data.attrs.disabled).toBe(true);
|
|
|
|
expect(checkboxes[2].vnode.data.attrs.name).toEqual(data[1].name);
|
|
|
|
});
|
2018-06-06 22:33:09 +08:00
|
|
|
|
|
|
|
it('works with pagination', async () => {
|
2019-01-12 11:33:27 +08:00
|
|
|
const wrapper = mount(Table, getTableOptions({ pagination: { pageSize: 2 } }));
|
2018-06-06 22:33:09 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
const checkboxAll = wrapper.find({ name: 'SelectionCheckboxAll' });
|
|
|
|
const pagers = wrapper.findAll({ name: 'Pager' });
|
|
|
|
checkboxAll.find('input').element.checked = true;
|
|
|
|
checkboxAll.find('input').trigger('change');
|
2018-06-06 22:33:09 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(checkboxAll.vm.$data).toEqual({ checked: true, indeterminate: false });
|
|
|
|
});
|
|
|
|
pagers.at(1).trigger('click');
|
2018-06-06 22:33:09 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(checkboxAll.vm.$data).toEqual({ checked: false, indeterminate: false });
|
|
|
|
});
|
|
|
|
pagers.at(0).trigger('click');
|
2018-06-06 22:33:09 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(checkboxAll.vm.$data).toEqual({ checked: true, indeterminate: false });
|
|
|
|
});
|
|
|
|
});
|
2018-06-06 22:33:09 +08:00
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/4020
|
|
|
|
it('handles defaultChecked', async () => {
|
|
|
|
const rowSelection = {
|
2018-06-08 22:38:25 +08:00
|
|
|
getCheckboxProps: record => {
|
|
|
|
return {
|
|
|
|
props: {
|
|
|
|
defaultChecked: record.key === 0,
|
2019-01-12 11:33:27 +08:00
|
|
|
},
|
|
|
|
};
|
2018-06-08 22:38:25 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-06-06 22:33:09 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
const wrapper = mount(Table, getTableOptions({ rowSelection }));
|
2018-06-06 22:33:09 +08:00
|
|
|
|
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
const checkboxs = wrapper.findAll('input');
|
|
|
|
expect(checkboxs.at(1).vnode.data.domProps.checked).toBe(true);
|
|
|
|
expect(checkboxs.at(2).vnode.data.domProps.checked).toBe(false);
|
|
|
|
checkboxs.at(2).element.checked = true;
|
|
|
|
checkboxs.at(2).trigger('change');
|
|
|
|
}, 0);
|
2018-06-06 22:33:09 +08:00
|
|
|
|
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
const checkboxs = wrapper.findAll('input');
|
|
|
|
expect(checkboxs.at(1).vnode.data.domProps.checked).toBe(true);
|
|
|
|
expect(checkboxs.at(2).vnode.data.domProps.checked).toBe(true);
|
|
|
|
}, 1000);
|
|
|
|
});
|
2018-06-06 22:33:09 +08:00
|
|
|
|
|
|
|
it('can be controlled', async () => {
|
2019-01-12 11:33:27 +08:00
|
|
|
const wrapper = mount(Table, getTableOptions({ rowSelection: { selectedRowKeys: [0] } }));
|
2018-06-06 22:33:09 +08:00
|
|
|
|
|
|
|
expect(getStore(wrapper).getState()).toEqual({
|
|
|
|
selectedRowKeys: [0],
|
|
|
|
selectionDirty: false,
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
2018-06-06 22:33:09 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
wrapper.setProps({ rowSelection: { selectedRowKeys: [1] } });
|
2018-06-06 22:33:09 +08:00
|
|
|
await asyncExpect(() => {
|
|
|
|
expect(getStore(wrapper).getState()).toEqual({
|
|
|
|
selectedRowKeys: [1],
|
|
|
|
selectionDirty: false,
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2018-06-06 22:33:09 +08:00
|
|
|
|
|
|
|
it('fires change & select events', async () => {
|
2019-01-12 11:33:27 +08:00
|
|
|
const handleChange = jest.fn();
|
|
|
|
const handleSelect = jest.fn();
|
2018-06-06 22:33:09 +08:00
|
|
|
const rowSelection = {
|
|
|
|
onChange: handleChange,
|
|
|
|
onSelect: handleSelect,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
|
|
|
const wrapper = mount(Table, getTableOptions({ rowSelection }));
|
|
|
|
const checkboxs = wrapper.findAll('input');
|
|
|
|
checkboxs.at(checkboxs.length - 1).element.checked = true;
|
|
|
|
checkboxs.at(checkboxs.length - 1).trigger('change');
|
|
|
|
await asyncExpect(() => {
|
|
|
|
expect(handleChange).toBeCalledWith([3], [{ key: 3, name: 'Jerry' }]);
|
|
|
|
expect(handleSelect.mock.calls.length).toBe(1);
|
|
|
|
expect(handleSelect.mock.calls[0][0]).toEqual({ key: 3, name: 'Jerry' });
|
|
|
|
expect(handleSelect.mock.calls[0][1]).toEqual(true);
|
|
|
|
expect(handleSelect.mock.calls[0][2]).toEqual([{ key: 3, name: 'Jerry' }]);
|
|
|
|
});
|
|
|
|
});
|
2018-06-06 22:33:09 +08:00
|
|
|
|
|
|
|
it('fires selectAll event', async () => {
|
2019-01-12 11:33:27 +08:00
|
|
|
const handleSelectAll = jest.fn();
|
2018-06-06 22:33:09 +08:00
|
|
|
const rowSelection = {
|
|
|
|
onSelectAll: handleSelectAll,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
|
|
|
const wrapper = mount(Table, getTableOptions({ rowSelection }));
|
|
|
|
const checkboxs = wrapper.findAll('input');
|
|
|
|
checkboxs.at(0).element.checked = true;
|
|
|
|
checkboxs.at(0).trigger('change');
|
2018-06-06 22:33:09 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(handleSelectAll).toBeCalledWith(true, data, data);
|
|
|
|
});
|
|
|
|
checkboxs.at(0).element.checked = false;
|
|
|
|
checkboxs.at(0).trigger('change');
|
2018-06-06 22:33:09 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(handleSelectAll).toBeCalledWith(false, [], data);
|
|
|
|
});
|
|
|
|
});
|
2018-06-06 22:33:09 +08:00
|
|
|
|
|
|
|
it('render with default selection correctly', async () => {
|
|
|
|
const rowSelection = {
|
|
|
|
selections: true,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
|
|
|
const wrapper = mount(Table, getTableOptions({ rowSelection }));
|
|
|
|
const dropdownWrapper = mount(
|
|
|
|
{
|
|
|
|
render() {
|
|
|
|
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
|
|
|
|
},
|
2018-06-06 22:33:09 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
{ sync: false },
|
|
|
|
);
|
2018-06-06 22:33:09 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(dropdownWrapper.html()).toMatchSnapshot();
|
|
|
|
});
|
2018-06-06 22:33:09 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
await asyncExpect(() => {});
|
|
|
|
});
|
2018-06-06 22:33:09 +08:00
|
|
|
|
|
|
|
it('click select all selection', () => {
|
2019-01-12 11:33:27 +08:00
|
|
|
const handleSelectAll = jest.fn();
|
2018-06-06 22:33:09 +08:00
|
|
|
const rowSelection = {
|
|
|
|
onSelectAll: handleSelectAll,
|
|
|
|
selections: true,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
|
|
|
const wrapper = mount(Table, getTableOptions({ rowSelection }));
|
2018-06-06 22:33:09 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
const dropdownWrapper = mount(
|
|
|
|
{
|
|
|
|
render() {
|
|
|
|
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
|
|
|
|
},
|
2018-06-06 22:33:09 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
{ sync: false },
|
|
|
|
);
|
|
|
|
dropdownWrapper
|
|
|
|
.findAll('.ant-dropdown-menu-item > div')
|
|
|
|
.at(0)
|
|
|
|
.trigger('click');
|
2018-06-06 22:33:09 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(handleSelectAll).toBeCalledWith(true, data, data);
|
|
|
|
});
|
2018-06-06 22:33:09 +08:00
|
|
|
|
|
|
|
it('fires selectInvert event', () => {
|
2019-01-12 11:33:27 +08:00
|
|
|
const handleSelectInvert = jest.fn();
|
2018-06-06 22:33:09 +08:00
|
|
|
const rowSelection = {
|
|
|
|
onSelectInvert: handleSelectInvert,
|
|
|
|
selections: true,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
|
|
|
const wrapper = mount(Table, getTableOptions({ rowSelection }));
|
|
|
|
const checkboxes = wrapper.findAll('input');
|
|
|
|
checkboxes.at(1).element.checked = true;
|
|
|
|
checkboxes.at(1).trigger('change');
|
|
|
|
const dropdownWrapper = mount(
|
|
|
|
{
|
|
|
|
render() {
|
|
|
|
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
|
|
|
|
},
|
2018-06-06 22:33:09 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
{ sync: false },
|
|
|
|
);
|
|
|
|
const div = dropdownWrapper.findAll('.ant-dropdown-menu-item > div');
|
|
|
|
div.at(div.length - 1).trigger('click');
|
2018-06-06 22:33:09 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(handleSelectInvert).toBeCalledWith([1, 2, 3]);
|
|
|
|
});
|
2018-06-06 22:33:09 +08:00
|
|
|
|
2018-06-08 22:38:25 +08:00
|
|
|
it('fires selection event', () => {
|
2019-01-12 11:33:27 +08:00
|
|
|
const handleSelectOdd = jest.fn();
|
|
|
|
const handleSelectEven = jest.fn();
|
2018-06-08 22:38:25 +08:00
|
|
|
const rowSelection = {
|
2019-01-12 11:33:27 +08:00
|
|
|
selections: [
|
|
|
|
{
|
|
|
|
key: 'odd',
|
|
|
|
text: '奇数项',
|
|
|
|
onSelect: handleSelectOdd,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'even',
|
|
|
|
text: '偶数项',
|
|
|
|
onSelect: handleSelectEven,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
const wrapper = mount(Table, getTableOptions({ rowSelection }));
|
2018-06-08 22:38:25 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
const dropdownWrapper = mount(
|
|
|
|
{
|
|
|
|
render() {
|
|
|
|
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
|
|
|
|
},
|
2018-06-08 22:38:25 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
{ sync: false },
|
|
|
|
);
|
|
|
|
expect(dropdownWrapper.findAll('.ant-dropdown-menu-item').length).toBe(4);
|
2018-06-08 22:38:25 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
dropdownWrapper
|
|
|
|
.findAll('.ant-dropdown-menu-item > div')
|
|
|
|
.at(2)
|
|
|
|
.trigger('click');
|
|
|
|
expect(handleSelectOdd).toBeCalledWith([0, 1, 2, 3]);
|
2018-06-08 22:38:25 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
dropdownWrapper
|
|
|
|
.findAll('.ant-dropdown-menu-item > div')
|
|
|
|
.at(3)
|
|
|
|
.trigger('click');
|
|
|
|
expect(handleSelectEven).toBeCalledWith([0, 1, 2, 3]);
|
|
|
|
});
|
2018-06-08 22:38:25 +08:00
|
|
|
|
|
|
|
it('could hide default selection options', () => {
|
|
|
|
const rowSelection = {
|
|
|
|
hideDefaultSelections: true,
|
2019-01-12 11:33:27 +08:00
|
|
|
selections: [
|
|
|
|
{
|
|
|
|
key: 'odd',
|
|
|
|
text: '奇数项',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'even',
|
|
|
|
text: '偶数项',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
const wrapper = mount(Table, getTableOptions({ rowSelection }));
|
|
|
|
const dropdownWrapper = mount(
|
|
|
|
{
|
|
|
|
render() {
|
|
|
|
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
|
|
|
|
},
|
2018-06-08 22:38:25 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
{ sync: false },
|
|
|
|
);
|
|
|
|
expect(dropdownWrapper.findAll('.ant-dropdown-menu-item').length).toBe(2);
|
|
|
|
});
|
2018-06-08 22:38:25 +08:00
|
|
|
|
|
|
|
it('handle custom selection onSelect correctly when hide default selection options', () => {
|
2019-01-12 11:33:27 +08:00
|
|
|
const handleSelectOdd = jest.fn();
|
|
|
|
const handleSelectEven = jest.fn();
|
2018-06-08 22:38:25 +08:00
|
|
|
const rowSelection = {
|
|
|
|
hideDefaultSelections: true,
|
2019-01-12 11:33:27 +08:00
|
|
|
selections: [
|
|
|
|
{
|
|
|
|
key: 'odd',
|
|
|
|
text: '奇数项',
|
|
|
|
onSelect: handleSelectOdd,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'even',
|
|
|
|
text: '偶数项',
|
|
|
|
onSelect: handleSelectEven,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
const wrapper = mount(Table, getTableOptions({ rowSelection }));
|
2018-06-08 22:38:25 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
const dropdownWrapper = mount(
|
|
|
|
{
|
|
|
|
render() {
|
|
|
|
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
|
|
|
|
},
|
2018-06-08 22:38:25 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
{ sync: false },
|
|
|
|
);
|
|
|
|
expect(dropdownWrapper.findAll('.ant-dropdown-menu-item').length).toBe(2);
|
2018-06-08 22:38:25 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
dropdownWrapper
|
|
|
|
.findAll('.ant-dropdown-menu-item > div')
|
|
|
|
.at(0)
|
|
|
|
.trigger('click');
|
|
|
|
expect(handleSelectOdd).toBeCalledWith([0, 1, 2, 3]);
|
2018-06-08 22:38:25 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
dropdownWrapper
|
|
|
|
.findAll('.ant-dropdown-menu-item > div')
|
|
|
|
.at(1)
|
|
|
|
.trigger('click');
|
|
|
|
expect(handleSelectEven).toBeCalledWith([0, 1, 2, 3]);
|
|
|
|
});
|
2018-06-08 22:38:25 +08:00
|
|
|
|
|
|
|
// https:// github.com/ant-design/ant-design/issues/4245
|
|
|
|
it('handles disabled checkbox correctly when dataSource changes', async () => {
|
|
|
|
const rowSelection = {
|
|
|
|
getCheckboxProps: record => {
|
2019-01-12 11:33:27 +08:00
|
|
|
return { props: { disabled: record.disabled } };
|
2018-06-08 22:38:25 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
|
|
|
const wrapper = mount(Table, getTableOptions({ rowSelection }));
|
2018-06-08 22:38:25 +08:00
|
|
|
const newData = [
|
|
|
|
{ key: 7, name: 'Jack', disabled: true },
|
|
|
|
{ key: 8, name: 'Lucy', disabled: true },
|
2019-01-12 11:33:27 +08:00
|
|
|
];
|
2018-06-08 22:38:25 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
wrapper.setProps({ dataSource: newData });
|
|
|
|
});
|
2018-06-08 22:38:25 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
wrapper.findAll('input').wrappers.forEach(checkbox => {
|
|
|
|
expect(checkbox.vnode.data.attrs.disabled).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2018-06-08 22:38:25 +08:00
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/4779
|
|
|
|
it('should not switch pagination when select record', async () => {
|
2019-01-12 11:33:27 +08:00
|
|
|
const newData = [];
|
2018-06-08 22:38:25 +08:00
|
|
|
for (let i = 0; i < 20; i += 1) {
|
|
|
|
newData.push({
|
|
|
|
key: i.toString(),
|
|
|
|
name: i.toString(),
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
2018-06-08 22:38:25 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
const wrapper = mount(
|
|
|
|
Table,
|
|
|
|
getTableOptions({
|
|
|
|
rowSelection: {},
|
|
|
|
dataSource: newData,
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
const pager = wrapper.findAll({ name: 'Pager' });
|
|
|
|
pager.at(pager.length - 1).trigger('click'); // switch to second page
|
|
|
|
wrapper.findAll('input').at(0).element.checked = true;
|
|
|
|
wrapper
|
|
|
|
.findAll('input')
|
|
|
|
.at(0)
|
|
|
|
.trigger('change');
|
|
|
|
await asyncExpect(() => {
|
|
|
|
expect(renderedNames(wrapper)).toEqual([
|
|
|
|
'10',
|
|
|
|
'11',
|
|
|
|
'12',
|
|
|
|
'13',
|
|
|
|
'14',
|
|
|
|
'15',
|
|
|
|
'16',
|
|
|
|
'17',
|
|
|
|
'18',
|
|
|
|
'19',
|
|
|
|
]);
|
|
|
|
});
|
|
|
|
});
|
2018-06-08 22:38:25 +08:00
|
|
|
|
|
|
|
it('highlight selected row', async () => {
|
2019-01-12 11:33:27 +08:00
|
|
|
const wrapper = mount(Table, getTableOptions());
|
|
|
|
wrapper.findAll('input').at(1).element.checked = true;
|
|
|
|
wrapper
|
|
|
|
.findAll('input')
|
|
|
|
.at(1)
|
|
|
|
.trigger('change');
|
|
|
|
await asyncExpect(() => {
|
|
|
|
expect(
|
|
|
|
wrapper
|
|
|
|
.findAll('tbody tr')
|
|
|
|
.at(0)
|
|
|
|
.classes(),
|
|
|
|
).toContain('ant-table-row-selected');
|
|
|
|
});
|
|
|
|
});
|
2018-06-08 22:38:25 +08:00
|
|
|
|
|
|
|
it('fix selection column on the left', async () => {
|
2019-01-12 11:33:27 +08:00
|
|
|
const wrapper = mount(
|
|
|
|
Table,
|
|
|
|
getTableOptions({
|
|
|
|
rowSelection: { fixed: true },
|
|
|
|
}),
|
|
|
|
);
|
2018-06-08 22:38:25 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(wrapper.html()).toMatchSnapshot();
|
|
|
|
});
|
|
|
|
});
|
2018-12-12 10:15:00 +08:00
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/10629
|
|
|
|
it('should keep all checked state when remove item from dataSource', async () => {
|
|
|
|
const wrapper = mount(Table, {
|
|
|
|
propsData: {
|
|
|
|
columns,
|
|
|
|
dataSource: data,
|
|
|
|
rowSelection: {
|
|
|
|
selectedRowKeys: [0, 1, 2, 3],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
sync: false,
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
2018-12-12 10:15:00 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(wrapper.findAll({ name: 'ACheckbox' }).length).toBe(5);
|
|
|
|
const allCheckbox = wrapper.findAll({ name: 'ACheckbox' });
|
2018-12-12 10:15:00 +08:00
|
|
|
Array(allCheckbox.length).forEach((_, index) => {
|
2019-01-12 11:33:27 +08:00
|
|
|
const checkbox = allCheckbox.at(index);
|
|
|
|
expect(checkbox.vm.checked).toBe(true);
|
|
|
|
expect(checkbox.vm.indeterminate).toBe(false);
|
|
|
|
});
|
2018-12-12 10:15:00 +08:00
|
|
|
wrapper.setProps({
|
|
|
|
dataSource: data.slice(1),
|
|
|
|
rowSelection: {
|
|
|
|
selectedRowKeys: [1, 2, 3],
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
|
|
|
});
|
2018-12-12 10:15:00 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(wrapper.findAll({ name: 'ACheckbox' }).length).toBe(4);
|
|
|
|
const allCheckbox = wrapper.findAll({ name: 'ACheckbox' });
|
2018-12-12 10:15:00 +08:00
|
|
|
Array(allCheckbox.length).forEach((_, index) => {
|
2019-01-12 11:33:27 +08:00
|
|
|
const checkbox = allCheckbox.at(index);
|
|
|
|
expect(checkbox.vm.checked).toBe(true);
|
|
|
|
expect(checkbox.vm.indeterminate).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2018-12-12 10:15:00 +08:00
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/11042
|
|
|
|
it('add columnTitle for rowSelection', async () => {
|
|
|
|
const wrapper = mount(Table, {
|
|
|
|
propsData: {
|
|
|
|
columns,
|
|
|
|
dataSource: data,
|
|
|
|
rowSelection: {
|
|
|
|
columnTitle: '多选',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
sync: false,
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
2018-12-12 10:15:00 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(
|
|
|
|
wrapper
|
|
|
|
.findAll('thead tr div')
|
|
|
|
.at(0)
|
|
|
|
.text(),
|
|
|
|
).toBe('多选');
|
|
|
|
});
|
2018-12-12 10:15:00 +08:00
|
|
|
await asyncExpect(() => {
|
|
|
|
wrapper.setProps({
|
|
|
|
rowSelection: {
|
|
|
|
type: 'radio',
|
|
|
|
columnTitle: '单选',
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
|
|
|
});
|
|
|
|
await asyncExpect(() => {
|
|
|
|
expect(
|
|
|
|
wrapper
|
|
|
|
.findAll('thead tr div')
|
|
|
|
.at(0)
|
|
|
|
.text(),
|
|
|
|
).toBe('单选');
|
|
|
|
});
|
|
|
|
});
|
2019-01-06 18:11:50 +08:00
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/11384
|
|
|
|
it('should keep item even if in filter', async () => {
|
|
|
|
const filterColumns = [
|
|
|
|
{
|
|
|
|
title: 'Name',
|
|
|
|
dataIndex: 'name',
|
|
|
|
filters: [
|
|
|
|
{
|
|
|
|
text: 'Jack',
|
|
|
|
value: 'Jack',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
text: 'Lucy',
|
|
|
|
value: 'Lucy',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
filterDropdownVisible: true,
|
|
|
|
onFilter: (value, record) => record.name.indexOf(value) === 0,
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
];
|
2019-01-06 18:11:50 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
const onChange = jest.fn();
|
2019-01-06 18:11:50 +08:00
|
|
|
const rowSelection = {
|
|
|
|
onChange,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2019-01-06 18:11:50 +08:00
|
|
|
|
|
|
|
const wrapper = mount(Table, {
|
|
|
|
propsData: {
|
2019-01-12 11:33:27 +08:00
|
|
|
columns: filterColumns,
|
|
|
|
dataSource: data,
|
2020-03-18 14:52:02 +08:00
|
|
|
rowSelection,
|
2019-01-06 18:11:50 +08:00
|
|
|
},
|
|
|
|
sync: false,
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
2019-01-06 18:11:50 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
const dropdownWrapper = mount(
|
|
|
|
{
|
|
|
|
render() {
|
|
|
|
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
|
|
|
|
},
|
2019-01-06 18:11:50 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
{ sync: false },
|
|
|
|
);
|
2019-01-06 18:11:50 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
function clickItem() {
|
2019-01-06 18:11:50 +08:00
|
|
|
wrapper
|
|
|
|
.findAll('tbody .ant-table-selection-column .ant-checkbox-input')
|
2019-01-12 11:33:27 +08:00
|
|
|
.at(0).element.checked = true;
|
2019-01-06 18:11:50 +08:00
|
|
|
wrapper
|
|
|
|
.findAll('tbody .ant-table-selection-column .ant-checkbox-input')
|
|
|
|
.at(0)
|
2019-01-12 11:33:27 +08:00
|
|
|
.trigger('change');
|
2019-01-06 18:11:50 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
// Check Jack
|
|
|
|
dropdownWrapper
|
|
|
|
.findAll('.ant-dropdown-menu-item .ant-checkbox-wrapper')
|
|
|
|
.at(0)
|
2019-01-12 11:33:27 +08:00
|
|
|
.trigger('click');
|
2019-01-06 18:11:50 +08:00
|
|
|
dropdownWrapper
|
|
|
|
.find('.ant-table-filter-dropdown-btns .ant-table-filter-dropdown-link.confirm')
|
2019-01-12 11:33:27 +08:00
|
|
|
.trigger('click');
|
2019-01-06 18:11:50 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(wrapper.findAll('tbody tr').length).toBe(1);
|
|
|
|
});
|
2019-01-06 18:11:50 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
clickItem();
|
|
|
|
});
|
2019-01-06 18:11:50 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(onChange.mock.calls[0][0].length).toBe(1);
|
|
|
|
expect(onChange.mock.calls[0][1].length).toBe(1);
|
|
|
|
});
|
2019-01-06 18:11:50 +08:00
|
|
|
|
|
|
|
await asyncExpect(() => {
|
|
|
|
dropdownWrapper
|
|
|
|
.findAll('.ant-dropdown-menu-item .ant-checkbox-wrapper')
|
|
|
|
.at(0)
|
2019-01-12 11:33:27 +08:00
|
|
|
.trigger('click');
|
|
|
|
});
|
2019-01-06 18:11:50 +08:00
|
|
|
|
|
|
|
await asyncExpect(() => {
|
|
|
|
// Check Lucy
|
|
|
|
dropdownWrapper
|
|
|
|
.findAll('.ant-dropdown-menu-item .ant-checkbox-wrapper')
|
|
|
|
.at(1)
|
2019-01-12 11:33:27 +08:00
|
|
|
.trigger('click');
|
|
|
|
});
|
2019-01-06 18:11:50 +08:00
|
|
|
await asyncExpect(() => {
|
|
|
|
dropdownWrapper
|
|
|
|
.find('.ant-table-filter-dropdown-btns .ant-table-filter-dropdown-link.confirm')
|
2019-01-12 11:33:27 +08:00
|
|
|
.trigger('click');
|
|
|
|
});
|
2019-01-06 18:11:50 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(wrapper.findAll('tbody tr').length).toBe(1);
|
|
|
|
});
|
2019-01-06 18:11:50 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
clickItem();
|
|
|
|
});
|
2019-01-06 18:11:50 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(onChange.mock.calls[1][0].length).toBe(2);
|
|
|
|
expect(onChange.mock.calls[1][1].length).toBe(2);
|
|
|
|
});
|
|
|
|
});
|
2019-01-06 18:11:50 +08:00
|
|
|
|
|
|
|
it('render correctly when set childrenColumnName', async () => {
|
|
|
|
const newDatas = [
|
|
|
|
{
|
|
|
|
key: 1,
|
|
|
|
name: 'Jack',
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
key: 11,
|
|
|
|
name: 'John Brown',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 2,
|
|
|
|
name: 'Lucy',
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
key: 21,
|
|
|
|
name: 'Lucy Brown',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
];
|
2019-01-06 18:11:50 +08:00
|
|
|
|
|
|
|
const wrapper = mount(Table, {
|
|
|
|
propsData: {
|
2020-03-18 14:52:02 +08:00
|
|
|
columns,
|
2019-01-12 11:33:27 +08:00
|
|
|
dataSource: newDatas,
|
|
|
|
rowSelection: {},
|
|
|
|
childrenColumnName: 'test',
|
2019-01-06 18:11:50 +08:00
|
|
|
},
|
|
|
|
sync: false,
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
2019-01-06 18:11:50 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
const checkboxes = wrapper.findAll('input');
|
|
|
|
const checkboxAll = wrapper.find({ name: 'SelectionCheckboxAll' });
|
2019-01-06 18:11:50 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
checkboxes.at(1).element.checked = true;
|
|
|
|
checkboxes.at(1).trigger('change');
|
|
|
|
expect(checkboxAll.vm.$data).toEqual({ indeterminate: true, checked: false });
|
2019-01-06 18:11:50 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
checkboxes.at(2).element.checked = true;
|
|
|
|
checkboxes.at(2).trigger('change');
|
2019-01-06 18:11:50 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(checkboxAll.vm.$data).toEqual({ indeterminate: false, checked: true });
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|