2023-10-26 11:46:22 +08:00
|
|
|
import React, { useCallback, useEffect, useState } from 'react';
|
2022-09-08 21:55:23 +08:00
|
|
|
import { fireEvent, render, waitFor } from '@testing-library/react';
|
2023-06-07 22:54:56 +08:00
|
|
|
import type { DefaultRecordType } from 'rc-table/lib/interface';
|
2023-10-26 11:46:22 +08:00
|
|
|
|
2022-09-08 23:47:22 +08:00
|
|
|
import type { SelectAllLabel, TransferProps } from '..';
|
2016-12-16 17:59:52 +08:00
|
|
|
import Transfer from '..';
|
2019-08-26 22:53:20 +08:00
|
|
|
import mountTest from '../../../tests/shared/mountTest';
|
2020-01-02 19:10:16 +08:00
|
|
|
import rtlTest from '../../../tests/shared/rtlTest';
|
2023-06-07 22:54:56 +08:00
|
|
|
import Button from '../../button';
|
2018-09-19 15:05:55 +08:00
|
|
|
|
2022-09-08 23:47:22 +08:00
|
|
|
const listCommonProps: {
|
|
|
|
dataSource: { key: string; title: string; disabled?: boolean }[];
|
|
|
|
selectedKeys?: string[];
|
|
|
|
targetKeys?: string[];
|
|
|
|
} = {
|
2018-12-07 16:17:45 +08:00
|
|
|
dataSource: [
|
2022-09-08 23:47:22 +08:00
|
|
|
{ key: 'a', title: 'a' },
|
|
|
|
{ key: 'b', title: 'b' },
|
|
|
|
{ key: 'c', title: 'c', disabled: true },
|
2018-12-07 16:17:45 +08:00
|
|
|
],
|
2016-12-16 17:59:52 +08:00
|
|
|
selectedKeys: ['a'],
|
|
|
|
targetKeys: ['b'],
|
|
|
|
};
|
|
|
|
|
2017-02-24 19:08:02 +08:00
|
|
|
const listDisabledProps = {
|
2018-12-07 16:17:45 +08:00
|
|
|
dataSource: [
|
2022-09-08 23:47:22 +08:00
|
|
|
{ key: 'a', title: 'a', disabled: true },
|
|
|
|
{ key: 'b', title: 'b' },
|
2018-12-07 16:17:45 +08:00
|
|
|
],
|
2017-02-24 19:08:02 +08:00
|
|
|
selectedKeys: ['a', 'b'],
|
|
|
|
targetKeys: [],
|
|
|
|
};
|
|
|
|
|
2017-01-27 17:08:12 +08:00
|
|
|
const searchTransferProps = {
|
|
|
|
dataSource: [
|
|
|
|
{
|
|
|
|
key: '0',
|
|
|
|
title: 'content1',
|
|
|
|
description: 'description of content1',
|
|
|
|
chosen: false,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: '1',
|
|
|
|
title: 'content2',
|
|
|
|
description: 'description of content2',
|
|
|
|
chosen: false,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: '2',
|
|
|
|
title: 'content3',
|
|
|
|
description: 'description of content3',
|
|
|
|
chosen: false,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: '3',
|
|
|
|
title: 'content4',
|
|
|
|
description: 'description of content4',
|
|
|
|
chosen: false,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: '4',
|
|
|
|
title: 'content5',
|
|
|
|
description: 'description of content5',
|
|
|
|
chosen: false,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: '5',
|
|
|
|
title: 'content6',
|
|
|
|
description: 'description of content6',
|
|
|
|
chosen: false,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
selectedKeys: [],
|
|
|
|
targetKeys: ['3', '4'],
|
|
|
|
};
|
|
|
|
|
2023-06-28 19:23:00 +08:00
|
|
|
const generateData = (n = 20) => {
|
|
|
|
const data = [];
|
|
|
|
for (let i = 0; i < n; i++) {
|
|
|
|
data.push({
|
|
|
|
key: `${i}`,
|
|
|
|
title: `content${i}`,
|
|
|
|
description: `description of content${i}`,
|
|
|
|
chosen: false,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return data;
|
|
|
|
};
|
|
|
|
|
2016-12-16 17:59:52 +08:00
|
|
|
describe('Transfer', () => {
|
2019-08-26 22:53:20 +08:00
|
|
|
mountTest(Transfer);
|
2020-01-02 19:10:16 +08:00
|
|
|
rtlTest(Transfer);
|
2019-08-26 22:53:20 +08:00
|
|
|
|
2016-12-16 17:59:52 +08:00
|
|
|
it('should render correctly', () => {
|
2022-09-08 21:55:23 +08:00
|
|
|
const wrapper = render(<Transfer {...listCommonProps} />);
|
|
|
|
expect(wrapper.container.firstChild).toMatchSnapshot();
|
2016-12-16 17:59:52 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should move selected keys to corresponding list', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const handleChange = jest.fn();
|
2022-04-17 22:36:36 +08:00
|
|
|
const { container } = render(<Transfer {...listCommonProps} onChange={handleChange} />);
|
2022-09-08 23:47:22 +08:00
|
|
|
fireEvent.click(container.querySelector('.ant-transfer-operation')?.querySelector('button')!); // move selected keys to right list
|
2016-12-16 17:59:52 +08:00
|
|
|
expect(handleChange).toHaveBeenCalledWith(['a', 'b'], 'right', ['a']);
|
|
|
|
});
|
|
|
|
|
2019-09-26 11:37:06 +08:00
|
|
|
it('should move selected keys to left list', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const handleChange = jest.fn();
|
2022-04-17 22:36:36 +08:00
|
|
|
const { container } = render(
|
2019-09-26 11:37:06 +08:00
|
|
|
<Transfer
|
|
|
|
{...listCommonProps}
|
|
|
|
selectedKeys={['a']}
|
|
|
|
targetKeys={['a']}
|
|
|
|
onChange={handleChange}
|
2019-09-26 22:28:08 +08:00
|
|
|
/>,
|
2019-09-26 11:37:06 +08:00
|
|
|
);
|
2022-04-17 22:36:36 +08:00
|
|
|
fireEvent.click(
|
2022-09-08 23:47:22 +08:00
|
|
|
container.querySelector('.ant-transfer-operation')?.querySelectorAll('button')?.[1]!,
|
2022-04-17 22:36:36 +08:00
|
|
|
); // move selected keys to left list
|
2019-09-26 11:37:06 +08:00
|
|
|
expect(handleChange).toHaveBeenCalledWith([], 'left', ['a']);
|
|
|
|
});
|
|
|
|
|
2017-02-24 19:08:02 +08:00
|
|
|
it('should move selected keys expect disabled to corresponding list', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const handleChange = jest.fn();
|
2022-04-17 22:36:36 +08:00
|
|
|
const { container } = render(<Transfer {...listDisabledProps} onChange={handleChange} />);
|
2022-09-08 23:47:22 +08:00
|
|
|
fireEvent.click(container.querySelector('.ant-transfer-operation')?.querySelector('button')!); // move selected keys to right list
|
2017-02-24 19:08:02 +08:00
|
|
|
expect(handleChange).toHaveBeenCalledWith(['b'], 'right', ['b']);
|
|
|
|
});
|
|
|
|
|
2016-12-16 17:59:52 +08:00
|
|
|
it('should uncheck checkbox when click on checked item', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const handleSelectChange = jest.fn();
|
2022-09-08 21:55:23 +08:00
|
|
|
const { getByTitle } = render(
|
|
|
|
<Transfer
|
|
|
|
{...listCommonProps}
|
|
|
|
onSelectChange={handleSelectChange}
|
2022-11-19 13:47:33 +08:00
|
|
|
render={(item) => item.title}
|
2022-09-08 21:55:23 +08:00
|
|
|
/>,
|
|
|
|
);
|
|
|
|
getByTitle('a').click();
|
2016-12-16 17:59:52 +08:00
|
|
|
expect(handleSelectChange).toHaveBeenLastCalledWith([], []);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should check checkbox when click on unchecked item', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const handleSelectChange = jest.fn();
|
2022-09-08 21:55:23 +08:00
|
|
|
const { getByText } = render(
|
|
|
|
<Transfer
|
|
|
|
{...listCommonProps}
|
|
|
|
onSelectChange={handleSelectChange}
|
2022-11-19 13:47:33 +08:00
|
|
|
render={(item) => item.title}
|
2022-09-08 21:55:23 +08:00
|
|
|
/>,
|
|
|
|
);
|
|
|
|
getByText('b').click();
|
2016-12-16 17:59:52 +08:00
|
|
|
expect(handleSelectChange).toHaveBeenLastCalledWith(['a'], ['b']);
|
|
|
|
});
|
|
|
|
|
2023-10-26 11:46:22 +08:00
|
|
|
it('multiple select/deselect by hold down the shift key', () => {
|
|
|
|
const handleSelectChange = jest.fn();
|
|
|
|
const { getByText } = render(
|
|
|
|
<Transfer
|
|
|
|
dataSource={[
|
|
|
|
{ key: 'a', title: 'a' },
|
|
|
|
{ key: 'b', title: 'b' },
|
|
|
|
{ key: 'c', title: 'c' },
|
|
|
|
]}
|
|
|
|
onSelectChange={handleSelectChange}
|
|
|
|
render={(item) => item.title}
|
|
|
|
/>,
|
|
|
|
);
|
|
|
|
|
|
|
|
fireEvent.click(getByText('a'));
|
|
|
|
expect(handleSelectChange).toHaveBeenLastCalledWith(['a'], []);
|
|
|
|
|
|
|
|
fireEvent.click(getByText('c'), {
|
|
|
|
shiftKey: true,
|
|
|
|
});
|
|
|
|
expect(handleSelectChange).toHaveBeenLastCalledWith(['a', 'b', 'c'], []);
|
|
|
|
|
|
|
|
fireEvent.click(getByText('b'), {
|
|
|
|
shiftKey: true,
|
|
|
|
});
|
|
|
|
expect(handleSelectChange).toHaveBeenLastCalledWith(['a'], []);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('multiple select targetKeys by hold down the shift key', () => {
|
|
|
|
const handleSelectChange = jest.fn();
|
|
|
|
const { getByText } = render(
|
|
|
|
<Transfer
|
|
|
|
dataSource={[
|
|
|
|
{ key: 'a', title: 'a' },
|
|
|
|
{ key: 'b', title: 'b' },
|
|
|
|
{ key: 'c', title: 'c' },
|
|
|
|
]}
|
|
|
|
targetKeys={['a', 'b', 'c']}
|
|
|
|
onSelectChange={handleSelectChange}
|
|
|
|
render={(item) => item.title}
|
|
|
|
/>,
|
|
|
|
);
|
|
|
|
|
|
|
|
fireEvent.click(getByText('a'));
|
|
|
|
expect(handleSelectChange).toHaveBeenLastCalledWith([], ['a']);
|
|
|
|
|
|
|
|
fireEvent.click(getByText('c'), {
|
|
|
|
shiftKey: true,
|
|
|
|
});
|
|
|
|
expect(handleSelectChange).toHaveBeenLastCalledWith([], ['a', 'b', 'c']);
|
|
|
|
|
|
|
|
fireEvent.click(getByText('b'), {
|
|
|
|
shiftKey: true,
|
|
|
|
});
|
|
|
|
expect(handleSelectChange).toHaveBeenLastCalledWith([], ['a']);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('reset last select key after deselect', () => {
|
|
|
|
const handleSelectChange = jest.fn();
|
|
|
|
const { getByText } = render(
|
|
|
|
<Transfer
|
|
|
|
dataSource={[
|
|
|
|
{ key: 'a', title: 'a' },
|
|
|
|
{ key: 'b', title: 'b' },
|
|
|
|
{ key: 'c', title: 'c' },
|
|
|
|
{ key: 'd', title: 'd' },
|
|
|
|
]}
|
|
|
|
onSelectChange={handleSelectChange}
|
|
|
|
render={(item) => item.title}
|
|
|
|
/>,
|
|
|
|
);
|
|
|
|
|
|
|
|
fireEvent.click(getByText('a'));
|
|
|
|
expect(handleSelectChange).toHaveBeenLastCalledWith(['a'], []);
|
|
|
|
fireEvent.click(getByText('c'), {
|
|
|
|
shiftKey: true,
|
|
|
|
});
|
|
|
|
expect(handleSelectChange).toHaveBeenLastCalledWith(['a', 'b', 'c'], []);
|
|
|
|
fireEvent.click(getByText('c'));
|
|
|
|
expect(handleSelectChange).toHaveBeenLastCalledWith(['a', 'b'], []);
|
|
|
|
fireEvent.click(getByText('d'), {
|
|
|
|
shiftKey: true,
|
|
|
|
});
|
|
|
|
expect(handleSelectChange).toHaveBeenLastCalledWith(['a', 'b', 'd'], []);
|
|
|
|
});
|
|
|
|
|
2019-09-17 13:31:32 +08:00
|
|
|
it('should not check checkbox when component disabled', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const handleSelectChange = jest.fn();
|
2022-09-08 21:55:23 +08:00
|
|
|
const { getByText } = render(
|
|
|
|
<Transfer
|
|
|
|
{...listCommonProps}
|
|
|
|
disabled
|
|
|
|
onSelectChange={handleSelectChange}
|
2022-11-19 13:47:33 +08:00
|
|
|
render={(item) => item.title}
|
2022-09-08 21:55:23 +08:00
|
|
|
/>,
|
2019-09-17 13:31:32 +08:00
|
|
|
);
|
2022-09-08 21:55:23 +08:00
|
|
|
getByText('a').click();
|
2019-09-17 13:31:32 +08:00
|
|
|
expect(handleSelectChange).not.toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
2016-12-16 17:59:52 +08:00
|
|
|
it('should not check checkbox when click on disabled item', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const handleSelectChange = jest.fn();
|
2022-09-08 21:55:23 +08:00
|
|
|
const { getByText } = render(
|
|
|
|
<Transfer
|
|
|
|
{...listCommonProps}
|
|
|
|
onSelectChange={handleSelectChange}
|
2022-11-19 13:47:33 +08:00
|
|
|
render={(item) => item.title}
|
2022-09-08 21:55:23 +08:00
|
|
|
/>,
|
|
|
|
);
|
|
|
|
|
|
|
|
getByText('c').click();
|
2016-12-16 17:59:52 +08:00
|
|
|
expect(handleSelectChange).not.toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should check all item when click on check all', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const handleSelectChange = jest.fn();
|
2022-09-08 21:55:23 +08:00
|
|
|
const { container } = render(
|
|
|
|
<Transfer {...listCommonProps} onSelectChange={handleSelectChange} />,
|
|
|
|
);
|
|
|
|
|
|
|
|
fireEvent.click(
|
|
|
|
container
|
2022-09-08 23:47:22 +08:00
|
|
|
?.querySelectorAll('.ant-transfer-list-header')
|
|
|
|
?.item(1)
|
|
|
|
?.querySelector('input[type="checkbox"]')!,
|
2022-09-08 21:55:23 +08:00
|
|
|
);
|
|
|
|
|
2016-12-16 17:59:52 +08:00
|
|
|
expect(handleSelectChange).toHaveBeenCalledWith(['a'], ['b']);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should uncheck all item when click on uncheck all', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const handleSelectChange = jest.fn();
|
2022-09-08 21:55:23 +08:00
|
|
|
const { container } = render(
|
|
|
|
<Transfer {...listCommonProps} onSelectChange={handleSelectChange} />,
|
|
|
|
);
|
|
|
|
|
|
|
|
fireEvent.click(
|
|
|
|
container
|
2022-09-08 23:47:22 +08:00
|
|
|
?.querySelectorAll('.ant-transfer-list-header')
|
|
|
|
?.item(0)
|
|
|
|
?.querySelector('input[type="checkbox"]')!,
|
2022-09-08 21:55:23 +08:00
|
|
|
);
|
|
|
|
|
2016-12-16 17:59:52 +08:00
|
|
|
expect(handleSelectChange).toHaveBeenCalledWith([], []);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should call `filterOption` when use input in search box', () => {
|
2022-09-08 23:47:22 +08:00
|
|
|
const filterOption: TransferProps<any>['filterOption'] = (inputValue, option) =>
|
|
|
|
inputValue === option.title;
|
2022-09-08 21:55:23 +08:00
|
|
|
const { container } = render(
|
|
|
|
<Transfer
|
|
|
|
{...listCommonProps}
|
|
|
|
showSearch
|
|
|
|
filterOption={filterOption}
|
2022-11-19 13:47:33 +08:00
|
|
|
render={(item) => item.title}
|
2022-09-08 21:55:23 +08:00
|
|
|
/>,
|
|
|
|
);
|
2017-01-27 17:08:12 +08:00
|
|
|
|
2022-09-08 21:55:23 +08:00
|
|
|
fireEvent.change(
|
2022-09-08 23:47:22 +08:00
|
|
|
container
|
|
|
|
?.querySelectorAll('.ant-transfer-list')
|
|
|
|
?.item(0)
|
|
|
|
?.querySelector('input[type="text"]')!,
|
2022-09-08 21:55:23 +08:00
|
|
|
{ target: { value: 'a' } },
|
|
|
|
);
|
|
|
|
|
|
|
|
expect(
|
|
|
|
container
|
|
|
|
.querySelectorAll('.ant-transfer-list')
|
|
|
|
.item(0)
|
|
|
|
.querySelectorAll('.ant-transfer-list-content input[type="checkbox"]'),
|
|
|
|
).toHaveLength(1);
|
|
|
|
});
|
2018-08-28 16:26:32 +08:00
|
|
|
|
2017-01-27 17:08:12 +08:00
|
|
|
it('should display the correct count of items when filter by input', () => {
|
2022-09-08 23:47:22 +08:00
|
|
|
const filterOption: TransferProps<any>['filterOption'] = (inputValue, option) =>
|
|
|
|
option.description.includes(inputValue);
|
2022-11-19 13:47:33 +08:00
|
|
|
const renderFunc: TransferProps<any>['render'] = (item) => item.title;
|
2022-09-08 21:55:23 +08:00
|
|
|
const { container, getByText } = render(
|
2017-01-27 17:08:12 +08:00
|
|
|
<Transfer
|
|
|
|
{...searchTransferProps}
|
|
|
|
showSearch
|
|
|
|
filterOption={filterOption}
|
|
|
|
render={renderFunc}
|
2018-12-07 16:17:45 +08:00
|
|
|
/>,
|
2017-01-27 17:08:12 +08:00
|
|
|
);
|
2022-09-08 21:55:23 +08:00
|
|
|
fireEvent.change(
|
2022-09-08 23:47:22 +08:00
|
|
|
container
|
|
|
|
?.querySelectorAll('.ant-transfer-list')
|
|
|
|
?.item(0)
|
|
|
|
?.querySelector('input[type="text"]')!,
|
2022-09-08 21:55:23 +08:00
|
|
|
{ target: { value: 'content2' } },
|
|
|
|
);
|
|
|
|
|
|
|
|
expect(getByText('1 item')).toBeTruthy();
|
2018-08-28 16:26:32 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should display the correct locale', () => {
|
|
|
|
const emptyProps = { dataSource: [], selectedKeys: [], targetKeys: [] };
|
|
|
|
const locale = { itemUnit: 'Person', notFoundContent: 'Nothing', searchPlaceholder: 'Search' };
|
2022-09-08 21:55:23 +08:00
|
|
|
const { getAllByText, getAllByPlaceholderText } = render(
|
2018-12-07 16:17:45 +08:00
|
|
|
<Transfer {...listCommonProps} {...emptyProps} showSearch locale={locale} />,
|
2018-11-28 15:00:03 +08:00
|
|
|
);
|
2018-08-28 16:26:32 +08:00
|
|
|
|
2022-09-08 21:55:23 +08:00
|
|
|
expect(getAllByText('0 Person')).toHaveLength(2);
|
2018-08-28 16:26:32 +08:00
|
|
|
|
2022-09-08 21:55:23 +08:00
|
|
|
expect(getAllByPlaceholderText('Search')).toHaveLength(2);
|
2018-08-28 16:26:32 +08:00
|
|
|
|
2022-09-08 21:55:23 +08:00
|
|
|
expect(getAllByText('Nothing')).toHaveLength(2);
|
2018-08-28 16:26:32 +08:00
|
|
|
});
|
|
|
|
|
2019-07-09 11:46:21 +08:00
|
|
|
it('should display the correct locale and ignore old API', () => {
|
2023-06-07 22:54:56 +08:00
|
|
|
const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
|
|
|
|
2018-08-28 16:26:32 +08:00
|
|
|
const emptyProps = { dataSource: [], selectedKeys: [], targetKeys: [] };
|
|
|
|
const locale = { notFoundContent: 'old1', searchPlaceholder: 'old2' };
|
2019-07-09 11:46:21 +08:00
|
|
|
const newLocalProp = { notFoundContent: 'new1', searchPlaceholder: 'new2' };
|
2022-09-08 21:55:23 +08:00
|
|
|
const { getAllByPlaceholderText, getAllByText } = render(
|
2019-07-09 11:46:21 +08:00
|
|
|
<Transfer
|
|
|
|
{...listCommonProps}
|
|
|
|
{...emptyProps}
|
|
|
|
{...locale}
|
|
|
|
locale={newLocalProp}
|
|
|
|
showSearch
|
|
|
|
/>,
|
|
|
|
);
|
2018-08-28 16:26:32 +08:00
|
|
|
|
2022-09-08 21:55:23 +08:00
|
|
|
expect(getAllByPlaceholderText('new2')).toHaveLength(2);
|
2018-08-28 16:26:32 +08:00
|
|
|
|
2022-09-08 21:55:23 +08:00
|
|
|
expect(getAllByText('new1')).toHaveLength(2);
|
2018-09-19 15:05:55 +08:00
|
|
|
|
2019-07-09 11:46:21 +08:00
|
|
|
expect(consoleErrorSpy).not.toHaveBeenCalledWith(
|
2019-02-27 15:32:29 +08:00
|
|
|
'Warning: [antd: Transfer] `notFoundContent` and `searchPlaceholder` will be removed, please use `locale` instead.',
|
2018-09-19 15:05:55 +08:00
|
|
|
);
|
|
|
|
consoleErrorSpy.mockRestore();
|
2018-08-28 16:26:32 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should display the correct items unit', () => {
|
2022-09-08 21:55:23 +08:00
|
|
|
const { getByText } = render(
|
|
|
|
<Transfer {...listCommonProps} locale={{ itemsUnit: 'People' }} />,
|
|
|
|
);
|
2018-08-28 16:26:32 +08:00
|
|
|
|
2022-09-08 21:55:23 +08:00
|
|
|
expect(getByText('1/2 People')).toBeTruthy();
|
2017-01-27 17:08:12 +08:00
|
|
|
});
|
|
|
|
|
2021-06-23 17:38:16 +08:00
|
|
|
it('should display the correct notFoundContent', () => {
|
2022-09-08 21:55:23 +08:00
|
|
|
const { getByText } = render(
|
2021-06-23 17:38:16 +08:00
|
|
|
<Transfer dataSource={[]} locale={{ notFoundContent: ['No Source', 'No Target'] }} />,
|
|
|
|
);
|
|
|
|
|
2022-09-08 21:55:23 +08:00
|
|
|
expect(getByText('No Source')).toBeTruthy();
|
|
|
|
expect(getByText('No Target')).toBeTruthy();
|
2021-06-23 17:38:16 +08:00
|
|
|
});
|
|
|
|
|
2017-01-27 17:08:12 +08:00
|
|
|
it('should just check the filtered item when click on check all after search by input', () => {
|
2022-09-08 23:47:22 +08:00
|
|
|
const filterOption: TransferProps<any>['filterOption'] = (inputValue, option) =>
|
|
|
|
option.description.includes(inputValue);
|
2022-11-19 13:47:33 +08:00
|
|
|
const renderFunc: TransferProps<any>['render'] = (item) => item.title;
|
2023-06-07 21:59:21 +08:00
|
|
|
const handleSelectChange = jest.fn();
|
2022-09-08 21:55:23 +08:00
|
|
|
const { container, getByTitle } = render(
|
2017-01-27 17:08:12 +08:00
|
|
|
<Transfer
|
|
|
|
{...searchTransferProps}
|
|
|
|
showSearch
|
|
|
|
filterOption={filterOption}
|
|
|
|
render={renderFunc}
|
|
|
|
onSelectChange={handleSelectChange}
|
2018-12-07 16:17:45 +08:00
|
|
|
/>,
|
2017-01-27 17:08:12 +08:00
|
|
|
);
|
2022-09-08 21:55:23 +08:00
|
|
|
fireEvent.change(
|
2022-09-08 23:47:22 +08:00
|
|
|
container
|
|
|
|
?.querySelectorAll('.ant-transfer-list')
|
|
|
|
?.item(0)
|
|
|
|
?.querySelector('input[type="text"]')!,
|
2022-09-08 21:55:23 +08:00
|
|
|
{ target: { value: 'content2' } },
|
|
|
|
);
|
|
|
|
getByTitle('content2').click();
|
2017-01-27 17:08:12 +08:00
|
|
|
expect(handleSelectChange).toHaveBeenCalledWith(['1'], []);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should transfer just the filtered item after search by input', () => {
|
2022-09-08 23:47:22 +08:00
|
|
|
const filterOption: TransferProps<any>['filterOption'] = (inputValue, option) =>
|
|
|
|
option.description.includes(inputValue);
|
2022-11-19 13:47:33 +08:00
|
|
|
const renderFunc: TransferProps<any>['render'] = (item) => item.title;
|
2023-06-07 21:59:21 +08:00
|
|
|
const handleChange = jest.fn();
|
2022-04-17 22:36:36 +08:00
|
|
|
const TransferDemo = () => {
|
2022-09-08 23:47:22 +08:00
|
|
|
const [selectedKeys, setSelectedKeys] = useState<string[]>(searchTransferProps.selectedKeys);
|
|
|
|
const handleSelectChange: TransferProps<any>['onSelectChange'] = (
|
|
|
|
sourceSelectedKeys,
|
|
|
|
targetSelectedKeys,
|
|
|
|
) => {
|
2022-04-17 22:36:36 +08:00
|
|
|
setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Transfer
|
|
|
|
{...searchTransferProps}
|
|
|
|
showSearch
|
|
|
|
filterOption={filterOption}
|
|
|
|
render={renderFunc}
|
|
|
|
onSelectChange={handleSelectChange}
|
|
|
|
onChange={handleChange}
|
|
|
|
selectedKeys={selectedKeys}
|
|
|
|
/>
|
|
|
|
);
|
2017-01-27 17:08:12 +08:00
|
|
|
};
|
2022-04-17 22:36:36 +08:00
|
|
|
const { container } = render(<TransferDemo />);
|
2022-09-08 23:47:22 +08:00
|
|
|
fireEvent.change(
|
|
|
|
container.querySelector('.ant-transfer-list-search')?.querySelector('input')!,
|
|
|
|
{ target: { value: 'content2' } },
|
|
|
|
);
|
2022-04-17 22:36:36 +08:00
|
|
|
fireEvent.click(
|
|
|
|
container
|
2022-09-08 23:47:22 +08:00
|
|
|
?.querySelector('.ant-transfer-list')
|
|
|
|
?.querySelector('.ant-transfer-list-header input[type="checkbox"]')!,
|
2017-01-27 17:08:12 +08:00
|
|
|
);
|
2022-09-08 23:47:22 +08:00
|
|
|
fireEvent.click(container.querySelector('.ant-transfer-operation')?.querySelector('button')!);
|
2017-01-27 17:08:12 +08:00
|
|
|
expect(handleChange).toHaveBeenCalledWith(['1', '3', '4'], 'right', ['1']);
|
|
|
|
});
|
2017-05-03 19:05:31 +08:00
|
|
|
|
|
|
|
it('should check correctly when there is a search text', () => {
|
2018-06-22 21:05:13 +08:00
|
|
|
const newProps = { ...listCommonProps };
|
|
|
|
delete newProps.targetKeys;
|
|
|
|
delete newProps.selectedKeys;
|
2023-06-07 21:59:21 +08:00
|
|
|
const handleSelectChange = jest.fn();
|
2022-09-08 21:55:23 +08:00
|
|
|
const { container, getByText } = render(
|
2018-11-28 15:00:03 +08:00
|
|
|
<Transfer
|
|
|
|
{...newProps}
|
|
|
|
showSearch
|
|
|
|
onSelectChange={handleSelectChange}
|
2022-11-19 13:47:33 +08:00
|
|
|
render={(item) => item.title}
|
2018-12-07 16:17:45 +08:00
|
|
|
/>,
|
2017-05-03 19:05:31 +08:00
|
|
|
);
|
2022-09-08 21:55:23 +08:00
|
|
|
|
|
|
|
getByText('b').click();
|
2017-05-03 19:05:31 +08:00
|
|
|
expect(handleSelectChange).toHaveBeenLastCalledWith(['b'], []);
|
2022-09-08 21:55:23 +08:00
|
|
|
|
|
|
|
fireEvent.change(
|
2022-09-08 23:47:22 +08:00
|
|
|
container
|
|
|
|
?.querySelectorAll('.ant-transfer-list')
|
|
|
|
?.item(0)
|
|
|
|
?.querySelector('input[type="text"]')!,
|
2022-09-08 21:55:23 +08:00
|
|
|
{ target: { value: 'a' } },
|
|
|
|
);
|
|
|
|
fireEvent.click(
|
|
|
|
container
|
2022-09-08 23:47:22 +08:00
|
|
|
?.querySelectorAll('.ant-transfer-list')
|
|
|
|
?.item(0)
|
|
|
|
?.querySelector('.ant-transfer-list-header input[type="checkbox"]')!,
|
2022-09-08 21:55:23 +08:00
|
|
|
);
|
|
|
|
|
2017-05-03 19:05:31 +08:00
|
|
|
expect(handleSelectChange).toHaveBeenLastCalledWith(['b', 'a'], []);
|
2022-09-08 21:55:23 +08:00
|
|
|
|
|
|
|
fireEvent.click(
|
|
|
|
container
|
2022-09-08 23:47:22 +08:00
|
|
|
?.querySelectorAll('.ant-transfer-list')
|
|
|
|
?.item(0)
|
|
|
|
?.querySelector('.ant-transfer-list-header input[type="checkbox"]')!,
|
2022-09-08 21:55:23 +08:00
|
|
|
);
|
|
|
|
|
2017-05-03 19:05:31 +08:00
|
|
|
expect(handleSelectChange).toHaveBeenLastCalledWith(['b'], []);
|
|
|
|
});
|
2017-05-11 10:41:14 +08:00
|
|
|
|
2020-05-13 19:15:40 +08:00
|
|
|
it('should show sorted targetKey', () => {
|
2017-05-11 10:41:14 +08:00
|
|
|
const sortedTargetKeyProps = {
|
2018-12-07 16:17:45 +08:00
|
|
|
dataSource: [
|
|
|
|
{
|
|
|
|
key: 'a',
|
|
|
|
title: 'a',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'b',
|
|
|
|
title: 'b',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'c',
|
|
|
|
title: 'c',
|
|
|
|
},
|
|
|
|
],
|
2017-05-11 10:41:14 +08:00
|
|
|
targetKeys: ['c', 'b'],
|
|
|
|
lazy: false,
|
|
|
|
};
|
2022-09-08 21:55:23 +08:00
|
|
|
const { container } = render(
|
2022-11-19 13:47:33 +08:00
|
|
|
<Transfer {...sortedTargetKeyProps} render={(item) => item.title} />,
|
2022-09-08 21:55:23 +08:00
|
|
|
);
|
|
|
|
expect(container.firstChild).toMatchSnapshot();
|
2017-05-11 10:41:14 +08:00
|
|
|
});
|
2018-05-29 15:30:47 +08:00
|
|
|
|
|
|
|
it('should add custom styles when their props are provided', () => {
|
2023-08-01 01:26:41 +08:00
|
|
|
const style: React.CSSProperties = {
|
2018-05-29 15:30:47 +08:00
|
|
|
backgroundColor: 'red',
|
|
|
|
};
|
2023-08-01 01:26:41 +08:00
|
|
|
const leftStyle: React.CSSProperties = {
|
2018-05-29 15:30:47 +08:00
|
|
|
backgroundColor: 'blue',
|
|
|
|
};
|
2023-08-01 01:26:41 +08:00
|
|
|
const rightStyle: React.CSSProperties = {
|
2019-10-22 11:05:39 +08:00
|
|
|
backgroundColor: 'red',
|
|
|
|
};
|
2023-08-01 01:26:41 +08:00
|
|
|
const operationStyle: React.CSSProperties = {
|
2018-05-29 15:30:47 +08:00
|
|
|
backgroundColor: 'yellow',
|
|
|
|
};
|
|
|
|
|
2022-09-08 21:55:23 +08:00
|
|
|
const { container } = render(
|
2018-11-28 15:00:03 +08:00
|
|
|
<Transfer
|
|
|
|
{...listCommonProps}
|
|
|
|
style={style}
|
2019-10-22 11:05:39 +08:00
|
|
|
listStyle={({ direction }) => (direction === 'left' ? leftStyle : rightStyle)}
|
2018-11-28 15:00:03 +08:00
|
|
|
operationStyle={operationStyle}
|
2018-12-07 16:17:45 +08:00
|
|
|
/>,
|
2018-11-28 15:00:03 +08:00
|
|
|
);
|
2018-05-29 15:30:47 +08:00
|
|
|
|
2022-09-08 23:47:22 +08:00
|
|
|
const wrapper = container.querySelector<HTMLDivElement>('.ant-transfer');
|
|
|
|
const listSource = container.querySelectorAll<HTMLDivElement>('.ant-transfer-list').item(0);
|
|
|
|
const listTarget = container.querySelectorAll<HTMLDivElement>('.ant-transfer-list').item(1);
|
|
|
|
const operation = container.querySelectorAll<HTMLDivElement>('.ant-transfer-operation').item(0);
|
2018-05-29 15:30:47 +08:00
|
|
|
|
2022-09-08 23:47:22 +08:00
|
|
|
expect(wrapper?.style.backgroundColor).toEqual('red');
|
2022-09-08 21:55:23 +08:00
|
|
|
expect(listSource.style.backgroundColor).toEqual('blue');
|
|
|
|
expect(listTarget.style.backgroundColor).toEqual('red');
|
|
|
|
expect(operation.style.backgroundColor).toEqual('yellow');
|
2018-05-29 15:30:47 +08:00
|
|
|
});
|
2019-09-26 11:37:06 +08:00
|
|
|
|
|
|
|
it('should support onScroll', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const onScroll = jest.fn();
|
2022-09-08 21:55:23 +08:00
|
|
|
const { container } = render(<Transfer {...listCommonProps} onScroll={onScroll} />);
|
|
|
|
|
|
|
|
fireEvent.scroll(
|
|
|
|
container
|
|
|
|
.querySelectorAll('.ant-transfer-list')
|
|
|
|
.item(0)
|
|
|
|
.querySelectorAll('.ant-transfer-list-content')
|
|
|
|
.item(0),
|
|
|
|
);
|
2019-09-26 11:37:06 +08:00
|
|
|
expect(onScroll).toHaveBeenLastCalledWith('left', expect.anything());
|
2022-09-08 21:55:23 +08:00
|
|
|
|
|
|
|
fireEvent.scroll(
|
|
|
|
container
|
|
|
|
.querySelectorAll('.ant-transfer-list')
|
|
|
|
.item(1)
|
|
|
|
.querySelectorAll('.ant-transfer-list-content')
|
|
|
|
.item(0),
|
|
|
|
);
|
2019-09-26 11:37:06 +08:00
|
|
|
expect(onScroll).toHaveBeenLastCalledWith('right', expect.anything());
|
|
|
|
});
|
|
|
|
|
2023-06-20 13:41:35 +08:00
|
|
|
it('support rowKey', () => {
|
|
|
|
const onSelectChange = jest.fn();
|
|
|
|
|
|
|
|
const Demo = () => {
|
|
|
|
const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Transfer
|
|
|
|
{...listCommonProps}
|
|
|
|
selectedKeys={selectedKeys}
|
|
|
|
rowKey={(record) => `key_${record.key}`}
|
|
|
|
onSelectChange={(keys) => {
|
|
|
|
onSelectChange(keys);
|
|
|
|
setSelectedKeys(keys);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const { container } = render(<Demo />);
|
|
|
|
|
|
|
|
fireEvent.click(container.querySelector('.ant-transfer-list-content input')!);
|
|
|
|
expect(onSelectChange).toHaveBeenCalledWith(['key_a']);
|
|
|
|
expect(
|
|
|
|
container.querySelector<HTMLInputElement>('.ant-transfer-list-content input')!.checked,
|
|
|
|
).toBeTruthy();
|
2019-09-26 11:37:06 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should support render value and label in item', () => {
|
2022-09-08 21:55:23 +08:00
|
|
|
const { container } = render(
|
2019-09-26 11:37:06 +08:00
|
|
|
<Transfer
|
2022-09-08 23:47:22 +08:00
|
|
|
dataSource={[{ key: 'a', title: 'title' }]}
|
2022-11-19 13:47:33 +08:00
|
|
|
render={(record) => ({
|
2022-09-08 23:47:22 +08:00
|
|
|
value: `${record.title} value`,
|
|
|
|
label: 'label' as unknown as React.ReactElement,
|
|
|
|
})}
|
2019-09-26 11:37:06 +08:00
|
|
|
/>,
|
|
|
|
);
|
2022-09-08 21:55:23 +08:00
|
|
|
expect(container.firstChild).toMatchSnapshot();
|
2019-09-26 11:37:06 +08:00
|
|
|
});
|
2020-02-04 10:16:23 +08:00
|
|
|
|
|
|
|
it('should render correct checkbox label when checkboxLabel is defined', () => {
|
|
|
|
const selectAllLabels = ['Checkbox Label'];
|
2022-09-08 21:55:23 +08:00
|
|
|
const { getByText } = render(
|
|
|
|
<Transfer {...listCommonProps} selectAllLabels={selectAllLabels} />,
|
|
|
|
);
|
|
|
|
expect(getByText('Checkbox Label')).toBeTruthy();
|
2020-02-04 10:16:23 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should render correct checkbox label when checkboxLabel is a function', () => {
|
2022-09-08 23:47:22 +08:00
|
|
|
const selectAllLabels: SelectAllLabel[] = [
|
2020-02-04 10:16:23 +08:00
|
|
|
({ selectedCount, totalCount }) => (
|
|
|
|
<span>
|
|
|
|
{selectedCount} of {totalCount}
|
|
|
|
</span>
|
|
|
|
),
|
|
|
|
];
|
2022-09-08 21:55:23 +08:00
|
|
|
const { getByText } = render(
|
|
|
|
<Transfer {...listCommonProps} selectAllLabels={selectAllLabels} />,
|
|
|
|
);
|
|
|
|
|
|
|
|
expect(getByText('1 of 2')).toBeTruthy();
|
2020-02-04 10:16:23 +08:00
|
|
|
});
|
2020-05-13 19:15:40 +08:00
|
|
|
|
|
|
|
describe('pagination', () => {
|
2022-09-08 21:55:23 +08:00
|
|
|
it('boolean', async () => {
|
|
|
|
const { getByTitle } = render(<Transfer {...listDisabledProps} pagination />);
|
|
|
|
await waitFor(() => getByTitle('1/1'));
|
2020-05-13 19:15:40 +08:00
|
|
|
});
|
|
|
|
|
2022-09-08 21:55:23 +08:00
|
|
|
it('object', async () => {
|
|
|
|
const { container, getByTitle } = render(
|
|
|
|
<Transfer {...listDisabledProps} pagination={{ pageSize: 1 }} />,
|
|
|
|
);
|
2020-05-13 19:15:40 +08:00
|
|
|
expect(
|
2022-09-08 21:55:23 +08:00
|
|
|
container
|
|
|
|
.querySelectorAll('.ant-transfer-list')
|
|
|
|
.item(0)
|
|
|
|
.querySelectorAll('.ant-transfer-list-content-item'),
|
2020-05-13 19:15:40 +08:00
|
|
|
).toHaveLength(1);
|
2022-09-08 21:55:23 +08:00
|
|
|
await waitFor(() => getByTitle('1/2'));
|
2020-05-13 19:15:40 +08:00
|
|
|
});
|
|
|
|
|
2022-09-08 21:55:23 +08:00
|
|
|
it('not exceed max size', async () => {
|
|
|
|
const { container, getByTitle, getAllByTitle, rerender } = render(
|
|
|
|
<Transfer {...listDisabledProps} pagination={{ pageSize: 1 }} />,
|
2020-05-13 19:15:40 +08:00
|
|
|
);
|
2022-09-08 23:47:22 +08:00
|
|
|
fireEvent.click(container.querySelector('.ant-pagination-next .ant-pagination-item-link')!);
|
2020-05-13 19:15:40 +08:00
|
|
|
|
2022-09-08 21:55:23 +08:00
|
|
|
await waitFor(() => getByTitle('2/2'));
|
|
|
|
|
|
|
|
rerender(
|
|
|
|
<Transfer
|
|
|
|
{...{ ...listDisabledProps, targetKeys: ['b', 'c'] }}
|
|
|
|
pagination={{ pageSize: 1 }}
|
|
|
|
/>,
|
2020-05-13 19:15:40 +08:00
|
|
|
);
|
2022-09-08 21:55:23 +08:00
|
|
|
await waitFor(() => expect(getAllByTitle('1/1')).toHaveLength(2));
|
2020-05-13 19:15:40 +08:00
|
|
|
});
|
2023-06-28 19:23:00 +08:00
|
|
|
|
|
|
|
it('should support change pageSize', () => {
|
|
|
|
const dataSource = generateData();
|
|
|
|
const { container } = render(
|
|
|
|
<Transfer dataSource={dataSource} pagination={{ showSizeChanger: true, simple: false }} />,
|
|
|
|
);
|
|
|
|
|
|
|
|
fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
|
|
|
|
fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]);
|
|
|
|
expect(container.querySelectorAll('.ant-transfer-list-content-item').length).toBe(20);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should be used first when pagination has pagesize', () => {
|
|
|
|
const dataSource = generateData(30);
|
|
|
|
|
|
|
|
const { container } = render(
|
|
|
|
<Transfer
|
|
|
|
dataSource={dataSource}
|
|
|
|
pagination={{ showSizeChanger: true, simple: false, pageSize: 20 }}
|
|
|
|
/>,
|
|
|
|
);
|
|
|
|
|
|
|
|
fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
|
|
|
|
fireEvent.click(container.querySelectorAll('.ant-select-item-option')[2]);
|
|
|
|
expect(container.querySelectorAll('.ant-transfer-list-content-item').length).toBe(20);
|
|
|
|
});
|
2020-05-13 19:15:40 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('remove by click icon', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const onChange = jest.fn();
|
2022-09-08 21:55:23 +08:00
|
|
|
const { container } = render(<Transfer {...listCommonProps} onChange={onChange} oneWay />);
|
|
|
|
fireEvent.click(container.querySelectorAll('.ant-transfer-list-content-item-remove')[0]);
|
2020-05-13 19:15:40 +08:00
|
|
|
expect(onChange).toHaveBeenCalledWith([], 'left', ['b']);
|
|
|
|
});
|
2023-04-27 11:48:57 +08:00
|
|
|
|
|
|
|
it('control mode select all should not throw warning', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
2023-04-27 11:48:57 +08:00
|
|
|
|
2023-07-06 23:54:03 +08:00
|
|
|
const App: React.FC = () => {
|
2023-04-27 11:48:57 +08:00
|
|
|
const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
|
|
|
|
|
|
|
|
const onSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
|
|
|
|
setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Transfer
|
|
|
|
dataSource={[
|
|
|
|
{
|
|
|
|
key: 'a',
|
|
|
|
title: 'a',
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
selectedKeys={selectedKeys}
|
|
|
|
onSelectChange={onSelectChange}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const { container } = render(<App />);
|
|
|
|
|
|
|
|
fireEvent.click(container.querySelector('.ant-transfer-list-header input[type="checkbox"]')!);
|
|
|
|
|
|
|
|
expect(errSpy).not.toHaveBeenCalled();
|
|
|
|
|
|
|
|
errSpy.mockRestore();
|
|
|
|
});
|
2016-12-16 17:59:52 +08:00
|
|
|
});
|
2021-01-08 10:14:01 +08:00
|
|
|
|
|
|
|
describe('immutable data', () => {
|
|
|
|
// https://github.com/ant-design/ant-design/issues/28662
|
|
|
|
it('dataSource is frozen', () => {
|
2022-09-08 23:47:22 +08:00
|
|
|
const mockData = [Object.freeze({ id: '0', title: `title`, description: `description` })];
|
2022-11-19 13:47:33 +08:00
|
|
|
const { container } = render(<Transfer rowKey={(item) => item.id} dataSource={mockData} />);
|
2022-09-08 21:55:23 +08:00
|
|
|
expect(container.firstChild).toMatchSnapshot();
|
2021-01-08 10:14:01 +08:00
|
|
|
});
|
2023-06-07 22:54:56 +08:00
|
|
|
|
|
|
|
it('prevent error when reset data in some cases', () => {
|
2023-07-06 23:54:03 +08:00
|
|
|
const App: React.FC = () => {
|
2023-06-07 22:54:56 +08:00
|
|
|
const [mockData, setMockData] = useState<DefaultRecordType[]>([]);
|
|
|
|
const [targetKeys, setTargetKeys] = useState<string[]>([]);
|
|
|
|
|
|
|
|
const getMock = () => {
|
|
|
|
const tempTargetKeys = [];
|
|
|
|
const tempMockData = [];
|
|
|
|
for (let i = 0; i < 2; i++) {
|
|
|
|
const data = {
|
|
|
|
key: i.toString(),
|
|
|
|
title: `content${i + 1}`,
|
|
|
|
description: `description of content${i + 1}`,
|
|
|
|
chosen: i % 2 === 0,
|
|
|
|
};
|
|
|
|
if (data.chosen) {
|
|
|
|
tempTargetKeys.push(data.key);
|
|
|
|
}
|
|
|
|
tempMockData.push(data);
|
|
|
|
}
|
|
|
|
setMockData(tempMockData);
|
|
|
|
setTargetKeys(tempTargetKeys);
|
|
|
|
};
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
getMock();
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const handleChange = (newTargetKeys: string[]) => {
|
|
|
|
setTargetKeys(newTargetKeys);
|
|
|
|
};
|
|
|
|
|
|
|
|
const ButtonRender = useCallback(
|
|
|
|
() => <Button onClick={getMock}>Right button reload</Button>,
|
|
|
|
[getMock],
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Transfer
|
|
|
|
dataSource={mockData}
|
|
|
|
operations={['to right', 'to left']}
|
|
|
|
targetKeys={targetKeys}
|
|
|
|
onChange={handleChange}
|
|
|
|
render={(item) => `test-${item}`}
|
|
|
|
footer={ButtonRender}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const { container } = render(<App />);
|
|
|
|
fireEvent.click(container.querySelector('.ant-transfer-list-header input[type="checkbox"]')!);
|
|
|
|
fireEvent.click(container.querySelector('.ant-transfer-operation .ant-btn')!);
|
|
|
|
expect(container.querySelectorAll('.ant-transfer-list')[1]).toBeTruthy();
|
|
|
|
expect(
|
|
|
|
container
|
|
|
|
.querySelectorAll('.ant-transfer-list')[1]
|
|
|
|
.querySelectorAll('.ant-transfer-list-content-item').length,
|
|
|
|
).toBe(2);
|
|
|
|
|
|
|
|
fireEvent.click(
|
|
|
|
container.querySelectorAll('.ant-transfer-list-header input[type="checkbox"]')![1],
|
|
|
|
);
|
|
|
|
expect(container.querySelectorAll('.ant-transfer-list-header-selected')[1]).toContainHTML(
|
|
|
|
'2/2',
|
|
|
|
);
|
|
|
|
fireEvent.click(container.querySelector('.ant-transfer-list-footer .ant-btn')!);
|
|
|
|
expect(container.querySelectorAll('.ant-transfer-list-header-selected')[1]).toContainHTML(
|
|
|
|
'1/1',
|
|
|
|
);
|
|
|
|
});
|
2021-01-08 10:14:01 +08:00
|
|
|
});
|