jqtree 1.6.3 → 1.7.1

package/src/nodeElement.ts

@@ -34,7 +34,7 @@ export class NodeElement {
         if (this.mustShowBorderDropHint(position)) {
             return new BorderDropHint(
                 this.$element,
-                this.treeWidget._getScrollLeft()
+                this.treeWidget._getScrollLeft(),
             );
         } else {
             return new GhostDropHint(this.node, this.$element, position);
@@ -45,10 +45,10 @@ export class NodeElement {
         const $li = this.getLi();
 
         $li.addClass("jqtree-selected");
-        $li.attr("aria-selected", "true");
 
         const $span = this.getSpan();
         $span.attr("tabindex", this.treeWidget.options.tabIndex ?? null);
+        $span.attr("aria-selected", "true");
 
         if (mustSetFocus) {
             $span.trigger("focus");
@@ -59,12 +59,12 @@ export class NodeElement {
         const $li = this.getLi();
 
         $li.removeClass("jqtree-selected");
-        $li.attr("aria-selected", "false");
 
         const $span = this.getSpan();
         $span.removeAttr("tabindex");
+        $span.attr("aria-selected", "false");
 
-        $span.blur();
+        $span.trigger("blur");
     }
 
     protected getUl(): JQuery<HTMLElement> {
@@ -81,7 +81,7 @@ export class NodeElement {
         return this.$element;
     }
 
-    protected mustShowBorderDropHint(position: number): boolean {
+    protected mustShowBorderDropHint(position: Position): boolean {
         return position === Position.Inside;
     }
 }
@@ -90,7 +90,7 @@ export class FolderElement extends NodeElement {
     public open(
         onFinished: OnFinishOpenNode | null,
         slide = true,
-        animationSpeed: JQuery.Duration | string = "fast"
+        animationSpeed: JQuery.Duration = "fast",
     ): void {
         if (this.node.is_open) {
             return;
@@ -105,18 +105,21 @@ export class FolderElement extends NodeElement {
         const buttonEl = $button.get(0);
 
         if (buttonEl) {
-            const icon =
-                this.treeWidget.renderer.openedIconElement.cloneNode(true);
+            const openedIconElement =
+                this.treeWidget.renderer.openedIconElement;
 
-            buttonEl.appendChild(icon);
+            if (openedIconElement) {
+                const icon = openedIconElement.cloneNode(true);
+                buttonEl.appendChild(icon);
+            }
         }
 
         const doOpen = (): void => {
             const $li = this.getLi();
             $li.removeClass("jqtree-closed");
 
-            const $span = this.getSpan();
-            $span.attr("aria-expanded", "true");
+            const $titleSpan = this.getSpan();
+            $titleSpan.attr("aria-expanded", "true");
 
             if (onFinished) {
                 onFinished(this.node);
@@ -137,7 +140,7 @@ export class FolderElement extends NodeElement {
 
     public close(
         slide = true,
-        animationSpeed: JQuery.Duration | string = "fast"
+        animationSpeed: JQuery.Duration | undefined = "fast",
     ): void {
         if (!this.node.is_open) {
             return;
@@ -152,18 +155,21 @@ export class FolderElement extends NodeElement {
         const buttonEl = $button.get(0);
 
         if (buttonEl) {
-            const icon =
-                this.treeWidget.renderer.closedIconElement.cloneNode(true);
+            const closedIconElement =
+                this.treeWidget.renderer.closedIconElement;
 
-            buttonEl.appendChild(icon);
+            if (closedIconElement) {
+                const icon = closedIconElement.cloneNode(true);
+                buttonEl.appendChild(icon);
+            }
         }
 
         const doClose = (): void => {
             const $li = this.getLi();
             $li.addClass("jqtree-closed");
 
-            const $span = this.getSpan();
-            $span.attr("aria-expanded", "false");
+            const $titleSpan = this.getSpan();
+            $titleSpan.attr("aria-expanded", "false");
 
             this.treeWidget._triggerEvent("tree.close", {
                 node: this.node,
@@ -178,7 +184,7 @@ export class FolderElement extends NodeElement {
         }
     }
 
-    protected mustShowBorderDropHint(position: number): boolean {
+    protected mustShowBorderDropHint(position: Position): boolean {
         return !this.node.is_open && position === Position.Inside;
     }
 
@@ -217,13 +223,13 @@ class GhostDropHint implements DropHint {
     private node: Node;
     private $ghost: JQuery;
 
-    constructor(node: Node, $element: JQuery<Element>, position: number) {
+    constructor(node: Node, $element: JQuery<Element>, position: Position) {
         this.$element = $element;
 
         this.node = node;
         this.$ghost = jQuery(
             `<li class="jqtree_common jqtree-ghost"><span class="jqtree_common jqtree-circle"></span>
-            <span class="jqtree_common jqtree-line"></span></li>`
+            <span class="jqtree_common jqtree-line"></span></li>`,
         );
 
         if (position === Position.After) {
@@ -252,7 +258,7 @@ class GhostDropHint implements DropHint {
     }
 
     public moveInsideOpenFolder(): void {
-        const childElement = this.node.children[0].element;
+        const childElement = this.node.children[0]?.element;
 
         if (childElement) {
             jQuery(childElement).before(this.$ghost);

package/src/saveStateHandler.ts

@@ -111,7 +111,7 @@ export default class SaveStateHandler {
         const state = this.getStateFromStorage();
 
         if (state && state.selected_node) {
-            return state.selected_node[0];
+            return state.selected_node[0] || null;
         } else {
             return null;
         }

package/src/scrollHandler.ts

@@ -23,7 +23,7 @@ export default class ScrollHandler {
     public scrollToY(top: number): void {
         this.ensureInit();
 
-        if (this.$scrollParent) {
+        if (this.$scrollParent && this.$scrollParent[0]) {
             this.$scrollParent[0].scrollTop = top;
         } else {
             const offset = this.treeWidget.$el.offset();
@@ -121,7 +121,7 @@ export default class ScrollHandler {
         if (
             $scrollParent &&
             $scrollParent.length &&
-            $scrollParent[0].tagName !== "HTML"
+            $scrollParent[0]?.tagName !== "HTML"
         ) {
             this.$scrollParent = $scrollParent;
 
@@ -223,6 +223,10 @@ export default class ScrollHandler {
 
         const scrollParent = $scrollParent[0];
 
+        if (!scrollParent) {
+            return;
+        }
+
         const canScrollRight =
             scrollParent.scrollLeft + scrollParent.clientWidth <
             scrollParent.scrollWidth;

package/src/selectNodeHandler.ts

@@ -16,7 +16,7 @@ export default class SelectNodeHandler {
         const selectedNodes = this.getSelectedNodes();
 
         if (selectedNodes.length) {
-            return selectedNodes[0];
+            return selectedNodes[0] || false;
         } else {
             return false;
         }

package/src/simple.widget.ts

@@ -94,6 +94,8 @@ const register = (widgetClass: unknown, widgetName: string): void => {
             } else {
                 return callFunction(this, functionName, args);
             }
+        } else {
+            return undefined;
         }
     };
 };

package/src/test/.eslintrc

@@ -3,10 +3,12 @@
   "extends": ["plugin:jest/all", "plugin:testing-library/dom"],
   "rules": {
     "jest/consistent-test-it": "off",
-    "jest/prefer-expect-assertions": "off",
+    "jest/max-expects": ["off"],
     "jest/no-duplicate-hooks": "off",
     "jest/no-hooks": "off",
     "jest/no-identical-title": "off",
+    "jest/no-standalone-expect": "off",
+    "jest/prefer-expect-assertions": "off",
     "jest/prefer-strict-equal": "off",
     "jest/require-hook": "off",
     "jest/require-top-level-describe": "off"

package/src/test/jqTree/accessibility.test.ts

@@ -0,0 +1,25 @@
+import { axe, toHaveNoViolations } from "jest-axe";
+import "../../tree.jquery";
+import exampleData from "../support/exampleData";
+
+expect.extend(toHaveNoViolations);
+
+beforeEach(() => {
+    $("body").append('<div id="tree1"></div>');
+});
+
+afterEach(() => {
+    const $tree = $("#tree1");
+    $tree.tree("destroy");
+    $tree.remove();
+});
+
+it("has an accessible ui", async () => {
+    const $tree = $("#tree1");
+    $tree.tree({
+        data: exampleData,
+    });
+    const element = $tree.get()[0] as HTMLElement;
+
+    await expect(axe(element)).resolves.toHaveNoViolations();
+});

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

@@ -1,6 +1,7 @@
 import getGiven from "givens";
 import { rest } from "msw";
 import { setupServer } from "msw/node";
+import { waitFor } from "@testing-library/dom";
 import "../../tree.jquery";
 import exampleData from "../support/exampleData";
 import { titleSpan } from "../support/testUtil";
@@ -41,17 +42,15 @@ describe("tree.click", () => {
         given.$tree.tree({ data: exampleData });
     });
 
-    it("fires tree.click", () =>
-        new Promise<void>((done) => {
-            given.$tree.on("tree.click", (e: unknown) => {
-                const treeClickEvent = e as ClickNodeEvent;
+    it("fires tree.click", () => {
+        const onClick = jest.fn();
+        given.$tree.on("tree.click", onClick);
 
-                expect(treeClickEvent.node).toBe(given.node1);
-                done();
-            });
-
-            given.titleSpan.trigger("click");
-        }));
+        given.titleSpan.trigger("click");
+        expect(onClick).toHaveBeenCalledWith(
+            expect.objectContaining({ node: given.node1 })
+        );
+    });
 });
 
 describe("tree.contextmenu", () => {
@@ -70,17 +69,15 @@ describe("tree.contextmenu", () => {
         given.$tree.tree({ data: exampleData });
     });
 
-    it("fires tree.contextmenu", () =>
-        new Promise<void>((done) => {
-            given.$tree.on("tree.contextmenu", (e: unknown) => {
-                const treeClickEvent = e as ClickNodeEvent;
+    it("fires tree.contextmenu", () => {
+        const onContextMenu = jest.fn();
+        given.$tree.on("tree.contextmenu", onContextMenu);
 
-                expect(treeClickEvent.node).toBe(given.node1);
-                done();
-            });
-
-            given.titleSpan.contextmenu();
-        }));
+        given.titleSpan.trigger("contextmenu");
+        expect(onContextMenu).toHaveBeenCalledWith(
+            expect.objectContaining({ node: given.node1 })
+        );
+    });
 });
 
 describe("tree.dblclick", () => {
@@ -99,17 +96,15 @@ describe("tree.dblclick", () => {
         given.$tree.tree({ data: exampleData });
     });
 
-    it("fires tree.dblclick", () =>
-        new Promise<void>((done) => {
-            given.$tree.on("tree.dblclick", (e: unknown) => {
-                const treeClickEvent = e as ClickNodeEvent;
+    it("fires tree.dblclick", () => {
+        const onDoubleClick = jest.fn();
+        given.$tree.on("tree.dblclick", onDoubleClick);
 
-                expect(treeClickEvent.node).toBe(given.node1);
-                done();
-            });
-
-            given.titleSpan.trigger("dblclick");
-        }));
+        given.titleSpan.trigger("dblclick");
+        expect(onDoubleClick).toHaveBeenCalledWith(
+            expect.objectContaining({ node: given.node1 })
+        );
+    });
 });
 
 describe("tree.init", () => {
@@ -120,22 +115,17 @@ describe("tree.init", () => {
     given("$tree", () => $("#tree1"));
 
     context("with json data", () => {
-        it("is called", () =>
-            new Promise<void>((done) => {
-                given.$tree.on("tree.init", () => {
-                    expect(
-                        given.$tree.tree("getNodeByName", "node2")
-                    ).toMatchObject({
-                        id: 124,
-                        name: "node2",
-                    });
-                    done();
-                });
-
-                given.$tree.tree({
-                    data: exampleData,
-                });
-            }));
+        it("is called", () => {
+            const onInit = jest.fn();
+            given.$tree.on("tree.init", onInit);
+
+            given.$tree.tree({
+                data: exampleData,
+            });
+
+            // eslint-disable-next-line jest/prefer-called-with
+            expect(onInit).toHaveBeenCalled();
+        });
     });
 
     context("with data loaded from an url", () => {
@@ -147,20 +137,17 @@ describe("tree.init", () => {
             );
         });
 
-        it("is called", () =>
-            new Promise<void>((done) => {
-                given.$tree.on("tree.init", () => {
-                    expect(
-                        given.$tree.tree("getNodeByName", "node2")
-                    ).toMatchObject({
-                        id: 124,
-                        name: "node2",
-                    });
-                    done();
-                });
-
-                given.$tree.tree({ dataUrl: "/tree/" });
-            }));
+        it("is called", async () => {
+            const onInit = jest.fn();
+            given.$tree.on("tree.init", onInit);
+
+            given.$tree.tree({ dataUrl: "/tree/" });
+
+            await waitFor(() => {
+                // eslint-disable-next-line jest/prefer-called-with
+                expect(onInit).toHaveBeenCalled();
+            });
+        });
     });
 });
 
@@ -172,16 +159,15 @@ describe("tree.load_data", () => {
     given("$tree", () => $("#tree1"));
 
     context("when the tree is initialized with data", () => {
-        it("fires tree.load_data", () =>
-            new Promise<void>((resolve) => {
-                given.$tree.on("tree.load_data", (e: any) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-                    expect(e.tree_data).toEqual(exampleData);
-                    resolve();
-                });
-
-                given.$tree.tree({ data: exampleData });
-            }));
+        it("fires tree.load_data", () => {
+            const onLoadData = jest.fn();
+            given.$tree.on("tree.load_data", onLoadData);
+
+            given.$tree.tree({ data: exampleData });
+            expect(onLoadData).toHaveBeenCalledWith(
+                expect.objectContaining({ tree_data: exampleData })
+            );
+        });
     });
 });
 
@@ -203,35 +189,35 @@ describe("tree.select", () => {
         });
     });
 
-    it("fires tree.click", () =>
-        new Promise<void>((done) => {
-            given.$tree.on("tree.select", (e: unknown) => {
-                const treeClickEvent = e as ClickNodeEvent;
-
-                expect(treeClickEvent.node).toBe(given.node1);
-                expect(treeClickEvent.deselected_node).toBeNull();
-                done();
-            });
-
-            given.titleSpan.trigger("click");
-        }));
+    it("fires tree.select", () => {
+        const onSelect = jest.fn();
+        given.$tree.on("tree.select", onSelect);
+
+        given.titleSpan.trigger("click");
+        expect(onSelect).toHaveBeenCalledWith(
+            expect.objectContaining({
+                node: given.node1,
+                deselected_node: null,
+            })
+        );
+    });
 
     context("when the node was selected", () => {
         beforeEach(() => {
             given.$tree.tree("selectNode", given.node1);
         });
 
-        it("fires tree.select with node is null", () =>
-            new Promise<void>((done) => {
-                given.$tree.on("tree.select", (e: unknown) => {
-                    const treeClickEvent = e as ClickNodeEvent;
-
-                    expect(treeClickEvent.node).toBeNull();
-                    expect(treeClickEvent.previous_node).toBe(given.node1);
-                    done();
-                });
+        it("fires tree.select with node is null", () => {
+            const onSelect = jest.fn();
+            given.$tree.on("tree.select", onSelect);
 
-                given.titleSpan.trigger("click");
-            }));
+            given.titleSpan.trigger("click");
+            expect(onSelect).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    node: null,
+                    previous_node: given.node1,
+                })
+            );
+        });
     });
 });

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

@@ -984,7 +984,7 @@ describe("refresh", () => {
 
     it("rerenders the tree", () => {
         const tree = given.$tree.tree("getTree");
-        tree.children[0].name = "node1a";
+        (tree.children[0] as INode).name = "node1a";
 
         expect(given.$tree).toHaveTreeStructure([
             expect.objectContaining({ name: "node1" }),