Test on can move (#797)

* Test onCanMove * Test onCanMoveTo
mbraak · Mar 28, 2024 · 57fbd3e · 57fbd3e
1 parent af6e9f7
commit 57fbd3e
Showing 1 changed file with 154 additions and 5 deletions.
diff --git a/src/playwright/playwright.test.ts b/src/playwright/playwright.test.ts
@@ -26,20 +26,28 @@ const initPage = async (page: Page, baseURL: string | undefined) => {
 interface InitTreeOptions {
     autoOpen?: number;
     dragAndDrop?: boolean;
+    onCanMove?: boolean;
+    onCanMoveTo?: boolean;
 }
 
 const initTree = async (
     page: Page,
-    { autoOpen, dragAndDrop }: InitTreeOptions,
+    { autoOpen, dragAndDrop, onCanMove, onCanMoveTo }: InitTreeOptions,
 ) => {
     await page.evaluate(`
+        const onCanMove = (node) => node.name !== "Herrerasaurians";
+
+        const onCanMoveTo = (node, targetNode) => targetNode.name !== "Ornithischians";
+
         const $tree = jQuery("#tree1");
 
         $tree.tree({
             animationSpeed: 0,
             autoOpen: ${autoOpen || 0},
             data: ExampleData.exampleData,
             dragAndDrop: ${dragAndDrop || false},
+            onCanMove: ${onCanMove ? "onCanMove" : "null"},
+            onCanMoveTo: ${onCanMoveTo ? "onCanMoveTo" : "null"},
             startDndDelay: 100,
         });
     `);
@@ -82,12 +90,10 @@ test.describe("without dragAndDrop", () => {
 });
 
 test.describe("with dragAndDrop", () => {
-    test.beforeEach(async ({ baseURL, page }) => {
+    test("moves a node", 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);
@@ -119,7 +125,10 @@ test.describe("with dragAndDrop", () => {
         expect(screenshot).toMatchSnapshot();
     });
 
-    test("moves a node with touch events", async ({ page }) => {
+    test("moves a node with touch events", async ({ baseURL, page }) => {
+        await initPage(page, baseURL);
+        await initTree(page, { dragAndDrop: true });
+
         const client = await page.context().newCDPSession(page);
 
         const box1 = await getNodeRect(page, "Herrerasaurians");
@@ -162,6 +171,146 @@ test.describe("with dragAndDrop", () => {
             }),
         ]);
     });
+
+    test("onCanMove prevents move from a node", async ({ baseURL, page }) => {
+        await initPage(page, baseURL);
+        await initTree(page, { dragAndDrop: true, onCanMove: true });
+
+        await dragAndDrop(page, "Herrerasaurians", "Ornithischians");
+
+        const structure = await getTreeStructure(page);
+
+        expect(structure).toEqual([
+            expect.objectContaining({
+                name: "Saurischia",
+                children: [
+                    expect.objectContaining({ name: "Herrerasaurians" }),
+                    expect.objectContaining({ name: "Theropods" }),
+                    expect.objectContaining({ name: "Sauropodomorphs" }),
+                ],
+            }),
+            expect.objectContaining({
+                name: "Ornithischians",
+                children: [
+                    expect.objectContaining({ name: "Heterodontosaurids" }),
+                    expect.objectContaining({ name: "Thyreophorans" }),
+                    expect.objectContaining({ name: "Ornithopods" }),
+                    expect.objectContaining({
+                        name: "Pachycephalosaurians",
+                    }),
+                    expect.objectContaining({ name: "Ceratopsians" }),
+                ],
+            }),
+        ]);
+    });
+
+    test("onCanMove doesn't prevent move from another node", async ({
+        baseURL,
+        page,
+    }) => {
+        await initPage(page, baseURL);
+        await initTree(page, { dragAndDrop: true, onCanMove: true });
+
+        await dragAndDrop(page, "Theropods", "Ornithischians");
+
+        const structure = await getTreeStructure(page);
+
+        expect(structure).toEqual([
+            expect.objectContaining({
+                name: "Saurischia",
+                children: [
+                    expect.objectContaining({ name: "Herrerasaurians" }),
+                    expect.objectContaining({ name: "Sauropodomorphs" }),
+                ],
+            }),
+            expect.objectContaining({
+                name: "Ornithischians",
+                children: [
+                    expect.objectContaining({ name: "Theropods" }),
+                    expect.objectContaining({ name: "Heterodontosaurids" }),
+                    expect.objectContaining({ name: "Thyreophorans" }),
+                    expect.objectContaining({ name: "Ornithopods" }),
+                    expect.objectContaining({
+                        name: "Pachycephalosaurians",
+                    }),
+                    expect.objectContaining({ name: "Ceratopsians" }),
+                ],
+            }),
+        ]);
+    });
+
+    test("onCanMoveTo prevents move to a node", async ({ baseURL, page }) => {
+        await initPage(page, baseURL);
+        await initTree(page, { dragAndDrop: true, onCanMoveTo: true });
+
+        await dragAndDrop(page, "Herrerasaurians", "Ornithischians");
+
+        const structure = await getTreeStructure(page);
+
+        expect(structure).toEqual([
+            expect.objectContaining({
+                name: "Saurischia",
+                children: [
+                    expect.objectContaining({ name: "Herrerasaurians" }),
+                    expect.objectContaining({ name: "Theropods" }),
+                    expect.objectContaining({ name: "Sauropodomorphs" }),
+                ],
+            }),
+            expect.objectContaining({
+                name: "Ornithischians",
+                children: [
+                    expect.objectContaining({ name: "Heterodontosaurids" }),
+                    expect.objectContaining({ name: "Thyreophorans" }),
+                    expect.objectContaining({ name: "Ornithopods" }),
+                    expect.objectContaining({
+                        name: "Pachycephalosaurians",
+                    }),
+                    expect.objectContaining({ name: "Ceratopsians" }),
+                ],
+            }),
+        ]);
+    });
+
+    test("onCanMoveTo doesn't prevent move to another node", async ({
+        baseURL,
+        page,
+    }) => {
+        await initPage(page, baseURL);
+        await initTree(page, { dragAndDrop: true, onCanMoveTo: true });
+
+        await dragAndDrop(page, "Herrerasaurians", "Heterodontosaurids");
+
+        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: "Heterodontosaurids",
+                        children: [
+                            expect.objectContaining({
+                                name: "Herrerasaurians",
+                            }),
+                        ],
+                    }),
+                    expect.objectContaining({ name: "Thyreophorans" }),
+                    expect.objectContaining({ name: "Ornithopods" }),
+                    expect.objectContaining({
+                        name: "Pachycephalosaurians",
+                    }),
+                    expect.objectContaining({ name: "Ceratopsians" }),
+                ],
+            }),
+        ]);
+    });
 });
 
 test.describe("autoscroll when the window is scrollable", () => {