ant-design/components/tree/__tests__/index.test.tsx

218 lines
7.5 KiB
TypeScript
Raw Normal View History

import React from 'react';
import { render, screen } from '../../../tests/utils';
import type { AntTreeNodeProps } from '../Tree';
chore: migrate to vitest (#42506) * chore: migrate to vitest * chore: update ci * fix: test correctly * test: support puppeteer * chore: update coverage * chore: update include/exclude * chore: update config * test: update incorrect tests * chore: update script * chore: update * fix: should close browser at the ended * chore: improve * fix: test cause tsc error * fix: eslint error * chore: exclude correctly * test: update snap and fix some tests * chore: update test config * fix: countup.js * fix: incorrect test * chore: update reference * test: update * fix: countup.js * fix: timeout * chore: update site test * fix: fixed countup version * chore: remove unsed code * test: update * test: update demo timeout * test: update timeout * chore: update image test * chore: update threads * fix: image/svg+xml test failed * chore: limits threads * test: update test coverage include * chore: remove jest files * chore: rename jest to vi * chore: update document * chore: fix missing @types/jsdom * chore: update coverage * chore: update snap * fix:watermark test cases are incorrect * feat: update ignore comment * test: fix test case * test: reset body scrollTop * test: clean up * test: use vi * test: update snapshot * test: update snapshot * test: fix dropdown test failed * fix: toHaveStyle cause test fail * test: improve test case * test: fix * fix: color failed, refer to https://github.com/jsdom/jsdom/pull/3560 * test: fix * test: fix * test: fix circular import * test: revert * ci: coverage failed * test: fix c8 ignore comment * chore: incorrect config * chore: fix ignore ci * test: revert svg+xml * test: fix realTimers * feat: rc-trigger should be remove * test: fix some failed test * chore: remove unused deps and configure eslint-plugin-vitest * test: update snap * chore: remove jest * test: fix lint error --------- Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: afc163 <afc163@gmail.com>
2023-06-07 11:54:50 +08:00
import Tree from '../index';
const { TreeNode } = Tree;
describe('Tree', () => {
it('icon and switcherIcon of Tree with showLine should render correctly', () => {
const { asFragment } = render(
<Tree showLine showIcon>
<TreeNode icon="icon" switcherIcon="switcherIcon" key="0-0">
<TreeNode icon="icon" switcherIcon="switcherIcon" key="0-0-0" />
<TreeNode switcherIcon="switcherIcon" key="0-0-1" />
<TreeNode icon="icon" key="0-0-2" />
<TreeNode key="0-0-3" />
</TreeNode>
<TreeNode switcherIcon="switcherIcon" key="0-1">
<TreeNode icon="icon" switcherIcon="switcherIcon" key="0-0-0" />
<TreeNode switcherIcon="switcherIcon" key="0-0-1" />
<TreeNode icon="icon" key="0-0-2" />
<TreeNode key="0-0-3" />
</TreeNode>
<TreeNode key="0-2">
<TreeNode icon="icon" switcherIcon="switcherIcon" key="0-0-0" />
<TreeNode switcherIcon="switcherIcon" key="0-0-1" />
<TreeNode icon="icon" key="0-0-2" />
<TreeNode key="0-0-3" />
</TreeNode>
</Tree>,
);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('switcherIcon in Tree should not render at leaf nodes', () => {
const { container } = render(
<Tree switcherIcon={<i className="switcherIcon" />} defaultExpandAll>
<TreeNode icon="icon">
<TreeNode title="node1" icon="icon" key="0-0-2" />
<TreeNode title="node2" key="0-0-3" />
</TreeNode>
</Tree>,
);
expect(container.querySelectorAll('.switcherIcon').length).toBe(1);
});
it('leaf nodes should render custom icons when provided', () => {
const { container } = render(
<Tree showLine={{ showLeafIcon: <i className="customLeafIcon" /> }} defaultExpandAll>
<TreeNode icon="icon">
<TreeNode title="node1" icon="icon" key="0-0-2" />
<TreeNode title="node2" key="0-0-3" />
</TreeNode>
</Tree>,
);
expect(container.querySelectorAll('.customLeafIcon').length).toBe(2);
});
it('leaf nodes should render custom icons when provided as render function', () => {
const { container } = render(
<Tree showLine={{ showLeafIcon: () => <i className="customLeafIcon" /> }} defaultExpandAll>
<TreeNode icon="icon">
<TreeNode title="node1" icon="icon" key="0-0-2" />
<TreeNode title="node2" key="0-0-3" />
</TreeNode>
</Tree>,
);
expect(container.querySelectorAll('.customLeafIcon').length).toBe(2);
});
it('leaf nodes should render custom icons when provided as string', async () => {
render(
<Tree showLine={{ showLeafIcon: 'customLeafIcon' }} defaultExpandAll>
<TreeNode icon="icon">
<TreeNode title="node1" icon="icon" key="0-0-2" />
<TreeNode title="node2" key="0-0-3" />
</TreeNode>
</Tree>,
);
const customIcons = await screen.findAllByText('customLeafIcon');
expect(customIcons).toHaveLength(2);
});
it('switcherIcon in Tree could be string', () => {
const { asFragment } = render(
<Tree switcherIcon="switcherIcon" defaultExpandAll>
<TreeNode icon="icon">
<TreeNode title="node1" icon="icon" key="0-0-2" />
<TreeNode title="node2" key="0-0-3" />
</TreeNode>
</Tree>,
);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('switcherIcon should be loading icon when loadData', () => {
const onLoadData = () =>
new Promise<void>((resolve) => {
setTimeout(() => {
resolve();
}, 1000);
});
const { asFragment } = render(
<Tree switcherIcon="switcherIcon" defaultExpandAll loadData={onLoadData}>
<TreeNode icon="icon">
<TreeNode title="node1" icon="icon" key="0-0-2" />
<TreeNode title="node2" key="0-0-3" />
</TreeNode>
</Tree>,
);
expect(asFragment().firstChild).toMatchSnapshot();
});
2020-06-24 00:19:43 +08:00
it('switcherIcon in Tree could be render prop function', () => {
const { container } = render(
<Tree
defaultExpandAll
switcherIcon={({ expanded }: AntTreeNodeProps) =>
expanded ? <span className="open" /> : <span className="close" />
}
>
<TreeNode icon="icon">
<TreeNode title="node1" icon="icon" key="0-0-2" />
<TreeNode title="node2" key="0-0-3" />
</TreeNode>
</Tree>,
);
expect(container.querySelectorAll('.open').length).toBe(1);
});
2020-06-24 00:19:43 +08:00
// https://github.com/ant-design/ant-design/issues/23261
it('showLine is object type should render correctly', () => {
const { asFragment } = render(
2020-06-24 00:19:43 +08:00
<Tree showLine={{ showLeafIcon: false }} defaultExpandedKeys={['0-0-0']}>
<TreeNode title="parent 1" key="0-0">
<TreeNode title="parent 1-0" key="0-0-0">
<TreeNode title="leaf" key="0-0-0-0" />
<TreeNode title="leaf" key="0-0-0-1" />
<TreeNode title="leaf" key="0-0-0-2" />
</TreeNode>
<TreeNode title="parent 1-1" key="0-0-1">
<TreeNode title="leaf" key="0-0-1-0" />
</TreeNode>
<TreeNode title="parent 1-2" key="0-0-2">
<TreeNode title="leaf" key="0-0-2-0" />
<TreeNode title="leaf" key="0-0-2-1" />
</TreeNode>
</TreeNode>
</Tree>,
);
expect(asFragment().firstChild).toMatchSnapshot();
2020-06-24 00:19:43 +08:00
});
describe('draggable', () => {
const dragTreeData = [
{
title: 'bamboo',
key: 'bamboo',
},
];
it('hide icon', () => {
const { container } = render(<Tree treeData={dragTreeData} draggable={{ icon: false }} />);
expect(container.querySelector('.anticon-holder')).toBeFalsy();
});
it('customize icon', () => {
const { container } = render(
<Tree treeData={dragTreeData} draggable={{ icon: <span className="little" /> }} />,
);
expect(container.querySelector('.little')).toBeTruthy();
});
it('nodeDraggable', () => {
chore: migrate to vitest (#42506) * chore: migrate to vitest * chore: update ci * fix: test correctly * test: support puppeteer * chore: update coverage * chore: update include/exclude * chore: update config * test: update incorrect tests * chore: update script * chore: update * fix: should close browser at the ended * chore: improve * fix: test cause tsc error * fix: eslint error * chore: exclude correctly * test: update snap and fix some tests * chore: update test config * fix: countup.js * fix: incorrect test * chore: update reference * test: update * fix: countup.js * fix: timeout * chore: update site test * fix: fixed countup version * chore: remove unsed code * test: update * test: update demo timeout * test: update timeout * chore: update image test * chore: update threads * fix: image/svg+xml test failed * chore: limits threads * test: update test coverage include * chore: remove jest files * chore: rename jest to vi * chore: update document * chore: fix missing @types/jsdom * chore: update coverage * chore: update snap * fix:watermark test cases are incorrect * feat: update ignore comment * test: fix test case * test: reset body scrollTop * test: clean up * test: use vi * test: update snapshot * test: update snapshot * test: fix dropdown test failed * fix: toHaveStyle cause test fail * test: improve test case * test: fix * fix: color failed, refer to https://github.com/jsdom/jsdom/pull/3560 * test: fix * test: fix * test: fix circular import * test: revert * ci: coverage failed * test: fix c8 ignore comment * chore: incorrect config * chore: fix ignore ci * test: revert svg+xml * test: fix realTimers * feat: rc-trigger should be remove * test: fix some failed test * chore: remove unused deps and configure eslint-plugin-vitest * test: update snap * chore: remove jest * test: fix lint error --------- Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: afc163 <afc163@gmail.com>
2023-06-07 11:54:50 +08:00
const nodeDraggable = vi.fn(() => false);
render(<Tree treeData={dragTreeData} draggable={{ nodeDraggable }} />);
expect(nodeDraggable).toHaveBeenCalledWith(dragTreeData[0]);
});
it('nodeDraggable func', () => {
chore: migrate to vitest (#42506) * chore: migrate to vitest * chore: update ci * fix: test correctly * test: support puppeteer * chore: update coverage * chore: update include/exclude * chore: update config * test: update incorrect tests * chore: update script * chore: update * fix: should close browser at the ended * chore: improve * fix: test cause tsc error * fix: eslint error * chore: exclude correctly * test: update snap and fix some tests * chore: update test config * fix: countup.js * fix: incorrect test * chore: update reference * test: update * fix: countup.js * fix: timeout * chore: update site test * fix: fixed countup version * chore: remove unsed code * test: update * test: update demo timeout * test: update timeout * chore: update image test * chore: update threads * fix: image/svg+xml test failed * chore: limits threads * test: update test coverage include * chore: remove jest files * chore: rename jest to vi * chore: update document * chore: fix missing @types/jsdom * chore: update coverage * chore: update snap * fix:watermark test cases are incorrect * feat: update ignore comment * test: fix test case * test: reset body scrollTop * test: clean up * test: use vi * test: update snapshot * test: update snapshot * test: fix dropdown test failed * fix: toHaveStyle cause test fail * test: improve test case * test: fix * fix: color failed, refer to https://github.com/jsdom/jsdom/pull/3560 * test: fix * test: fix * test: fix circular import * test: revert * ci: coverage failed * test: fix c8 ignore comment * chore: incorrect config * chore: fix ignore ci * test: revert svg+xml * test: fix realTimers * feat: rc-trigger should be remove * test: fix some failed test * chore: remove unused deps and configure eslint-plugin-vitest * test: update snap * chore: remove jest * test: fix lint error --------- Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: afc163 <afc163@gmail.com>
2023-06-07 11:54:50 +08:00
const nodeDraggable = vi.fn(() => false);
render(<Tree treeData={dragTreeData} draggable={nodeDraggable} />);
expect(nodeDraggable).toHaveBeenCalledWith(dragTreeData[0]);
});
});
describe('hidden switcherIcon', () => {
it('use `switcherIcon={() => null}`', () => {
const { container } = render(
<Tree defaultExpandAll switcherIcon={() => null}>
<TreeNode icon="icon">
<TreeNode title="node1" icon="icon" key="0-0-2" />
<TreeNode title="node2" key="0-0-3" />
</TreeNode>
</Tree>,
);
container.querySelectorAll('.ant-tree-switcher').forEach((el) => {
expect(el.children.length).toBe(0);
});
});
it('use `switcherIcon={null}`', () => {
const { container } = render(
<Tree defaultExpandAll switcherIcon={null}>
<TreeNode icon="icon">
<TreeNode title="node1" icon="icon" key="0-0-2" />
<TreeNode title="node2" key="0-0-3" />
</TreeNode>
</Tree>,
);
container.querySelectorAll('.ant-tree-switcher').forEach((el) => {
expect(el.children.length).toBe(0);
});
});
});
});