From 57fbd3e085451ca05dd4550cdaa20029d4f82958 Mon Sep 17 00:00:00 2001 From: Marco Braak Date: Thu, 28 Mar 2024 15:50:40 +0100 Subject: [PATCH] Test on can move (#797) * Test onCanMove * Test onCanMoveTo --- src/playwright/playwright.test.ts | 159 +++++++++++++++++++++++++++++- 1 file changed, 154 insertions(+), 5 deletions(-) diff --git a/src/playwright/playwright.test.ts b/src/playwright/playwright.test.ts index 8fa1b945..e480d194 100644 --- a/src/playwright/playwright.test.ts +++ b/src/playwright/playwright.test.ts @@ -26,13 +26,19 @@ 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({ @@ -40,6 +46,8 @@ const initTree = async ( 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", () => {