test: changes touch tests to use PointerEvents

formkit · Aug 7, 2024 · 6260d2d · 6260d2d
1 parent a09cfcf
commit 6260d2d
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 209 deletions.
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -28,22 +28,22 @@ export default defineConfig({
       },
     },
     {
-      name: "Mobile Chrome Touch Tests",
-      testMatch: "tests/touch/**/*.spec.ts",
+      name: "Mobile Chrome Synthetic Drag Tests",
+      testMatch: "tests/synthetic-drag/**/*.spec.ts",
       use: {
         ...devices["Mobile Chrome"],
       },
     },
     {
-      name: "Mobile Safari Touch Tests",
-      testMatch: "tests/touch/**/*.spec.ts",
+      name: "Mobile Safari Synthetic Drag Tests",
+      testMatch: "tests/synthetic-drag/**/*.spec.ts",
       use: {
         ...devices["Mobile Safari"],
       },
     },
     {
-      name: "Mobile Firefox Touch Tests",
-      testMatch: "tests/touch/**/*.spec.ts",
+      name: "Mobile Firefox Synthtic Drag Tests",
+      testMatch: "tests/synthetic-drag/**/*.spec.ts",
       use: {
         ...devices["Mobile Firefox"],
       },

diff --git a/playwright/tests-frameworks/index.spec.ts b/playwright/tests-frameworks/index.spec.ts
@@ -1,5 +1,5 @@
 import { test, expect, Page } from "@playwright/test";
-import { dragDrop } from "../utils";
+import { drag } from "../utils";
 
 let page: Page;
 
@@ -11,7 +11,7 @@ test.beforeAll(async ({ browser }) => {
 test.describe("Vue wrappers working as expected", async () => {
   test("dragAndDrop() can enable sorting, accept new values, and update the parent config", async () => {
     // Check that the list items can be sorted
-    await dragDrop(page, {
+    await drag(page, {
       originEl: {
         id: "vue_drag_and_drop_10_of_clubs",
         position: "center",
@@ -32,7 +32,7 @@ test.describe("Vue wrappers working as expected", async () => {
       "jack_of_hearts 10_of_clubs queen_of_spades"
     );
     // Check that the list items can be sorted
-    await dragDrop(page, {
+    await drag(page, {
       originEl: {
         id: "vue_drag_and_drop_10_of_clubs",
         position: "center",
@@ -50,7 +50,7 @@ test.describe("Vue wrappers working as expected", async () => {
     // Disable drag and drop
     await page.locator("#vue_drag_and_drop_disable").click();
     // Check that the list items can not be sorted
-    await dragDrop(page, {
+    await drag(page, {
       originEl: {
         id: "vue_drag_and_drop_10_of_clubs",
         position: "center",
@@ -69,7 +69,7 @@ test.describe("Vue wrappers working as expected", async () => {
 
   test("useDragAndDrop() can enable sorting, accept new values, and update the parent config", async () => {
     // Check that the list items can be sorted
-    await dragDrop(page, {
+    await drag(page, {
       originEl: {
         id: "vue_use_drag_and_drop_10_of_clubs",
         position: "center",
@@ -90,7 +90,7 @@ test.describe("Vue wrappers working as expected", async () => {
       "jack_of_hearts 10_of_clubs queen_of_spades"
     );
     // Check that the list items can be sorted
-    await dragDrop(page, {
+    await drag(page, {
       originEl: {
         id: "vue_use_drag_and_drop_10_of_clubs",
         position: "center",
@@ -108,7 +108,7 @@ test.describe("Vue wrappers working as expected", async () => {
     // Disable drag and drop
     await page.locator("#vue_use_drag_and_drop_disable").click();
     // Check that the list items can not be sorted
-    await dragDrop(page, {
+    await drag(page, {
       originEl: {
         id: "vue_use_drag_and_drop_10_of_clubs",
         position: "center",
@@ -129,7 +129,7 @@ test.describe("Vue wrappers working as expected", async () => {
 test.describe("React wrapper working as expected", async () => {
   test("dragAndDrop() can enable sorting, accept new values, and update the parent config", async () => {
     // Check that the list items can be sorted
-    await dragDrop(page, {
+    await drag(page, {
       originEl: {
         id: "react_drag_and_drop_10_of_clubs",
         position: "center",
@@ -150,7 +150,7 @@ test.describe("React wrapper working as expected", async () => {
       "jack_of_hearts 10_of_clubs queen_of_spades"
     );
     // Check that the list items can be sorted
-    await dragDrop(page, {
+    await drag(page, {
       originEl: {
         id: "react_drag_and_drop_10_of_clubs",
         position: "center",
@@ -168,7 +168,7 @@ test.describe("React wrapper working as expected", async () => {
     // Disable drag and drop
     await page.locator("#react_drag_and_drop_disable").click();
     // Check that the list items can not be sorted
-    await dragDrop(page, {
+    await drag(page, {
       originEl: {
         id: "react_drag_and_drop_10_of_clubs",
         position: "center",
@@ -187,7 +187,7 @@ test.describe("React wrapper working as expected", async () => {
 
   test("useDragAndDrop() can enable sorting, accept new values, and update the parent config", async () => {
     // Check that the list items can be sorted
-    await dragDrop(page, {
+    await drag(page, {
       originEl: {
         id: "react_use_drag_and_drop_10_of_clubs",
         position: "center",
@@ -208,7 +208,7 @@ test.describe("React wrapper working as expected", async () => {
       "jack_of_hearts 10_of_clubs queen_of_spades"
     );
     // Check that the list items can be sorted
-    await dragDrop(page, {
+    await drag(page, {
       originEl: {
         id: "react_use_drag_and_drop_10_of_clubs",
         position: "center",
@@ -226,7 +226,7 @@ test.describe("React wrapper working as expected", async () => {
     // Disable drag and drop
     await page.locator("#react_use_drag_and_drop_disable").click();
     // Check that the list items can not be sorted
-    await dragDrop(page, {
+    await drag(page, {
       originEl: {
         id: "react_use_drag_and_drop_10_of_clubs",
         position: "center",

diff --git a/playwright/tests/drag/sort.spec.ts b/playwright/tests/drag/sort.spec.ts
@@ -1,5 +1,5 @@
 import { test, expect, Page } from "@playwright/test";
-import { dragDrop } from "../../utils";
+import { drag } from "../../utils";
 
 let page: Page;
 
@@ -11,31 +11,31 @@ test.describe("Sorting", async () => {
   test("Drag sort", async () => {
     await page.goto("http://localhost:3001/sort");
     await new Promise((r) => setTimeout(r, 1000));
-    await dragDrop(page, {
+    await drag(page, {
       originEl: { id: "Apple", position: "center" },
       destinationEl: { id: "Banana", position: "center" },
       dragStart: true,
     });
     await expect(page.locator("#sort_values")).toHaveText(
       "Banana Apple Orange"
     );
-    await dragDrop(page, {
+    await drag(page, {
       originEl: { id: "Banana", position: "center" },
       destinationEl: { id: "Orange", position: "center" },
       drop: true,
     });
     await expect(page.locator("#sort_values")).toHaveText(
       "Banana Orange Apple"
     );
-    await dragDrop(page, {
+    await drag(page, {
       originEl: { id: "Banana", position: "center" },
       destinationEl: { id: "Orange", position: "center" },
       dragStart: true,
     });
     await expect(page.locator("#sort_values")).toHaveText(
       "Orange Banana Apple"
     );
-    await dragDrop(page, {
+    await drag(page, {
       originEl: { id: "Banana", position: "center" },
       destinationEl: { id: "Apple", position: "center" },
     });
@@ -47,31 +47,31 @@ test.describe("Sorting", async () => {
   test("Uneven drag sort", async () => {
     await page.goto("http://localhost:3001/sort/uneven");
     await new Promise((r) => setTimeout(r, 1000));
-    await dragDrop(page, {
+    await drag(page, {
       originEl: { id: "Apple", position: "center" },
       destinationEl: { id: "Banana", position: "center" },
       dragStart: true,
     });
     await expect(page.locator("#sort_values")).toHaveText(
       "Banana Apple Orange"
     );
-    await dragDrop(page, {
+    await drag(page, {
       originEl: { id: "Banana", position: "center" },
       destinationEl: { id: "Orange", position: "center" },
       drop: true,
     });
     await expect(page.locator("#sort_values")).toHaveText(
       "Banana Orange Apple"
     );
-    await dragDrop(page, {
+    await drag(page, {
       originEl: { id: "Banana", position: "center" },
       destinationEl: { id: "Orange", position: "center" },
       dragStart: true,
     });
     await expect(page.locator("#sort_values")).toHaveText(
       "Orange Banana Apple"
     );
-    await dragDrop(page, {
+    await drag(page, {
       originEl: { id: "Banana", position: "center" },
       destinationEl: { id: "Apple", position: "center" },
     });
@@ -83,31 +83,31 @@ test.describe("Sorting", async () => {
   test("Sort with animations", async () => {
     await page.goto("http://localhost:3001/sort/animations");
     await new Promise((r) => setTimeout(r, 1000));
-    await dragDrop(page, {
+    await drag(page, {
       originEl: { id: "Apple", position: "center" },
       destinationEl: { id: "Banana", position: "center" },
       dragStart: true,
     });
     await expect(page.locator("#sort_values")).toHaveText(
       "Banana Apple Orange"
     );
-    await dragDrop(page, {
+    await drag(page, {
       originEl: { id: "Banana", position: "center" },
       destinationEl: { id: "Orange", position: "center" },
       drop: true,
     });
     await expect(page.locator("#sort_values")).toHaveText(
       "Banana Orange Apple"
     );
-    await dragDrop(page, {
+    await drag(page, {
       originEl: { id: "Banana", position: "center" },
       destinationEl: { id: "Orange", position: "center" },
       dragStart: true,
     });
     await expect(page.locator("#sort_values")).toHaveText(
       "Orange Banana Apple"
     );
-    await dragDrop(page, {
+    await drag(page, {
       originEl: { id: "Banana", position: "center" },
       destinationEl: { id: "Apple", position: "center" },
     });
@@ -119,31 +119,31 @@ test.describe("Sorting", async () => {
   test("Sort with uneven els and animations", async () => {
     await page.goto("http://localhost:3001/sort/uneven-animations");
     await new Promise((r) => setTimeout(r, 1000));
-    await dragDrop(page, {
+    await drag(page, {
       originEl: { id: "Apple", position: "center" },
       destinationEl: { id: "Banana", position: "center" },
       dragStart: true,
     });
     await expect(page.locator("#sort_values")).toHaveText(
       "Banana Apple Orange"
     );
-    await dragDrop(page, {
+    await drag(page, {
       originEl: { id: "Banana", position: "center" },
       destinationEl: { id: "Orange", position: "center" },
       drop: true,
     });
     await expect(page.locator("#sort_values")).toHaveText(
       "Banana Orange Apple"
     );
-    await dragDrop(page, {
+    await drag(page, {
       originEl: { id: "Banana", position: "center" },
       destinationEl: { id: "Orange", position: "center" },
       dragStart: true,
     });
     await expect(page.locator("#sort_values")).toHaveText(
       "Orange Banana Apple"
     );
-    await dragDrop(page, {
+    await drag(page, {
       originEl: { id: "Banana", position: "center" },
       destinationEl: { id: "Apple", position: "center" },
     });

diff --git a/playwright/tests/drag/swap.spec.ts b/playwright/tests/drag/swap.spec.ts
@@ -1,5 +1,5 @@
 import { test, expect, Page } from "@playwright/test";
-import { dragDrop } from "../../utils";
+import { drag } from "../../utils";
 
 let page: Page;
 
@@ -11,13 +11,13 @@ test.describe("Drag swap", async () => {
   test("Drag swap", async () => {
     await page.goto("http://localhost:3001/swap");
     await new Promise((r) => setTimeout(r, 1000));
-    await dragDrop(page, {
+    await drag(page, {
       originEl: { id: "Apple", position: "center" },
       destinationEl: { id: "Banana", position: "center" },
       dragStart: true,
     });
     await expect(page.locator("#values_1")).toHaveText("Apple Banana Orange");
-    await dragDrop(page, {
+    await drag(page, {
       originEl: { id: "Banana", position: "center" },
       destinationEl: { id: "Banana", position: "center" },
       drop: true,

diff --git a/playwright/tests/drag/transfer.spec.ts b/playwright/tests/drag/transfer.spec.ts
@@ -1,5 +1,5 @@
 import { test, expect, Page } from "@playwright/test";
-import { dragDrop } from "../../utils";
+import { drag } from "../../utils";
 
 let page: Page;
 
@@ -11,7 +11,7 @@ test.beforeAll(async ({ browser }) => {
 test.describe("Transferring", async () => {
   test("Drag transferring works as expected.", async () => {
     await new Promise((r) => setTimeout(r, 1000));
-    await dragDrop(page, {
+    await drag(page, {
       originEl: {
         id: "Apple",
         position: "center",
@@ -24,7 +24,7 @@ test.describe("Transferring", async () => {
     await expect(page.locator("#values_2")).toHaveText(
       "Cherry Grape Pineapple Apple"
     );
-    await dragDrop(page, {
+    await drag(page, {
       originEl: {
         id: "Apple",
         position: "center",
@@ -38,7 +38,7 @@ test.describe("Transferring", async () => {
     await expect(page.locator("#values_3")).toHaveText(
       "Strawberry Watermelon Kiwi Apple"
     );
-    await dragDrop(page, {
+    await drag(page, {
       originEl: {
         id: "Strawberry",
         position: "center",
@@ -55,7 +55,7 @@ test.describe("Transferring", async () => {
       "Cherry Grape Pineapple Strawberry"
     );
     await expect(page.locator("#values_3")).toHaveText("Watermelon Kiwi Apple");
-    await dragDrop(page, {
+    await drag(page, {
       originEl: {
         id: "Strawberry",
         position: "center",