jqtree 1.8.0 → 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/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";
@@ -769,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 });
@@ -1031,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");
@@ -1255,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();
+});

package/src/test/jqTree/options.test.ts

@@ -1,6 +1,6 @@
 import getGiven from "givens";
 import { screen, waitFor } from "@testing-library/dom";
-import { rest } from "msw";
+import { http, HttpResponse } from "msw";
 import { setupServer } from "msw/node";
 import "../../tree.jquery";
 import exampleData from "../support/exampleData";
@@ -257,11 +257,11 @@ describe("dataUrl", () => {
 
     beforeEach(() => {
         server.use(
-            rest.get("/tree/", (request, response, ctx) => {
+            http.get("/tree/", ({ request }) => {
                 const nodeName = request.headers.get("node");
                 const data = nodeName ? [nodeName] : exampleData;
 
-                return response(ctx.status(200), ctx.json(data));
+                return HttpResponse.json(data);
             }),
         );
     });
@@ -411,11 +411,12 @@ describe("onLoadFailed", () => {
     context("when the loading fails", () => {
         beforeEach(() => {
             server.use(
-                rest.get("/tree/", (_request, response, ctx) =>
-                    response(
-                        ctx.status(500),
-                        ctx.body("Internal server error"),
-                    ),
+                http.get(
+                    "/tree/",
+                    () =>
+                        new HttpResponse("Internal server error", {
+                            status: 500,
+                        }),
                 ),
             );
         });

package/src/test/node.test.ts

@@ -1,5 +1,6 @@
 import getGiven from "givens";
-import { Node, Position } from "../node";
+import { Node } from "../node";
+import { Position } from "../position";
 import exampleData from "./support/exampleData";
 import "jest-extended";
 

package/src/test/{nodeUtil.test.ts → position.test.ts}

@@ -1,4 +1,4 @@
-import { getPosition, getPositionName, Position } from "../node";
+import { getPosition, getPositionName, Position } from "../position";
 
 const context = describe;