jqtree 1.7.5 → 1.8.1

package/src/test/jqTree/events.test.ts

@@ -1,31 +1,24 @@
 import getGiven from "givens";
-import { rest } from "msw";
+import { http, HttpResponse } from "msw";
 import { setupServer } from "msw/node";
 import { waitFor } from "@testing-library/dom";
+import { userEvent } from "@testing-library/user-event";
 import "../../tree.jquery";
 import exampleData from "../support/exampleData";
 import { titleSpan } from "../support/testUtil";
 
 const context = describe;
 
-const server = setupServer();
-
-beforeAll(() => server.listen());
-
 beforeEach(() => {
     $("body").append('<div id="tree1"></div>');
 });
 
 afterEach(() => {
-    server.resetHandlers();
-
     const $tree = $("#tree1");
     $tree.tree("destroy");
     $tree.remove();
 });
 
-afterAll(() => server.close());
-
 describe("tree.click", () => {
     interface Vars {
         node1: INode;
@@ -42,13 +35,13 @@ describe("tree.click", () => {
         given.$tree.tree({ data: exampleData });
     });
 
-    it("fires tree.click", () => {
+    it("fires tree.click", async () => {
         const onClick = jest.fn();
         given.$tree.on("tree.click", onClick);
 
-        given.titleSpan.trigger("click");
+        await userEvent.click(given.titleSpan.get(0) as HTMLElement);
         expect(onClick).toHaveBeenCalledWith(
-            expect.objectContaining({ node: given.node1 })
+            expect.objectContaining({ node: given.node1 }),
         );
     });
 });
@@ -69,13 +62,16 @@ describe("tree.contextmenu", () => {
         given.$tree.tree({ data: exampleData });
     });
 
-    it("fires tree.contextmenu", () => {
+    it("fires tree.contextmenu", async () => {
         const onContextMenu = jest.fn();
         given.$tree.on("tree.contextmenu", onContextMenu);
 
-        given.titleSpan.trigger("contextmenu");
+        await userEvent.pointer({
+            target: given.titleSpan.get(0) as HTMLElement,
+            keys: "[MouseRight]",
+        });
         expect(onContextMenu).toHaveBeenCalledWith(
-            expect.objectContaining({ node: given.node1 })
+            expect.objectContaining({ node: given.node1 }),
         );
     });
 });
@@ -96,13 +92,13 @@ describe("tree.dblclick", () => {
         given.$tree.tree({ data: exampleData });
     });
 
-    it("fires tree.dblclick", () => {
+    it("fires tree.dblclick", async () => {
         const onDoubleClick = jest.fn();
         given.$tree.on("tree.dblclick", onDoubleClick);
 
-        given.titleSpan.trigger("dblclick");
+        await userEvent.dblClick(given.titleSpan.get(0) as HTMLElement);
         expect(onDoubleClick).toHaveBeenCalledWith(
-            expect.objectContaining({ node: given.node1 })
+            expect.objectContaining({ node: given.node1 }),
         );
     });
 });
@@ -129,12 +125,15 @@ describe("tree.init", () => {
     });
 
     context("with data loaded from an url", () => {
+        const server = setupServer(
+            http.get("/tree/", () => HttpResponse.json(exampleData)),
+        );
         beforeEach(() => {
-            server.use(
-                rest.get("/tree/", (_request, response, ctx) =>
-                    response(ctx.status(200), ctx.json(exampleData))
-                )
-            );
+            server.listen();
+        });
+
+        afterAll(() => {
+            server.close();
         });
 
         it("is called", async () => {
@@ -165,7 +164,7 @@ describe("tree.load_data", () => {
 
             given.$tree.tree({ data: exampleData });
             expect(onLoadData).toHaveBeenCalledWith(
-                expect.objectContaining({ tree_data: exampleData })
+                expect.objectContaining({ tree_data: exampleData }),
             );
         });
     });
@@ -189,16 +188,16 @@ describe("tree.select", () => {
         });
     });
 
-    it("fires tree.select", () => {
+    it("fires tree.select", async () => {
         const onSelect = jest.fn();
         given.$tree.on("tree.select", onSelect);
 
-        given.titleSpan.trigger("click");
+        await userEvent.click(given.titleSpan.get(0) as HTMLElement);
         expect(onSelect).toHaveBeenCalledWith(
             expect.objectContaining({
                 node: given.node1,
                 deselected_node: null,
-            })
+            }),
         );
     });
 
@@ -207,17 +206,85 @@ describe("tree.select", () => {
             given.$tree.tree("selectNode", given.node1);
         });
 
-        it("fires tree.select with node is null", () => {
+        it("fires tree.select with node is null", async () => {
             const onSelect = jest.fn();
             given.$tree.on("tree.select", onSelect);
 
-            given.titleSpan.trigger("click");
+            await userEvent.click(given.titleSpan.get(0) as HTMLElement);
             expect(onSelect).toHaveBeenCalledWith(
                 expect.objectContaining({
                     node: null,
                     previous_node: given.node1,
-                })
+                }),
+            );
+        });
+    });
+});
+
+describe("tree.loading_data", () => {
+    const server = setupServer(
+        http.get("/tree/", () => HttpResponse.json(exampleData)),
+    );
+    beforeEach(() => {
+        server.listen();
+    });
+
+    afterAll(() => {
+        server.close();
+    });
+
+    it("fires tree.loading_data when the data is loading from an url", async () => {
+        const $tree = $("#tree1");
+
+        const onLoading = jest.fn();
+        $tree.on("tree.loading_data", onLoading);
+
+        $tree.tree({ dataUrl: "/tree/" });
+
+        await waitFor(() => {
+            expect(onLoading).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    isLoading: true,
+                    node: null,
+                }),
             );
         });
+
+        await waitFor(() => {
+            expect(onLoading).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    isLoading: false,
+                    node: null,
+                }),
+            );
+        });
+    });
+});
+
+describe("onLoading", () => {
+    const server = setupServer(
+        http.get("/tree/", () => HttpResponse.json(exampleData)),
+    );
+    beforeEach(() => {
+        server.listen();
+    });
+
+    afterAll(() => {
+        server.close();
+    });
+
+    it("calls onLoading", async () => {
+        const $tree = $("#tree1");
+        const onLoading = jest.fn();
+
+        $tree.tree({ dataUrl: "/tree/", onLoading });
+
+        await waitFor(() => {
+            expect(onLoading).toHaveBeenCalledWith(false, null, $tree);
+        });
+
+        await waitFor(() => {
+            expect(onLoading).toHaveBeenCalledWith(false, null, $tree);
+        });
     });
 });

