jqtree 1.6.2 → 1.6.3

package/src/playwright/coverage.ts

@@ -0,0 +1,41 @@
+import fs from "fs";
+import path from "path";
+import crypto from "crypto";
+import { BrowserContext } from "@playwright/test";
+
+const istanbulCLIOutput = path.join(process.cwd(), ".nyc_output");
+
+const generateUUID = () => crypto.randomBytes(16).toString("hex");
+
+export const initCoverage = async (context: BrowserContext) => {
+    await fs.promises.mkdir(istanbulCLIOutput, { recursive: true });
+
+    await context.exposeFunction(
+        "collectIstanbulCoverage",
+        (coverageJSON: string) => {
+            if (!coverageJSON) {
+                console.log("No coverage");
+            } else {
+                const filename = path.join(
+                    istanbulCLIOutput,
+                    `playwright_coverage_${generateUUID()}.json`
+                );
+                console.log(`Writing coverage to ${filename}`);
+                fs.writeFileSync(filename, coverageJSON);
+            }
+        }
+    );
+};
+
+export const saveCoverage = async (context: BrowserContext) => {
+    for (const page of context.pages()) {
+        await page.evaluate(() => {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            const anyWindow = window as any;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+            const coverageData = anyWindow.__coverage__;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+            anyWindow.collectIstanbulCoverage(JSON.stringify(coverageData));
+        });
+    }
+};

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,51 +30,58 @@ 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).toMatchText(/.*Saurischia.*/);
-    await expect(page).toMatchText(/.*Ornithischians.*/);
-    await expect(page).toMatchText(/.*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).toMatchText(/.*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.*/);
 
-it("opens a node", async () => {
-    await expect(page).toMatchText(/.*Saurischia.*/);
+        const screenshot = await page.screenshot();
+        expect(screenshot).toMatchSnapshot();
+    });
 
-    const theropods = await findNodeElement("Theropods");
-    await expectToBeClosed(theropods);
-    await openNode(theropods);
-    await expectToBeOpen(theropods);
+    test("selects a node", async ({ page }) => {
+        await expect(page.locator("body")).toHaveText(/.*Saurischia.*/);
 
-    await matchScreenshot("opens_a_node");
+        const saurischia = await findNodeElement(page, "Saurischia");
+        await selectNode(saurischia);
+
+        const screenshot = await page.screenshot();
+        expect(screenshot).toMatchSnapshot();
+    });
 });
 
-describe("dragAndDrop", () => {
-    given("dragAndDrop", () => true);
+test.describe("with dragAndDrop", () => {
+    test.beforeEach(async ({ baseURL, page }) => {
+        await initPage({ baseURL, page, dragAndDrop: true });
+    });
 
-    it("moves a node", async () => {
-        await dragAndDrop("Herrerasaurians", "Ornithischians");
+    test("moves a node", async ({ page }) => {
+        await dragAndDrop(page, "Herrerasaurians", "Ornithischians");
 
-        const structure = await getTreeStructure();
+        const structure = await getTreeStructure(page);
 
         expect(structure).toEqual([
             expect.objectContaining({
@@ -109,6 +106,7 @@ describe("dragAndDrop", () => {
             }),
         ]);
 
-        await matchScreenshot("moves_a_node");
+        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/test/.eslintrc

@@ -1,4 +1,14 @@
 {
-  "plugins": ["testing-library"],
-  "extends": ["plugin:testing-library/dom"]
-}
+  "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/events.test.ts

@@ -7,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;
@@ -131,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/loadOnDemand.test.ts

@@ -7,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;
@@ -37,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");
 
@@ -54,12 +60,6 @@ context("when a node has load_on_demand in the data", () => {
                 }
             })
         );
-
-        server.listen();
-    });
-
-    afterAll(() => {
-        server?.close();
     });
 
     beforeEach(() => {

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

@@ -1,5 +1,5 @@
 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 +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;
@@ -739,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 });
     });
 
@@ -909,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);
+            });
+        });
     });
 });
 
@@ -1008,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);
@@ -1045,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();
+
+            given.$tree.tree("reload", handleFinished);
 
-                    resolve();
-                };
+            await waitFor(() => expect(handleFinished).toHaveBeenCalledWith());
 
-                given.$tree.tree("reload", handleFinished);
-            }));
+            expect(given.$tree).toHaveTreeStructure([
+                expect.objectContaining({ name: "node1" }),
+                expect.objectContaining({ name: "node2" }),
+            ]);
+        });
     });
 });