jqtree 1.6.0 → 1.6.3

package/src/playwright/playwright.test.ts

@@ -1,37 +1,27 @@
-/// <reference types="jest-playwright-preset" />
-/// <reference types="expect-playwright" />
-
-import getGiven from "givens";
+import { test, expect, Page } from "@playwright/test";
 import {
     dragAndDrop,
-    expectToBeClosed,
-    expectToBeOpen,
-    expectToBeSelected,
     findNodeElement,
     getTreeStructure,
-    openNode,
     selectNode,
-} from "./testUtil";
-import { matchScreenshot } from "./visualRegression";
+} from "./testUtils";
+import { initCoverage, saveCoverage } from "./coverage";
 
-interface Vars {
+interface InitPageParameters {
+    baseURL?: string;
     dragAndDrop: boolean;
+    page: Page;
 }
 
-const given = getGiven<Vars>();
-given("dragAndDrop", () => false);
-
-beforeEach(async () => {
-    await jestPlaywright.resetPage();
+const initPage = async ({ baseURL, dragAndDrop, page }: InitPageParameters) => {
+    if (!baseURL) {
+        throw new Error("Missing baseURL");
+    }
 
-    await page.goto("http://localhost:8080/test_index.html");
+    await page.goto(`${baseURL}/test_index.html`);
     await page.waitForLoadState("domcontentloaded");
 
-    // Fix error on iphone6 device when collecting coverage
-    await page.evaluate(() => {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-        (window as any)["reportCodeCoverage"] = () => null;
-    });
+    page.on("console", (msg) => console.log(`console: ${msg.text()}`));
 
     await page.evaluate(`
         const $tree = jQuery("#tree1");
@@ -40,75 +30,83 @@ beforeEach(async () => {
             animationSpeed: 0,
             autoOpen: 0,
             data: ExampleData.exampleData,
-            dragAndDrop: ${given.dragAndDrop},
+            dragAndDrop: ${dragAndDrop},
             startDndDelay: 100,
         });
     `);
-});
 
-afterEach(async () => {
-    await jestPlaywright.saveCoverage(page);
-});
+    await page.evaluate(`
+        console.log(window.__coverage__ ? 'Coverage enabled' : 'Coverage not enabled');
+    `);
+};
 
-it("displays a tree", async () => {
-    await expect(page).toHaveText("Saurischia");
-    await expect(page).toHaveText("Ornithischians");
-    await expect(page).toHaveText("Coelophysoids");
+test.beforeEach(async ({ context }) => {
+    await initCoverage(context);
+});
 
-    await matchScreenshot("displays_a_tree");
+test.afterEach(async ({ context }) => {
+    await saveCoverage(context);
 });
 
-it("selects a node", async () => {
-    await expect(page).toHaveText("Saurischia");
-    const saurischia = await findNodeElement("Saurischia");
-    await selectNode(saurischia);
-    await expectToBeSelected(saurischia);
+test.describe("without dragAndDrop", () => {
+    test.beforeEach(async ({ baseURL, page }) => {
+        await initPage({ baseURL, page, dragAndDrop: false });
+    });
 
-    await matchScreenshot("selects_a_node");
-});
+    test("displays a tree", async ({ page }) => {
+        await expect(page.locator("body")).toHaveText(/.*Saurischia.*/);
+        await expect(page.locator("body")).toHaveText(/.*Ornithischians.*/);
+        await expect(page.locator("body")).toHaveText(/.*Coelophysoids.*/);
+
+        const screenshot = await page.screenshot();
+        expect(screenshot).toMatchSnapshot();
+    });
 
-it("opens a node", async () => {
-    await expect(page).toHaveText("Saurischia");
+    test("selects a node", async ({ page }) => {
+        await expect(page.locator("body")).toHaveText(/.*Saurischia.*/);
 
-    const theropods = await findNodeElement("Theropods");
-    await expectToBeClosed(theropods);
-    await openNode(theropods);
-    await expectToBeOpen(theropods);
+        const saurischia = await findNodeElement(page, "Saurischia");
+        await selectNode(saurischia);
 
-    await matchScreenshot("opens_a_node");
+        const screenshot = await page.screenshot();
+        expect(screenshot).toMatchSnapshot();
+    });
 });
 
-describe("dragAndDrop", () => {
-    given("dragAndDrop", () => true);
-
-    it("moves a node", async () => {
-        await dragAndDrop("Herrerasaurians", "Ornithischians");
-
-        await getTreeStructure().then((structure) => {
-            expect(structure).toEqual([
-                expect.objectContaining({
-                    name: "Saurischia",
-                    children: [
-                        expect.objectContaining({ name: "Theropods" }),
-                        expect.objectContaining({ name: "Sauropodomorphs" }),
-                    ],
-                }),
-                expect.objectContaining({
-                    name: "Ornithischians",
-                    children: [
-                        expect.objectContaining({ name: "Herrerasaurians" }),
-                        expect.objectContaining({ name: "Heterodontosaurids" }),
-                        expect.objectContaining({ name: "Thyreophorans" }),
-                        expect.objectContaining({ name: "Ornithopods" }),
-                        expect.objectContaining({
-                            name: "Pachycephalosaurians",
-                        }),
-                        expect.objectContaining({ name: "Ceratopsians" }),
-                    ],
-                }),
-            ]);
-        });
+test.describe("with dragAndDrop", () => {
+    test.beforeEach(async ({ baseURL, page }) => {
+        await initPage({ baseURL, page, dragAndDrop: true });
+    });
 
-        await matchScreenshot("moves_a_node");
+    test("moves a node", async ({ page }) => {
+        await dragAndDrop(page, "Herrerasaurians", "Ornithischians");
+
+        const structure = await getTreeStructure(page);
+
+        expect(structure).toEqual([
+            expect.objectContaining({
+                name: "Saurischia",
+                children: [
+                    expect.objectContaining({ name: "Theropods" }),
+                    expect.objectContaining({ name: "Sauropodomorphs" }),
+                ],
+            }),
+            expect.objectContaining({
+                name: "Ornithischians",
+                children: [
+                    expect.objectContaining({ name: "Herrerasaurians" }),
+                    expect.objectContaining({ name: "Heterodontosaurids" }),
+                    expect.objectContaining({ name: "Thyreophorans" }),
+                    expect.objectContaining({ name: "Ornithopods" }),
+                    expect.objectContaining({
+                        name: "Pachycephalosaurians",
+                    }),
+                    expect.objectContaining({ name: "Ceratopsians" }),
+                ],
+            }),
+        ]);
+
+        const screenshot = await page.screenshot();
+        expect(screenshot).toMatchSnapshot();
     });
 });

package/src/playwright/testUtils.ts

@@ -0,0 +1,122 @@
+import { Page, ElementHandle } from "@playwright/test";
+
+const locateTitle = (page: Page, title: string) =>
+    page.locator(".jqtree-title", {
+        hasText: title,
+    });
+
+export const findNodeElement = async (page: Page, title: string) => {
+    const titleElement = await locateTitle(page, title).elementHandle();
+
+    if (!titleElement) {
+        throw new Error(`Title element not found: ${title}`);
+    }
+
+    const nodeElement = await titleElement.evaluateHandle((el) => {
+        const li = el.closest("li");
+
+        if (!li) {
+            throw Error("Node element not found");
+        }
+
+        return li;
+    });
+
+    return nodeElement;
+};
+
+export const selectNode = async (nodeElement: ElementHandle) => {
+    const titleHandle = await nodeElement.$(".jqtree-title");
+
+    if (!titleHandle) {
+        throw new Error("Could not select: title element not found");
+    }
+
+    await titleHandle.click();
+};
+
+const getRect = async (elementHandle: ElementHandle<HTMLElement>) => {
+    const boundingBox = await elementHandle.boundingBox();
+
+    if (!boundingBox) {
+        throw "No bounding box";
+    }
+
+    return boundingBox;
+};
+
+export const getTreeStructure = async (page: Page) => {
+    const structure = await page.evaluate<string>(`
+    ;
+    function getTreeNode($li) {
+        const $div = $li.children("div.jqtree-element");
+        const $span = $div.children("span.jqtree-title");
+        const name = $span.text();
+        const selected = $li.hasClass("jqtree-selected");
+
+        if ($li.hasClass("jqtree-folder")) {
+            const $ul = $li.children("ul.jqtree_common");
+
+            return {
+                nodeType: "folder",
+                children: getChildren($ul),
+                name,
+                open: !$li.hasClass("jqtree-closed"),
+                selected,
+            };
+        } else {
+            return {
+                nodeType: "child",
+                name,
+                selected,
+            };
+        }
+    }
+
+    function getChildren($ul) {
+        return $ul
+            .children("li.jqtree_common")
+            .map((_, li) => {
+                return getTreeNode(jQuery(li));
+            })
+            .get();
+    }
+
+    JSON.stringify(window.getChildren(jQuery("ul.jqtree-tree")));
+`);
+
+    return JSON.parse(structure) as JQTreeMatchers.TreeStructure;
+};
+
+const getNodeRect = async (page: Page, title: string) => {
+    const titleElement = await locateTitle(page, title).elementHandle();
+
+    if (!titleElement) {
+        throw Error("Element not found");
+    }
+
+    const rect = await getRect(titleElement as ElementHandle<HTMLElement>);
+    return rect;
+};
+
+export const dragAndDrop = async (
+    page: Page,
+    from: string,
+    to: string
+): Promise<void> => {
+    const fromRect = await getNodeRect(page, from);
+    const toRect = await getNodeRect(page, to);
+
+    await page.mouse.move(
+        fromRect.x + fromRect.width / 2,
+        fromRect.y + fromRect.height / 2
+    );
+    await page.mouse.down();
+    // eslint-disable-next-line playwright/no-wait-for-timeout
+    await page.waitForTimeout(200);
+    await page.mouse.move(
+        toRect.x + toRect.width / 2,
+        toRect.y + toRect.height / 2
+    );
+    await page.mouse.up();
+};

package/src/saveStateHandler.ts

@@ -1,6 +1,11 @@
 import { isInt } from "./util";
 import { JqTreeWidget } from "./tree.jquery";
-import { Node, NodeId } from "./node";
+import { Node } from "./node";
+
+export interface SavedState {
+    open_nodes: NodeId[];
+    selected_node: NodeId[];
+}
 
 export default class SaveStateHandler {
     private treeWidget: JqTreeWidget;
@@ -24,7 +29,7 @@ export default class SaveStateHandler {
         const jsonData = this.loadFromStorage();
 
         if (jsonData) {
-            return (this.parseState(jsonData) as unknown) as SavedState;
+            return this.parseState(jsonData) as unknown as SavedState;
         } else {
             return null;
         }
@@ -121,7 +126,7 @@ export default class SaveStateHandler {
             state.selected_node = [state.selected_node];
         }
 
-        return (state as unknown) as SavedState;
+        return state as unknown as SavedState;
     }
 
     private loadFromStorage(): string | null {
@@ -134,11 +139,11 @@ export default class SaveStateHandler {
         }
     }
 
-    private openInitialNodes(nodeIds: any[]): boolean {
+    private openInitialNodes(nodeIds: NodeId[]): boolean {
         let mustLoadOnDemand = false;
 
-        for (const nodeDd of nodeIds) {
-            const node = this.treeWidget.getNodeById(nodeDd);
+        for (const nodeId of nodeIds) {
+            const node = this.treeWidget.getNodeById(nodeId);
 
             if (node) {
                 if (!node.load_on_demand) {

package/src/selectNodeHandler.ts

@@ -1,4 +1,4 @@
-import { Node, NodeId } from "./node";
+import { Node } from "./node";
 import { JqTreeWidget } from "./tree.jquery";
 
 export default class SelectNodeHandler {

package/src/simple.widget.ts

@@ -109,7 +109,7 @@ export default class SimpleWidget<WidgetOptions> {
 
     public options: WidgetOptions;
 
-    protected $el: JQuery<HTMLElement>;
+    public $el: JQuery<HTMLElement>;
 
     constructor(el: HTMLElement, options: WidgetOptions) {
         this.$el = jQuery(el);

package/src/test/.eslintrc

@@ -0,0 +1,14 @@
+{
+  "plugins": ["jest", "testing-library"],
+  "extends": ["plugin:jest/all", "plugin:testing-library/dom"],
+  "rules": {
+    "jest/consistent-test-it": "off",
+    "jest/prefer-expect-assertions": "off",
+    "jest/no-duplicate-hooks": "off",
+    "jest/no-hooks": "off",
+    "jest/no-identical-title": "off",
+    "jest/prefer-strict-equal": "off",
+    "jest/require-hook": "off",
+    "jest/require-top-level-describe": "off"
+  }
+}

package/src/test/jqTree/create.test.ts

@@ -1,4 +1,3 @@
-import * as $ from "jquery";
 import getGiven from "givens";
 import "../../tree.jquery";
 import exampleData from "../support/exampleData";

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

@@ -1,4 +1,3 @@
-import * as $ from "jquery";
 import getGiven from "givens";
 import { rest } from "msw";
 import { setupServer } from "msw/node";
@@ -8,16 +7,24 @@ 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;
@@ -132,19 +139,12 @@ describe("tree.init", () => {
     });
 
     context("with data loaded from an url", () => {
-        let server: ReturnType<typeof setupServer> | null = null;
-
-        beforeAll(() => {
-            server = setupServer(
+        beforeEach(() => {
+            server.use(
                 rest.get("/tree/", (_request, response, ctx) =>
                     response(ctx.status(200), ctx.json(exampleData))
                 )
             );
-            server.listen();
-        });
-
-        afterAll(() => {
-            server?.close();
         });
 
         it("is called", () =>

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

@@ -1,4 +1,3 @@
-import * as $ from "jquery";
 import getGiven from "givens";
 import "../../tree.jquery";
 import exampleData from "../support/exampleData";

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

@@ -1,4 +1,3 @@
-import * as $ from "jquery";
 import getGiven from "givens";
 import { screen } from "@testing-library/dom";
 import { rest } from "msw";
@@ -8,17 +7,25 @@ import { 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());
+
 context("when a node has load_on_demand in the data", () => {
     interface Vars {
         autoOpen: boolean;
@@ -38,10 +45,8 @@ context("when a node has load_on_demand in the data", () => {
         },
     ];
 
-    let server: ReturnType<typeof setupServer> | null = null;
-
-    beforeAll(() => {
-        server = setupServer(
+    beforeEach(() => {
+        server.use(
             rest.get("/tree/", (request, response, ctx) => {
                 const parentId = request.url.searchParams.get("node");
 
@@ -55,12 +60,6 @@ context("when a node has load_on_demand in the data", () => {
                 }
             })
         );
-
-        server.listen();
-    });
-
-    afterAll(() => {
-        server?.close();
     });
 
     beforeEach(() => {
@@ -106,6 +105,52 @@ context("when a node has load_on_demand in the data", () => {
                 }),
             ]);
         });
+
+        context("when the node is selected and has the focus", () => {
+            beforeEach(() => {
+                given.$tree.tree("selectNode", given.node);
+            });
+
+            it("keeps the node selected and focused", async () => {
+                expect(given.node.element).toBeSelected();
+                expect(given.node.element).toBeFocused();
+
+                togglerLink(given.node.element).trigger("click");
+                await screen.findByText("loaded-on-demand");
+
+                expect(given.node.element).toBeSelected();
+                expect(given.node.element).toBeFocused();
+            });
+        });
+
+        context("when the node is not selected", () => {
+            it("doesn't select the node", async () => {
+                expect(given.node.element).not.toBeSelected();
+
+                togglerLink(given.node.element).trigger("click");
+                await screen.findByText("loaded-on-demand");
+
+                expect(given.node.element).not.toBeSelected();
+            });
+        });
+
+        context("when the node is selected and doesn't have the focus", () => {
+            beforeEach(() => {
+                given.$tree.tree("selectNode", given.node);
+                (document.activeElement as HTMLElement).blur();
+            });
+
+            it("keeps the node selected and not focused", async () => {
+                expect(given.node.element).toBeSelected();
+                expect(given.node.element).not.toBeFocused();
+
+                togglerLink(given.node.element).trigger("click");
+                await screen.findByText("loaded-on-demand");
+
+                expect(given.node.element).toBeSelected();
+                expect(given.node.element).not.toBeFocused();
+            });
+        });
     });
 
     context("with autoOpen is true", () => {