Skip to content

Commit 343fe76

Browse files
mbraakmbraak
authored
Remove jquery from test code (#893)
* Remove jquery from jqTreeMatchers * Remove jquery
1 parent 71197aa commit 343fe76

9 files changed

+94
-86
lines changed

‎src/test/jqTree/events.test.ts

+9-9
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ describe("events", () => {
2626
interface Vars {
2727
$tree: JQuery;
2828
node1: INode;
29-
titleSpan: JQuery;
29+
titleSpan: HTMLElement;
3030
}
3131

3232
const given = getGiven<Vars>();
@@ -44,7 +44,7 @@ describe("events", () => {
4444
const onClick = jest.fn();
4545
given.$tree.on("tree.click", onClick);
4646

47-
await userEvent.click(given.titleSpan.get(0) as HTMLElement);
47+
await userEvent.click(given.titleSpan);
4848

4949
expect(onClick).toHaveBeenCalledWith(
5050
expect.objectContaining({ node: given.node1 }),
@@ -56,7 +56,7 @@ describe("events", () => {
5656
interface Vars {
5757
$tree: JQuery;
5858
node1: INode;
59-
titleSpan: JQuery;
59+
titleSpan: HTMLElement;
6060
}
6161

6262
const given = getGiven<Vars>();
@@ -76,7 +76,7 @@ describe("events", () => {
7676

7777
await userEvent.pointer({
7878
keys: "[MouseRight]",
79-
target: given.titleSpan.get(0) as HTMLElement,
79+
target: given.titleSpan,
8080
});
8181

8282
expect(onContextMenu).toHaveBeenCalledWith(
@@ -89,7 +89,7 @@ describe("events", () => {
8989
interface Vars {
9090
$tree: JQuery;
9191
node1: INode;
92-
titleSpan: JQuery;
92+
titleSpan: HTMLElement;
9393
}
9494

9595
const given = getGiven<Vars>();
@@ -107,7 +107,7 @@ describe("events", () => {
107107
const onDoubleClick = jest.fn();
108108
given.$tree.on("tree.dblclick", onDoubleClick);
109109

110-
await userEvent.dblClick(given.titleSpan.get(0) as HTMLElement);
110+
await userEvent.dblClick(given.titleSpan);
111111

112112
expect(onDoubleClick).toHaveBeenCalledWith(
113113
expect.objectContaining({ node: given.node1 }),
@@ -186,7 +186,7 @@ describe("events", () => {
186186
interface Vars {
187187
$tree: JQuery;
188188
node1: INode;
189-
titleSpan: JQuery;
189+
titleSpan: HTMLElement;
190190
}
191191

192192
const given = getGiven<Vars>();
@@ -206,7 +206,7 @@ describe("events", () => {
206206
const onSelect = jest.fn();
207207
given.$tree.on("tree.select", onSelect);
208208

209-
await userEvent.click(given.titleSpan.get(0) as HTMLElement);
209+
await userEvent.click(given.titleSpan);
210210

211211
expect(onSelect).toHaveBeenCalledWith(
212212
expect.objectContaining({
@@ -225,7 +225,7 @@ describe("events", () => {
225225
const onSelect = jest.fn();
226226
given.$tree.on("tree.select", onSelect);
227227

228-
await userEvent.click(given.titleSpan.get(0) as HTMLElement);
228+
await userEvent.click(given.titleSpan);
229229

230230
expect(onSelect).toHaveBeenCalledWith(
231231
expect.objectContaining({

‎src/test/jqTree/loadOnDemand.test.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ describe("load on demand", () => {
9898

9999
it("loads the subtree", async () => {
100100
const toggler = togglerLink(given.node.element as HTMLElement);
101-
await userEvent.click(toggler.get(0) as HTMLElement);
101+
await userEvent.click(toggler);
102102

103103
await screen.findByText("loaded-on-demand");
104104

@@ -125,7 +125,7 @@ describe("load on demand", () => {
125125
expect(given.node.element).toBeFocused();
126126

127127
const toggler = togglerLink(given.node.element as HTMLElement);
128-
await userEvent.click(toggler.get(0) as HTMLElement);
128+
await userEvent.click(toggler);
129129

130130
await screen.findByText("loaded-on-demand");
131131

@@ -138,7 +138,7 @@ describe("load on demand", () => {
138138
expect(given.node.element).not.toBeSelected();
139139

140140
const toggler = togglerLink(given.node.element as HTMLElement);
141-
await userEvent.click(toggler.get(0) as HTMLElement);
141+
await userEvent.click(toggler);
142142

143143
await screen.findByText("loaded-on-demand");
144144

@@ -157,7 +157,7 @@ describe("load on demand", () => {
157157
expect(given.node.element).not.toBeFocused();
158158

159159
const toggler = togglerLink(given.node.element as HTMLElement);
160-
await userEvent.click(toggler.get(0) as HTMLElement);
160+
await userEvent.click(toggler);
161161

162162
await screen.findByText("loaded-on-demand");
163163

‎src/test/jqTree/methods.test.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -1356,9 +1356,7 @@ describe("methods", () => {
13561356
it("sets an option", async () => {
13571357
given.$tree.tree("setOption", "selectable", true);
13581358
await userEvent.click(
1359-
titleSpan(given.node1.element as HTMLElement).get(
1360-
0,
1361-
) as HTMLElement,
1359+
titleSpan(given.node1.element as HTMLElement),
13621360
);
13631361

13641362
expect(given.$tree.tree("getSelectedNode")).toMatchObject({

‎src/test/jqTree/mouse.test.ts

+5-15
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,7 @@ describe("mouse", () => {
2424
expect(node.element).not.toBeSelected();
2525
expect(node.element).not.toBeFocused();
2626

27-
await userEvent.click(
28-
titleSpan(node.element as HTMLElement).get(0) as HTMLElement,
29-
);
27+
await userEvent.click(titleSpan(node.element as HTMLElement));
3028

3129
expect(node.element).toBeSelected();
3230
});
@@ -40,9 +38,7 @@ describe("mouse", () => {
4038

4139
expect(node.element).toBeSelected();
4240

43-
await userEvent.click(
44-
titleSpan(node.element as HTMLElement).get(0) as HTMLElement,
45-
);
41+
await userEvent.click(titleSpan(node.element as HTMLElement));
4642

4743
expect(node.element).not.toBeSelected();
4844
});
@@ -55,9 +51,7 @@ describe("mouse", () => {
5551

5652
expect(node.element).not.toBeOpen();
5753

58-
await userEvent.click(
59-
togglerLink(node.element as HTMLElement).get(0) as HTMLElement,
60-
);
54+
await userEvent.click(togglerLink(node.element as HTMLElement));
6155

6256
expect(node.element).toBeOpen();
6357
});
@@ -71,9 +65,7 @@ describe("mouse", () => {
7165
expect(node.element).not.toBeSelected();
7266
expect(node.element).not.toBeOpen();
7367

74-
await userEvent.click(
75-
togglerLink(node.element as HTMLElement).get(0) as HTMLElement,
76-
);
68+
await userEvent.click(togglerLink(node.element as HTMLElement));
7769

7870
expect(node.element).not.toBeSelected();
7971
expect(node.element).toBeOpen();
@@ -89,9 +81,7 @@ describe("mouse", () => {
8981
expect(node.element).toBeSelected();
9082
expect(node.element).not.toBeOpen();
9183

92-
await userEvent.click(
93-
togglerLink(node.element as HTMLElement).get(0) as HTMLElement,
94-
);
84+
await userEvent.click(togglerLink(node.element as HTMLElement));
9585

9686
expect(node.element).toBeSelected();
9787
expect(node.element).toBeOpen();

‎src/test/jqTree/options.test.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -403,7 +403,8 @@ describe("options", () => {
403403
given.$tree.tree({
404404
data: exampleData,
405405
onCreateLi: (node: INode, el: JQuery) => {
406-
titleSpan(el).text(`_${node.name}_`);
406+
titleSpan(el.get(0) as HTMLElement).innerHTML =
407+
`_${node.name}_`;
407408
},
408409
});
409410
});
@@ -541,7 +542,7 @@ describe("options", () => {
541542

542543
it("has a different closed icon", () => {
543544
expect(
544-
togglerLink(given.node1.element as HTMLElement).text(),
545+
togglerLink(given.node1.element as HTMLElement).innerHTML,
545546
).toBe("◀");
546547
});
547548
});
@@ -554,7 +555,7 @@ describe("options", () => {
554555

555556
it("has a different closed icon", () => {
556557
expect(
557-
togglerLink(given.node1.element as HTMLElement).text(),
558+
togglerLink(given.node1.element as HTMLElement).innerHTML,
558559
).toBe("◀");
559560
});
560561
});

‎src/test/support/jqTreeMatchers.ts

+15-19
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,52 @@
11
import { titleSpan } from "./testUtil";
22
import treeStructure from "./treeStructure";
33

4-
const assertJqTreeFolder = ($el: JQuery) => {
4+
const assertJqTreeFolder = (el: HTMLElement) => {
55
/* istanbul ignore if */
6-
if (!$el.hasClass("jqtree-folder")) {
6+
if (!el.classList.contains("jqtree-folder")) {
77
throw new Error("Node is not a folder");
88
}
99
};
1010

1111
expect.extend({
12-
toBeClosed(el: HTMLElement | JQuery) {
13-
const $el = jQuery(el);
14-
assertJqTreeFolder($el);
12+
toBeClosed(el: HTMLElement) {
13+
assertJqTreeFolder(el);
1514

1615
/* istanbul ignore next */
1716
return {
1817
message: () => "The node is open",
19-
pass: $el.hasClass("jqtree-closed"),
18+
pass: el.classList.contains("jqtree-closed"),
2019
};
2120
},
22-
toBeFocused(el: HTMLElement | JQuery) {
21+
toBeFocused(el: HTMLElement) {
2322
/* istanbul ignore next */
2423
return {
2524
message: () => "The is node is not focused",
26-
pass: document.activeElement === titleSpan(el)[0],
25+
pass: document.activeElement === titleSpan(el),
2726
};
2827
},
29-
toBeOpen(el: HTMLElement | JQuery) {
30-
const $el = jQuery(el);
31-
assertJqTreeFolder($el);
28+
toBeOpen(el: HTMLElement) {
29+
assertJqTreeFolder(el);
3230

3331
/* istanbul ignore next */
3432
return {
3533
message: () => "The node is closed",
36-
pass: !$el.hasClass("jqtree-closed"),
34+
pass: !el.classList.contains("jqtree-closed"),
3735
};
3836
},
39-
toBeSelected(el: HTMLElement | JQuery) {
40-
const $el = jQuery(el);
41-
37+
toBeSelected(el: HTMLElement) {
4238
/* istanbul ignore next */
4339
return {
4440
message: () => "The node is not selected",
45-
pass: $el.hasClass("jqtree-selected"),
41+
pass: el.classList.contains("jqtree-selected"),
4642
};
4743
},
4844
toHaveTreeStructure(
49-
el: HTMLElement | JQuery,
45+
$el: JQuery,
5046
expectedStructure: JQTreeMatchers.TreeStructure,
5147
) {
52-
const $el = jQuery(el);
53-
const receivedStructure = treeStructure($el);
48+
const el = $el.get(0) as HTMLElement;
49+
const receivedStructure = treeStructure(el);
5450

5551
/* istanbul ignore next */
5652
return {

‎src/test/support/matchers.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,6 @@ declare namespace jest {
2626
toBeFocused(): boolean;
2727
toBeOpen(): boolean;
2828
toBeSelected(): boolean;
29-
toHaveTreeStructure(treeStructure: any): boolean;
29+
toHaveTreeStructure(treeStructure: TreeStructure): boolean;
3030
}
3131
}

‎src/test/support/testUtil.ts

+35-15
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,50 @@ interface Rect {
1010
y: number;
1111
}
1212

13-
export const singleChild = ($el: JQuery, selector: string): JQuery => {
14-
const $result = $el.children(selector);
15-
16-
/* istanbul ignore if */
17-
if ($result.length === 0) {
18-
throw new Error(`No child found for selector '${selector}'`);
13+
export const getChilden = (
14+
el: HTMLElement,
15+
nodeName: string,
16+
className: string,
17+
) => {
18+
const result: HTMLElement[] = [];
19+
20+
for (const child of el.children) {
21+
if (
22+
child.nodeName === nodeName.toUpperCase() &&
23+
child.classList.contains(className)
24+
) {
25+
result.push(child as HTMLElement);
26+
}
1927
}
2028

29+
return result;
30+
};
31+
32+
export const singleChild = (
33+
el: HTMLElement,
34+
nodeName: string,
35+
className: string,
36+
) => {
37+
const children = getChilden(el, nodeName, className);
38+
2139
/* istanbul ignore if */
22-
if ($result.length > 1) {
23-
throw new Error(`Multiple elements found for selector '${selector}'`);
40+
if (children.length !== 1) {
41+
throw new Error(
42+
`Expected single child, got ${el.children.length} for ${nodeName} ${className}`,
43+
);
2444
}
2545

26-
return $result;
46+
return children[0] as HTMLElement;
2747
};
2848

29-
export const titleSpan = (liNode: HTMLElement | JQuery): JQuery =>
30-
singleChild(nodeElement(liNode), "span.jqtree-title");
49+
export const titleSpan = (liNode: HTMLElement): HTMLElement =>
50+
singleChild(nodeElement(liNode), "span", "jqtree-title");
3151

32-
export const togglerLink = (liNode: HTMLElement | JQuery): JQuery =>
33-
singleChild(nodeElement(liNode), "a.jqtree-toggler");
52+
export const togglerLink = (liNode: HTMLElement): HTMLElement =>
53+
singleChild(nodeElement(liNode), "a", "jqtree-toggler");
3454

35-
const nodeElement = (liNode: HTMLElement | JQuery): JQuery =>
36-
singleChild(jQuery(liNode), "div.jqtree-element ");
55+
const nodeElement = (liNode: HTMLElement): HTMLElement =>
56+
singleChild(liNode, "div", "jqtree-element");
3757

3858
const mockLayout = (element: HTMLElement, rect: Rect) => {
3959
jest.spyOn(element, "clientHeight", "get").mockReturnValue(rect.height);

0 commit comments

Comments
 (0)