@clevertask/react-sortable-tree 0.0.8 → 0.0.9

package/README.md

@@ -369,6 +369,11 @@ await expectItemNotToBeChildOf(expect, taskA, taskC);
 ### expectItemBefore
 
 This helper tells you if an item is before the "x" item. You don't need a function for after because it's a matter of targeting the items in their proper places.
+⚠️ You must add a `data-tree-item-label` to your HTML element that contains the tree label
+
+```tsx
+<p data-tree-item-label>{props.treeItem.label}</p>
+```
 
 ```ts
 await expectItemBefore(page, expect, 'C', 'A');

package/dist/e2e/index.js

@@ -1,51 +1,63 @@
-async function f({ page: t, expect: e, from: o, to: a }) {
-  const n = t.getByLabel(`Drag ${o.name}`, { exact: !0 }), m = t.getByRole("treeitem", { name: a.name });
-  await e(n).toBeVisible(), await e(m).toBeVisible();
-  const r = await n.boundingBox(), i = await m.boundingBox();
-  if (!r || !i)
+function u(t, e, o) {
+  return t.getByRole("treeitem", {
+    name: e,
+    exact: (o == null ? void 0 : o.exact) ?? !0
+  });
+}
+async function g({ page: t, expect: e, from: o, to: s }) {
+  const i = t.getByLabel(`Drag ${o.name}`, { exact: !0 }), n = u(t, s.name).locator("[data-tree-draggable]");
+  await e(i).toBeVisible(), await e(n).toBeVisible();
+  const a = await i.boundingBox(), r = await n.boundingBox();
+  if (!a || !r)
     throw new Error("Could not determine bounding boxes for drag operation");
-  const c = r.x + r.width / 2, w = r.y + r.height / 2;
-  let u = i.x + 8, d = i.y;
-  const b = 4;
-  switch (a.position) {
-    case "before":
-      d = i.y + b;
+  const w = a.x + a.width / 2, m = a.y + a.height / 2;
+  let f = r.x + 8, d = r.y;
+  const h = 4, l = a.y > r.y;
+  switch (s.position) {
+    case "before": {
+      d = r.y + h, l && (d += a.height);
       break;
-    case "after":
-      d = i.y + i.height - b;
+    }
+    case "after": {
+      d = r.y + r.height - h, l && (d += a.height);
       break;
+    }
     case "inside": {
-      const s = await m.locator("[data-tree-draggable]").boundingBox();
-      if (!s)
+      const c = await n.boundingBox();
+      if (!c)
         throw new Error("Could not determine draggable item bounds");
-      u = s.x + s.width * 0.05, d = s.y + s.height * 0.75;
+      f = c.x + c.width * 0.25, l ? d = c.y + c.height * 2 : d = c.y + c.height * 0.75;
       break;
     }
   }
-  await t.mouse.move(c, w), await t.mouse.down(), await t.mouse.move(c + 1, w + 1), await t.mouse.move(u, d, { steps: 10 }), await t.evaluate(() => new Promise(requestAnimationFrame)), await t.mouse.up();
+  await t.mouse.move(w, m), await t.mouse.down(), await t.mouse.move(w + 1, m + 1), await t.mouse.move(f, d, { steps: 10 }), await t.evaluate(() => new Promise(requestAnimationFrame)), await t.waitForTimeout(120), await t.mouse.up(), await t.waitForTimeout(120), await e(i).toHaveCount(1);
 }
-async function l(t) {
+async function b(t) {
   const e = await t.getAttribute("data-tree-item-id");
   if (!e)
     throw new Error("Tree item does not have data-tree-item-id");
   return e;
 }
-async function x(t, e, o, a) {
-  const n = await t.getByRole("treeitem").allTextContents();
-  e(n.indexOf(o)).toBeLessThan(n.indexOf(a));
+async function y(t, e, o, s) {
+  const i = await t.locator('[role="treeitem"] [data-tree-item-label]').evaluateAll((r) => r.map((w) => {
+    var m;
+    return (m = w.textContent) == null ? void 0 : m.trim();
+  })), n = i.indexOf(o), a = i.indexOf(s);
+  e(n).toBeLessThan(a);
 }
-async function h(t, e, o) {
-  const a = await l(o);
-  await t(e).toHaveAttribute("data-tree-item-parent-id", a);
+async function B(t, e, o, s) {
+  const i = u(t, o), n = u(t, s), a = await b(n);
+  await e(i).toHaveAttribute("data-tree-item-parent-id", a);
 }
-async function B(t, e, o) {
-  const a = await l(o);
-  await t(e).not.toHaveAttribute("data-tree-item-parent-id", a);
+async function I(t, e, o, s) {
+  const i = u(t, o), n = u(t, s), a = await b(n);
+  await e(i).not.toHaveAttribute("data-tree-item-parent-id", a);
 }
 export {
-  f as dragItem,
-  x as expectItemBefore,
-  B as expectItemNotToBeChildOf,
-  h as expectItemToBeChildOf,
-  l as getTreeItemId
+  g as dragItem,
+  y as expectItemBefore,
+  I as expectItemNotToBeChildOf,
+  B as expectItemToBeChildOf,
+  u as getTreeItem,
+  b as getTreeItemId
 };

package/dist/e2e/utils/expect-item-before.d.ts

@@ -1,2 +1,2 @@
-import { Expect, Page } from '@playwright/test';
-export declare function expectItemBefore(page: Page, expect: Expect, first: string, second: string): Promise<void>;
+import { Page, Expect } from '@playwright/test';
+export declare function expectItemBefore(page: Page, expect: Expect, beforeLabel: string, afterLabel: string): Promise<void>;

package/dist/e2e/utils/expect-item-child-of.d.ts

@@ -1,3 +1,3 @@
-import { Locator, Expect } from '@playwright/test';
-export declare function expectItemToBeChildOf(expect: Expect, child: Locator, parent: Locator): Promise<void>;
-export declare function expectItemNotToBeChildOf(expect: Expect, child: Locator, parent: Locator): Promise<void>;
+import { Page, Expect } from '@playwright/test';
+export declare function expectItemToBeChildOf(page: Page, expect: Expect, child: string, parent: string): Promise<void>;
+export declare function expectItemNotToBeChildOf(page: Page, expect: Expect, child: string, parent: string): Promise<void>;

package/dist/e2e/utils/get-tree-item.d.ts

@@ -0,0 +1,4 @@
+import { Page, Locator } from '@playwright/test';
+export declare function getTreeItem(page: Page, name: string, options?: {
+    exact?: boolean;
+}): Locator;

package/dist/e2e/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './drag-item';
+export * from './get-tree-item';
 export * from './get-tree-item-id';
 export * from './expect-item-before';
 export * from './expect-item-child-of';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clevertask/react-sortable-tree",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "type": "module",
   "license": "MIT",
   "author": "CleverTask",