jqtree 1.6.2 → 1.7.0

package/lib/util.js

@@ -4,21 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isInt = exports.isFunction = exports.getBoolString = void 0;
-
 var isInt = function isInt(n) {
   return typeof n === "number" && n % 1 === 0;
 };
-
 exports.isInt = isInt;
-
 var isFunction = function isFunction(v) {
   return typeof v === "function";
 };
-
 exports.isFunction = isFunction;
-
 var getBoolString = function getBoolString(value) {
   return value ? "true" : "false";
 };
-
 exports.getBoolString = getBoolString;

package/lib/version.js

@@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var version = "1.6.2";
+var version = "1.7.0";
 var _default = version;
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jqtree",
-    "version": "1.6.2",
+    "version": "1.7.0",
     "description": "Tree widget for jQuery",
     "keywords": [
         "jquery-plugin",
@@ -14,69 +14,69 @@
         "url": "https://github.com/mbraak/jqtree"
     },
     "scripts": {
-        "ci": "pnpm run lint && yarn run tsc && pnpm run test",
-        "test": "start-server-and-test 'yarn devserver-with-coverage' http://localhost:8080 'jest --runInBand --coverage --no-cache --verbose'",
-        "test-with-server": "jest --runInBand --coverage",
-        "test-watch": "jest --watch",
+        "ci": "pnpm lint && pnpm tsc && pnpm test",
+        "jest": "jest --coverage --no-cache --verbose --config ./config/jest.config.js",
+        "jest-watch": "jest --watch --config ./config/jest.config.js",
         "lint": "eslint src/ --ext .ts,.tsx",
-        "production": "./production",
-        "jekyll-build": "bundle exec jekyll build",
-        "jekyll-serve": "bundle exec jekyll serve",
-        "devserver": "SERVE=true rollup -c -w rollup.config.js",
-        "devserver-with-coverage": "COVERAGE=true SERVE=true rollup -c rollup.config.js",
-        "prettier": "prettier src/*.ts src_test/*.ts --write --tab-width 4",
-        "coveralls": "nyc report --reporter=text-lcov | coveralls",
+        "production": "./config/production",
+        "devserver": "SERVE=true rollup --config config/rollup.config.mjs --watch",
+        "devserver-with-coverage": "COVERAGE=true SERVE=true rollup --config config/rollup.config.mjs",
+        "build-with-coverage": "COVERAGE=true rollup --config config/rollup.config.mjs",
+        "prettier": "prettier src/*.ts --write --tab-width 4",
+        "write-coverage": "nyc report --reporter=text-lcov > lcov.info",
         "tsc": "tsc --noEmit --project tsconfig.json",
         "merge-coverage": "cp jest-coverage/coverage-final.json .nyc_output/coverage_jsdom.json",
-        "clean-coverage": "rm -rf coverage jest-coverage .nyc_output && jest --clearCache",
-        "print-coverage": "nyc report"
+        "clean-coverage": "rm -rf .nyc_output && jest --clearCache",
+        "print-coverage": "nyc report",
+        "playwright": "pnpm build-with-coverage && playwright test --config config/playwright.config.js",
+        "test": "pnpm jest && pnpm playwright"
     },
     "dependencies": {
-        "jquery": "^3.6.0"
+        "jquery": "^3.6.3"
     },
     "devDependencies": {
-        "@babel/cli": "^7.16.0",
-        "@babel/core": "^7.16.5",
-        "@babel/preset-env": "^7.16.5",
-        "@babel/preset-typescript": "^7.16.5",
-        "@rollup/plugin-babel": "^5.3.0",
-        "@rollup/plugin-node-resolve": "^13.1.1",
-        "@testing-library/dom": "^8.11.1",
-        "@types/jest": "^27.0.3",
-        "@types/jquery": "^3.5.10",
-        "@types/pngjs": "^6.0.1",
-        "@typescript-eslint/eslint-plugin": "^5.7.0",
-        "@typescript-eslint/parser": "^5.7.0",
-        "autoprefixer": "^10.4.0",
-        "babel-jest": "^27.4.5",
+        "@babel/cli": "^7.20.7",
+        "@babel/core": "^7.20.7",
+        "@babel/preset-env": "^7.20.2",
+        "@babel/preset-typescript": "^7.18.6",
+        "@playwright/test": "^1.29.1",
+        "@rollup/plugin-babel": "^6.0.3",
+        "@rollup/plugin-node-resolve": "^15.0.1",
+        "@rollup/plugin-terser": "^0.1.0",
+        "@testing-library/dom": "^8.19.0",
+        "@types/debug": "^4.1.7",
+        "@types/jest": "^29.2.4",
+        "@types/jquery": "^3.5.14",
+        "@types/node": "^18.11.17",
+        "@typescript-eslint/eslint-plugin": "^5.47.0",
+        "@typescript-eslint/parser": "^5.47.0",
+        "autoprefixer": "^10.4.13",
+        "babel-jest": "^29.3.1",
         "babel-plugin-istanbul": "^6.1.1",
-        "coveralls": "^3.1.1",
-        "eslint": "^8.4.1",
-        "eslint-plugin-import": "^2.25.3",
-        "eslint-plugin-jest": "^25.3.0",
-        "eslint-plugin-playwright": "^0.6.0",
-        "eslint-plugin-testing-library": "^5.0.1",
-        "expect-playwright": "^0.8.0",
+        "eslint": "^8.30.0",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-jest": "^27.1.7",
+        "eslint-plugin-playwright": "^0.11.2",
+        "eslint-plugin-testing-library": "^5.9.1",
         "givens": "^1.3.9",
-        "jest": "^27.4.5",
-        "jest-extended": "^1.2.0",
-        "jest-playwright-preset": "^1.7.0",
+        "graphql": "^16.6.0",
+        "jest": "^29.3.1",
+        "jest-environment-jsdom": "^29.3.1",
+        "jest-extended": "^3.2.0",
         "jsonfile": "^6.1.0",
         "lodash.template": "^4.5.0",
-        "msw": "^0.36.3",
-        "pixelmatch": "^5.2.1",
-        "playwright": "^1.17.1",
-        "pngjs": "^6.0.0",
-        "postcss": "^8.4.5",
-        "postcss-cli": "^9.1.0",
-        "postcss-load-config": "^3.1.0",
-        "postcss-nested": "^5.0.6",
-        "prettier": "^2.5.1",
-        "rollup": "^2.61.1",
-        "rollup-plugin-serve": "^1.1.0",
-        "rollup-plugin-terser": "^7.0.2",
-        "start-server-and-test": "^1.14.0",
-        "tslib": "^2.3.1",
-        "typescript": "^4.5.4"
+        "msw": "^0.49.2",
+        "nyc": "^15.1.0",
+        "playwright": "^1.29.1",
+        "postcss": "^8.4.20",
+        "postcss-cli": "^10.1.0",
+        "postcss-import": "^15.1.0",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.0",
+        "prettier": "^2.8.1",
+        "rollup": "^3.8.1",
+        "rollup-plugin-serve": "^2.0.2",
+        "tslib": "^2.4.1",
+        "typescript": "~4.9.4"
     }
 }

