Skip to content

Commit 9bb1918

Browse files
gjulivangjulivan
committed
fix: unit test
1 parent 1c3c4d5 commit 9bb1918

1 file changed

Lines changed: 68 additions & 42 deletions

File tree

‎packages/pluggableWidgets/tree-node-web/src/components/__tests__/TreeNode.spec.tsx‎

Lines changed: 68 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,45 @@
1-
import { GUID } from "mendix";
2-
import { isValidElement, ReactElement, ReactNode } from "react";
1+
import "@testing-library/jest-dom";
32
import { render, screen } from "@testing-library/react";
43
import userEvent from "@testing-library/user-event";
54
import { UserEvent } from "@testing-library/user-event/setup/setup";
6-
import "@testing-library/jest-dom";
7-
import { TreeNode, TreeNodeProps, TreeNodeState } from "../TreeNode";
5+
import { GUID } from "mendix";
6+
import { isValidElement, ReactElement, ReactNode } from "react";
87
import { renderTreeNodeHeaderIcon } from "../HeaderIcon";
8+
import { TreeNode, TreeNodeProps, TreeNodeState } from "../TreeNode";
99

1010
jest.mock("../../assets/loading-circle.svg", () => "loading-logo.svg");
1111

1212
interface TreeNodeItem {
1313
id: GUID;
1414
headerContent: string;
15+
isUserDefinedLeafNode: boolean;
1516
bodyContent: ReactElement;
1617
}
1718

1819
const items: TreeNodeItem[] = [
19-
{ id: "11" as GUID, headerContent: "First header", bodyContent: <div>First content</div> },
20-
{ id: "22" as GUID, headerContent: "Second header", bodyContent: <div>Second content</div> },
21-
{ id: "33" as GUID, headerContent: "Third header", bodyContent: <div>Third content</div> }
20+
{
21+
id: "11" as GUID,
22+
headerContent: "First header",
23+
isUserDefinedLeafNode: false,
24+
bodyContent: <div>First content</div>
25+
},
26+
{
27+
id: "22" as GUID,
28+
headerContent: "Second header",
29+
isUserDefinedLeafNode: false,
30+
bodyContent: <div>Second content</div>
31+
},
32+
{
33+
id: "33" as GUID,
34+
headerContent: "Third header",
35+
isUserDefinedLeafNode: false,
36+
bodyContent: <div>Third content</div>
37+
}
2238
];
2339