package/src/test/jqTree/keyboard.test.ts

@@ -1,4 +1,5 @@
 import getGiven from "givens";
+import { userEvent } from "@testing-library/user-event";
 import "../../tree.jquery";
 import exampleData from "../support/exampleData";
 
@@ -18,22 +19,16 @@ describe("keyboard support", () => {
     interface Vars {
         autoOpen: boolean;
         initialSelectedNode: INode | null;
-        pressedKey: number;
+        pressedKey: string;
         $tree: JQuery<HTMLElement>;
     }
 
-    const KEY_DOWN = 40;
-    const KEY_LEFT = 37;
-    const KEY_RIGHT = 39;
-    const KEY_UP = 38;
-    const KEY_PAGE_UP = 33;
-
     const given = getGiven<Vars>();
     given("autoOpen", () => false);
     given("initialSelectedNode", () => null);
     given("$tree", () => $("#tree1"));
 
-    beforeEach(() => {
+    beforeEach(async () => {
         given.$tree.tree({
             animationSpeed: 0,
             autoOpen: given.autoOpen,
@@ -44,15 +39,15 @@ describe("keyboard support", () => {
             given.$tree.tree("selectNode", given.initialSelectedNode);
         }
 
-        given.$tree.trigger($.Event("keydown", { which: given.pressedKey }));
+        await userEvent.keyboard(`{${given.pressedKey}}`);
     });
 
     context("with key down", () => {
-        given("pressedKey", () => KEY_DOWN);
+        given("pressedKey", () => "ArrowDown");
 
         context("when a node is selected", () => {
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node1")
+                given.$tree.tree("getNodeByNameMustExist", "node1"),
             );
 
             it("selects the next node", () => {
@@ -71,7 +66,7 @@ describe("keyboard support", () => {
 
         context("when the last node is selected", () => {
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node2")
+                given.$tree.tree("getNodeByNameMustExist", "node2"),
             );
 
             it("keeps the node selected", () => {
@@ -83,11 +78,11 @@ describe("keyboard support", () => {
     });
 
     context("with key up", () => {
-        given("pressedKey", () => KEY_UP);
+        given("pressedKey", () => "ArrowUp");
 
         context("when a node is selected", () => {
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node2")
+                given.$tree.tree("getNodeByNameMustExist", "node2"),
             );
 
             it("selects the next node", () => {
@@ -106,11 +101,11 @@ describe("keyboard support", () => {
     });
 
     context("with key right", () => {
-        given("pressedKey", () => KEY_RIGHT);
+        given("pressedKey", () => "ArrowRight");
 
         context("when a closed folder is selected", () => {
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node1")
+                given.$tree.tree("getNodeByNameMustExist", "node1"),
             );
 
             it("opens the folder", () => {
@@ -132,7 +127,7 @@ describe("keyboard support", () => {
         context("when an open folder is selected", () => {
             given("autoOpen", () => true);
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node1")
+                given.$tree.tree("getNodeByNameMustExist", "node1"),
             );
 
             it("selects the first child", () => {
@@ -168,7 +163,7 @@ describe("keyboard support", () => {
 
         context("when a child is selected", () => {
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "child1")
+                given.$tree.tree("getNodeByNameMustExist", "child1"),
             );
 
             it("does nothing", () => {
@@ -179,11 +174,11 @@ describe("keyboard support", () => {
         });
     });
     context("with key left", () => {
-        given("pressedKey", () => KEY_LEFT);
+        given("pressedKey", () => "ArrowLeft");
 
         context("when a closed folder is selected", () => {
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node3")
+                given.$tree.tree("getNodeByNameMustExist", "node3"),
             );
 
             it("selects the previous node", () => {
@@ -210,7 +205,7 @@ describe("keyboard support", () => {
         context("when an open folder is selected", () => {
             given("autoOpen", () => true);
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node2")
+                given.$tree.tree("getNodeByNameMustExist", "node2"),
             );
 
             it("closes the folder", () => {
@@ -237,10 +232,10 @@ describe("keyboard support", () => {
     });
 
     context("with page up key", () => {
-        given("pressedKey", () => KEY_PAGE_UP);
+        given("pressedKey", () => "PageUp");
 
         given("initialSelectedNode", () =>
-            given.$tree.tree("getNodeByNameMustExist", "child1")
+            given.$tree.tree("getNodeByNameMustExist", "child1"),
         );
 
         it("does nothing", () => {

package/src/test/jqTree/loadOnDemand.test.ts

@@ -1,6 +1,7 @@
 import getGiven from "givens";
 import { screen } from "@testing-library/dom";
-import { rest } from "msw";
+import { userEvent } from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
 import { setupServer } from "msw/node";
 import "../../tree.jquery";
 import { togglerLink } from "../support/testUtil";
@@ -47,16 +48,16 @@ context("when a node has load_on_demand in the data", () => {
 
     beforeEach(() => {
         server.use(
-            rest.get("/tree/", (request, response, ctx) => {
-                const parentId = request.url.searchParams.get("node");
+            http.get("/tree/", ({ request }) => {
+                const url = new URL(request.url);
+                const parentId = url.searchParams.get("node");
 
                 if (parentId === "1") {
-                    return response(
-                        ctx.status(200),
-                        ctx.json([{ id: 2, name: "loaded-on-demand" }]),
-                    );
+                    return HttpResponse.json([
+                        { id: 2, name: "loaded-on-demand" },
+                    ]);
                 } else {
-                    return response(ctx.status(400));
+                    return new HttpResponse(null, { status: 400 });
                 }
             }),
         );
@@ -91,7 +92,8 @@ context("when a node has load_on_demand in the data", () => {
         );
 
         it("loads the subtree", async () => {
-            togglerLink(given.node.element).trigger("click");
+            const toggler = togglerLink(given.node.element);
+            await userEvent.click(toggler.get(0) as HTMLElement);
 
             await screen.findByText("loaded-on-demand");
 
@@ -106,20 +108,21 @@ context("when a node has load_on_demand in the data", () => {
             ]);
         });
 
-        context("when the node is selected and has the focus", () => {
+        context("when the node is selected", () => {
             beforeEach(() => {
                 given.$tree.tree("selectNode", given.node);
             });
 
-            it("keeps the node selected and focused", async () => {
+            it("keeps the node selected", async () => {
                 expect(given.node.element).toBeSelected();
                 expect(given.node.element).toBeFocused();
 
-                togglerLink(given.node.element).trigger("click");
+                const toggler = togglerLink(given.node.element);
+                await userEvent.click(toggler.get(0) as HTMLElement);
+
                 await screen.findByText("loaded-on-demand");
 
                 expect(given.node.element).toBeSelected();
-                expect(given.node.element).toBeFocused();
             });
         });
 
@@ -127,7 +130,9 @@ context("when a node has load_on_demand in the data", () => {
             it("doesn't select the node", async () => {
                 expect(given.node.element).not.toBeSelected();
 
-                togglerLink(given.node.element).trigger("click");
+                const toggler = togglerLink(given.node.element);
+                await userEvent.click(toggler.get(0) as HTMLElement);
+
                 await screen.findByText("loaded-on-demand");
 
                 expect(given.node.element).not.toBeSelected();
@@ -144,7 +149,9 @@ context("when a node has load_on_demand in the data", () => {
                 expect(given.node.element).toBeSelected();
                 expect(given.node.element).not.toBeFocused();
 
-                togglerLink(given.node.element).trigger("click");
+                const toggler = togglerLink(given.node.element);
+                await userEvent.click(toggler.get(0) as HTMLElement);
+
                 await screen.findByText("loaded-on-demand");
 
                 expect(given.node.element).toBeSelected();

package/src/test/jqTree/methods.test.ts

@@ -1,6 +1,7 @@
 import getGiven from "givens";
 import { screen, waitFor } from "@testing-library/dom";
-import { rest } from "msw";
+import { http, HttpResponse } from "msw";
+import { userEvent } from "@testing-library/user-event";
 import { setupServer } from "msw/node";
 import "../../tree.jquery";
 import exampleData from "../support/exampleData";
@@ -134,7 +135,7 @@ describe("addToSelection", () => {
     given("child1", () => given.$tree.tree("getNodeByNameMustExist", "child1"));
     given("child2", () => given.$tree.tree("getNodeByNameMustExist", "child2"));
 
-    beforeEach(() => {
+    it("selects the nodes", () => {
         given.$tree.tree({
             autoOpen: true,
             data: exampleData,
@@ -142,15 +143,21 @@ describe("addToSelection", () => {
 
         given.$tree.tree("addToSelection", given.child1);
         given.$tree.tree("addToSelection", given.child2);
-    });
 
-    it("selects the nodes", () => {
         expect(given.$tree.tree("getSelectedNodes")).toEqual(
             expect.arrayContaining([given.child1, given.child2]),
         );
     });
 
     it("renders the nodes correctly", () => {
+        given.$tree.tree({
+            autoOpen: true,
+            data: exampleData,
+        });
+
+        given.$tree.tree("addToSelection", given.child1);
+        given.$tree.tree("addToSelection", given.child2);
+
         expect(given.$tree).toHaveTreeStructure([
             expect.objectContaining({
                 name: "node1",
@@ -172,6 +179,20 @@ describe("addToSelection", () => {
             }),
         ]);
     });
+
+    it("opens the parent node when it's closed", () => {
+        given.$tree.tree({
+            autoOpen: false,
+            data: exampleData,
+        });
+
+        const node1 = given.$tree.tree("getNodeByNameMustExist", "node1");
+        expect(node1.is_open).toBeFalsy();
+
+        given.$tree.tree("addToSelection", given.child1);
+
+        expect(node1.is_open).toBe(true);
+    });
 });
 
 describe("appendNode", () => {
@@ -749,9 +770,7 @@ describe("loadDataFromUrl", () => {
 
     beforeEach(() => {
         server.use(
-            rest.get("/tree/", (_request, response, ctx) =>
-                response(ctx.status(200), ctx.json(given.serverData)),
-            ),
+            http.get("/tree/", () => HttpResponse.json(given.serverData)),
         );
 
         given.$tree.tree({ data: given.initialData });
@@ -1011,11 +1030,7 @@ describe("reload", () => {
     given("$tree", () => $("#tree1"));
 
     beforeEach(async () => {
-        server.use(
-            rest.get("/tree2/", (_request, response, ctx) =>
-                response(ctx.status(200), ctx.json(exampleData)),
-            ),
-        );
+        server.use(http.get("/tree2/", () => HttpResponse.json(exampleData)));
 
         given.$tree.tree({ dataUrl: "/tree2/" });
         await screen.findByText("node1");
@@ -1207,6 +1222,15 @@ describe("selectNode", () => {
             expect(given.$tree.tree("getSelectedNode")).toBeFalse();
         });
     });
+
+    it("opens the parent node when it's closed", () => {
+        expect(given.node1.is_open).toBeFalsy();
+
+        const child1 = given.$tree.tree("getNodeByNameMustExist", "child1");
+        given.$tree.tree("selectNode", child1);
+
+        expect(given.node1.is_open).toBe(true);
+    });
 });
 
 describe("setOption", () => {
@@ -1226,9 +1250,11 @@ describe("setOption", () => {
     given("node1", () => given.$tree.tree("getNodeByNameMustExist", "node1"));
     given("$tree", () => $("#tree1"));
 
-    it("sets an option", () => {
+    it("sets an option", async () => {
         given.$tree.tree("setOption", "selectable", true);
-        titleSpan(given.node1.element).trigger("click");
+        await userEvent.click(
+            titleSpan(given.node1.element).get(0) as HTMLElement,
+        );
         expect(given.$tree.tree("getSelectedNode")).toMatchObject({
             name: "node1",
         });

package/src/test/jqTree/mouse.test.ts

@@ -0,0 +1,82 @@
+import "../../tree.jquery";
+import { userEvent } from "@testing-library/user-event";
+import exampleData from "../support/exampleData";
+import { titleSpan, togglerLink } from "../support/testUtil";
+
+beforeEach(() => {
+    $("body").append('<div id="tree1"></div>');
+});
+
+afterEach(() => {
+    const $tree = $("#tree1");
+    $tree.tree("destroy");
+    $tree.remove();
+});
+
+it("selects a node and sets the focus when it is clicked", async () => {
+    const $tree = $("#tree1");
+    $tree.tree({ data: exampleData });
+
+    const node = $tree.tree("getNodeByNameMustExist", "node1");
+    expect(node.element).not.toBeSelected();
+    expect(node.element).not.toBeFocused();
+
+    await userEvent.click(titleSpan(node.element).get(0) as HTMLElement);
+
+    expect(node.element).toBeSelected();
+});
+
+it("deselects when a selected node is clicked", async () => {
+    const $tree = $("#tree1");
+    $tree.tree({ data: exampleData });
+
+    const node = $tree.tree("getNodeByNameMustExist", "node1");
+    $tree.tree("selectNode", node);
+
+    expect(node.element).toBeSelected();
+
+    await userEvent.click(titleSpan(node.element).get(0) as HTMLElement);
+
+    expect(node.element).not.toBeSelected();
+});
+
+it("opens a node when the toggle button is clicked", async () => {
+    const $tree = $("#tree1");
+    $tree.tree({ data: exampleData });
+
+    const node = $tree.tree("getNodeByNameMustExist", "node1");
+    expect(node.element).not.toBeOpen();
+
+    await userEvent.click(togglerLink(node.element).get(0) as HTMLElement);
+
+    expect(node.element).toBeOpen();
+});
+
+it("doesn't select a node when it is opened", async () => {
+    const $tree = $("#tree1");
+    $tree.tree({ data: exampleData });
+
+    const node = $tree.tree("getNodeByNameMustExist", "node1");
+    expect(node.element).not.toBeSelected();
+    expect(node.element).not.toBeOpen();
+
+    await userEvent.click(togglerLink(node.element).get(0) as HTMLElement);
+
+    expect(node.element).not.toBeSelected();
+    expect(node.element).toBeOpen();
+});
+
+it("keeps it selected when a selected node is opened", async () => {
+    const $tree = $("#tree1");
+    $tree.tree({ data: exampleData });
+
+    const node = $tree.tree("getNodeByNameMustExist", "node1");
+    $tree.tree("selectNode", node);
+    expect(node.element).toBeSelected();
+    expect(node.element).not.toBeOpen();
+
+    await userEvent.click(togglerLink(node.element).get(0) as HTMLElement);
+
+    expect(node.element).toBeSelected();
+    expect(node.element).toBeOpen();
+});