package/src/dragAndDropHandler.ts

@@ -312,10 +312,14 @@ export class DragAndDropHandler {
 
         this.stopOpenFolderTimer();
 
-        this.openFolderTimer = window.setTimeout(
-            openFolder,
-            this.treeWidget.options.openFolderDelay
-        );
+        const openFolderDelay = this.treeWidget.options.openFolderDelay;
+
+        if (openFolderDelay !== false) {
+            this.openFolderTimer = window.setTimeout(
+                openFolder,
+                openFolderDelay
+            );
+        }
     }
 
     private stopOpenFolderTimer(): void {

package/src/jqtreeOptions.ts

@@ -40,7 +40,7 @@ export interface JQTreeOptions {
     onLoading: HandleLoadingMethod | undefined;
     onSetStateFromStorage: ((data: string) => void) | undefined;
     openedIcon: string | Element;
-    openFolderDelay: number;
+    openFolderDelay: number | false;
     rtl: boolean | undefined;
     selectable: boolean;
     saveState: boolean | string;

package/src/keyHandler.ts

@@ -22,11 +22,11 @@ export default class KeyHandler {
     }
 
     public moveDown(selectedNode: Node): boolean {
-        return this.selectNode(selectedNode.getNextNode());
+        return this.selectNode(selectedNode.getNextVisibleNode());
     }
 
     public moveUp(selectedNode: Node): boolean {
-        return this.selectNode(selectedNode.getPreviousNode());
+        return this.selectNode(selectedNode.getPreviousVisibleNode());
     }
 
     public moveRight(selectedNode: Node): boolean {
@@ -36,7 +36,7 @@ export default class KeyHandler {
             // folder node
             if (selectedNode.is_open) {
                 // Right moves to the first child of an open node
-                return this.selectNode(selectedNode.getNextNode());
+                return this.selectNode(selectedNode.getNextVisibleNode());
             } else {
                 // Right expands a closed node
                 this.treeWidget.openNode(selectedNode);

package/src/node.ts

@@ -557,7 +557,23 @@ export class Node implements INode {
     }
 
     public getNextNode(includeChildren = true): Node | null {
-        if (includeChildren && this.hasChildren() && this.is_open) {
+        if (includeChildren && this.hasChildren()) {
+            return this.children[0];
+        } else if (!this.parent) {
+            return null;
+        } else {
+            const nextSibling = this.getNextSibling();
+
+            if (nextSibling) {
+                return nextSibling;
+            } else {
+                return this.parent.getNextNode(false);
+            }
+        }
+    }
+
+    public getNextVisibleNode(): Node | null {
+        if (this.hasChildren() && this.is_open) {
             // First child
             return this.children[0];
         } else {
@@ -581,19 +597,34 @@ export class Node implements INode {
             return null;
         } else {
             const previousSibling = this.getPreviousSibling();
-            if (previousSibling) {
-                if (
-                    !previousSibling.hasChildren() ||
-                    !previousSibling.is_open
-                ) {
-                    // Previous sibling
-                    return previousSibling;
-                } else {
-                    // Last child of previous sibling
-                    return previousSibling.getLastChild();
-                }
+
+            if (!previousSibling) {
+                return this.getParent();
+            } else if (previousSibling.hasChildren()) {
+                return previousSibling.getLastChild();
             } else {
+                return previousSibling;
+            }
+        }
+    }
+
+    public getPreviousVisibleNode(): Node | null {
+        if (!this.parent) {
+            return null;
+        } else {
+            const previousSibling = this.getPreviousSibling();
+
+            if (!previousSibling) {
                 return this.getParent();
+            } else if (
+                !previousSibling.hasChildren() ||
+                !previousSibling.is_open
+            ) {
+                // Previous sibling
+                return previousSibling;
+            } else {
+                // Last child of previous sibling
+                return previousSibling.getLastChild();
             }
         }
     }

package/src/playwright/.eslintrc

@@ -1,5 +1,5 @@
 {
   "extends": [
-    "plugin:playwright/jest-playwright"
+    "plugin:playwright/playwright-test"
   ]
-}
+}

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,16 @@
 {
-  "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/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"
+  }
+}