2440
const defaultProps: TreeNodeProps = {
2541
class: "",
2642
items: [],
27-
isUserDefinedLeafNode: false,
2843
startExpanded: false,
2944
showCustomIcon: false,
3045
iconPlacement: "right",
@@ -59,7 +74,7 @@ describe("TreeNode", () => {
5974
});
6075

6176
it("shows all headers and contents when starting expanded", () => {
62-
renderTreeNode({ items, isUserDefinedLeafNode: false, startExpanded: true });
77+
renderTreeNode({ items, startExpanded: true });
6378
items.forEach(item => {
6479
expect(screen.getByText(item.headerContent as string)).toBeInTheDocument();
6580
const texts = getTextFromElement(item.bodyContent);
@@ -68,7 +83,7 @@ describe("TreeNode", () => {
6883
});
6984

7085
it("does not show item content when not starting expanded", () => {
71-
renderTreeNode({ items, isUserDefinedLeafNode: false, startExpanded: false });
86+
renderTreeNode({ items, startExpanded: false });
7287
items.forEach(item => {
7388
expect(screen.getByText(item.headerContent as string)).toBeInTheDocument();
7489
const texts = getTextFromElement(item.bodyContent);
@@ -82,16 +97,17 @@ describe("TreeNode", () => {
8297
{
8398
id: "44" as GUID,
8499
headerContent: <div>This is the 44 header</div>,
100+
isUserDefinedLeafNode: false,
85101
bodyContent: <div>Fourth content</div>
86102
}
87103
];
88-
renderTreeNode({ items: newItems, isUserDefinedLeafNode: false, startExpanded: true });
104+
renderTreeNode({ items: newItems, startExpanded: true });
89105
expect(screen.getByText("This is the 44 header")).toBeInTheDocument();
90106
expect(screen.getByText("Fourth content")).toBeInTheDocument();
91107
});
92108

93109
it("shows the tree node headers in the correct order as a treeitem when not defined as a leaf node", () => {
94-
renderTreeNode({ items, isUserDefinedLeafNode: false, startExpanded: false });
110+
renderTreeNode({ items, startExpanded: false });
95111
const treeNodeHeaders = screen.getAllByRole("treeitem");
96112
expect(treeNodeHeaders).toHaveLength(items.length);
97113
items.forEach(item => {
@@ -100,7 +116,7 @@ describe("TreeNode", () => {
100116
});
101117

102118
it("correctly collapses and expands the tree node branch content when clicking on the header", async () => {
103-
renderTreeNode({ items, isUserDefinedLeafNode: false, startExpanded: false });
119+
renderTreeNode({ items, startExpanded: false });
104120

105121
const treeNodeItems = screen.getAllByRole("treeitem");
106122

@@ -122,7 +138,6 @@ describe("TreeNode", () => {
122138
expandedIcon: { type: "glyph", iconClass: "expanded-icon" },
123139
collapsedIcon: { type: "image", iconUrl: "image.png" },
124140
items,
125-
isUserDefinedLeafNode: false,
126141
startExpanded: false
127142
});
128143
expect(screen.getByText("First header")).toBeInTheDocument();
@@ -134,7 +149,6 @@ describe("TreeNode", () => {
134149
expandedIcon: { type: "glyph", iconClass: "expanded-icon" },
135150
collapsedIcon: { type: "image", iconUrl: "image.png" },
136151
items,
137-
isUserDefinedLeafNode: false,
138152
startExpanded: true
139153
});
140154
expect(screen.getByText("First header")).toBeInTheDocument();
@@ -143,17 +157,15 @@ describe("TreeNode", () => {
143157
{
144158
id: "11" as GUID,
145159
headerContent: "Parent treeview with a nested treeview that is empty",
146-
bodyContent: (
147-
<TreeNode {...defaultProps} items={[]} isUserDefinedLeafNode={false} startExpanded={false} />
148-
)
160+
isUserDefinedLeafNode: false,
161+
bodyContent: <TreeNode {...defaultProps} items={[]} startExpanded={false} />
149162
}
150163
];
151164
renderTreeNode({
152165
showCustomIcon: true,
153166
expandedIcon: { type: "glyph", iconClass: "expanded-icon" },
154167
collapsedIcon: { type: "image", iconUrl: "image.png" },
155168
items: nestedItems,
156-
isUserDefinedLeafNode: false,
157169
startExpanded: true
158170
});
159171
expect(screen.getByText("Parent treeview with a nested treeview that is empty")).toBeInTheDocument();
@@ -164,17 +176,15 @@ describe("TreeNode", () => {
164176
{
165177
id: "11" as GUID,
166178
headerContent: "Parent treeview with a nested treeview that is empty",
167-
bodyContent: (
168-
<TreeNode {...defaultProps} items={[]} isUserDefinedLeafNode={false} startExpanded={false} />
169-
)
179+
isUserDefinedLeafNode: false,
180+
bodyContent: <TreeNode {...defaultProps} items={[]} startExpanded={false} />
170181
}
171182
];
172183
renderTreeNode({
173184
showCustomIcon: true,
174185
expandedIcon: { type: "glyph", iconClass: "expanded-icon" },
175186
collapsedIcon: { type: "image", iconUrl: "image.png" },
176187
items: nestedItems,
177-
isUserDefinedLeafNode: false,
178188
startExpanded: true
179189
});
180190
expect(screen.getByText("Parent treeview with a nested treeview that is empty")).toBeInTheDocument();
@@ -187,9 +197,10 @@ describe("TreeNode", () => {
187197
id: "11" as GUID,
188198
headerContent:
189199
"Parent treeview with a nested treeview that is empty and wrapped with a random other widget",
200+
isUserDefinedLeafNode: false,
190201
bodyContent: (
191202
<RandomOtherWidget>
192-
<TreeNode {...defaultProps} items={[]} isUserDefinedLeafNode={false} startExpanded={false} />
203+
<TreeNode {...defaultProps} items={[]} startExpanded={false} />
193204
</RandomOtherWidget>
194205
)
195206
}
@@ -199,7 +210,6 @@ describe("TreeNode", () => {
199210
expandedIcon: { type: "glyph", iconClass: "expanded-icon" },
200211
collapsedIcon: { type: "image", iconUrl: "image.png" },
201212
items: nestedItems,
202-
isUserDefinedLeafNode: false,
203213
startExpanded: true
204214
});
205215
expect(
@@ -214,8 +224,14 @@ describe("TreeNode", () => {
214224
showCustomIcon: true,
215225
expandedIcon: { type: "glyph", iconClass: "expanded-icon" },
216226
collapsedIcon: { type: "image", iconUrl: "image.png" },
217-
items: [{ id: "11" as GUID, headerContent: "First header", bodyContent: undefined }],
218-
isUserDefinedLeafNode: false,
227+
items: [
228+
{
229+
id: "11" as GUID,
230+
headerContent: "First header",
231+
isUserDefinedLeafNode: false,
232+
bodyContent: undefined
233+
}
234+
],
219235
startExpanded: true
220236
});
221237
expect(screen.getByText("First header")).toBeInTheDocument();
@@ -224,7 +240,6 @@ describe("TreeNode", () => {
224240
it("adds a CSS class for the header when the icon animates on toggle", () => {
225241
renderTreeNode({
226242
items,
227-
isUserDefinedLeafNode: false,
228243
startExpanded: true,
229244
animateIcon: true
230245
});
@@ -241,8 +256,18 @@ describe("TreeNode", () => {
241256
return <TreeNode {...props} />;
242257
};
243258
const testItems: TreeNodeProps["items"] = [
244-
{ id: "1" as GUID, headerContent: "Header 1", bodyContent: <div>Content 1</div> },
245-
{ id: "2" as GUID, headerContent: "Header 2", bodyContent: <div>Content 2</div> }
259+
{
260+
id: "1" as GUID,
261+
headerContent: "Header 1",
262+
isUserDefinedLeafNode: false,
263+
bodyContent: <div>Content 1</div>
264+
},
265+
{
266+
id: "2" as GUID,
267+
headerContent: "Header 2",
268+
isUserDefinedLeafNode: false,
269+
bodyContent: <div>Content 2</div>
270+
}
246271
];
247272
render(<TestBranch {...defaultProps} items={testItems} />);
248273
expect(renderSpy).toHaveBeenCalledTimes(1);
@@ -260,10 +285,16 @@ describe("TreeNode", () => {
260285
describe("when interacting through the keyboard", () => {
261286
beforeEach(() => {
262287
const treeNodeItems = [
263-
{ id: "1" as GUID, headerContent: "First header", bodyContent: <div>First content</div> },
288+
{
289+
id: "1" as GUID,
290+
headerContent: "First header",
291+
isUserDefinedLeafNode: false,
292+
bodyContent: <div>First content</div>
293+
},
264294
{
265295
id: "2" as GUID,
266296
headerContent: "Second header",
297+
isUserDefinedLeafNode: false,
267298
bodyContent: (
268299
<TreeNode
269300
{...defaultProps}
@@ -272,48 +303,43 @@ describe("TreeNode", () => {
272303
{
273304
id: "21" as GUID,
274305
headerContent: "Second First header",
306+
isUserDefinedLeafNode: false,
275307
bodyContent: <div>Second First content</div>
276308
},
277309
{
278310
id: "22" as GUID,
279311
headerContent: "Second Second header",
312+
isUserDefinedLeafNode: false,
280313
bodyContent: <div>Second Second content</div>
281314
},
282315
{
283316
id: "23" as GUID,
284317
headerContent: "Second Third header",
318+
isUserDefinedLeafNode: false,
285319
bodyContent: <div>Second Third content</div>
286320
}
287321
]}
288-
isUserDefinedLeafNode={false}
289322
startExpanded={false}
290323
/>
291324
)
292325
},
293326
{
294327
id: "3" as GUID,
295328
headerContent: "Third header",
296-
bodyContent: (
297-
<TreeNode
298-
{...defaultProps}
299-
class=""
300-
items={[]}
301-
isUserDefinedLeafNode={false}
302-
startExpanded={false}
303-
/>
304-
)
329+
isUserDefinedLeafNode: false,
330+
bodyContent: <TreeNode {...defaultProps} class="" items={[]} startExpanded={false} />
305331
},
306332
{
307333
id: "4" as GUID,
308334
headerContent: "Fourth header",
335+
isUserDefinedLeafNode: false,
309336
bodyContent: <div>Fourth content</div>
310337
}
311338
];
312339

313340
renderTreeNode({
314341
class: "",
315342
items: treeNodeItems,
316-
isUserDefinedLeafNode: false,
317343
startExpanded: false
318344
});
319345
});

0 commit comments

Comments
 (0)