2023-11-14 22:24:50 +08:00
|
|
|
import React from 'react';
|
|
|
|
import {
|
|
|
|
fireEvent,
|
|
|
|
render,
|
|
|
|
waitFor,
|
|
|
|
screen,
|
|
|
|
within
|
|
|
|
} from '@testing-library/react';
|
|
|
|
import {render as amisRender} from '../../../src';
|
2023-11-15 15:01:17 +08:00
|
|
|
import {makeEnv} from '../../helper';
|
2023-11-14 22:24:50 +08:00
|
|
|
|
|
|
|
const items = [
|
|
|
|
{
|
|
|
|
name: '手机维修',
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
name: '苹果',
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
name: 'iphone系列'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: '华为',
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
name: 'mate系列'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'p系列'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
];
|
|
|
|
|
|
|
|
const getExpandBtnByText = (text: string) => {
|
|
|
|
const tdElement = screen.getByText(text).parentElement as HTMLElement;
|
|
|
|
|
|
|
|
return tdElement.querySelector('.cxd-Table-expandBtn2') as HTMLAnchorElement;
|
|
|
|
};
|
|
|
|
|
|
|
|
const getCheckMeBtnByText = (text: string) => {
|
|
|
|
const trElement = screen.getByText(text).parentElement!
|
|
|
|
.parentElement as HTMLElement;
|
|
|
|
|
|
|
|
return within(trElement!).getByRole('checkbox');
|
|
|
|
};
|
|
|
|
|
|
|
|
const renderTable = () =>
|
|
|
|
render(
|
|
|
|
amisRender(
|
|
|
|
{
|
|
|
|
type: 'crud',
|
|
|
|
headerToolbar: ['bulkActions'],
|
|
|
|
bulkActions: [
|
|
|
|
{
|
|
|
|
type: 'button',
|
|
|
|
label: '批量操作'
|
|
|
|
}
|
|
|
|
],
|
|
|
|
footable: {
|
|
|
|
expand: 'first'
|
|
|
|
},
|
|
|
|
data: {
|
|
|
|
items
|
|
|
|
},
|
|
|
|
columns: [
|
|
|
|
{
|
|
|
|
name: 'name',
|
|
|
|
label: 'name'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{},
|
|
|
|
makeEnv({})
|
|
|
|
)
|
|
|
|
);
|
|
|
|
|
|
|
|
describe('层级选择', () => {
|
|
|
|
it('选择根节点,所有后代节点都会自动选中', async () => {
|
|
|
|
renderTable();
|
|
|
|
const checkMeFirst = getCheckMeBtnByText('手机维修');
|
|
|
|
|
|
|
|
expect(checkMeFirst).toBeInTheDocument();
|
|
|
|
|
|
|
|
// 选中一级节点
|
|
|
|
fireEvent.click(checkMeFirst);
|
|
|
|
|
|
|
|
// 一级节点选中
|
|
|
|
await waitFor(() => {
|
|
|
|
expect(checkMeFirst).toBeChecked();
|
|
|
|
});
|
|
|
|
|
|
|
|
const checkMeSecond1 = getCheckMeBtnByText('苹果');
|
|
|
|
const checkMeSecond2 = getCheckMeBtnByText('华为');
|
|
|
|
|
|
|
|
// 二级节点选中
|
|
|
|
expect(checkMeSecond1).toBeChecked();
|
|
|
|
expect(checkMeSecond2).toBeChecked();
|
|
|
|
|
|
|
|
const expandSecond1 = getExpandBtnByText('苹果');
|
|
|
|
|
|
|
|
expect(expandSecond1).toBeInTheDocument();
|
|
|
|
|
|
|
|
fireEvent.click(expandSecond1);
|
|
|
|
|
|
|
|
const checkMeThird1 = getCheckMeBtnByText('iphone系列');
|
|
|
|
|
|
|
|
// 三级节点选中
|
|
|
|
await waitFor(() => {
|
|
|
|
expect(checkMeThird1).toBeInTheDocument();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('选择所有子节点,所有祖先点选中', async () => {
|
|
|
|
renderTable();
|
|
|
|
const expandSecond1 = getExpandBtnByText('苹果');
|
|
|
|
|
|
|
|
// 展开三级节点
|
|
|
|
fireEvent.click(expandSecond1);
|
|
|
|
const checkMeThird1 = getCheckMeBtnByText('iphone系列');
|
|
|
|
|
|
|
|
await waitFor(() => {
|
|
|
|
expect(checkMeThird1).toBeInTheDocument();
|
|
|
|
});
|
|
|
|
|
|
|
|
fireEvent.click(checkMeThird1);
|
|
|
|
|
|
|
|
const checkMeSecond1 = getCheckMeBtnByText('苹果');
|
|
|
|
const checkMeFirst = getCheckMeBtnByText('手机维修');
|
|
|
|
|
|
|
|
await waitFor(() => {
|
|
|
|
expect(checkMeSecond1).toBeChecked();
|
|
|
|
expect(checkMeSecond1.parentElement!.classList).toContain(
|
|
|
|
'cxd-Checkbox--full'
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
// 根节点下包含苹果和华为两个节点
|
|
|
|
// 华为节点是未选中,所以根节点应该显示部分选中的样式
|
|
|
|
expect(checkMeFirst).toBeChecked();
|
|
|
|
expect(checkMeFirst.parentElement!.classList).not.toContain(
|
|
|
|
'cxd-Checkbox--full'
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('选择部分子节点,所有祖先点选中,但选中状态是部分选中', async () => {
|
|
|
|
renderTable();
|
|
|
|
const expandSecond2 = getExpandBtnByText('华为');
|
|
|
|
|
|
|
|
// 展开三级节点
|
|
|
|
fireEvent.click(expandSecond2);
|
|
|
|
const checkMeThird1 = getCheckMeBtnByText('mate系列');
|
|
|
|
|
|
|
|
await waitFor(() => {
|
|
|
|
expect(checkMeThird1).toBeInTheDocument();
|
|
|
|
});
|
|
|
|
|
|
|
|
fireEvent.click(checkMeThird1);
|
|
|
|
|
|
|
|
const checkMeSecond2 = getCheckMeBtnByText('华为');
|
|
|
|
const checkMeFirst = getCheckMeBtnByText('手机维修');
|
|
|
|
|
|
|
|
await waitFor(() => {
|
|
|
|
expect(checkMeSecond2).toBeChecked();
|
|
|
|
expect(checkMeSecond2.parentElement!.classList).not.toContain(
|
|
|
|
'cxd-Checkbox--full'
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(checkMeFirst).toBeChecked();
|
|
|
|
expect(checkMeFirst.parentElement!.classList).not.toContain(
|
|
|
|
'cxd-Checkbox--full'
|
|
|
|
);
|
|
|
|
});
|
|
|
|
});
|