Skip to content

Commit e1baa26

Browse files
zombieJzombieJ
committed
add checkable check
1 parent 0ff6d97 commit e1baa26

File tree

2 files changed

+227
-36
lines changed

2 files changed

+227
-36
lines changed

‎tests/TreeProps.spec.js

Lines changed: 118 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -72,60 +72,143 @@ describe('Tree Props', () => {
7272
expect(renderToJson(withOpenIcon)).toMatchSnapshot();
7373
});
7474

75-
// selectable
76-
it('selectable', () => {
77-
// With Selectable
75+
describe('selectable', () => {
76+
// selectable - false
77+
it('without selectable', () => {
78+
const handleOnSelect = jest.fn();
79+
const handleOnCheck = jest.fn();
80+
81+
const withoutSelectableBase = (
82+
<Tree onSelect={handleOnSelect} defaultExpandedKeys={['0-0']} selectable={false}>
83+
<TreeNode key="0-0">
84+
<TreeNode key="0-0-0"/>
85+
</TreeNode>
86+
</Tree>
87+
);
88+
89+
expect(renderToJson(render(withoutSelectableBase))).toMatchSnapshot();
90+
91+
const withoutSelectable = mount(withoutSelectableBase);
92+
const parentNode = withoutSelectable.find(TreeNode).first();
93+
const targetNode = parentNode.find(TreeNode).last();
94+
95+
targetNode.find('.rc-tree-node-content-wrapper').simulate('click');
96+
97+
expect(handleOnSelect).not.toBeCalled();
98+
expect(handleOnCheck).not.toBeCalled(); // Will test in checkable
99+
});
100+
101+
// selectable - true
102+
it('with selectable', () => {
103+
const handleOnSelect = jest.fn();
104+
105+
const withSelectableBase = (
106+
<Tree onSelect={handleOnSelect} defaultExpandedKeys={['0-0']}>
107+
<TreeNode key="0-0">
108+
<TreeNode key="0-0-0" />
109+
</TreeNode>
110+
</Tree>
111+
);
112+
113+
expect(renderToJson(render(withSelectableBase))).toMatchSnapshot();
114+
115+
const withSelectable = mount(withSelectableBase);
116+
const parentNode = withSelectable.find(TreeNode).first();
117+
const targetNode = parentNode.find(TreeNode).last();
118+
119+
// Select leaf
120+
targetNode.find('.rc-tree-node-content-wrapper').simulate('click');
121+
122+
// traverseTreeNodes loops origin TreeNode and
123+
// onSelect trigger on `cloneElement` which is not the same instance
124+
// TODO: use context instead of `cloneElement` to reduce
125+
expect(handleOnSelect).toBeCalledWith(['0-0-0'], {
126+
event: 'select',
127+
selected: true,
128+
node: targetNode.instance(),
129+
selectedNodes: [parentNode.props().children],
130+
});
131+
132+
// Unselect leaf
133+
targetNode.find('.rc-tree-node-content-wrapper').simulate('click');
134+
expect(handleOnSelect).toBeCalledWith([], {
135+
event: 'select',
136+
selected: false,
137+
node: targetNode.instance(),
138+
selectedNodes: [],
139+
});
140+
141+
// Select leaf and then parent
142+
targetNode.find('.rc-tree-node-content-wrapper').simulate('click');
143+
expect(handleOnSelect).toBeCalledWith(['0-0-0'], {
144+
event: 'select',
145+
selected: true,
146+
node: targetNode.instance(),
147+
selectedNodes: [parentNode.props().children],
148+
});
149+
150+
parentNode.find('.rc-tree-node-content-wrapper').first().simulate('click');
151+
expect(handleOnSelect).toBeCalledWith(['0-0'], {
152+
event: 'select',
153+
selected: true,
154+
node: parentNode.instance(),
155+
selectedNodes: [withSelectable.find(Tree).props().children],
156+
});
157+
});
158+
});
159+
160+
// multiple
161+
it('multiple', () => {
162+
// TODO: Placeholder
163+
});
164+
165+
// checkable
166+
it('checkable', () => {
78167
const handleOnSelect = jest.fn();
79-
const withSelectableBase = (
80-
<Tree onSelect={handleOnSelect} defaultExpandedKeys={['0-0']}>
168+
const handleOnCheck = jest.fn();
169+
170+
const withCheckableBase = (
171+
<Tree
172+
onSelect={handleOnSelect}
173+
onCheck={handleOnCheck}
174+
defaultExpandedKeys={['0-0']}
175+
checkable
176+
>
81177
<TreeNode key="0-0">
82178
<TreeNode key="0-0-0" />
83179
</TreeNode>
84180
</Tree>
85181
);
86182

87-
expect(renderToJson(render(withSelectableBase))).toMatchSnapshot();
183+
expect(renderToJson(render(withCheckableBase))).toMatchSnapshot();
88184

89-
const withSelectable = mount(withSelectableBase);
90-
const parentNode = withSelectable.find(TreeNode).first();
185+
const withCheckable = mount(withCheckableBase);
186+
const parentNode = withCheckable.find(TreeNode).first();
91187
const targetNode = parentNode.find(TreeNode).last();
92188

93-
// Check leaf
189+
// Click leaf
94190
targetNode.find('.rc-tree-node-content-wrapper').simulate('click');
95-
96-
// traverseTreeNodes loops origin TreeNode and
97-
// onSelect trigger on `cloneElement` which is not the same instance
98191
expect(handleOnSelect).toBeCalledWith(['0-0-0'], {
99192
event: 'select',
100193
selected: true,
101194
node: targetNode.instance(),
102195
selectedNodes: [parentNode.props().children],
103196
});
197+
expect(handleOnCheck).not.toBeCalled();
198+
expect(handleOnSelect).toBeCalled();
104199

105-
// Uncheck leaf
106-
targetNode.find('.rc-tree-node-content-wrapper').simulate('click');
107-
expect(handleOnSelect).toBeCalledWith([], {
108-
event: 'select',
109-
selected: false,
110-
node: targetNode.instance(),
111-
selectedNodes: [],
112-
});
200+
handleOnCheck.mockReset();
201+
handleOnSelect.mockReset();
113202

114-
// Check leaf with parent
115-
targetNode.find('.rc-tree-node-content-wrapper').simulate('click');
116-
expect(handleOnSelect).toBeCalledWith(['0-0-0'], {
117-
event: 'select',
118-
selected: true,
119-
node: targetNode.instance(),
120-
selectedNodes: [parentNode.props().children],
121-
});
203+
// Click checkbox
204+
targetNode.find('.rc-tree-checkbox').simulate('click');
122205

123-
parentNode.find('.rc-tree-node-content-wrapper').first().simulate('click');
124-
expect(handleOnSelect).toBeCalledWith(['0-0'], {
125-
event: 'select',
126-
selected: true,
127-
node: parentNode.instance(),
128-
selectedNodes: [withSelectable.find(Tree).props().children],
129-
});
206+
expect(handleOnCheck).toBeCalledWith(['0-0-0', '0-0'], expect.objectContaining({
207+
event: 'check',
208+
checked: true,
209+
node: targetNode.instance(),
210+
checkedNodes: [parentNode.props().children, withCheckable.find(Tree).props().children],
211+
}));
212+
expect(handleOnSelect).not.toBeCalled();
130213
});
131214
});

‎tests/__snapshots__/TreeProps.spec.js.snap

Lines changed: 109 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,61 @@
1+
exports[`Tree Props checkable 1`] = `
2+
<ul
3+
class="rc-tree"
4+
role="tree-node"
5+
unselectable="on">
6+
<li
7+
class="">
8+
<span
9+
class="rc-tree-switcher rc-tree-switcher_open">
10+
11+
</span>
12+
<span
13+
class="rc-tree-checkbox">
14+
15+
</span>
16+
<span
17+
class="rc-tree-node-content-wrapper rc-tree-node-content-wrapper-open"
18+
title="---">
19+
<span
20+
class="rc-tree-iconEle rc-tree-icon__open">
21+
22+
</span>
23+
<span
24+
class="rc-tree-title">
25+
---
26+
</span>
27+
</span>
28+
<ul
29+
class="rc-tree-child-tree rc-tree-child-tree-open"
30+
data-expanded="true">
31+
<li
32+
class="">
33+
<span
34+
class="rc-tree-switcher rc-tree-switcher-noop">
35+
36+
</span>
37+
<span
38+
class="rc-tree-checkbox">
39+
40+
</span>
41+
<span
42+
class="rc-tree-node-content-wrapper rc-tree-node-content-wrapper-normal"
43+
title="---">
44+
<span
45+
class="rc-tree-iconEle rc-tree-icon__docu">
46+
47+
</span>
48+
<span
49+
class="rc-tree-title">
50+
---
51+
</span>
52+
</span>
53+
</li>
54+
</ul>
55+
</li>
56+
</ul>
57+
`;
58+
159
exports[`Tree Props prefixCls 1`] = `
260
<ul
361
class="rc-tree"
@@ -16,7 +74,57 @@ exports[`Tree Props prefixCls 2`] = `
1674
</ul>
1775
`;
1876

19-
exports[`Tree Props selectable 1`] = `
77+
exports[`Tree Props selectable with selectable 1`] = `
78+
<ul
79+
class="rc-tree"
80+
role="tree-node"
81+
unselectable="on">
82+
<li
83+
class="">
84+
<span
85+
class="rc-tree-switcher rc-tree-switcher_open">
86+
87+
</span>
88+
<span
89+
class="rc-tree-node-content-wrapper rc-tree-node-content-wrapper-open"
90+
title="---">
91+
<span
92+
class="rc-tree-iconEle rc-tree-icon__open">
93+
94+
</span>
95+
<span
96+
class="rc-tree-title">
97+
---
98+
</span>
99+
</span>
100+
<ul
101+
class="rc-tree-child-tree rc-tree-child-tree-open"
102+
data-expanded="true">
103+
<li
104+
class="">
105+
<span
106+
class="rc-tree-switcher rc-tree-switcher-noop">
107+
108+
</span>
109+
<span
110+
class="rc-tree-node-content-wrapper rc-tree-node-content-wrapper-normal"
111+
title="---">
112+
<span
113+
class="rc-tree-iconEle rc-tree-icon__docu">
114+
115+
</span>
116+
<span
117+
class="rc-tree-title">
118+
---
119+
</span>
120+
</span>
121+
</li>
122+
</ul>
123+
</li>
124+
</ul>
125+
`;
126+
127+
exports[`Tree Props selectable without selectable 1`] = `
20128
<ul
21129
class="rc-tree"
22130
role="tree-node"

0 commit comments

Comments
 (0)