mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 05:28:37 +08:00
1810 lines
43 KiB
TypeScript
1810 lines
43 KiB
TypeScript
/**
|
||
* 组件名称：Transfer 穿梭器
|
||
* 单测内容：
|
||
* 1. 基础模式
|
||
* 2. 树形模式
|
||
* 3. 分组模式
|
||
* 4. 表格模式
|
||
* 5. 级联选择模式
|
||
* 6. 关联选择模式
|
||
* 7. 结果面板跟随模式
|
||
* 8. 结果搜索功能
|
||
* 9. 分组模式虚拟滚动
|
||
* 10. 表格模式虚拟滚动
|
||
* 11. 级联模式虚拟滚动
|
||
* 12. 关联模式虚拟滚动
|
||
*/
|
||
|
||
import {fireEvent, render, waitFor, screen} from '@testing-library/react';
|
||
import '../../../src';
|
||
import {render as amisRender} from '../../../src';
|
||
import {makeEnv, formatStyleObject, wait} from '../../helper';
|
||
|
||
const setup = async (items: any = {}, formOptions: any = {}) => {
|
||
const utils = render(
|
||
amisRender(
|
||
{
|
||
type: 'form',
|
||
api: '/api/mock2/form/saveForm',
|
||
body: items,
|
||
...formOptions
|
||
},
|
||
{},
|
||
makeEnv()
|
||
)
|
||
);
|
||
|
||
return utils;
|
||
};
|
||
|
||
test('Renderer:transfer', () => {
|
||
const {container} = render(
|
||
amisRender(
|
||
{
|
||
type: 'page',
|
||
body: {
|
||
type: 'form',
|
||
api: '/api/mock2/form/saveForm',
|
||
body: [
|
||
{
|
||
label: '默认',
|
||
type: 'transfer',
|
||
name: 'transfer',
|
||
options: [
|
||
{
|
||
label: '诸葛亮',
|
||
value: 'zhugeliang'
|
||
},
|
||
{
|
||
label: '曹操',
|
||
value: 'caocao'
|
||
},
|
||
{
|
||
label: '钟无艳',
|
||
value: 'zhongwuyan'
|
||
},
|
||
{
|
||
label: '李白',
|
||
value: 'libai'
|
||
},
|
||
{
|
||
label: '韩信',
|
||
value: 'hanxin'
|
||
},
|
||
{
|
||
label: '云中君',
|
||
value: 'yunzhongjun'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{},
|
||
makeEnv({})
|
||
)
|
||
);
|
||
|
||
expect(container).toMatchSnapshot();
|
||
});
|
||
|
||
test('Renderer:transfer tree', () => {
|
||
const {container} = render(
|
||
amisRender(
|
||
{
|
||
type: 'page',
|
||
body: {
|
||
type: 'form',
|
||
api: '/api/mock2/form/saveForm',
|
||
body: [
|
||
{
|
||
label: '树型展示',
|
||
type: 'transfer',
|
||
name: 'transfer4',
|
||
selectMode: 'tree',
|
||
options: [
|
||
{
|
||
label: '法师',
|
||
children: [
|
||
{
|
||
label: '诸葛亮',
|
||
value: 'zhugeliang'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '战士',
|
||
children: [
|
||
{
|
||
label: '曹操',
|
||
value: 'caocao'
|
||
},
|
||
{
|
||
label: '钟无艳',
|
||
value: 'zhongwuyan'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '打野',
|
||
children: [
|
||
{
|
||
label: '李白',
|
||
value: 'libai'
|
||
},
|
||
{
|
||
label: '韩信',
|
||
value: 'hanxin'
|
||
},
|
||
{
|
||
label: '云中君',
|
||
value: 'yunzhongjun'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{},
|
||
makeEnv({})
|
||
)
|
||
);
|
||
|
||
expect(container).toMatchSnapshot();
|
||
});
|
||
|
||
test('Renderer:transfer group options', async () => {
|
||
const {container, findByText} = render(
|
||
amisRender(
|
||
{
|
||
type: 'page',
|
||
body: {
|
||
type: 'form',
|
||
api: '/api/mock2/form/saveForm',
|
||
body: [
|
||
{
|
||
label: '分组',
|
||
type: 'transfer',
|
||
name: 'transfer',
|
||
options: [
|
||
{
|
||
label: '法师',
|
||
children: [
|
||
{
|
||
label: '诸葛亮',
|
||
value: 'zhugeliang'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '战士',
|
||
children: [
|
||
{
|
||
label: '曹操',
|
||
value: 'caocao'
|
||
},
|
||
{
|
||
label: '钟无艳',
|
||
value: 'zhongwuyan'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '打野',
|
||
children: [
|
||
{
|
||
label: '李白',
|
||
value: 'libai'
|
||
},
|
||
{
|
||
label: '韩信',
|
||
value: 'hanxin'
|
||
},
|
||
{
|
||
label: '云中君',
|
||
value: 'yunzhongjun'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{},
|
||
makeEnv({})
|
||
)
|
||
);
|
||
|
||
await findByText('诸葛亮');
|
||
|
||
// TODO: 莫名其妙 github 上运行就会报错
|
||
// expect(container).toMatchSnapshot();
|
||
});
|
||
|
||
test('Renderer:transfer table', async () => {
|
||
const {container, findByText} = render(
|
||
amisRender(
|
||
{
|
||
type: 'page',
|
||
body: {
|
||
type: 'form',
|
||
api: '/api/mock2/form/saveForm',
|
||
body: [
|
||
{
|
||
label: '表格形式',
|
||
type: 'transfer',
|
||
name: 'transfer',
|
||
selectMode: 'table',
|
||
columns: [
|
||
{
|
||
name: 'label',
|
||
label: '英雄'
|
||
},
|
||
{
|
||
name: 'position',
|
||
label: '位置'
|
||
}
|
||
],
|
||
options: [
|
||
{
|
||
label: '诸葛亮',
|
||
value: 'zhugeliang',
|
||
position: '中单'
|
||
},
|
||
{
|
||
label: '曹操',
|
||
value: 'caocao',
|
||
position: '上单'
|
||
},
|
||
{
|
||
label: '钟无艳',
|
||
value: 'zhongwuyan',
|
||
position: '上单'
|
||
},
|
||
{
|
||
label: '李白',
|
||
value: 'libai',
|
||
position: '打野'
|
||
},
|
||
{
|
||
label: '韩信',
|
||
value: 'hanxin',
|
||
position: '打野'
|
||
},
|
||
{
|
||
label: '云中君',
|
||
value: 'yunzhongjun',
|
||
position: '打野'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{},
|
||
makeEnv({})
|
||
)
|
||
);
|
||
|
||
await findByText('诸葛亮');
|
||
|
||
expect(container).toMatchSnapshot();
|
||
});
|
||
|
||
test('Renderer:transfer chained', async () => {
|
||
const {container, findByText} = render(
|
||
amisRender(
|
||
{
|
||
type: 'page',
|
||
body: {
|
||
type: 'form',
|
||
api: '/api/mock2/form/saveForm',
|
||
body: [
|
||
{
|
||
label: '级联选择',
|
||
type: 'transfer',
|
||
name: 'transfer5',
|
||
selectMode: 'chained',
|
||
searchable: true,
|
||
sortable: true,
|
||
options: [
|
||
{
|
||
label: '法师',
|
||
children: [
|
||
{
|
||
label: '诸葛亮',
|
||
value: 'zhugeliang'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '战士',
|
||
children: [
|
||
{
|
||
label: '曹操',
|
||
value: 'caocao'
|
||
},
|
||
{
|
||
label: '钟无艳',
|
||
value: 'zhongwuyan'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '打野',
|
||
children: [
|
||
{
|
||
label: '李白',
|
||
value: 'libai'
|
||
},
|
||
{
|
||
label: '韩信',
|
||
value: 'hanxin'
|
||
},
|
||
{
|
||
label: '云中君',
|
||
value: 'yunzhongjun'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{},
|
||
makeEnv({})
|
||
)
|
||
);
|
||
|
||
await findByText('法师');
|
||
|
||
expect(container).toMatchSnapshot();
|
||
});
|
||
|
||
test('Renderer:transfer left tree', async () => {
|
||
const {container, findByText} = render(
|
||
amisRender(
|
||
{
|
||
type: 'page',
|
||
body: {
|
||
type: 'form',
|
||
api: '/api/mock2/form/saveForm',
|
||
body: [
|
||
{
|
||
label: '关联选择模式',
|
||
type: 'transfer',
|
||
name: 'b',
|
||
sortable: true,
|
||
searchable: true,
|
||
deferApi: '/api/mock2/form/deferOptions?label=${label}',
|
||
selectMode: 'associated',
|
||
leftMode: 'tree',
|
||
leftOptions: [
|
||
{
|
||
label: '法师',
|
||
children: [
|
||
{
|
||
label: '诸葛亮',
|
||
value: 'zhugeliang'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '战士',
|
||
children: [
|
||
{
|
||
label: '曹操',
|
||
value: 'caocao'
|
||
},
|
||
{
|
||
label: '钟无艳',
|
||
value: 'zhongwuyan'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '打野',
|
||
children: [
|
||
{
|
||
label: '李白',
|
||
value: 'libai'
|
||
},
|
||
{
|
||
label: '韩信',
|
||
value: 'hanxin'
|
||
},
|
||
{
|
||
label: '云中君',
|
||
value: 'yunzhongjun'
|
||
}
|
||
]
|
||
}
|
||
],
|
||
options: [
|
||
{
|
||
ref: 'zhugeliang',
|
||
children: [
|
||
{
|
||
label: 'A',
|
||
value: 'a'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
ref: 'caocao',
|
||
children: [
|
||
{
|
||
label: 'B',
|
||
value: 'b'
|
||
},
|
||
{
|
||
label: 'C',
|
||
value: 'c'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
ref: 'zhongwuyan',
|
||
children: [
|
||
{
|
||
label: 'D',
|
||
value: 'd'
|
||
},
|
||
{
|
||
label: 'E',
|
||
value: 'e'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
ref: 'libai',
|
||
defer: true
|
||
},
|
||
{
|
||
ref: 'hanxin',
|
||
defer: true
|
||
},
|
||
{
|
||
ref: 'yunzhongjun',
|
||
defer: true
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{},
|
||
makeEnv({})
|
||
)
|
||
);
|
||
|
||
await findByText('诸葛亮');
|
||
|
||
expect(container).toMatchSnapshot();
|
||
});
|
||
|
||
// 跟随模式
|
||
test('Renderer:transfer follow left mode', async () => {
|
||
const {container, findByText} = render(
|
||
amisRender(
|
||
{
|
||
type: 'form',
|
||
api: '/api/mock2/form/saveForm',
|
||
body: [
|
||
{
|
||
label: '树型展示',
|
||
type: 'transfer',
|
||
name: 'transfer4',
|
||
selectMode: 'tree',
|
||
searchable: true,
|
||
resultListModeFollowSelect: true,
|
||
options: [
|
||
{
|
||
label: '法师',
|
||
children: [
|
||
{
|
||
label: '诸葛亮',
|
||
value: 'zhugeliang'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '战士',
|
||
children: [
|
||
{
|
||
label: '曹操',
|
||
value: 'caocao'
|
||
},
|
||
{
|
||
label: '钟无艳',
|
||
value: 'zhongwuyan'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '打野',
|
||
children: [
|
||
{
|
||
label: '李白',
|
||
value: 'libai'
|
||
},
|
||
{
|
||
label: '韩信',
|
||
value: 'hanxin'
|
||
},
|
||
{
|
||
label: '云中君',
|
||
value: 'yunzhongjun'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{},
|
||
makeEnv({})
|
||
)
|
||
);
|
||
|
||
const zhugeliang = await findByText('诸葛亮');
|
||
fireEvent.click(zhugeliang);
|
||
await wait(200);
|
||
|
||
expect(container).toMatchSnapshot();
|
||
});
|
||
|
||
// 结果前端搜索
|
||
test('Renderer:transfer follow left mode', async () => {
|
||
const {container, findByText} = render(
|
||
amisRender(
|
||
{
|
||
type: 'form',
|
||
api: '/api/mock2/form/saveForm',
|
||
body: [
|
||
{
|
||
label: '树型展示',
|
||
type: 'transfer',
|
||
name: 'transfer4',
|
||
selectMode: 'tree',
|
||
searchable: true,
|
||
resultListModeFollowSelect: true,
|
||
resultSearchable: true,
|
||
options: [
|
||
{
|
||
label: '法师',
|
||
children: [
|
||
{
|
||
label: '诸葛亮',
|
||
value: 'zhugeliang'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '战士',
|
||
children: [
|
||
{
|
||
label: '曹操',
|
||
value: 'caocao'
|
||
},
|
||
{
|
||
label: '钟无艳',
|
||
value: 'zhongwuyan'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '打野',
|
||
children: [
|
||
{
|
||
label: '李白',
|
||
value: 'libai'
|
||
},
|
||
{
|
||
label: '韩信',
|
||
value: 'hanxin'
|
||
},
|
||
{
|
||
label: '云中君',
|
||
value: 'yunzhongjun'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{},
|
||
makeEnv({})
|
||
)
|
||
);
|
||
|
||
const zhugeliang = await findByText('诸葛亮');
|
||
fireEvent.click(zhugeliang);
|
||
await wait(200);
|
||
|
||
const caocao = await findByText('曹操');
|
||
fireEvent.click(caocao);
|
||
await wait(200);
|
||
|
||
const input = container.querySelectorAll('input[type=text]')[1];
|
||
|
||
expect(input).not.toBeNull();
|
||
|
||
fireEvent.change(input, {
|
||
target: {value: 'caocao'}
|
||
});
|
||
// 300 毫秒才行
|
||
await wait(300);
|
||
|
||
const dom = container.querySelector(
|
||
'.cxd-ResultTreeList .cxd-Tree-item .cxd-Tree-itemText'
|
||
);
|
||
expect(dom).not.toBeNull();
|
||
expect(dom?.getAttribute('title')).toEqual('战士');
|
||
expect(container).toMatchSnapshot();
|
||
});
|
||
|
||
test('should call the custom filterOption if it is provided', async () => {
|
||
const filterOption = jest.fn().mockImplementation(options => options);
|
||
const options = [
|
||
{
|
||
label: '法师',
|
||
children: [
|
||
{
|
||
label: '诸葛亮',
|
||
value: 'zhugeliang',
|
||
weapon: '翡翠仙扇'
|
||
}
|
||
]
|
||
}
|
||
];
|
||
|
||
render(
|
||
amisRender(
|
||
{
|
||
label: '树型展示',
|
||
type: 'transfer',
|
||
name: 'transfer4',
|
||
selectMode: 'tree',
|
||
searchable: true,
|
||
filterOption: filterOption,
|
||
options
|
||
},
|
||
{},
|
||
makeEnv({})
|
||
)
|
||
);
|
||
|
||
const input = screen.getByPlaceholderText('请输入关键字');
|
||
|
||
fireEvent.change(input, {
|
||
target: {value: '翡翠仙扇'}
|
||
});
|
||
|
||
await wait(300);
|
||
|
||
expect(filterOption).toBeCalledTimes(1);
|
||
expect(filterOption).toBeCalledWith(options, '翡翠仙扇', {
|
||
keys: ['label', 'value']
|
||
});
|
||
});
|
||
|
||
test('should call the string style custom filterOption if it is provided', async () => {
|
||
const options = [
|
||
{
|
||
label: '法师',
|
||
children: [
|
||
{
|
||
label: '诸葛亮',
|
||
value: 'zhugeliang',
|
||
weapon: '翡翠仙扇'
|
||
}
|
||
]
|
||
}
|
||
];
|
||
|
||
render(
|
||
amisRender(
|
||
{
|
||
label: '树型展示',
|
||
type: 'transfer',
|
||
name: 'transfer4',
|
||
selectMode: 'tree',
|
||
searchable: true,
|
||
filterOption: 'return [];',
|
||
options
|
||
},
|
||
{},
|
||
makeEnv({})
|
||
)
|
||
);
|
||
|
||
const input = screen.getByPlaceholderText('请输入关键字');
|
||
|
||
expect(screen.getByText('诸葛亮')).toBeInTheDocument();
|
||
fireEvent.change(input, {
|
||
target: {value: '翡翠仙扇'}
|
||
});
|
||
|
||
await wait(300);
|
||
|
||
expect(screen.queryByText('诸葛亮')).not.toBeInTheDocument();
|
||
});
|
||
|
||
test('should call the notify function with error message if the filterOption is not a valid function', async () => {
|
||
const options = [
|
||
{
|
||
label: '法师',
|
||
children: [
|
||
{
|
||
label: '诸葛亮',
|
||
value: 'zhugeliang',
|
||
weapon: '翡翠仙扇'
|
||
}
|
||
]
|
||
}
|
||
];
|
||
|
||
const mockNotify = jest.fn().mockImplementation(options => options);
|
||
|
||
render(
|
||
amisRender(
|
||
{
|
||
label: '树型展示',
|
||
type: 'transfer',
|
||
name: 'transfer4',
|
||
selectMode: 'tree',
|
||
searchable: true,
|
||
filterOption: 10086,
|
||
options
|
||
},
|
||
{},
|
||
{notify: mockNotify}
|
||
)
|
||
);
|
||
|
||
const input = screen.getByPlaceholderText('请输入关键字');
|
||
|
||
expect(screen.getByText('诸葛亮')).toBeInTheDocument();
|
||
fireEvent.change(input, {
|
||
target: {value: '翡翠仙扇'}
|
||
});
|
||
|
||
await wait(300);
|
||
|
||
expect(mockNotify).toBeCalledTimes(1);
|
||
expect(mockNotify).toBeCalledWith('error', '自定义检索函数不符合要求');
|
||
|
||
mockNotify.mockClear();
|
||
});
|
||
|
||
test('Renderer:transfer group mode with virtual', async () => {
|
||
const options = [...Array(20)].map((_, i) => ({
|
||
label: `group-${i + 1}`,
|
||
children: [...Array(10)].map((_, j) => ({
|
||
label: `option-${i * 10 + j + 1}`,
|
||
value: `value-${i * 10 + j + 1}`
|
||
}))
|
||
}));
|
||
|
||
const {container, getByText, queryByText} = await setup([
|
||
{
|
||
label: '分组',
|
||
type: 'transfer',
|
||
name: 'transfer',
|
||
options: options,
|
||
virtualThreshold: 100,
|
||
itemHeight: 40
|
||
}
|
||
]);
|
||
|
||
const optionsOrLabel = container.querySelectorAll(
|
||
'.cxd-GroupedSelection.cxd-Transfer-selection > div > div > div > div.cxd-GroupedSelection-group'
|
||
);
|
||
|
||
expect(optionsOrLabel.length > 0).toBeTruthy();
|
||
|
||
const firstStyle = formatStyleObject(optionsOrLabel[0].getAttribute('style'));
|
||
expect(firstStyle.top).toBe(0);
|
||
expect(firstStyle.height).toBe(40);
|
||
await waitFor(() => expect(optionsOrLabel.length > 1).toBeTruthy());
|
||
|
||
expect(formatStyleObject(optionsOrLabel[1].getAttribute('style')).top).toBe(
|
||
40
|
||
);
|
||
|
||
expect(getByText('option-1')).toBeInTheDocument();
|
||
expect(await queryByText('option-100')).toBeNull();
|
||
|
||
const scrollContainer = container.querySelector(
|
||
'.cxd-GroupedSelection.cxd-Transfer-selection > div > div'
|
||
)!;
|
||
|
||
// 滚动到底部
|
||
fireEvent.scroll(scrollContainer, {
|
||
target: {
|
||
scrollTop: 9999
|
||
}
|
||
});
|
||
|
||
await wait(300);
|
||
|
||
// 最后一项
|
||
const lastOne = container.querySelector(
|
||
'.cxd-GroupedSelection.cxd-Transfer-selection > div > div > div > div.cxd-GroupedSelection-group:last-of-type'
|
||
);
|
||
|
||
expect(formatStyleObject(lastOne!.getAttribute('style')).top).toBe(8760);
|
||
expect(await queryByText('option-1')).toBeNull();
|
||
|
||
expect(container).toMatchSnapshot();
|
||
});
|
||
|
||
test('Renderer:transfer table mode with virtual', async () => {
|
||
const options = [...Array(200)].map((_, i) => ({
|
||
label: `label-${i + 1}`,
|
||
value: i + 1
|
||
}));
|
||
|
||
const value = [...Array(10)].map((_, i) => i * 2 + 1).join(',');
|
||
|
||
const {container, getByText} = await setup([
|
||
{
|
||
label: '分组',
|
||
type: 'transfer',
|
||
name: 'transfer',
|
||
options: options,
|
||
value: value,
|
||
virtualThreshold: 10,
|
||
selectMode: 'table',
|
||
columns: [
|
||
{
|
||
name: 'label',
|
||
label: '名称'
|
||
},
|
||
{
|
||
name: 'value',
|
||
label: '值'
|
||
}
|
||
]
|
||
}
|
||
]);
|
||
|
||
const virtualTable = container.querySelector(
|
||
'.cxd-Transfer-select .cxd-Table-content.is-virtual .cxd-Table-content-virtual table.cxd-Table-table'
|
||
)!;
|
||
|
||
expect(virtualTable).toBeInTheDocument();
|
||
|
||
const resultList = container.querySelector(
|
||
'.cxd-Transfer-result .cxd-Selections.cxd-Transfer-value .cxd-Selections-items'
|
||
)!;
|
||
|
||
expect(resultList.firstChild).toHaveClass('cxd-Selections-item');
|
||
expect(container).toMatchSnapshot('result not virtual');
|
||
|
||
// 点击后，value 变为 11 项，右侧列表变成虚拟列表
|
||
fireEvent.click(getByText('label-2'));
|
||
|
||
await wait(300);
|
||
|
||
const firstVirtualItem = resultList.querySelector(
|
||
'div > div:first-of-type > div > .cxd-Selections-item'
|
||
);
|
||
|
||
expect(firstVirtualItem).toBeInTheDocument();
|
||
expect(formatStyleObject(firstVirtualItem!.getAttribute('style'))!.top).toBe(
|
||
0
|
||
);
|
||
expect(container).toMatchSnapshot('result virtual');
|
||
});
|
||
|
||
test('Renderer:transfer chained mode with virtual', async () => {
|
||
const options = [...Array(10)].map((_, i) => ({
|
||
label: `group-${i + 1}`,
|
||
children: [...Array(200)].map((_, j) => ({
|
||
label: `group-${i + 1}-option-${j + 1}`,
|
||
value: `${i + 1}-${j + 1}`
|
||
}))
|
||
}));
|
||
|
||
const {container, getByText, queryByText} = await setup([
|
||
{
|
||
label: '分组',
|
||
type: 'transfer',
|
||
name: 'transfer',
|
||
options: options,
|
||
virtualThreshold: 100,
|
||
selectMode: 'chained'
|
||
}
|
||
]);
|
||
|
||
const cols = container.querySelectorAll('.cxd-ChainedSelection-col');
|
||
|
||
expect(cols.length).toBe(2);
|
||
expect(cols[0].children.length).toBe(10);
|
||
expect(cols[1].firstChild).toHaveClass('cxd-ChainedSelection-placeholder');
|
||
|
||
fireEvent.click(getByText('group-2'));
|
||
|
||
await wait(300);
|
||
|
||
expect(cols[1].firstChild).not.toHaveClass(
|
||
'cxd-ChainedSelection-placeholder'
|
||
);
|
||
|
||
expect(getByText('group-2-option-1')).toBeInTheDocument();
|
||
expect(await queryByText('group-2-option-200')).toBeNull();
|
||
|
||
expect(container).toMatchSnapshot();
|
||
});
|
||
|
||
test('Renderer:transfer associated mode with virtual', async () => {
|
||
const options = [...Array(200)].map((_, i) => ({
|
||
label: `label-${i + 1}`,
|
||
value: i + 1
|
||
}));
|
||
|
||
const {container, getByText, queryByText} = await setup([
|
||
{
|
||
label: '关联选择模式',
|
||
type: 'transfer',
|
||
name: 'b',
|
||
sortable: true,
|
||
searchable: true,
|
||
selectMode: 'associated',
|
||
leftMode: 'tree',
|
||
leftOptions: [
|
||
{
|
||
label: '法师',
|
||
children: [
|
||
{
|
||
label: '诸葛亮',
|
||
value: 'zhugeliang'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '战士',
|
||
children: [
|
||
{
|
||
label: '曹操',
|
||
value: 'caocao'
|
||
},
|
||
{
|
||
label: '钟无艳',
|
||
value: 'zhongwuyan'
|
||
}
|
||
]
|
||
}
|
||
],
|
||
options: [
|
||
{
|
||
ref: 'zhugeliang',
|
||
children: [
|
||
{
|
||
label: 'A',
|
||
value: 'a'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
ref: 'caocao',
|
||
children: [
|
||
{
|
||
label: 'B',
|
||
value: 'b'
|
||
},
|
||
{
|
||
label: 'C',
|
||
value: 'c'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
ref: 'zhongwuyan',
|
||
children: options
|
||
}
|
||
]
|
||
}
|
||
]);
|
||
|
||
const rightCol = container.querySelector('.cxd-AssociatedSelection-right');
|
||
|
||
expect(rightCol).toBeInTheDocument();
|
||
|
||
fireEvent.click(getByText('诸葛亮'));
|
||
|
||
await wait(200);
|
||
|
||
expect(
|
||
rightCol!.querySelector(
|
||
'.cxd-GroupedSelection .cxd-GroupedSelection-item .cxd-GroupedSelection-itemLabel span'
|
||
)!.innerHTML
|
||
).toBe('A');
|
||
|
||
fireEvent.click(getByText('钟无艳'));
|
||
await wait(200);
|
||
|
||
expect(
|
||
rightCol!.querySelectorAll('.cxd-GroupedSelection-item').length < 200
|
||
).toBeTruthy();
|
||
|
||
expect(getByText('label-1')).toBeInTheDocument();
|
||
expect(await queryByText('label-100')).toBeNull();
|
||
expect(container).toMatchSnapshot();
|
||
});
|
||
|
||
test('Renderer:transfer with showInvalidMatch & unmatched do not add', async () => {
|
||
const schema = {
|
||
label: '默认',
|
||
type: 'transfer',
|
||
name: 'transfer',
|
||
value: 'v,w,x,y,z',
|
||
selectMode: 'tree',
|
||
options: [
|
||
{
|
||
label: '诸葛亮',
|
||
value: 'zhugeliang'
|
||
},
|
||
{
|
||
label: '曹操',
|
||
value: 'caocao'
|
||
},
|
||
{
|
||
label: '钟无艳',
|
||
value: 'zhongwuyan'
|
||
}
|
||
]
|
||
};
|
||
|
||
const {container, getByText, queryByText, rerender} = await setup({
|
||
...schema,
|
||
deferApi: 'xxx'
|
||
});
|
||
|
||
function leftItems() {
|
||
return container.querySelectorAll('.cxd-Transfer-select .cxd-Tree-item');
|
||
}
|
||
|
||
function rightItems() {
|
||
return container.querySelectorAll(
|
||
'.cxd-Transfer-result .cxd-Selections-item'
|
||
);
|
||
}
|
||
|
||
expect(leftItems()!.length).toBe(3);
|
||
expect(rightItems()!.length).toBe(5);
|
||
|
||
expect(
|
||
rightItems()[0]!.querySelector('.cxd-Selections-label')!
|
||
).not.toHaveClass('is-invalid');
|
||
fireEvent.click(rightItems()[0]!.querySelector('.cxd-Selections-delBtn')!);
|
||
|
||
await wait(500);
|
||
|
||
expect(leftItems()!.length).toBe(3);
|
||
expect(rightItems()!.length).toBe(4);
|
||
|
||
rerender(amisRender({...schema, showInvalidMatch: true}));
|
||
|
||
await wait(500);
|
||
expect(rightItems()[0]!.querySelector('.cxd-Selections-label')!).toHaveClass(
|
||
'is-invalid'
|
||
);
|
||
fireEvent.click(rightItems()[0]!.querySelector('.cxd-Selections-delBtn')!);
|
||
|
||
await wait(500);
|
||
|
||
expect(container).toMatchSnapshot();
|
||
|
||
expect(leftItems()!.length).toBe(3);
|
||
expect(rightItems()!.length).toBe(4);
|
||
});
|
||
|
||
test('Renderer:transfer with searchApi', async () => {
|
||
const onSubmit = jest.fn();
|
||
const fetcher = jest.fn().mockImplementationOnce(() =>
|
||
Promise.resolve({
|
||
data: {
|
||
status: 0,
|
||
msg: 'ok',
|
||
data: {
|
||
options: [
|
||
{
|
||
"label": "法师",
|
||
"children": [
|
||
{
|
||
"label": "诸葛亮",
|
||
"value": "zhugeliang"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"label": "战士",
|
||
"children": [
|
||
{
|
||
"label": "钟无艳",
|
||
"value": "zhongwuyan"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
}
|
||
})
|
||
);
|
||
const {getByText, container} = render(
|
||
amisRender(
|
||
{
|
||
"type": "form",
|
||
"api": "/api/mock2/form/saveForm",
|
||
"body": [
|
||
{
|
||
"label": "树型展示",
|
||
"type": "transfer",
|
||
"name": "transfer",
|
||
"selectMode": "tree",
|
||
"searchable": true,
|
||
"searchApi": "/api/transfer/search?name=${term}",
|
||
"options": [
|
||
{
|
||
"label": "法师",
|
||
"children": [
|
||
{
|
||
"label": "诸葛亮",
|
||
"value": "zhugeliang"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"label": "战士",
|
||
"value": "zhanshi",
|
||
"children": [
|
||
{
|
||
"label": "曹操",
|
||
"value": "caocao"
|
||
},
|
||
{
|
||
"label": "钟无艳",
|
||
"value": "zhongwuyan"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"label": "打野",
|
||
"children": [
|
||
{
|
||
"label": "李白",
|
||
"value": "libai"
|
||
},
|
||
{
|
||
"label": "韩信",
|
||
"value": "hanxin"
|
||
},
|
||
{
|
||
"label": "云中君",
|
||
"value": "yunzhongjun"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{onSubmit},
|
||
makeEnv({
|
||
fetcher
|
||
})
|
||
)
|
||
);
|
||
|
||
const zhangshi = container.querySelector('span[title=战士]');
|
||
expect(zhangshi).not.toBeNull();
|
||
|
||
zhangshi && fireEvent.click(zhangshi);
|
||
|
||
fireEvent.click(getByText('提交'));
|
||
|
||
await wait(100);
|
||
expect(onSubmit).toBeCalledTimes(1);
|
||
|
||
expect(onSubmit.mock.calls[0][0]).toEqual({
|
||
transfer: "caocao,zhongwuyan"
|
||
});
|
||
|
||
const input = container.querySelector('input[placeholder=请输入关键字]');
|
||
expect(input).not.toBeNull();
|
||
|
||
input && fireEvent.change(input, {
|
||
target: {value: 'a'}
|
||
});
|
||
|
||
await wait(300);
|
||
|
||
const caocao = container.querySelector('span[title=李白]');
|
||
expect(caocao).toBeNull();
|
||
});
|
||
|
||
test('Renderer:transfer tree onlyChildren true', async () => {
|
||
const onSubmit = jest.fn();
|
||
const schema = {
|
||
"type": "form",
|
||
"api": "/api/mock2/form/saveForm",
|
||
"debug": true,
|
||
"body": [
|
||
{
|
||
"label": "默认",
|
||
"type": "transfer",
|
||
"name": "transfer",
|
||
"value": "libai",
|
||
"selectMode": "tree",
|
||
"searchable": true,
|
||
"onlyChildren": true,
|
||
"options": [
|
||
{
|
||
"label": "法师",
|
||
"children": [
|
||
{
|
||
"label": "诸葛亮",
|
||
"value": "zhugeliang"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"label": "战士",
|
||
"value": "战士",
|
||
"children": [
|
||
{
|
||
"label": "曹操",
|
||
"disabled": true,
|
||
"value": "caocao"
|
||
},
|
||
{
|
||
"label": "钟无艳",
|
||
"value": "zhongwuyan"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"label": "打野",
|
||
"children": [
|
||
{
|
||
"label": "李白",
|
||
"value": "libai"
|
||
},
|
||
{
|
||
"label": "韩信",
|
||
"value": "hanxin"
|
||
},
|
||
{
|
||
"label": "云中君",
|
||
"value": "yunzhongjun"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
|
||
const {getByText, container} = render(
|
||
amisRender(schema, {onSubmit}, makeEnv({}))
|
||
);
|
||
|
||
const checkbox = container.querySelector('.cxd-Checkbox');
|
||
expect(checkbox).not.toBeNull();
|
||
|
||
checkbox && fireEvent.click(checkbox);
|
||
|
||
fireEvent.click(getByText('提交'));
|
||
|
||
await wait(100);
|
||
expect(onSubmit).toBeCalledTimes(1);
|
||
|
||
expect(onSubmit.mock.calls[0][0]).toEqual({
|
||
transfer: "zhugeliang,zhongwuyan,libai,hanxin,yunzhongjun"
|
||
});
|
||
});
|
||
|
||
test('Renderer:transfer search highlight', async () => {
|
||
|
||
const onSubmit = jest.fn();
|
||
const {container} = render(
|
||
amisRender(
|
||
{
|
||
"type": "form",
|
||
"api": "/api/mock2/form/saveForm",
|
||
"body": [
|
||
{
|
||
"label": "默认",
|
||
"type": "transfer",
|
||
"name": "transfer",
|
||
"selectMode": "tree",
|
||
"searchable": true,
|
||
"options": [
|
||
{
|
||
"label": "法师",
|
||
"children": [
|
||
{
|
||
"label": "诸葛亮",
|
||
"value": "zhugeliang"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"label": "战士",
|
||
"children": [
|
||
{
|
||
"label": "曹操",
|
||
"disabled": true,
|
||
"value": "caocao"
|
||
},
|
||
{
|
||
"label": "钟无艳",
|
||
"value": "zhongwuyan"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"label": "打野",
|
||
"children": [
|
||
{
|
||
"label": "李白",
|
||
"value": "libai"
|
||
},
|
||
{
|
||
"label": "韩信",
|
||
"value": "hanxin"
|
||
},
|
||
{
|
||
"label": "云中君",
|
||
"value": "yunzhongjun"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{onSubmit},
|
||
makeEnv({})
|
||
)
|
||
)
|
||
|
||
const input = container.querySelectorAll('input[type=text]')[0];
|
||
|
||
expect(input).not.toBeNull();
|
||
|
||
fireEvent.change(input, {
|
||
target: {value: '战士'}
|
||
});
|
||
|
||
await wait(500);
|
||
|
||
const isMatchDom = container.querySelector('.is-matched');
|
||
expect(isMatchDom).not.toBeNull();
|
||
});
|
||
|
||
test('Renderer:transfer tree search', async () => {
|
||
const onSubmit = jest.fn();
|
||
const {container, findByText, getByText} = render(
|
||
amisRender(
|
||
{
|
||
"type": "form",
|
||
"api": "/api/mock2/form/saveForm",
|
||
"body": [
|
||
{
|
||
"label": "默认",
|
||
"type": "transfer",
|
||
"name": "transfer",
|
||
"selectMode": "tree",
|
||
"searchable": true,
|
||
"options": [
|
||
{
|
||
"label": "法师",
|
||
"children": [
|
||
{
|
||
"label": "诸葛亮",
|
||
"value": "zhugeliang"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"label": "战士",
|
||
"children": [
|
||
{
|
||
"label": "曹操",
|
||
"value": "caocao"
|
||
},
|
||
{
|
||
"label": "钟无艳",
|
||
"value": "zhongwuyan"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"label": "打野",
|
||
"children": [
|
||
{
|
||
"label": "李白",
|
||
"value": "libai"
|
||
},
|
||
{
|
||
"label": "韩信",
|
||
"value": "hanxin"
|
||
},
|
||
{
|
||
"label": "云中君",
|
||
"value": "yunzhongjun"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{onSubmit},
|
||
makeEnv({})
|
||
)
|
||
)
|
||
|
||
const input = container.querySelectorAll('input[type=text]')[0];
|
||
|
||
expect(input).not.toBeNull();
|
||
|
||
fireEvent.change(input, {
|
||
target: {
|
||
value: '战士'
|
||
}
|
||
});
|
||
|
||
await(300);
|
||
|
||
const caocao = getByText('曹操');
|
||
expect(caocao).not.toBeNull();
|
||
fireEvent.click(caocao);
|
||
|
||
fireEvent.change(input, {
|
||
target: {
|
||
value: ''
|
||
}
|
||
});
|
||
|
||
await(300);
|
||
|
||
fireEvent.change(input, {
|
||
target: {
|
||
value: '打野'
|
||
}
|
||
});
|
||
|
||
await(300);
|
||
|
||
const libai = getByText('李白');
|
||
expect(libai).not.toBeNull();
|
||
fireEvent.click(libai);
|
||
|
||
await wait(500);
|
||
|
||
fireEvent.click(getByText('提交'));
|
||
|
||
await wait(300);
|
||
expect(onSubmit).toBeCalledTimes(1);
|
||
|
||
expect(onSubmit.mock.calls[0][0]).toEqual({
|
||
transfer: "caocao,libai"
|
||
});
|
||
});
|
||
|
||
test('Renderer:Transfer with pagination', async () => {
|
||
const mockData = [
|
||
{
|
||
"label": "Laura Lewis",
|
||
"value": "1"
|
||
},
|
||
{
|
||
"label": "David Gonzalez",
|
||
"value": "2"
|
||
},
|
||
{
|
||
"label": "Christopher Rodriguez",
|
||
"value": "3"
|
||
},
|
||
{
|
||
"label": "Sarah Young",
|
||
"value": "4"
|
||
},
|
||
{
|
||
"label": "James Jones",
|
||
"value": "5"
|
||
},
|
||
{
|
||
"label": "Larry Robinson",
|
||
"value": "6"
|
||
},
|
||
{
|
||
"label": "Christopher Perez",
|
||
"value": "7"
|
||
},
|
||
{
|
||
"label": "Sharon Davis",
|
||
"value": "8"
|
||
},
|
||
{
|
||
"label": "Kenneth Anderson",
|
||
"value": "9"
|
||
},
|
||
{
|
||
"label": "Deborah Lewis",
|
||
"value": "10"
|
||
},
|
||
{
|
||
"label": "Jennifer Lewis",
|
||
"value": "11"
|
||
},
|
||
{
|
||
"label": "Laura Miller",
|
||
"value": "12"
|
||
},
|
||
{
|
||
"label": "Larry Harris",
|
||
"value": "13"
|
||
},
|
||
{
|
||
"label": "Patricia Robinson",
|
||
"value": "14"
|
||
},
|
||
{
|
||
"label": "Mark Davis",
|
||
"value": "15"
|
||
},
|
||
{
|
||
"label": "Jessica Harris",
|
||
"value": "16"
|
||
},
|
||
{
|
||
"label": "Anna Brown",
|
||
"value": "17"
|
||
},
|
||
{
|
||
"label": "Lisa Young",
|
||
"value": "18"
|
||
},
|
||
{
|
||
"label": "Donna Williams",
|
||
"value": "19"
|
||
},
|
||
{
|
||
"label": "Shirley Davis",
|
||
"value": "20"
|
||
}
|
||
];
|
||
const fetcher = jest.fn().mockImplementation((api) => {
|
||
const perPage = 10; /** 锁死10个方便测试 */
|
||
const page = Number(api.query.page || 1);
|
||
|
||
return Promise.resolve({
|
||
data: {
|
||
status: 0,
|
||
msg: 'ok',
|
||
data: {
|
||
count: mockData.length,
|
||
page: page,
|
||
items: mockData.concat().splice((page - 1) * perPage, perPage)
|
||
}
|
||
}
|
||
});
|
||
});
|
||
const {container} = render(
|
||
amisRender(
|
||
{
|
||
"type": "form",
|
||
"debug": true,
|
||
"body": [
|
||
{
|
||
"label": "默认",
|
||
"type": "transfer",
|
||
"name": "transfer",
|
||
"joinValues": false,
|
||
"extractValue": false,
|
||
"source": "/api/mock2/options/transfer?page=${page}&perPage=${perPage}",
|
||
"pagination": {
|
||
"enable": true,
|
||
"layout": ["pager", "perpage", "total"],
|
||
"popOverContainerSelector": ".cxd-Panel--form"
|
||
},
|
||
"value": [
|
||
{"label": "Laura Lewis", "value": "1", id: 1},
|
||
{"label": "Christopher Rodriguez", "value": "3", id: 3},
|
||
{"label": "Laura Miller", "value": "12", id: 12},
|
||
{"label": "Patricia Robinson", "value": "14", id: 14}
|
||
]
|
||
}
|
||
]
|
||
}, {}, makeEnv({fetcher})));
|
||
|
||
await wait(500);
|
||
expect(container.querySelector('.cxd-Transfer-footer-pagination')).toBeInTheDocument();
|
||
|
||
const checkboxes = container.querySelectorAll('input[type=checkbox]')!;
|
||
expect(checkboxes.length).toEqual(11); /** 包括顶部全选 */
|
||
expect((checkboxes[1] as HTMLInputElement)?.checked).toEqual(true);
|
||
expect((checkboxes[2] as HTMLInputElement)?.checked).toEqual(false);
|
||
expect((checkboxes[3] as HTMLInputElement)?.checked).toEqual(true);
|
||
expect((checkboxes[4] as HTMLInputElement)?.checked).toEqual(false);
|
||
|
||
const nextBtn = container.querySelector('.cxd-Pagination-next')!;
|
||
fireEvent.click(nextBtn);
|
||
await wait(500);
|
||
|
||
const checkboxes2 = container.querySelectorAll('input[type=checkbox]')!;
|
||
expect(checkboxes2.length).toEqual(11);
|
||
expect((checkboxes2[1] as HTMLInputElement)?.checked).toEqual(false);
|
||
expect((checkboxes2[2] as HTMLInputElement)?.checked).toEqual(true);
|
||
expect((checkboxes2[3] as HTMLInputElement)?.checked).toEqual(false);
|
||
expect((checkboxes2[4] as HTMLInputElement)?.checked).toEqual(true);
|
||
})
|
||
|
||
test.only('Renderer:Transfer with pagination and data source from data scope', async () => {
|
||
const mockData = [
|
||
{
|
||
"label": "Laura Lewis",
|
||
"value": "1"
|
||
},
|
||
{
|
||
"label": "David Gonzalez",
|
||
"value": "2"
|
||
},
|
||
{
|
||
"label": "Christopher Rodriguez",
|
||
"value": "3"
|
||
},
|
||
{
|
||
"label": "Sarah Young",
|
||
"value": "4"
|
||
},
|
||
{
|
||
"label": "James Jones",
|
||
"value": "5"
|
||
},
|
||
{
|
||
"label": "Larry Robinson",
|
||
"value": "6"
|
||
},
|
||
{
|
||
"label": "Christopher Perez",
|
||
"value": "7"
|
||
},
|
||
{
|
||
"label": "Sharon Davis",
|
||
"value": "8"
|
||
},
|
||
{
|
||
"label": "Kenneth Anderson",
|
||
"value": "9"
|
||
},
|
||
{
|
||
"label": "Deborah Lewis",
|
||
"value": "10"
|
||
},
|
||
{
|
||
"label": "Jennifer Lewis",
|
||
"value": "11"
|
||
},
|
||
{
|
||
"label": "Laura Miller",
|
||
"value": "12"
|
||
},
|
||
{
|
||
"label": "Larry Harris",
|
||
"value": "13"
|
||
},
|
||
{
|
||
"label": "Patricia Robinson",
|
||
"value": "14"
|
||
},
|
||
{
|
||
"label": "Mark Davis",
|
||
"value": "15"
|
||
},
|
||
{
|
||
"label": "Jessica Harris",
|
||
"value": "16"
|
||
},
|
||
{
|
||
"label": "Anna Brown",
|
||
"value": "17"
|
||
},
|
||
{
|
||
"label": "Lisa Young",
|
||
"value": "18"
|
||
},
|
||
{
|
||
"label": "Donna Williams",
|
||
"value": "19"
|
||
},
|
||
{
|
||
"label": "Shirley Davis",
|
||
"value": "20"
|
||
}
|
||
];
|
||
const fetcher = jest.fn().mockImplementation((api) => {
|
||
return Promise.resolve({
|
||
data: {
|
||
status: 0,
|
||
msg: 'ok',
|
||
data: {
|
||
count: mockData.length,
|
||
items: mockData
|
||
}
|
||
}
|
||
});
|
||
});
|
||
const {container} = render(
|
||
amisRender(
|
||
{
|
||
"type": "form",
|
||
"debug": true,
|
||
"body": [
|
||
{
|
||
"type": "service",
|
||
"api": {
|
||
"url": "/api/mock2/options/loadDataOnce",
|
||
"method": "get",
|
||
"responseData": {
|
||
"transferOptions": "${items}"
|
||
}
|
||
},
|
||
body: [
|
||
{
|
||
"label": "默认",
|
||
"type": "transfer",
|
||
"name": "transfer",
|
||
"joinValues": false,
|
||
"extractValue": false,
|
||
"source": "${transferOptions}",
|
||
"pagination": {
|
||
"enable": true,
|
||
"layout": ["pager", "perpage", "total"],
|
||
"popOverContainerSelector": ".cxd-Panel--form"
|
||
},
|
||
"value": [
|
||
{"label": "Laura Lewis", "value": "1", id: 1},
|
||
{"label": "Christopher Rodriguez", "value": "3", id: 3},
|
||
{"label": "Laura Miller", "value": "12", id: 12},
|
||
{"label": "Patricia Robinson", "value": "14", id: 14}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}, {}, makeEnv({fetcher})));
|
||
|
||
await wait(500);
|
||
expect(container.querySelector('.cxd-Transfer-footer-pagination')).toBeInTheDocument();
|
||
|
||
const checkboxes = container.querySelectorAll('input[type=checkbox]')!;
|
||
expect(checkboxes.length).toEqual(11); /** 包括顶部全选 */
|
||
expect((checkboxes[1] as HTMLInputElement)?.checked).toEqual(true);
|
||
expect((checkboxes[2] as HTMLInputElement)?.checked).toEqual(false);
|
||
expect((checkboxes[3] as HTMLInputElement)?.checked).toEqual(true);
|
||
expect((checkboxes[4] as HTMLInputElement)?.checked).toEqual(false);
|
||
|
||
const nextBtn = container.querySelector('.cxd-Pagination-next')!;
|
||
fireEvent.click(nextBtn);
|
||
await wait(500);
|
||
|
||
const checkboxes2 = container.querySelectorAll('input[type=checkbox]')!;
|
||
expect(checkboxes2.length).toEqual(11);
|
||
expect((checkboxes2[1] as HTMLInputElement)?.checked).toEqual(false);
|
||
expect((checkboxes2[2] as HTMLInputElement)?.checked).toEqual(true);
|
||
expect((checkboxes2[3] as HTMLInputElement)?.checked).toEqual(false);
|
||
expect((checkboxes2[4] as HTMLInputElement)?.checked).toEqual(true);
|
||
})
|