jqtree 1.8.2 → 1.8.3

package/src/playwright/playwright.test.ts

@@ -1,401 +0,0 @@
-import { test, expect, Page } from "@playwright/test";
-import {
-    boundingBox,
-    dragAndDrop,
-    findNodeElement,
-    getNodeRect,
-    getSelectedNodeName,
-    getTreeStructure,
-    moveMouseToNode,
-    selectNode,
-    sleep,
-} from "./testUtils";
-import { initCoverage, saveCoverage } from "./coverage";
-
-const initPage = async (page: Page, baseURL: string | undefined) => {
-    if (!baseURL) {
-        throw new Error("Missing baseURL");
-    }
-
-    await page.goto(`${baseURL}/test_index.html`);
-    await page.waitForLoadState("domcontentloaded");
-
-    page.on("console", (msg) => console.log(`console: ${msg.text()}`));
-};
-
-interface InitTreeOptions {
-    autoOpen?: number;
-    dragAndDrop?: boolean;
-}
-
-const initTree = async (
-    page: Page,
-    { autoOpen, dragAndDrop }: InitTreeOptions,
-) => {
-    await page.evaluate(`
-        const $tree = jQuery("#tree1");
-
-        $tree.tree({
-            animationSpeed: 0,
-            autoOpen: ${autoOpen || 0},
-            data: ExampleData.exampleData,
-            dragAndDrop: ${dragAndDrop || false},
-            startDndDelay: 100,
-        });
-    `);
-};
-
-test.beforeEach(async ({ context }) => {
-    await initCoverage(context);
-});
-
-test.afterEach(async ({ context }) => {
-    await saveCoverage(context);
-});
-
-test.describe("without dragAndDrop", () => {
-    test.beforeEach(async ({ baseURL, page }) => {
-        await initPage(page, baseURL);
-        await initTree(page, { dragAndDrop: false });
-    });
-
-    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();
-    });
-
-    test("selects a node", async ({ page }) => {
-        await expect(page.locator("body")).toHaveText(/.*Saurischia.*/);
-
-        const saurischia = await findNodeElement(page, "Saurischia");
-        await selectNode(saurischia);
-
-        expect(await getSelectedNodeName(page)).toBe("Saurischia");
-
-        const screenshot = await page.screenshot();
-        expect(screenshot).toMatchSnapshot();
-    });
-});
-
-test.describe("with dragAndDrop", () => {
-    test.beforeEach(async ({ baseURL, page }) => {
-        await initPage(page, baseURL);
-        await initTree(page, { dragAndDrop: true });
-    });
-
-    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();
-    });
-
-    test("moves a node with touch events", async ({ page }) => {
-        const client = await page.context().newCDPSession(page);
-
-        const box1 = await getNodeRect(page, "Herrerasaurians");
-
-        await client.send("Input.dispatchTouchEvent", {
-            type: "touchStart",
-            touchPoints: [{ x: box1.x + 10, y: box1.y + box1.height / 2 }],
-        });
-
-        await sleep(page, 200);
-
-        const box2 = await getNodeRect(page, "Ornithischians");
-        await client.send("Input.dispatchTouchEvent", {
-            type: "touchEnd",
-            touchPoints: [{ x: box2.x + 10, y: box2.y + box2.height / 2 }],
-        });
-
-        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" }),
-                ],
-            }),
-        ]);
-    });
-});
-
-test.describe("autoscroll when the window is scrollable", () => {
-    test("it scrolls vertically when the users drags an element to the bottom", async ({
-        baseURL,
-        page,
-    }) => {
-        await page.setViewportSize({ width: 200, height: 100 });
-        await initPage(page, baseURL);
-        await initTree(page, { autoOpen: 3, dragAndDrop: true });
-
-        expect(
-            await page
-                .getByRole("document")
-                .evaluate((element) => element.scrollTop),
-        ).toEqual(0);
-
-        await moveMouseToNode(page, "Saurischia");
-        await page.mouse.down();
-
-        await sleep(page, 200);
-
-        await page.mouse.move(20, 190);
-        await sleep(page, 50);
-
-        expect(
-            await page
-                .getByRole("document")
-                .evaluate((element) => element.scrollTop),
-        ).toBeGreaterThan(0);
-    });
-
-    test("it scrolls horizontally when the users drags an element to the right", async ({
-        baseURL,
-        page,
-    }) => {
-        await page.setViewportSize({ width: 60, height: 400 });
-        await initPage(page, baseURL);
-        await initTree(page, { autoOpen: 3, dragAndDrop: true });
-
-        expect(
-            await page
-                .getByRole("document")
-                .evaluate((element) => element.scrollLeft),
-        ).toEqual(0);
-
-        await moveMouseToNode(page, "Saurischia");
-        await page.mouse.down();
-        await sleep(page, 200);
-
-        await page.mouse.move(55, 10);
-        await sleep(page, 50);
-
-        expect(
-            await page
-                .getByRole("document")
-                .evaluate((element) => element.scrollLeft),
-        ).toBeGreaterThan(0);
-    });
-
-    test("scrollToNode scrolls to a node", async ({ baseURL, page }) => {
-        await page.setViewportSize({ width: 200, height: 100 });
-        await initPage(page, baseURL);
-        await initTree(page, { autoOpen: 3, dragAndDrop: true });
-
-        expect(
-            await page
-                .getByRole("document")
-                .evaluate((element) => element.scrollTop),
-        ).toEqual(0);
-
-        await page.evaluate(`
-            const $tree = jQuery("#tree1");
-            const node = $tree.tree("getNodeByName", "Sauropodomorphs");
-            $tree.tree("scrollToNode",node);
-        `);
-
-        expect(
-            await page
-                .getByRole("document")
-                .evaluate((element) => element.scrollTop),
-        ).toBeGreaterThan(0);
-    });
-});
-
-test.describe("autoscroll when the container is scrollable vertically", () => {
-    test.beforeEach(async ({ page, baseURL }) => {
-        await initPage(page, baseURL);
-
-        // Add a container and make it the parent of the tree element
-        await page.evaluate(`
-            document.body.style.marginLeft = "40px";
-            document.body.style.marginTop = "40px";
-
-            const treeElement = document.querySelector("#tree1");
-
-            const container = document.createElement("div");
-            container.id = "container";
-            container.style.height = "200px";
-            container.style.overflowY = "scroll";
-
-            document.body.replaceChild(container, treeElement);
-            container.appendChild(treeElement);
-        `);
-
-        await initTree(page, { autoOpen: 3, dragAndDrop: true });
-    });
-
-    test("it scrolls vertically when the users drags an element to the bottom", async ({
-        page,
-    }) => {
-        const container = page.locator("#container");
-
-        expect(
-            await container.evaluate((element) => element.scrollTop),
-        ).toEqual(0);
-
-        await moveMouseToNode(page, "Saurischia");
-        await page.mouse.down();
-        await sleep(page, 200);
-
-        await page.mouse.move(20, 245);
-        await sleep(page, 50);
-
-        expect(
-            await container.evaluate((element) => element.scrollTop),
-        ).toBeGreaterThan(0);
-    });
-
-    test("scrollToNode scrolls to a node", async ({ page }) => {
-        const container = page.locator("#container");
-
-        expect(
-            await container.evaluate((element) => element.scrollTop),
-        ).toEqual(0);
-
-        await page.evaluate(`
-            const $tree = jQuery("#tree1");
-            const node = $tree.tree("getNodeByName", "Sauropodomorphs");
-            $tree.tree("scrollToNode",node);
-        `);
-
-        expect(
-            await container.evaluate((element) => element.scrollTop),
-        ).toBeGreaterThan(0);
-    });
-});
-
-test.describe("autoscroll when the container is scrollable horizontally", () => {
-    test.beforeEach(async ({ page, baseURL }) => {
-        await initPage(page, baseURL);
-
-        // Add a container and make it the parent of the tree element
-        await page.evaluate(`
-            document.body.style.marginLeft = "40px";
-            document.body.style.marginTop = "40px";
-
-            const treeElement = document.querySelector("#tree1");
-
-            const container = document.createElement("div");
-            container.id = "container";
-            container.style.width = "400px";
-            container.style.overflowX = "scroll";
-            container.classList.add('wide-tree');
-
-            document.body.replaceChild(container, treeElement);
-            container.appendChild(treeElement);
-        `);
-
-        await initTree(page, { autoOpen: 3, dragAndDrop: true });
-    });
-
-    test("it scrolls horizontally when the users drags an element to the right", async ({
-        page,
-    }) => {
-        const container = page.locator("#container");
-
-        expect(
-            await container.evaluate((element) => element.scrollLeft),
-        ).toEqual(0);
-
-        await moveMouseToNode(page, "Saurischia");
-        await page.mouse.down();
-        await sleep(page, 200);
-
-        const containerBox = await boundingBox(container);
-
-        await page.mouse.move(
-            containerBox.x + containerBox.width,
-            containerBox.y + 10,
-        );
-        await sleep(page, 100);
-
-        expect(
-            await container.evaluate((element) => element.scrollLeft),
-        ).toBeGreaterThan(0);
-    });
-
-    test("it moves a node after scrolling horizontally", async ({ page }) => {
-        await moveMouseToNode(page, "Coelophysoids");
-        await page.mouse.down();
-        await sleep(page, 200);
-
-        const container = page.locator("#container");
-        const containerBox = await boundingBox(container);
-
-        await page.mouse.move(
-            containerBox.x + containerBox.width,
-            containerBox.y + 10,
-        );
-
-        await page.waitForFunction(() => {
-            const container = document.querySelector("#container");
-
-            if (!container) {
-                return false;
-            }
-
-            return (
-                container.scrollLeft >=
-                container.scrollWidth - container.clientWidth
-            );
-        });
-
-        await moveMouseToNode(page, "Tyrannosauroids");
-        await page.mouse.down();
-        await sleep(page, 200);
-
-        const childrenJson = await page.evaluate<string>(`
-            const $tree = jQuery("#tree1");
-            const node = $tree.tree("getNodeByName", "Tyrannosauroids");
-            const children = node.children.map(child => child.name)
-            JSON.stringify(children);
-        `);
-        expect(JSON.parse(childrenJson)).toEqual(["Coelophysoids"]);
-    });
-});

