Add a new e2e testing utility package to improve testing workflow

packages/dflex-dnd-playground/package.json

@@ -12,6 +12,7 @@
     "@dflex/dnd": "workspace:^3.9.4"
   },
   "devDependencies": {
+    "dflex-e2e-utils": "workspace:^1.0.0",
     "cypress": "^13.2.0",
     "eslint": "^8.49.0",
     "eslint-config-dflex-react": "workspace:*",

packages/dflex-dnd-playground/tests/core/cases/consistency.spec.ts

@@ -14,7 +14,7 @@ import {
   initialize,
   invokeKeyboardAndAssertEmittedMsg,
   moveDragged,
-} from "../../utils";
+} from "dflex-e2e-utils";
 
 test.describe
   .serial("Moves out, goes back to the same position, settles in, moves another element", async () => {

packages/dflex-dnd-playground/tests/core/cases/orphan.outList.spec.ts

@@ -11,7 +11,7 @@ import {
   getDraggedRect,
   initialize,
   moveDragged,
-} from "../../utils";
+} from "dflex-e2e-utils";
 
 test.describe.serial("Orphan dragged won't break", async () => {
   let page: Page;

packages/dflex-dnd-playground/tests/core/cases/outContainer.threshold.spec.ts

@@ -13,7 +13,7 @@ import {
   initialize,
   invokeKeyboardAndAssertEmittedMsg,
   moveDragged,
-} from "../../utils";
+} from "dflex-e2e-utils";
 
 test.describe
   .serial("Moves the element above the container testing threshold for coming back", async () => {

packages/dflex-dnd-playground/tests/core/newPosition/continuity.multiPositions.spec.ts

@@ -14,7 +14,7 @@ import {
   initialize,
   invokeKeyboardAndAssertEmittedMsg,
   moveDragged,
-} from "../../utils";
+} from "dflex-e2e-utils";
 
 test.describe.serial("Drag and release multiples positions", async () => {
   let page: Page;

packages/dflex-dnd-playground/tests/core/newPosition/continuity.noRelease.spec.ts

@@ -13,7 +13,7 @@ import {
   initialize,
   invokeKeyboardAndAssertEmittedMsg,
   moveDragged,
-} from "../../utils";
+} from "dflex-e2e-utils";
 
 test.describe
   .serial("Moving out then insert - Up/Down - No release", async () => {

packages/dflex-dnd-playground/tests/core/newPosition/continuity.release.spec.ts

@@ -13,7 +13,7 @@ import {
   initialize,
   invokeKeyboardAndAssertEmittedMsg,
   moveDragged,
-} from "../../utils";
+} from "dflex-e2e-utils";
 
 test.describe.serial("Moving out then insert - Up/Down - Release", async () => {
   let page: Page;

packages/dflex-dnd-playground/tests/core/obliquity/bottomUp.spec.ts

@@ -13,7 +13,7 @@ import {
   initialize,
   invokeKeyboardAndAssertEmittedMsg,
   moveDragged,
-} from "../../utils";
+} from "dflex-e2e-utils";
 
 test.describe.serial("Dragging from bottom up", async () => {
   let page: Page;

packages/dflex-dnd-playground/tests/core/obliquity/upBottom.spec.ts

@@ -14,7 +14,7 @@ import {
   initialize,
   invokeKeyboardAndAssertEmittedMsg,
   moveDragged,
-} from "../../utils";
+} from "dflex-e2e-utils";
 
 test.describe.serial("Dragging from bottom up", async () => {
   let page: Page;

packages/dflex-dnd-playground/tests/core/outList/horizontally.spec.ts

@@ -14,7 +14,7 @@ import {
   initialize,
   invokeKeyboardAndAssertEmittedMsg,
   moveDragged,
-} from "../../utils";
+} from "dflex-e2e-utils";
 
 test.describe
   .serial("Dragged is strictly out container list horizontally", async () => {

packages/dflex-dnd-playground/tests/core/outList/vertically.spec.ts

@@ -14,7 +14,7 @@ import {
   initialize,
   invokeKeyboardAndAssertEmittedMsg,
   moveDragged,
-} from "../../utils";
+} from "dflex-e2e-utils";
 
 test.describe
   .serial("Dragged is strictly out container list vertically", async () => {

packages/dflex-dnd-playground/tests/core/outPosition/horizontally.spec.ts

@@ -11,7 +11,7 @@ import {
   getDraggedRect,
   initialize,
   moveDragged,
-} from "../../utils";
+} from "dflex-e2e-utils";
 
 test.describe.serial("Dragged is out position horizontally", async () => {
   let page: Page;

packages/dflex-dnd-playground/tests/core/outPosition/vertically.spec.ts

@@ -11,7 +11,7 @@ import {
   getDraggedRect,
   initialize,
   moveDragged,
-} from "../../utils";
+} from "dflex-e2e-utils";
 
 test.describe.serial("Dragged is out position vertically", async () => {
   let page: Page;

packages/dflex-dnd-playground/tests/features/grid.spec.ts

@@ -18,7 +18,7 @@ import {
   moveDragged,
   DEVELOPMENT_ONLY_ASSERTION,
   isProdBundle,
-} from "../utils";
+} from "dflex-e2e-utils";
 import { DOMGenKeysType } from "../utils/sharedTypes";
 
 test.describe("Transformation inside grid container", async () => {

packages/dflex-dnd-playground/tests/features/multiDepth.spec.ts

@@ -14,7 +14,7 @@ import {
   initialize,
   invokeKeyboardAndAssertEmittedMsg,
   moveDragged,
-} from "../utils";
+} from "dflex-e2e-utils";
 
 test.describe("Testing horizontal transformation in depth (1). Vertical in depth (1)", async () => {
   let page: Page;

packages/dflex-dnd-playground/tests/features/resize.reconcile.spec.ts

@@ -16,7 +16,7 @@ import {
   initialize,
   // invokeKeyboardAndAssertEmittedMsg,
   moveDragged,
-} from "../utils";
+} from "dflex-e2e-utils";
 
 test.describe
   .serial("Resizing window will automatically reconcile elements and refresh elements DOMRect", async () => {

packages/dflex-dnd-playground/tests/features/stabilizer.spec.ts

@@ -11,7 +11,7 @@ import {
   getDraggedRect,
   initialize,
   moveDragged,
-} from "../utils";
+} from "dflex-e2e-utils";
 
 test.describe("Testing stabilizer between two intersected thresholds", async () => {
   let page: Page;

packages/dflex-dnd-playground/tests/keys/grid.keys.spec.ts

@@ -5,7 +5,7 @@ import {
   DEVELOPMENT_ONLY_ASSERTION,
   isProdBundle,
   DFlexPageTest as test,
-} from "../utils";
+} from "dflex-e2e-utils";
 import { DOMGenKeysType } from "../utils/sharedTypes";
 
 test.describe

packages/dflex-dnd-playground/tests/keys/landing.keys.spec.ts

@@ -5,7 +5,7 @@ import {
   DEVELOPMENT_ONLY_ASSERTION,
   isProdBundle,
   DFlexPageTest as test,
-} from "../utils";
+} from "dflex-e2e-utils";
 import { DOMGenKeysType } from "../utils/sharedTypes";
 
 test.describe

packages/dflex-dnd-playground/tests/keys/migration.keys.spec.ts

@@ -5,7 +5,7 @@ import {
   DEVELOPMENT_ONLY_ASSERTION,
   isProdBundle,
   DFlexPageTest as test,
-} from "../utils";
+} from "dflex-e2e-utils";
 import { DOMGenKeysType } from "../utils/sharedTypes";
 
 test.describe

packages/dflex-dnd-playground/tests/keys/stream.inc.keys.spec.ts

@@ -5,7 +5,7 @@ import {
   DEVELOPMENT_ONLY_ASSERTION,
   isProdBundle,
   DFlexPageTest as test,
-} from "../utils";
+} from "dflex-e2e-utils";
 import { DOMGenKeysType } from "../utils/sharedTypes";
 
 test.describe

packages/dflex-dnd-playground/tests/multiple-containers/emptyContainer.horizontal.spec.ts

@@ -15,7 +15,7 @@ import {
   initialize,
   invokeKeyboardAndAssertEmittedMsg,
   moveDragged,
-} from "../utils";
+} from "dflex-e2e-utils";
 
 test.describe
   .serial("Migrate element into new container reconcile then migrate to its origin container when it's empty", async () => {

packages/dflex-dnd-playground/tests/multiple-containers/strict.horizontal.spec.ts

@@ -15,7 +15,7 @@ import {
   initialize,
   invokeKeyboardAndAssertEmittedMsg,
   moveDragged,
-} from "../utils";
+} from "dflex-e2e-utils";
 
 test.describe
   .serial("Transitioning the last element into the bottom of a bigger container horizontally", async () => {

packages/dflex-dnd-playground/tests/scroll/scroll.container.spec.ts

@@ -6,7 +6,7 @@ import {
   expect,
 } from "@playwright/test";
 
-import { DFlexPageTest as test } from "../utils";
+import { DFlexPageTest as test } from "dflex-e2e-utils";
 
 test.describe.parallel("Resolve scroll container correctly", async () => {
   let context: BrowserContext;

packages/dflex-dnd-playground/tests/scroll/scrollV.inside.spec.ts

@@ -14,7 +14,7 @@ import {
   initialize,
   moveDragged,
   TransformTimeout,
-} from "../utils";
+} from "dflex-e2e-utils";
 
 test.describe.serial("Drag the first element down vertically", async () => {
   let page: Page;

packages/dflex-dnd-playground/tests/scroll/scrollV.upDown.spec.ts

@@ -14,7 +14,7 @@ import {
   initialize,
   moveDragged,
   TransformTimeout,
-} from "../utils";
+} from "dflex-e2e-utils";
 
 test.describe.serial("Drag the first element down vertically", async () => {
   let page: Page;

packages/dflex-dnd-playground/tests/scroll/visibility.continuity.spec.ts

@@ -13,7 +13,7 @@ import {
   getDraggedRect,
   initialize,
   moveDragged,
-} from "../utils";
+} from "dflex-e2e-utils";
 
 test.describe
   .serial("Visible elements have transformation test focusing on continuity", async () => {

packages/dflex-dnd-playground/tests/scroll/visibility.isolation.spec.ts

@@ -13,7 +13,7 @@ import {
   getDraggedRect,
   initialize,
   moveDragged,
-} from "../utils";
+} from "dflex-e2e-utils";
 
 test.describe
   .serial("Visible elements have transformation after scrolling in isolation", async () => {

packages/dflex-dnd-playground/tests/stream/stream.inc.spec.ts

@@ -13,7 +13,7 @@ import {
   getDraggedRect,
   initialize,
   moveDragged,
-} from "../utils";
+} from "dflex-e2e-utils";
 
 test.describe("Stream incremental element then transform mutate and check the new positions", async () => {
   let page: Page;

packages/dflex-dnd-playground/tests/stream/stream.newELm.spec.ts

@@ -7,7 +7,7 @@ import {
   getDraggedRect,
   initialize,
   moveDragged,
-} from "../utils";
+} from "dflex-e2e-utils";
 
 test.describe("Stream new element then transform mutate and check the new positions", async () => {
   let page: Page;

packages/dflex-dnd-playground/tsconfig.json

@@ -6,5 +6,5 @@
     "outDir": "./types",
     "rootDir": "."
   },
-  "references": [{ "path": "../dflex-dnd" }]
+  "references": [{ "path": "../dflex-dnd" }, { "path": "../dflex-e2e-utils" }]
 }

packages/dflex-e2e-utils/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "dflex-e2e-utils",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "private": true,
+  "scripts": {},
+  "dependencies": {},
+  "devDependencies": {}
+}

packages/dflex-dnd-playground/tests/utils/DFlexPageTest.ts → packages/dflex-e2e-utils/src/DFlexPageTest.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import { test as base, expect } from "@playwright/test";
 
 export const DFlexPageTest = base.extend({

packages/dflex-dnd-playground/tests/utils/index.ts → packages/dflex-e2e-utils/src/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import { Page, Locator, expect, ConsoleMessage } from "@playwright/test";
 
 export { DFlexPageTest } from "./DFlexPageTest";

packages/dflex-e2e-utils/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*", "../../dflex-env.d.ts"],
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "./types",
+    "rootDir": "."
+  },
+  "references": [{ "path": "../dflex-dnd" }]
+}

packages/dflex-next-playground/package.json

@@ -13,16 +13,17 @@
     "@types/node": "^20.6.3",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
-    "autoprefixer": "10.4.15",
+    "autoprefixer": "10.4.16",
     "classnames": "^2.3.2",
-    "next": "13.5.1",
+    "next": "13.5.2",
     "postcss": "8.4.30",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "3.3.3",
     "typescript": "^5.2.2"
   },
   "devDependencies": {
+    "dflex-e2e-utils": "workspace:^1.0.0",
     "eslint": "^8.49.0",
     "eslint-config-dflex-react": "workspace:*"
   }

packages/dflex-next-playground/src/components/TodoContainer.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import cn from "classnames";
+
+const TodoContainer = ({
+  children,
+  isCenterV = true,
+  isCenterH = true,
+}: {
+  children: React.ReactNode;
+  isCenterH?: boolean;
+  isCenterV?: boolean;
+}) => {
+  const containerClasses = cn("flex", "min-h-screen", "p-6", {
+    "justify-center": isCenterV,
+    "items-center": isCenterH,
+  });
+
+  return (
+    <div className={containerClasses}>
+      <ul className="bg-green-50 border-2 border-blue-50 rounded p-4">
+        {children}
+      </ul>
+    </div>
+  );
+};
+
+export default TodoContainer;

packages/dflex-next-playground/src/components/index.ts

@@ -0,0 +1,2 @@
+export { default as TodoContainer } from "./TodoContainer";
+export { default as TodoItem } from "./TodoItem";

packages/dflex-next-playground/src/pages/index.tsx

@@ -1,6 +1,10 @@
 import React from "react";
 import Link from "next/link";
 
+function replaceSlashWithUnderscore(inputString: string): string {
+  return inputString.replace(/\//g, "_");
+}
+
 function ClickableBox({
   link,
   title,
@@ -13,6 +17,7 @@ function ClickableBox({
   return (
     <Link
       href={link}
+      id={replaceSlashWithUnderscore(link)}
       className="group rounded-lg border px-5 py-4 transition-colors border-gray-300 hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
     >
       <h2 className={`mb-3 text-2xl font-semibold`}>