Add tests (#882)

* Remove unused get_widget_class option * Add test for method with underscore * Spelling * Test documentScrollParent * Test checkVerticalScrolling * Test containerScrollParent * Correctly load jquery in test_scroll_container.html * Fix getScrollParentBottom
mbraak · Feb 10, 2025 · f12a328 · f12a328
1 parent 5dbc39b
commit f12a328
Show file tree

Hide file tree

Showing 7 changed files with 320 additions and 44 deletions.
diff --git a/devserver/test_scroll_container.html b/devserver/test_scroll_container.html
@@ -1,39 +1,41 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8" />
-        <title>JqTree devserver</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta
-            name="description"
-            content="JqTree is a jQuery widget for displaying a tree structure in html"
-        />
-        <link rel="stylesheet" href="/jqtree.css" />
-        <style>
-          body {
-            font-size: 20px;
-          }
-          ul.jqtree-tree ul.jqtree_common {
-            margin-left: 128px;
-          }
-          #scroll-container {
-            height: 200px;
-            width: 400px;
-            overflow-y: scroll;
-            user-select: none;
-            background-color: #eee;
-            margin: 128px;
-            padding: 8px;
-          }
-        </style>
-    </head>
-    <body>
-      <div id="scroll-container">
-        <div id="tree1"></div>
-      </div>
-    </body>
-    <script src="/bower_components/jquery/dist/jquery.min.js"></script>
-    <script src="/tree.jquery.js"></script>
-    <script src="/example_data.js"></script>
-    <script src="/devserver_scroll.js"></script>
+
+<head>
+  <meta charset="utf-8" />
+  <title>JqTree devserver</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="JqTree is a jQuery widget for displaying a tree structure in html" />
+  <link rel="stylesheet" href="/jqtree.css" />
+  <style>
+    body {
+      font-size: 20px;
+    }
+
+    ul.jqtree-tree ul.jqtree_common {
+      margin-left: 128px;
+    }
+
+    #scroll-container {
+      height: 200px;
+      width: 400px;
+      overflow-y: scroll;
+      user-select: none;
+      background-color: #eee;
+      margin: 128px;
+      padding: 8px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="scroll-container">
+    <div id="tree1"></div>
+  </div>
+</body>
+<script src="/vendor/jquery.min.js"></script>
+<script src="/tree.jquery.js"></script>
+<script src="/example_data.js"></script>
+<script src="/devserver_scroll.js"></script>
+
 </html>
diff --git a/src/scrollHandler/containerScrollParent.ts b/src/scrollHandler/containerScrollParent.ts
@@ -1,6 +1,6 @@
 import type { ScrollParent } from "./types";
 
