jqtree 1.6.0 → 1.6.3

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

@@ -1,6 +1,5 @@
-import * as $ from "jquery";
 import getGiven from "givens";
-import { screen } from "@testing-library/dom";
+import { screen, waitFor } from "@testing-library/dom";
 import { rest } from "msw";
 import { setupServer } from "msw/node";
 import "../../tree.jquery";
@@ -10,17 +9,25 @@ import __version__ from "../../version";
 
 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();
     localStorage.clear();
 });
 
+afterAll(() => server.close());
+
 describe("addNodeAfter", () => {
     interface Vars {
         node: INode;
@@ -740,22 +747,13 @@ describe("loadDataFromUrl", () => {
     given("serverData", () => exampleData);
     given("$tree", () => $("#tree1"));
 
-    let server: ReturnType<typeof setupServer> | null = null;
-
-    beforeAll(() => {
-        server = setupServer(
-            rest.get("/tree/", (_request, response, ctx) => {
-                return response(ctx.status(200), ctx.json(given.serverData));
-            })
+    beforeEach(() => {
+        server.use(
+            rest.get("/tree/", (_request, response, ctx) =>
+                response(ctx.status(200), ctx.json(given.serverData))
+            )
         );
-        server.listen();
-    });
-
-    afterAll(() => {
-        server?.close();
-    });
 
-    beforeEach(() => {
         given.$tree.tree({ data: given.initialData });
     });
 
@@ -910,12 +908,15 @@ describe("openNode", () => {
     });
 
     context("with onFinished parameter", () => {
-        it("calls the function", () =>
-            new Promise((resolve) =>
-                given.$tree.tree("openNode", given.node1, (node) =>
-                    resolve(expect(node).toBe(given.node1))
-                )
-            ));
+        it("calls the function", async () => {
+            const onFinished = jest.fn();
+
+            given.$tree.tree("openNode", given.node1, onFinished);
+
+            await waitFor(() => {
+                expect(onFinished).toHaveBeenCalledWith(given.node1);
+            });
+        });
     });
 });
 
@@ -967,6 +968,38 @@ describe("prependNode", () => {
     });
 });
 
+describe("refresh", () => {
+    interface Vars {
+        $tree: JQuery<HTMLElement>;
+    }
+
+    const given = getGiven<Vars>();
+    given("$tree", () => $("#tree1"));
+
+    beforeEach(() => {
+        given.$tree.tree({
+            data: exampleData,
+        });
+    });
+
+    it("rerenders the tree", () => {
+        const tree = given.$tree.tree("getTree");
+        tree.children[0].name = "node1a";
+
+        expect(given.$tree).toHaveTreeStructure([
+            expect.objectContaining({ name: "node1" }),
+            expect.objectContaining({ name: "node2" }),
+        ]);
+
+        given.$tree.tree("refresh");
+
+        expect(given.$tree).toHaveTreeStructure([
+            expect.objectContaining({ name: "node1a" }),
+            expect.objectContaining({ name: "node2" }),
+        ]);
+    });
+});
+
 describe("reload", () => {
     interface Vars {
         node1: INode;
@@ -977,23 +1010,14 @@ describe("reload", () => {
     given("node1", () => given.$tree.tree("getNodeByNameMustExist", "node1"));
     given("$tree", () => $("#tree1"));
 
-    let server: ReturnType<typeof setupServer> | null = null;
-
-    beforeAll(() => {
-        server = setupServer(
-            rest.get("/tree/", (_request, response, ctx) =>
+    beforeEach(async () => {
+        server.use(
+            rest.get("/tree2/", (_request, response, ctx) =>
                 response(ctx.status(200), ctx.json(exampleData))
             )
         );
-        server.listen();
-    });
 
-    afterAll(() => {
-        server?.close();
-    });
-
-    beforeEach(async () => {
-        given.$tree.tree({ dataUrl: "/tree/" });
+        given.$tree.tree({ dataUrl: "/tree2/" });
         await screen.findByText("node1");
 
         given.$tree.tree("removeNode", given.node1);
@@ -1014,19 +1038,18 @@ describe("reload", () => {
     });
 
     context("with a onFinished parameter", () => {
-        it("calls onFinished", () =>
-            new Promise<void>((resolve) => {
-                const handleFinished = () => {
-                    expect(given.$tree).toHaveTreeStructure([
-                        expect.objectContaining({ name: "node1" }),
-                        expect.objectContaining({ name: "node2" }),
-                    ]);
+        it("calls onFinished", async () => {
+            const handleFinished = jest.fn();
 
-                    resolve();
-                };
+            given.$tree.tree("reload", handleFinished);
 
-                given.$tree.tree("reload", handleFinished);
-            }));
+            await waitFor(() => expect(handleFinished).toHaveBeenCalledWith());
+
+            expect(given.$tree).toHaveTreeStructure([
+                expect.objectContaining({ name: "node1" }),
+                expect.objectContaining({ name: "node2" }),
+            ]);
+        });
     });
 });
 
@@ -1149,7 +1172,7 @@ describe("selectNode", () => {
 
         it("selects the node and deselects the previous node", () => {
             expect(given.node1.element).toBeSelected();
-            expect(given.node2.element).notToBeSelected();
+            expect(given.node2.element).not.toBeSelected();
         });
     });
 
@@ -1170,7 +1193,7 @@ describe("selectNode", () => {
 
         it("deselects the node", () => {
             given.$tree.tree("selectNode", given.node1);
-            expect(given.node1.element).notToBeSelected();
+            expect(given.node1.element).not.toBeSelected();
         });
     });
 
@@ -1436,13 +1459,7 @@ describe("updateNode", () => {
         });
 
         it("keeps the focus on the node", () => {
-            expect(document.activeElement).not.toBeNil();
-            expect(
-                given.$tree.tree(
-                    "getNodeByHtmlElement",
-                    document.activeElement as HTMLElement
-                )
-            ).not.toBeNil();
+            expect(given.node.element).toBeFocused();
         });
     });
 });

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

@@ -1,6 +1,5 @@
-import * as $ from "jquery";
 import getGiven from "givens";
-import { screen } from "@testing-library/dom";
+import { screen, waitFor } from "@testing-library/dom";
 import { rest } from "msw";
 import { setupServer } from "msw/node";
 import "../../tree.jquery";
@@ -9,17 +8,25 @@ import { titleSpan, togglerLink } 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();
     localStorage.clear();
 });
 
+afterAll(() => server.close());
+
 describe("autoEscape", () => {
     interface Vars {
         autoEscape: boolean;
@@ -187,10 +194,8 @@ describe("dataUrl", () => {
         },
     ];
 
-    let server: ReturnType<typeof setupServer> | null = null;
-
-    beforeAll(() => {
-        server = setupServer(
+    beforeEach(() => {
+        server.use(
             rest.get("/tree/", (request, response, ctx) => {
                 const nodeName = request.headers.get("node");
                 const data = nodeName ? [nodeName] : exampleData;
@@ -198,11 +203,6 @@ describe("dataUrl", () => {
                 return response(ctx.status(200), ctx.json(data));
             })
         );
-        server.listen();
-    });
-
-    afterAll(() => {
-        server?.close();
     });
 
     interface Vars {
@@ -348,31 +348,28 @@ describe("onLoadFailed", () => {
     given("$tree", () => $("#tree1"));
 
     context("when the loading fails", () => {
-        let server: ReturnType<typeof setupServer> | null = null;
-
-        beforeAll(() => {
-            server = setupServer(
+        beforeEach(() => {
+            server.use(
                 rest.get("/tree/", (_request, response, ctx) =>
                     response(ctx.status(500), ctx.body("Internal server error"))
                 )
             );
-            server.listen();
         });
 
-        afterAll(() => {
-            server?.close();
-        });
+        it("calls onLoadFailed", async () => {
+            const onLoadFailed = jest.fn();
+
+            given.$tree.tree({
+                dataUrl: "/tree/",
+                onLoadFailed,
+            });
 
-        it("calls onLoadFailed", () =>
-            new Promise<void>((done) => {
-                given.$tree.tree({
-                    dataUrl: "/tree/",
-                    onLoadFailed: (jqXHR) => {
-                        expect(jqXHR.status).toBe(500);
-                        done();
-                    },
-                });
-            }));
+            await waitFor(() => {
+                expect(onLoadFailed).toHaveBeenCalledWith(
+                    expect.objectContaining({ status: 500 })
+                );
+            });
+        });
     });
 });
 
@@ -391,7 +388,7 @@ describe("rtl", () => {
         });
 
         it("has a different closed icon", () => {
-            expect(togglerLink(given.node1.element).text()).toEqual("◀");
+            expect(togglerLink(given.node1.element).text()).toBe("◀");
         });
     });
 
@@ -402,7 +399,7 @@ describe("rtl", () => {
         });
 
         it("has a different closed icon", () => {
-            expect(togglerLink(given.node1.element).text()).toEqual("◀");
+            expect(togglerLink(given.node1.element).text()).toBe("◀");
         });
     });
 });
@@ -434,7 +431,7 @@ describe("saveState", () => {
             given("saveState", () => true);
 
             it("saves the state to local storage", () => {
-                expect(localStorage.getItem("tree")).toEqual(
+                expect(localStorage.getItem("tree")).toBe(
                     '{"open_nodes":[123],"selected_node":[123]}'
                 );
             });
@@ -444,7 +441,7 @@ describe("saveState", () => {
             given("saveState", () => "my-state");
 
             it("uses the string as a key", () => {
-                expect(localStorage.getItem("my-state")).toEqual(
+                expect(localStorage.getItem("my-state")).toBe(
                     '{"open_nodes":[123],"selected_node":[123]}'
                 );
             });

package/src/test/node.test.ts

@@ -855,13 +855,13 @@ describe("hasChildren", () => {
         });
 
         it("returns true", () => {
-            expect(given.node.hasChildren()).toEqual(true);
+            expect(given.node.hasChildren()).toBe(true);
         });
     });
 
     context("when a node doesn't have children", () => {
         it("returns false", () => {
-            expect(given.node.hasChildren()).toEqual(false);
+            expect(given.node.hasChildren()).toBe(false);
         });
     });
 });

package/src/test/support/jqTreeMatchers.ts

@@ -1,4 +1,5 @@
 import treeStructure from "./treeStructure";
+import { titleSpan } from "./testUtil";
 
 const assertJqTreeFolder = ($el: JQuery<HTMLElement>) => {
     /* istanbul ignore if */
@@ -8,15 +9,6 @@ const assertJqTreeFolder = ($el: JQuery<HTMLElement>) => {
 };
 
 expect.extend({
-    notToBeSelected(el: HTMLElement | JQuery<HTMLElement>) {
-        const $el = jQuery(el);
-
-        /* istanbul ignore next */
-        return {
-            message: () => "The node is selected",
-            pass: !$el.hasClass("jqtree-selected"),
-        };
-    },
     toBeClosed(el: HTMLElement | JQuery<HTMLElement>) {
         const $el = jQuery(el);
         assertJqTreeFolder($el);
@@ -27,6 +19,13 @@ expect.extend({
             pass: $el.hasClass("jqtree-closed"),
         };
     },
+    toBeFocused(el: HTMLElement | JQuery<HTMLElement>) {
+        /* istanbul ignore next */
+        return {
+            message: () => "The is node is not focused",
+            pass: document.activeElement === titleSpan(el)[0],
+        };
+    },
     toBeOpen(el: HTMLElement | JQuery<HTMLElement>) {
         const $el = jQuery(el);
         assertJqTreeFolder($el);

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

@@ -22,12 +22,10 @@ declare namespace JQTreeMatchers {
 declare namespace jest {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     interface Matchers<R> {
-        notToBeSelected(): boolean;
         toBeClosed(): boolean;
+        toBeFocused(): boolean;
         toBeOpen(): boolean;
         toBeSelected(): boolean;
-        toHaveTreeStructure(
-            treeStructure: JQTreeMatchers.TreeStructure
-        ): boolean;
+        toHaveTreeStructure(treeStructure: any): boolean;
     }
 }

package/src/test/support/setupTests.ts

@@ -1,4 +1,5 @@
-import * as jQuery from "jquery";
+import jQuery from "jquery";
 import "./jqTreeMatchers";
 
+(window as any).$ = jQuery; // eslint-disable-line @typescript-eslint/no-unsafe-member-access
 (window as any).jQuery = jQuery; // eslint-disable-line @typescript-eslint/no-unsafe-member-access

package/src/tree.jquery.d.ts

@@ -1,21 +1,26 @@
 type NodeId = number | string;
 
-type DefaultRecord = Record<string, unknown>;
-type NodeData = string | DefaultRecord;
+interface NodeRecord {
+    [key: string]: unknown;
+    id?: NodeId;
+    children?: NodeData[];
+}
+
+type NodeData = string | NodeRecord;
 
 type IterateCallback = (node: INode, level: number) => boolean;
 
-declare class INode {
-    public id?: NodeId;
-    public name: string;
-    public children: INode[];
-    public element: HTMLElement;
-    public is_open: boolean;
-    public parent: INode | null;
+interface INode {
+    id?: NodeId;
+    name: string;
+    children: INode[];
+    element: HTMLElement;
+    is_open: boolean;
+    parent: INode | null;
 
     [key: string]: unknown;
 
-    public iterate(callback: IterateCallback): void;
+    iterate(callback: IterateCallback): void;
 }
 
 type DataUrlFunction = (node?: Node) => JQuery.AjaxSettings;
@@ -41,7 +46,7 @@ interface IJQTreeOptions {
     buttonLeft?: boolean;
     closedIcon?: string | Element;
     data?: NodeData[];
-    dataFilter?: (data: unknown) => NodeData[];
+    dataFilter?: (data: NodeData[]) => NodeData[];
     dataUrl?: DataUrl;
     dragAndDrop?: boolean;
     nodeClass?: any;
@@ -57,7 +62,7 @@ interface IJQTreeOptions {
     onGetStateFromStorage?: () => string;
     onSetStateFromStorage?: (data: string) => void;
     openedIcon?: string | Element;
-    openFolderDelay?: number;
+    openFolderDelay?: number | false;
     rtl?: boolean;
     selectable?: boolean;
     saveState?: boolean | string;
@@ -135,13 +140,14 @@ interface IJQTreePlugin {
         onFinished?: (node: INode) => void
     ): JQuery;
     (behavior: "prependNode", newNodeInfo: NodeData, parentNode?: INode): INode;
+    (behavior: "refresh"): JQuery;
     (behavior: "reload", onFinished?: () => void): JQuery;
     (behavior: "removeFromSelection", node: INode): JQuery;
     (behavior: "removeNode", node: INode): JQuery;
     (behavior: "scrollToNode", node: INode): JQuery;
     (behavior: "selectNode", node: INode | null): JQuery;
     (behavior: "setOption", option: string, value: unknown): JQuery;
-    (behavior: "setState", options: DefaultRecord): JQuery;
+    (behavior: "setState", options: Record<string, unknown>): JQuery;
     (behavior: "toggle", node: INode, slideParam?: boolean): JQuery;
     (behavior: "toJson"): string;
     (behavior: "updateNode", node: INode, data: NodeData): JQuery;

package/src/tree.jquery.ts

@@ -1,23 +1,19 @@
 import __version__ from "./version";
-import * as jQueryProxy from "jquery";
 import { DragAndDropHandler } from "./dragAndDropHandler";
 import ElementsRenderer from "./elementsRenderer";
 import DataLoader, { HandleFinishedLoading } from "./dataLoader";
 import KeyHandler from "./keyHandler";
 import MouseWidget from "./mouse.widget";
 import { PositionInfo } from "./types";
-import SaveStateHandler from "./saveStateHandler";
+import SaveStateHandler, { SavedState } from "./saveStateHandler";
 import ScrollHandler from "./scrollHandler";
 import SelectNodeHandler from "./selectNodeHandler";
 import SimpleWidget from "./simple.widget";
-import { Node, NodeId, getPosition, NodeData } from "./node";
+import { Node, getPosition } from "./node";
 import { isFunction } from "./util";
 import { FolderElement, NodeElement, OnFinishOpenNode } from "./nodeElement";
 import { JQTreeOptions } from "./jqtreeOptions";
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-const jQuery: JQueryStatic = (<any>jQueryProxy).default || jQueryProxy;
-
 interface ClickTarget {
     node: Node;
     type: "button" | "label";
@@ -167,6 +163,11 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         return this.element;
     }
 
+    public refresh(): JQuery {
+        this._refreshElements(null);
+        return this.element;
+    }
+
     public getNodeById(nodeId: NodeId): Node | null {
         return this.tree.getNodeById(nodeId);
     }
@@ -366,19 +367,12 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             node.removeChildren();
 
             if (data.children.length) {
-                node.loadFromData(data.children);
+                node.loadFromData(data.children as Node[]);
             }
         }
 
-        const mustSetFocus = this.selectNodeHandler.isFocusOnTree();
-        const mustSelect = this.isSelectedNodeInSubtree(node);
-
         this._refreshElements(node);
 
-        if (mustSelect) {
-            this.selectCurrentNode(mustSetFocus);
-        }
-
         return this.element;
     }
 
@@ -486,7 +480,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     }
 
     public setOption(option: string, value: unknown): JQuery {
-        ((this.options as unknown) as Record<string, unknown>)[option] = value;
+        (this.options as unknown as Record<string, unknown>)[option] = value;
         return this.element;
     }
 
@@ -514,7 +508,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
     public _triggerEvent(
         eventName: string,
-        values?: DefaultRecord
+        values?: Record<string, unknown>
     ): JQuery.Event {
         const event = jQuery.Event(eventName, values);
         this.element.trigger(event);
@@ -528,7 +522,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     ): void {
         const doOpenNode = (
             _node: Node,
-            _slide: any,
+            _slide: boolean,
             _onFinished: OnFinishOpenNode | null
         ): void => {
             const folderElement = new FolderElement(_node, this);
@@ -564,8 +558,17 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
      from_node: redraw this subtree
     */
     public _refreshElements(fromNode: Node | null): void {
+        const mustSetFocus = this.selectNodeHandler.isFocusOnTree();
+        const mustSelect = fromNode
+            ? this.isSelectedNodeInSubtree(fromNode)
+            : false;
+
         this.renderer.render(fromNode);
 
+        if (mustSelect) {
+            this.selectCurrentNode(mustSetFocus);
+        }
+
         this._triggerEvent("tree.refresh");
     }
 
@@ -737,7 +740,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
     }
 
-    private initTree(data: any): void {
+    private initTree(data: NodeData[]): void {
         const doInit = (): void => {
             if (!this.isInitialized) {
                 this.isInitialized = true;
@@ -784,9 +787,8 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
                 if (!state) {
                     return [false, false];
                 } else {
-                    const mustLoadOnDemand = this.saveStateHandler.setInitialState(
-                        state
-                    );
+                    const mustLoadOnDemand =
+                        this.saveStateHandler.setInitialState(state);
 
                     // return true: the state is restored
                     return [true, mustLoadOnDemand];
@@ -901,7 +903,9 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
     }
 
-    private handleClick = (e: JQuery.ClickEvent): void => {
+    private handleClick = (
+        e: JQuery.ClickEvent<HTMLElement, any, HTMLElement, HTMLElement>
+    ): void => {
         const clickTarget = this.getClickTarget(e.target);
 
         if (clickTarget) {
@@ -924,7 +928,9 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
     };
 
-    private handleDblclick = (e: JQuery.DoubleClickEvent): void => {
+    private handleDblclick = (
+        e: JQuery.DoubleClickEvent<HTMLElement, any, HTMLElement, HTMLElement>
+    ): void => {
         const clickTarget = this.getClickTarget(e.target);
 
         if (clickTarget?.type === "label") {
@@ -974,7 +980,9 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
     }
 
-    private handleContextmenu = (e: JQuery.ContextMenuEvent) => {
+    private handleContextmenu = (
+        e: JQuery.ContextMenuEvent<HTMLElement, any, HTMLElement, HTMLElement>
+    ) => {
         const $div = jQuery(e.target).closest("ul.jqtree-tree .jqtree-element");
         if ($div.length) {
             const node = this.getNode($div);
@@ -1129,15 +1137,14 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     }
 
     private deselectNodes(parentNode: Node): void {
-        const selectedNodesUnderParent = this.selectNodeHandler.getSelectedNodesUnder(
-            parentNode
-        );
+        const selectedNodesUnderParent =
+            this.selectNodeHandler.getSelectedNodesUnder(parentNode);
         for (const n of selectedNodesUnderParent) {
             this.selectNodeHandler.removeFromSelection(n);
         }
     }
 
-    private loadSubtree(data: any[], parentNode: Node): void {
+    private loadSubtree(data: NodeData[], parentNode: Node): void {
         parentNode.loadFromData(data);
 
         parentNode.load_on_demand = false;

package/src/version.ts

@@ -1,3 +1,3 @@
-const version = "1.6.0";
+const version = "1.6.2";
 
 export default version;