package/src/playwright/testUtils.ts

@@ -1,153 +0,0 @@
-import { ElementHandle, Locator, Page } from "@playwright/test";
-
-interface BoundingBox {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-
-export const sleep = async (page: Page, timeout: number) =>
-    await page.waitForTimeout(timeout); // eslint-disable-line playwright/no-wait-for-timeout
-
-export 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();
-};
-
-export const boundingBox = async (locator: Locator) => {
-    const result = await locator.boundingBox();
-
-    if (!result) {
-        throw new Error("Empty boundingBox");
-    }
-
-    return result;
-};
-
-const getRect = async (
-    elementHandle: ElementHandle<HTMLElement>,
-): Promise<BoundingBox> => {
-    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;
-};
-
-export const getNodeRect = async (
-    page: Page,
-    title: string,
-): Promise<BoundingBox> => {
-    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 moveMouseToNode = async (page: Page, title: string) => {
-    const rect = await getNodeRect(page, title);
-
-    await page.mouse.move(rect.x + 10, rect.y + rect.height / 2);
-};
-
-export const dragAndDrop = async (
-    page: Page,
-    fromTitle: string,
-    toTitle: string,
-): Promise<void> => {
-    await moveMouseToNode(page, fromTitle);
-    await page.mouse.down();
-
-    await sleep(page, 200);
-
-    await moveMouseToNode(page, toTitle);
-    await page.mouse.up();
-};
-
-export const getSelectedNodeName = async (page: Page) => {
-    return await page.evaluate(`
-            const $tree = jQuery("#tree1");
-            const node = $tree.tree('getSelectedNode');
-            node?.name;
-        `);
-};

package/src/test/.eslintrc

@@ -1,17 +0,0 @@
-{
-  "plugins": ["jest", "testing-library"],
-  "extends": ["plugin:jest/all", "plugin:testing-library/dom"],
-  "rules": {
-    "jest/consistent-test-it": "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",
-    "testing-library/no-node-access": "off"
-  }
-}

package/src/test/global.d.ts

@@ -1 +0,0 @@
-import "jest-extended";

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

@@ -1,25 +0,0 @@
-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/create.test.ts

@@ -1,54 +0,0 @@
-import getGiven from "givens";
-import "../../tree.jquery";
-import exampleData from "../support/exampleData";
-
-beforeEach(() => {
-    $("body").append('<div id="tree1"></div>');
-});
-
-afterEach(() => {
-    const $tree = $("#tree1");
-    $tree.tree("destroy");
-    $tree.remove();
-});
-
-describe("create with data", () => {
-    interface Vars {
-        $tree: JQuery<HTMLElement>;
-    }
-
-    const given = getGiven<Vars>();
-    given("$tree", () => $("#tree1"));
-
-    beforeEach(() => {
-        given.$tree.tree({
-            data: exampleData,
-        });
-    });
-
-    it("creates a tree", () => {
-        expect(given.$tree).toHaveTreeStructure([
-            expect.objectContaining({
-                name: "node1",
-                open: false,
-                selected: false,
-                children: [
-                    expect.objectContaining({ name: "child1" }),
-                    expect.objectContaining({ name: "child2" }),
-                ],
-            }),
-            expect.objectContaining({
-                name: "node2",
-                open: false,
-                selected: false,
-                children: [
-                    expect.objectContaining({
-                        name: "node3",
-                        open: false,
-                        children: [expect.objectContaining({ name: "child3" })],
-                    }),
-                ],
-            }),
-        ]);
-    });
-});