feat(test): added drag util and updated tests

.changeset/blue-rabbits-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@yamada-ui/test": minor
+---
+
+Added `drag` util function.

packages/components/reorder/tests/reorder.test.tsx

@@ -1,4 +1,4 @@
-import { a11y, act, render, screen, waitFor } from "@yamada-ui/test"
+import { a11y, act, drag, render, screen, waitFor } from "@yamada-ui/test"
 import { useState } from "react"
 import type { ReorderGenerateItem } from "../src"
 import { Reorder, ReorderItem, ReorderTrigger } from "../src"
@@ -176,21 +176,7 @@ describe("<Reorder />", () => {
 
     const el = screen.getByText("Item 1")
 
-    await user.pointer([
-      {
-        target: el,
-        keys: "[MouseLeft>]",
-        coords: { x: 0, y: 0 },
-      },
-      ...Array(10)
-        .fill(0)
-        .map((_, i) => ({
-          coords: { x: 0, y: (i + 1) * 100 },
-        })),
-      {
-        keys: "[/MouseLeft]",
-      },
-    ])
+    await drag(user)({ target: el, coords: (i) => ({ x: 0, y: i * 100 }) })
 
     await waitFor(() => {
       expect(onChange).toHaveBeenCalledWith(["Item 2", "Item 1"])

packages/hooks/use-pan-event/tests/index.test.tsx

@@ -1,4 +1,4 @@
-import { render, waitFor } from "@yamada-ui/test"
+import { drag, render, waitFor } from "@yamada-ui/test"
 import type { FC } from "react"
 import { useRef } from "react"
 import type { UsePanEventProps } from "../src"
@@ -40,22 +40,6 @@ describe("usePanEvent", () => {
     return <div ref={ref} data-testid="el" />
   }
 
-  const pointerInput = (target: HTMLElement) => [
-    {
-      target,
-      keys: "[MouseLeft>]",
-      coords: { x: 0, y: 0 },
-    },
-    ...Array(10)
-      .fill(0)
-      .map((_, i) => ({
-        coords: { x: (i + 1) * 10, y: (i + 1) * 10 },
-      })),
-    {
-      keys: "[/MouseLeft]",
-    },
-  ]
-
   test("should start pan session on pointerdown", async () => {
     const onSessionStart = vi.fn()
 
@@ -90,7 +74,7 @@ describe("usePanEvent", () => {
 
     const el = getByTestId("el")
 
-    await user.pointer(pointerInput(el))
+    await drag(user)({ target: el, coords: (i) => ({ x: i * 10, y: i * 10 }) })
 
     await waitFor(() =>
       expect(onStart).toHaveBeenCalledWith(
@@ -112,7 +96,7 @@ describe("usePanEvent", () => {
 
     const el = getByTestId("el")
 
-    await user.pointer(pointerInput(el))
+    await drag(user)({ target: el, coords: (i) => ({ x: i * 10, y: i * 10 }) })
 
     await waitFor(() =>
       expect(onMove).toHaveBeenCalledWith(
@@ -134,7 +118,7 @@ describe("usePanEvent", () => {
 
     const el = getByTestId("el")
 
-    await user.pointer(pointerInput(el))
+    await drag(user)({ target: el, coords: (i) => ({ x: i * 10, y: i * 10 }) })
 
     await waitFor(() =>
       expect(onEnd).toHaveBeenCalledWith(
@@ -154,7 +138,7 @@ describe("usePanEvent", () => {
 
     const el = getByTestId("el")
 
-    await user.pointer(pointerInput(el))
+    await drag(user)({ target: el, coords: (i) => ({ x: i * 10, y: i * 10 }) })
 
     await waitFor(() =>
       expect(onSessionEnd).toHaveBeenCalledWith(

packages/test/src/drag.ts

@@ -0,0 +1,81 @@
+import type { UserEvent } from "@testing-library/user-event"
+import { runIfFunc } from "@yamada-ui/utils"
+import { sleep } from "./utils"
+
+const DEFAULT_COUNT = 11
+
+export type PointerCoords = {
+  x?: number
+  y?: number
+  clientX?: number
+  clientY?: number
+  offsetX?: number
+  offsetY?: number
+  pageX?: number
+  pageY?: number
+  screenX?: number
+  screenY?: number
+}
+
+export type PointerInput = {
+  target?: HTMLElement
+  keys?: string
+  coords?: PointerCoords
+  node?: Node
+  offset?: number
+}
+
+export type DragOptions = {
+  target?: HTMLElement
+  count?: number
+  interval?: number
+  keys?: string | ((index: number) => string | undefined)
+  coords?: PointerCoords | ((index: number) => PointerCoords | undefined)
+}
+
+const defaultKeys = (i: number) => {
+  const isStart = i === 0
+  const isEnd = i === DEFAULT_COUNT - 1
+
+  if (isStart) {
+    return "[MouseLeft>]"
+  } else if (isEnd) {
+    return "[/MouseLeft]"
+  }
+
+  return undefined
+}
+
+const defaultCoords = (i: number) => {
+  const isEnd = i === DEFAULT_COUNT - 1
+
+  return !isEnd ? { x: 0, y: i * 100 } : undefined
+}
+
+export const drag =
+  (user: UserEvent) =>
+  async ({
+    target,
+    count = DEFAULT_COUNT,
+    interval = 50,
+    keys: _keys = defaultKeys,
+    coords: _coords = defaultCoords,
+  }: DragOptions) => {
+    const timeline = [...Array(count).keys()]
+
+    for await (const i of timeline) {
+      const isStart = i === 0
+      const keys = runIfFunc(_keys, i)
+      const coords = runIfFunc(_coords, i)
+
+      const input: PointerInput = {}
+
+      if (isStart) input.target = target
+      if (keys) input.keys = keys
+      if (coords) input.coords = coords
+
+      await user.pointer(input)
+
+      await sleep(interval)
+    }
+  }

packages/test/src/index.ts

@@ -12,3 +12,4 @@ export * from "./render"
 export * from "./accessibility"
 export * from "./focus"
 export * from "./mocks"
+export * from "./drag"