-import { getElementPosition, getOffsetTop } from '../util'
+import { getElementPosition, getOffsetTop } from "../util";
 
 type HorizontalScrollDirection = "left" | "right";
 interface Params {
@@ -85,8 +85,9 @@ export default class ContainerScrollParent implements ScrollParent {
         pageX: number,
     ): HorizontalScrollDirection | undefined {
         const scrollParentOffset = getElementPosition(this.container);
+        const containerWidth = this.container.getBoundingClientRect().width;
 
-        const rightEdge = scrollParentOffset.left + this.container.clientWidth;
+        const rightEdge = scrollParentOffset.left + containerWidth;
         const leftEdge = scrollParentOffset.left;
         const isNearRightEdge = pageX > rightEdge - 20;
         const isNearLeftEdge = pageX < leftEdge + 20;
@@ -116,15 +117,18 @@ export default class ContainerScrollParent implements ScrollParent {
 
     private getScrollParentBottom() {
         if (this.scrollParentBottom == null) {
-            this.scrollParentBottom = this.getScrollParentTop() + this.container.clientHeight;
+            const containerHeight =
+                this.container.getBoundingClientRect().height;
+            this.scrollParentBottom =
+                this.getScrollParentTop() + containerHeight;
         }
 
         return this.scrollParentBottom;
     }
 
     private getScrollParentTop() {
         if (this.scrollParentTop == null) {
-            this.scrollParentTop = getOffsetTop(this.container)
+            this.scrollParentTop = getOffsetTop(this.container);
         }
 
         return this.scrollParentTop;

diff --git a/src/simple.widget.ts b/src/simple.widget.ts
@@ -87,11 +87,9 @@ const register = (widgetClass: unknown, widgetName: string): void => {
         } else if (typeof argument1 === "string" && argument1[0] !== "_") {
             const functionName = argument1;
 
-            if (functionName === "destroy") {
+            if (argument1 === "destroy") {
                 destroyWidget(this);
                 return undefined;
-            } else if (functionName === "get_widget_class") {
-                return widgetClass;
             } else {
                 return callFunction(this, functionName, args);
             }

diff --git a/src/test/jqTree/methods.test.ts b/src/test/jqTree/methods.test.ts
@@ -1535,3 +1535,11 @@ describe("updateNode", () => {
         });
     });
 });
+
+it("returns undefined when calling with a string that starts with an underscore", () => {
+    const $tree = $("#tree1");
+
+    const tree = $tree.tree as unknown as (name: string) => undefined;
+    const result = tree("_test"); // eslint-disable-line @typescript-eslint/no-confusing-void-expression
+    expect(result).toBeUndefined();
+});
diff --git a/src/test/scrollHandler/containerScrollParent.test.ts b/src/test/scrollHandler/containerScrollParent.test.ts
@@ -0,0 +1,149 @@
+import { mockElementBoundingClientRect } from "jsdom-testing-mocks";
+
+import ContainerScrollParent from "../../scrollHandler/containerScrollParent";
+
+afterEach(() => {
+    jest.useRealTimers();
+});
+
+describe("checkHorizontalScrolling", () => {
+    it("scrolls to the left when pageX is near the left edge", () => {
+        jest.useFakeTimers();
+
+        const refreshHitAreas = jest.fn();
+        const container = document.createElement("div");
+
+        const scrollBy = jest.fn();
+        container.scrollBy = scrollBy;
+
+        mockElementBoundingClientRect(container, {
+            height: 100,
+            width: 100,
+            x: 10,
+            y: 10,
+        });
+
+        const containerScrollParent = new ContainerScrollParent({
+            container,
+            refreshHitAreas,
+        });
+
+        containerScrollParent.checkHorizontalScrolling(20);
+
+        expect(scrollBy).not.toHaveBeenCalled();
+        jest.advanceTimersByTime(50);
+        expect(scrollBy).toHaveBeenCalledWith({
+            behavior: "instant",
+            left: -20,
+            top: 0,
+        });
+    });
+
+    it("stops scrolling when pageX is moved from the left edge", () => {
+        jest.useFakeTimers();
+
+        const refreshHitAreas = jest.fn();
+        const container = document.createElement("div");
+
+        const scrollBy = jest.fn();
+        container.scrollBy = scrollBy;
+
+        mockElementBoundingClientRect(container, {
+            height: 100,
+            width: 100,
+            x: 10,
+            y: 10,
+        });
+
+        const containerScrollParent = new ContainerScrollParent({
+            container,
+            refreshHitAreas,
+        });
+
+        containerScrollParent.checkHorizontalScrolling(20);
+
+        expect(scrollBy).not.toHaveBeenCalled();
+        jest.advanceTimersByTime(50);
+        expect(scrollBy).toHaveBeenCalledWith({
+            behavior: "instant",
+            left: -20,
+            top: 0,
+        });
+
+        containerScrollParent.checkHorizontalScrolling(50);
+        jest.advanceTimersByTime(50);
+
+        expect(scrollBy).toHaveBeenCalledTimes(1);
+    });
+});
+
+describe("checkVerticalScrolling", () => {
+    it("scrolls to the top when pageY is near the top edge", () => {
+        jest.useFakeTimers();
+
+        const refreshHitAreas = jest.fn();
+        const container = document.createElement("div");
+
+        const scrollBy = jest.fn();
+        container.scrollBy = scrollBy;
+
+        mockElementBoundingClientRect(container, {
+            height: 100,
+            width: 100,
+            x: 10,
+            y: 10,
+        });
+
+        const containerScrollParent = new ContainerScrollParent({
+            container,
+            refreshHitAreas,
+        });
+
+        containerScrollParent.checkVerticalScrolling(9);
+
+        expect(scrollBy).not.toHaveBeenCalled();
+        jest.advanceTimersByTime(50);
+        expect(scrollBy).toHaveBeenCalledWith({
+            behavior: "instant",
+            left: 0,
+            top: -20,
+        });
+    });
+
+    it("stops scrolling when pageX is moved from the left edge", () => {
+        jest.useFakeTimers();
+
+        const refreshHitAreas = jest.fn();
+        const container = document.createElement("div");
+
+        const scrollBy = jest.fn();
+        container.scrollBy = scrollBy;
+
+        mockElementBoundingClientRect(container, {
+            height: 100,
+            width: 100,
+            x: 10,
+            y: 10,
+        });
+
+        const containerScrollParent = new ContainerScrollParent({
+            container,
+            refreshHitAreas,
+        });
+
+        containerScrollParent.checkVerticalScrolling(9);
+
+        expect(scrollBy).not.toHaveBeenCalled();
+        jest.advanceTimersByTime(50);
+        expect(scrollBy).toHaveBeenCalledWith({
+            behavior: "instant",
+            left: 0,
+            top: -20,
+        });
+
+        containerScrollParent.checkVerticalScrolling(50);
+        jest.advanceTimersByTime(50);
+
+        expect(scrollBy).toHaveBeenCalledTimes(1);
+    });
+});