diff --git a/packages/dflex-dnd-playground/package.json b/packages/dflex-dnd-playground/package.json index 7fee97644..a03e3a107 100644 --- a/packages/dflex-dnd-playground/package.json +++ b/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:*", diff --git a/packages/dflex-dnd-playground/tests/core/cases/consistency.spec.ts b/packages/dflex-dnd-playground/tests/core/cases/consistency.spec.ts index 16ab6885f..00baf1cf5 100644 --- a/packages/dflex-dnd-playground/tests/core/cases/consistency.spec.ts +++ b/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 () => { diff --git a/packages/dflex-dnd-playground/tests/core/cases/orphan.outList.spec.ts b/packages/dflex-dnd-playground/tests/core/cases/orphan.outList.spec.ts index 915b2ed52..a3d950602 100644 --- a/packages/dflex-dnd-playground/tests/core/cases/orphan.outList.spec.ts +++ b/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; diff --git a/packages/dflex-dnd-playground/tests/core/cases/outContainer.threshold.spec.ts b/packages/dflex-dnd-playground/tests/core/cases/outContainer.threshold.spec.ts index f43705ea5..59d5e90af 100644 --- a/packages/dflex-dnd-playground/tests/core/cases/outContainer.threshold.spec.ts +++ b/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 () => { diff --git a/packages/dflex-dnd-playground/tests/core/newPosition/continuity.multiPositions.spec.ts b/packages/dflex-dnd-playground/tests/core/newPosition/continuity.multiPositions.spec.ts index a960dad61..7466e9ee1 100644 --- a/packages/dflex-dnd-playground/tests/core/newPosition/continuity.multiPositions.spec.ts +++ b/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; diff --git a/packages/dflex-dnd-playground/tests/core/newPosition/continuity.noRelease.spec.ts b/packages/dflex-dnd-playground/tests/core/newPosition/continuity.noRelease.spec.ts index 755227147..11a4419ee 100644 --- a/packages/dflex-dnd-playground/tests/core/newPosition/continuity.noRelease.spec.ts +++ b/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 () => { diff --git a/packages/dflex-dnd-playground/tests/core/newPosition/continuity.release.spec.ts b/packages/dflex-dnd-playground/tests/core/newPosition/continuity.release.spec.ts index 5fceaa5bb..745318900 100644 --- a/packages/dflex-dnd-playground/tests/core/newPosition/continuity.release.spec.ts +++ b/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; diff --git a/packages/dflex-dnd-playground/tests/core/obliquity/bottomUp.spec.ts b/packages/dflex-dnd-playground/tests/core/obliquity/bottomUp.spec.ts index fa1200352..250f6ecc2 100644 --- a/packages/dflex-dnd-playground/tests/core/obliquity/bottomUp.spec.ts +++ b/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; diff --git a/packages/dflex-dnd-playground/tests/core/obliquity/upBottom.spec.ts b/packages/dflex-dnd-playground/tests/core/obliquity/upBottom.spec.ts index ff1ab5969..bbd8e898b 100644 --- a/packages/dflex-dnd-playground/tests/core/obliquity/upBottom.spec.ts +++ b/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; diff --git a/packages/dflex-dnd-playground/tests/core/outList/horizontally.spec.ts b/packages/dflex-dnd-playground/tests/core/outList/horizontally.spec.ts index 2ed4a8464..df4c27675 100644 --- a/packages/dflex-dnd-playground/tests/core/outList/horizontally.spec.ts +++ b/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 () => { diff --git a/packages/dflex-dnd-playground/tests/core/outList/vertically.spec.ts b/packages/dflex-dnd-playground/tests/core/outList/vertically.spec.ts index 2b737bc53..e4982e2d0 100644 --- a/packages/dflex-dnd-playground/tests/core/outList/vertically.spec.ts +++ b/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 () => { diff --git a/packages/dflex-dnd-playground/tests/core/outPosition/horizontally.spec.ts b/packages/dflex-dnd-playground/tests/core/outPosition/horizontally.spec.ts index cc665e6dc..f1ef34809 100644 --- a/packages/dflex-dnd-playground/tests/core/outPosition/horizontally.spec.ts +++ b/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; diff --git a/packages/dflex-dnd-playground/tests/core/outPosition/vertically.spec.ts b/packages/dflex-dnd-playground/tests/core/outPosition/vertically.spec.ts index c8ca9ee45..5f425b427 100644 --- a/packages/dflex-dnd-playground/tests/core/outPosition/vertically.spec.ts +++ b/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; diff --git a/packages/dflex-dnd-playground/tests/features/grid.spec.ts b/packages/dflex-dnd-playground/tests/features/grid.spec.ts index 46f347098..058f6e39e 100644 --- a/packages/dflex-dnd-playground/tests/features/grid.spec.ts +++ b/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 () => { diff --git a/packages/dflex-dnd-playground/tests/features/multiDepth.spec.ts b/packages/dflex-dnd-playground/tests/features/multiDepth.spec.ts index 988d0f9e4..91dcdbee8 100644 --- a/packages/dflex-dnd-playground/tests/features/multiDepth.spec.ts +++ b/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; diff --git a/packages/dflex-dnd-playground/tests/features/resize.reconcile.spec.ts b/packages/dflex-dnd-playground/tests/features/resize.reconcile.spec.ts index 54fd616ab..db61be98e 100644 --- a/packages/dflex-dnd-playground/tests/features/resize.reconcile.spec.ts +++ b/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 () => { diff --git a/packages/dflex-dnd-playground/tests/features/stabilizer.spec.ts b/packages/dflex-dnd-playground/tests/features/stabilizer.spec.ts index 94b5242af..af5434dc2 100644 --- a/packages/dflex-dnd-playground/tests/features/stabilizer.spec.ts +++ b/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; diff --git a/packages/dflex-dnd-playground/tests/keys/grid.keys.spec.ts b/packages/dflex-dnd-playground/tests/keys/grid.keys.spec.ts index 4fd3b8051..19f19ac6b 100644 --- a/packages/dflex-dnd-playground/tests/keys/grid.keys.spec.ts +++ b/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 diff --git a/packages/dflex-dnd-playground/tests/keys/landing.keys.spec.ts b/packages/dflex-dnd-playground/tests/keys/landing.keys.spec.ts index 6531dad04..5bc0eef82 100644 --- a/packages/dflex-dnd-playground/tests/keys/landing.keys.spec.ts +++ b/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 diff --git a/packages/dflex-dnd-playground/tests/keys/migration.keys.spec.ts b/packages/dflex-dnd-playground/tests/keys/migration.keys.spec.ts index 00bdbeb68..597c803ce 100644 --- a/packages/dflex-dnd-playground/tests/keys/migration.keys.spec.ts +++ b/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 diff --git a/packages/dflex-dnd-playground/tests/keys/stream.inc.keys.spec.ts b/packages/dflex-dnd-playground/tests/keys/stream.inc.keys.spec.ts index f29d81d22..0369c9b6c 100644 --- a/packages/dflex-dnd-playground/tests/keys/stream.inc.keys.spec.ts +++ b/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 diff --git a/packages/dflex-dnd-playground/tests/multiple-containers/emptyContainer.horizontal.spec.ts b/packages/dflex-dnd-playground/tests/multiple-containers/emptyContainer.horizontal.spec.ts index 0659b1b9a..db399ca0d 100644 --- a/packages/dflex-dnd-playground/tests/multiple-containers/emptyContainer.horizontal.spec.ts +++ b/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 () => { diff --git a/packages/dflex-dnd-playground/tests/multiple-containers/strict.horizontal.spec.ts b/packages/dflex-dnd-playground/tests/multiple-containers/strict.horizontal.spec.ts index 5683ce541..82b0448dd 100644 --- a/packages/dflex-dnd-playground/tests/multiple-containers/strict.horizontal.spec.ts +++ b/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 () => { diff --git a/packages/dflex-dnd-playground/tests/scroll/scroll.container.spec.ts b/packages/dflex-dnd-playground/tests/scroll/scroll.container.spec.ts index c62d93f89..61a092f8c 100644 --- a/packages/dflex-dnd-playground/tests/scroll/scroll.container.spec.ts +++ b/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; diff --git a/packages/dflex-dnd-playground/tests/scroll/scrollV.inside.spec.ts b/packages/dflex-dnd-playground/tests/scroll/scrollV.inside.spec.ts index 8bca4f205..bbccc6755 100644 --- a/packages/dflex-dnd-playground/tests/scroll/scrollV.inside.spec.ts +++ b/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; diff --git a/packages/dflex-dnd-playground/tests/scroll/scrollV.upDown.spec.ts b/packages/dflex-dnd-playground/tests/scroll/scrollV.upDown.spec.ts index c010f0ee9..137ea0b28 100644 --- a/packages/dflex-dnd-playground/tests/scroll/scrollV.upDown.spec.ts +++ b/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; diff --git a/packages/dflex-dnd-playground/tests/scroll/visibility.continuity.spec.ts b/packages/dflex-dnd-playground/tests/scroll/visibility.continuity.spec.ts index ac31ad6c9..64bb17a6e 100644 --- a/packages/dflex-dnd-playground/tests/scroll/visibility.continuity.spec.ts +++ b/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 () => { diff --git a/packages/dflex-dnd-playground/tests/scroll/visibility.isolation.spec.ts b/packages/dflex-dnd-playground/tests/scroll/visibility.isolation.spec.ts index 7e7e2063a..cd1caf627 100644 --- a/packages/dflex-dnd-playground/tests/scroll/visibility.isolation.spec.ts +++ b/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 () => { diff --git a/packages/dflex-dnd-playground/tests/stream/stream.inc.spec.ts b/packages/dflex-dnd-playground/tests/stream/stream.inc.spec.ts index 74e171e8a..9917202ea 100644 --- a/packages/dflex-dnd-playground/tests/stream/stream.inc.spec.ts +++ b/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; diff --git a/packages/dflex-dnd-playground/tests/stream/stream.newELm.spec.ts b/packages/dflex-dnd-playground/tests/stream/stream.newELm.spec.ts index aad4721f2..ca3e7d70d 100644 --- a/packages/dflex-dnd-playground/tests/stream/stream.newELm.spec.ts +++ b/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; diff --git a/packages/dflex-dnd-playground/tsconfig.json b/packages/dflex-dnd-playground/tsconfig.json index eb440cacf..1faed411b 100644 --- a/packages/dflex-dnd-playground/tsconfig.json +++ b/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" }] } diff --git a/packages/dflex-e2e-utils/package.json b/packages/dflex-e2e-utils/package.json new file mode 100644 index 000000000..e2b283708 --- /dev/null +++ b/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": {} +} diff --git a/packages/dflex-dnd-playground/tests/utils/DFlexPageTest.ts b/packages/dflex-e2e-utils/src/DFlexPageTest.ts similarity index 93% rename from packages/dflex-dnd-playground/tests/utils/DFlexPageTest.ts rename to packages/dflex-e2e-utils/src/DFlexPageTest.ts index 9db2c7479..94f61339a 100644 --- a/packages/dflex-dnd-playground/tests/utils/DFlexPageTest.ts +++ b/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({ diff --git a/packages/dflex-dnd-playground/tests/utils/index.ts b/packages/dflex-e2e-utils/src/index.ts similarity index 98% rename from packages/dflex-dnd-playground/tests/utils/index.ts rename to packages/dflex-e2e-utils/src/index.ts index 6c1e830c9..6460fd38a 100644 --- a/packages/dflex-dnd-playground/tests/utils/index.ts +++ b/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"; diff --git a/packages/dflex-e2e-utils/tsconfig.json b/packages/dflex-e2e-utils/tsconfig.json new file mode 100644 index 000000000..9aee03565 --- /dev/null +++ b/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" }] +} diff --git a/packages/dflex-next-playground/package.json b/packages/dflex-next-playground/package.json index cd86011c7..25a7aed47 100644 --- a/packages/dflex-next-playground/package.json +++ b/packages/dflex-next-playground/package.json @@ -13,9 +13,9 @@ "@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", @@ -23,6 +23,7 @@ "typescript": "^5.2.2" }, "devDependencies": { + "dflex-e2e-utils": "workspace:^1.0.0", "eslint": "^8.49.0", "eslint-config-dflex-react": "workspace:*" } diff --git a/packages/dflex-next-playground/src/components/TodoContainer.tsx b/packages/dflex-next-playground/src/components/TodoContainer.tsx new file mode 100644 index 000000000..0daeb95e2 --- /dev/null +++ b/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 ( +