Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Re-enable all skipped e2e tests for visual editor #332

Merged
merged 5 commits into from
Jan 21, 2025
Merged

Re-enable all skipped e2e tests for visual editor #332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5ba3e4e
WIP First drag and drop tests fixed
cbroeren Jan 7, 2025
0256b25
Merge branch 'main' into cb/more-e2e-tests
cbroeren Jan 9, 2025
1262cc2
Finish re-enabling visuel editor drag & drop tests
cbroeren Jan 14, 2025
d40c73f
Add a few more tests and test data
cbroeren Jan 14, 2025
8fcab8a
Forgot to commit new date-testid + prettier format
cbroeren Jan 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/svelte/components/SelectedElementFloatingMenu.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
class="absolute top-0 -m-3 w-6 h-6 rounded-full flex justify-center items-center bg-red-500 text-white hover:bg-red-700 focus:outline-none focus-visible:ring-4 focus-visible:ring-blue-200 active:bg-red-800"
style={`left: ${menuPosition.width}px;`}
aria-label="Delete component"
data-testid="element-delete-button"
>
<span class="hero-trash"></span>
</button>
Expand Down
4 changes: 2 additions & 2 deletions assets/svelte/components/SelectedElementFloatingMenu/DragMenuOption.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
import { tick } from "svelte"

export let element: Element
export let isParent = false // TODO: Not in use yet
export let isParent = false // TODO: Not in use yet other than for testing purposes

let originalSiblings: Element[]
let dragHandleElement: HTMLButtonElement
Expand Down Expand Up @@ -358,7 +358,7 @@
on:mousedown={handleMousedown}
class="rounded-full w-6 h-6 flex justify-center items-center absolute bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus-visible:ring-4 focus-visible:ring-blue-200 active:bg-blue-800 transform"
style={dragHandleStyle}
data-testid="drag-button"
data-testid="drag-button{isParent ? '-parent' : ''}"
>
<span
class:hero-arrows-right-left={dragDirection === "horizontal"}
Expand Down
62 changes: 31 additions & 31 deletions test/e2e/support/fixtures.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,67 +25,67 @@ defmodule Beacon.LiveAdminTest.E2E.Fixtures do
<div class="mb-8">
<h2 class="text-lg font-semibold mb-4">2. Vertical using Margins</h2>
<div>
<div class="mb-4 p-2 border rounded">Item 1<br />Small text.</div>
<div class="mb-4 p-2 border rounded">Item 2<br />Small text.</div>
<div class="mb-4 p-2 border rounded">Item 4<br />Small text.</div>
<div class="mb-4 p-2 border rounded">Item 3<br />Small text. <br /> But taller</div>
<div class="mb-4 p-2 border rounded">Item 5<br />Small text.</div>
<div class="mb-4 p-2 border rounded" data-testid="margin-col-item-1">Item 1<br />Small text.</div>
<div class="mb-4 p-2 border rounded" data-testid="margin-col-item-2">Item 2<br />Small text.</div>
<div class="mb-4 p-2 border rounded" data-testid="margin-col-item-3">Item 3<br />Small text.</div>
<div class="mb-4 p-2 border rounded" data-testid="margin-col-item-4">Item 4<br />Small text. <br /> But taller</div>
<div class="mb-4 p-2 border rounded" data-testid="margin-col-item-5">Item 5<br />Small text.</div>
</div>
</div>
<!-- 3. Row using Flexbox -->
<div class="mb-8">
<h2 class="text-lg font-semibold mb-4">3. Row using Flexbox</h2>
<div class="flex space-x-4">
<div class="p-2 border rounded">Item 1<br />Small text.</div>
<div class="p-2 border rounded">Item 2<br />Small text.</div>
<div class="p-2 border rounded">Item 4<br />Small text.</div>
<div class="p-2 border rounded flex-grow">Item 3<br />Wider element text.</div>
<div class="p-2 border rounded">Item 5<br />Small text.</div>
<div class="p-2 border rounded" data-testid="flex-row-item-1">Item 1<br />Small text.</div>
<div class="p-2 border rounded" data-testid="flex-row-item-2">Item 2<br />Small text.</div>
<div class="p-2 border rounded" data-testid="flex-row-item-3">Item 3<br />Small text.</div>
<div class="p-2 border rounded flex-grow" data-testid="flex-row-item-4">Item 4<br />Wider element text.</div>
<div class="p-2 border rounded" data-testid="flex-row-item-5">Item 5<br />Small text.</div>
</div>
</div>
<!-- 4. Vertical using Flexbox -->
<div class="mb-8">
<h2 class="text-lg font-semibold mb-4">4. Vertical using Flexbox</h2>
<div class="flex flex-col space-y-4">
<div class="p-2 border rounded">Item 1<br />Small text.</div>
<div class="p-2 border rounded">Item 2<br />Small text.</div>
<div class="p-2 border rounded">Item 3<br />Small text. <br /> But taller</div>
<div class="p-2 border rounded">Item 4<br />Small text.</div>
<div class="p-2 border rounded">Item 5<br />Small text.</div>
<div class="p-2 border rounded" data-testid="flex-col-item-1">Item 1<br />Small text.</div>
<div class="p-2 border rounded" data-testid="flex-col-item-2">Item 2<br />Small text.</div>
<div class="p-2 border rounded" data-testid="flex-col-item-3">Item 3<br />Small text. <br /> But taller</div>
<div class="p-2 border rounded" data-testid="flex-col-item-4">Item 4<br />Small text.</div>
<div class="p-2 border rounded" data-testid="flex-col-item-5">Item 5<br />Small text.</div>
</div>
</div>
<!-- 5. Row using CSS Grid -->
<div class="mb-8">
<h2 class="text-lg font-semibold mb-4">5. Row using CSS Grid (Single Row)</h2>
<div class="grid grid-cols-6 gap-4">
<div class="p-2 border rounded">Item 1<br />Small text.</div>
<div class="p-2 border rounded">Item 2<br />Small text.</div>
<div class="p-2 border rounded col-span-2">Item 3<br />Wider element text.</div>
<div class="p-2 border rounded">Item 4<br />Small text.</div>
<div class="p-2 border rounded">Item 5<br />Small text.</div>
<div class="p-2 border rounded" data-testid="css-row-item-1">Item 1<br />Small text.</div>
<div class="p-2 border rounded" data-testid="css-row-item-2">Item 2<br />Small text.</div>
<div class="p-2 border rounded col-span-2" data-testid="css-row-item-3">Item 3<br />Wider element text.</div>
<div class="p-2 border rounded" data-testid="css-row-item-4">Item 4<br />Small text.</div>
<div class="p-2 border rounded" data-testid="css-row-item-5">Item 5<br />Small text.</div>
</div>
</div>
<!-- 6. Vertical using CSS Grid -->
<div class="mb-8">
<h2 class="text-lg font-semibold mb-4">6. Vertical using CSS Grid</h2>
<div class="grid gap-4 grid-rows-6">
<div class="p-2 border rounded">Item 1<br />Small text.</div>
<div class="p-2 border rounded">Item 2<br />Small text.</div>
<div class="p-2 border rounded row-span-2">Item 3<br />Small text. <br /> But taller</div>
<div class="p-2 border rounded">Item 4<br />Small text.</div>
<div class="p-2 border rounded">Item 5<br />Small text.</div>
<div class="p-2 border rounded" data-testid="css-col-item-1">Item 1<br />Small text.</div>
<div class="p-2 border rounded" data-testid="css-col-item-2">Item 2<br />Small text.</div>
<div class="p-2 border rounded row-span-2" data-testid="css-col-item-3">Item 3<br />Small text. <br /> But taller</div>
<div class="p-2 border rounded" data-testid="css-col-item-4">Item 4<br />Small text.</div>
<div class="p-2 border rounded" data-testid="css-col-item-5">Item 5<br />Small text.</div>
</div>
</div>
<!-- 7. 2x3 Grid of Elements -->
<div class="mb-8">
<h2 class="text-lg font-semibold mb-4">7. 2x3 Grid of Elements</h2>
<div class="grid grid-cols-2 gap-4">
<div class="p-2 border rounded">Item 1<br />Small text.</div>
<div class="p-2 border rounded">Item 2<br />Small text.<br /> But taller</div>
<div class="p-2 border rounded">Item 3<br />Small text.</div>
<div class="p-2 border rounded">Item 4<br />Small text.</div>
<div class="p-2 border rounded">Item 5<br />Small text.</div>
<div class="p-2 border rounded">Item 6<br />Small text.</div>
<div class="p-2 border rounded" data-testid="grid-item-1">Item 1<br />Small text.</div>
<div class="p-2 border rounded" data-testid="grid-item-2">Item 2<br />Small text.<br /> But taller</div>
<div class="p-2 border rounded" data-testid="grid-item-3">Item 3<br />Small text.</div>
<div class="p-2 border rounded" data-testid="grid-item-4">Item 4<br />Small text.</div>
<div class="p-2 border rounded" data-testid="grid-item-5">Item 5<br />Small text.</div>
<div class="p-2 border rounded" data-testid="grid-item-6">Item 6<br />Small text.</div>
</div>
</div>
"""
Expand Down
3 changes: 1 addition & 2 deletions test/e2e/tests/index.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ test("shows the list of available pages", async ({ page }) => {
await syncLV(page)

// FIXME: write a proper assert
await expect(page.locator("span").filter({ hasText: "/home" })).toHaveCount(1)
await expect(page.locator("tr").filter({ hasText: "/home" })).toHaveCount(1)
})
;[
{ name: "Media Library", path: "media_library" },
Expand All @@ -39,7 +39,6 @@ test("shows the list of available pages", async ({ page }) => {
{ name: "Info Handlers", path: "info_handlers" },
{ name: "Error Pages", path: "error_pages" },
].forEach(({ name, path }, index) => {
// TODO: Update for using a test site
const siteName = "site_a"

test(`shows link for ${name}`, async ({ page, baseURL }) => {
Expand Down
10 changes: 4 additions & 6 deletions test/e2e/tests/visual-editor/content.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,7 @@ test("shows fake browser with rendered content", async ({ page }) => {
await expect(firstItem).toBeVisible()
})

// FIXME: review this test
test.skip("selection states", async ({ page }) => {
test("selection states", async ({ page }) => {
await syncLV(page)

const browserContent = page.getByTestId("browser-content")
Expand All @@ -63,12 +62,11 @@ test.skip("selection states", async ({ page }) => {
expect(firstItem).toHaveAttribute("data-selected", "true")
await expect(selectedItems).toHaveCount(1)

// Interactive menu's visible for selected element
// Interactive menus visible for selected element
await expect(page.getByTestId("right-sidebar")).toBeVisible()
await expect(page.getByTestId("drag-button")).toBeVisible()

// FIXME
// await expect(page.getByTestId("element-delete-button")).toBeVisible()
await expect(page.getByTestId("drag-button-parent")).toBeVisible()
await expect(page.getByTestId("element-delete-button")).toBeVisible()

// Hover other items while in selection state
/* TODO: improve selection and hover states while dragging.
Expand Down
108 changes: 97 additions & 11 deletions test/e2e/tests/visual-editor/drag-and-drop.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import { test, expect } from "../../test-fixtures"
import { syncLV } from "../../utils"
import { dragTo, startDragging, verifyOrder } from "./helpers"
import { dragTo, getDragButton, startDragging, verifyOrder } from "./helpers"

const siteName = "site_a"
const pagePath = "/drag-n-drop"

// The drag button is below the dragged element, so when dragging vertically,
// it means the cursor will be lower than the expected drop position
const dragButtonBottomPosition = 50

test.use({ scenario: "drag_n_drop" })

/*
Expand All @@ -13,24 +17,23 @@
or making sense whether we're editing the expected page. Path should be unique.
=> await page.goto(`/admin/${siteName}/pages/c10358fe-ba05-4f47-b1b7-d5e52d3c1571?editor=visual`);
*/
test.beforeEach(async ({ page }) => {

Check failure on line 20 in test/e2e/tests/visual-editor/drag-and-drop.spec.ts

View workflow job for this annotation

GitHub Actions / e2e-test: OTP 27 | Elixir 1.17 | Phoenix ~> 1.7 | LV ~> 1.0 | PG 16.4-alpine

[firefox] › tests/visual-editor/drag-and-drop.spec.ts:32:5 › It shows clones and placeholder for initiated drop location 

  1) [firefox] › tests/visual-editor/drag-and-drop.spec.ts:32:5 › It shows clones and placeholder for initiated drop location 
    Test timeout of 30000ms exceeded while running "beforeEach" hook.

      18 |     => await page.goto(`/admin/${siteName}/pages/c10358fe-ba05-4f47-b1b7-d5e52d3c1571?editor=visual`);
      19 | */
    > 20 | test.beforeEach(async ({ page }) => {
         |      ^
      21 |   await page.goto(`/admin/${siteName}/pages`)
      22 |   await syncLV(page)
      23 |   await page.getByRole("searchbox").fill("drag-n-drop")

        at /home/runner/work/beacon_live_admin/beacon_live_admin/test/e2e/tests/visual-editor/drag-and-drop.spec.ts:20:6

Check failure on line 20 in test/e2e/tests/visual-editor/drag-and-drop.spec.ts

View workflow job for this annotation

GitHub Actions / e2e-test: OTP 27 | Elixir 1.17 | Phoenix ~> 1.7 | LV ~> 1.0 | PG 16.4-alpine

[firefox] › tests/visual-editor/drag-and-drop.spec.ts:93:5 › Reordering (vertically with margin) 

  2) [firefox] › tests/visual-editor/drag-and-drop.spec.ts:93:5 › Reordering (vertically with margin) 
    Test timeout of 30000ms exceeded while running "beforeEach" hook.

      18 |     => await page.goto(`/admin/${siteName}/pages/c10358fe-ba05-4f47-b1b7-d5e52d3c1571?editor=visual`);
      19 | */
    > 20 | test.beforeEach(async ({ page }) => {
         |      ^
      21 |   await page.goto(`/admin/${siteName}/pages`)
      22 |   await syncLV(page)
      23 |   await page.getByRole("searchbox").fill("drag-n-drop")

        at /home/runner/work/beacon_live_admin/beacon_live_admin/test/e2e/tests/visual-editor/drag-and-drop.spec.ts:20:6

Check failure on line 20 in test/e2e/tests/visual-editor/drag-and-drop.spec.ts

View workflow job for this annotation

GitHub Actions / e2e-test: OTP 27 | Elixir 1.17 | Phoenix ~> 1.7 | LV ~> 1.0 | PG 16.4-alpine

[firefox] › tests/visual-editor/drag-and-drop.spec.ts:93:5 › Reordering (vertically with margin) 

  2) [firefox] › tests/visual-editor/drag-and-drop.spec.ts:93:5 › Reordering (vertically with margin) 

    Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
    Test timeout of 30000ms exceeded while running "beforeEach" hook.

      18 |     => await page.goto(`/admin/${siteName}/pages/c10358fe-ba05-4f47-b1b7-d5e52d3c1571?editor=visual`);
      19 | */
    > 20 | test.beforeEach(async ({ page }) => {
         |      ^
      21 |   await page.goto(`/admin/${siteName}/pages`)
      22 |   await syncLV(page)
      23 |   await page.getByRole("searchbox").fill("drag-n-drop")

        at /home/runner/work/beacon_live_admin/beacon_live_admin/test/e2e/tests/visual-editor/drag-and-drop.spec.ts:20:6
await page.goto(`/admin/${siteName}/pages`)
await syncLV(page)
await page.getByRole("searchbox").fill("drag-n-drop")
// note: it navigates when clicking the td's, not the tr
await page.getByRole("cell", { name: pagePath, exact: true }).click()
// Switch to visual editor
await page.getByRole("button", { name: "Visual Editor" }).click()

Check failure on line 27 in test/e2e/tests/visual-editor/drag-and-drop.spec.ts

View workflow job for this annotation

GitHub Actions / e2e-test: OTP 27 | Elixir 1.17 | Phoenix ~> 1.7 | LV ~> 1.0 | PG 16.4-alpine

[firefox] › tests/visual-editor/drag-and-drop.spec.ts:32:5 › It shows clones and placeholder for initiated drop location 

  1) [firefox] › tests/visual-editor/drag-and-drop.spec.ts:32:5 › It shows clones and placeholder for initiated drop location 
    Error: locator.click: Test ended.
    Call log:
      - waiting for getByRole('button', { name: 'Visual Editor' })


      25 |   await page.getByRole("cell", { name: pagePath, exact: true }).click()
      26 |   // Switch to visual editor
    > 27 |   await page.getByRole("button", { name: "Visual Editor" }).click()
         |                                                             ^
      28 | })
      29 |
      30 | // Note: while dragging, only the element clones are visible.

        at /home/runner/work/beacon_live_admin/beacon_live_admin/test/e2e/tests/visual-editor/drag-and-drop.spec.ts:27:61

Check failure on line 27 in test/e2e/tests/visual-editor/drag-and-drop.spec.ts

View workflow job for this annotation

GitHub Actions / e2e-test: OTP 27 | Elixir 1.17 | Phoenix ~> 1.7 | LV ~> 1.0 | PG 16.4-alpine

[firefox] › tests/visual-editor/drag-and-drop.spec.ts:93:5 › Reordering (vertically with margin) 

  2) [firefox] › tests/visual-editor/drag-and-drop.spec.ts:93:5 › Reordering (vertically with margin) 
    Error: locator.click: Test ended.
    Call log:
      - waiting for getByRole('button', { name: 'Visual Editor' })


      25 |   await page.getByRole("cell", { name: pagePath, exact: true }).click()
      26 |   // Switch to visual editor
    > 27 |   await page.getByRole("button", { name: "Visual Editor" }).click()
         |                                                             ^
      28 | })
      29 |
      30 | // Note: while dragging, only the element clones are visible.

        at /home/runner/work/beacon_live_admin/beacon_live_admin/test/e2e/tests/visual-editor/drag-and-drop.spec.ts:27:61

Check failure on line 27 in test/e2e/tests/visual-editor/drag-and-drop.spec.ts

View workflow job for this annotation

GitHub Actions / e2e-test: OTP 27 | Elixir 1.17 | Phoenix ~> 1.7 | LV ~> 1.0 | PG 16.4-alpine

[firefox] › tests/visual-editor/drag-and-drop.spec.ts:93:5 › Reordering (vertically with margin) 

  2) [firefox] › tests/visual-editor/drag-and-drop.spec.ts:93:5 › Reordering (vertically with margin) 

    Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
    Error: locator.click: Test ended.
    Call log:
      - waiting for getByRole('button', { name: 'Visual Editor' })


      25 |   await page.getByRole("cell", { name: pagePath, exact: true }).click()
      26 |   // Switch to visual editor
    > 27 |   await page.getByRole("button", { name: "Visual Editor" }).click()
         |                                                             ^
      28 | })
      29 |
      30 | // Note: while dragging, only the element clones are visible.

        at /home/runner/work/beacon_live_admin/beacon_live_admin/test/e2e/tests/visual-editor/drag-and-drop.spec.ts:27:61
})

// Note: while dragging, only the element clones are visible.
// On drop, the clones get removed and the original elements will be visible again
// FIXME: review test
test.skip("It shows clones and placeholder for initiated drop location", async ({ page }) => {
test("It shows clones and placeholder for initiated drop location", async ({ page }) => {
await syncLV(page)

const firstItem = page.getByTestId("margin-row-item-1")
const dragButton = page.getByTestId("drag-button")
const dragButton = getDragButton(page)

await firstItem.click()
await expect(firstItem).toHaveAttribute("data-selected", "true")
Expand All @@ -55,12 +58,11 @@
await page.mouse.up()
})

// FIXME: review test
test.skip("Reordering", async ({ page }) => {
test("Reordering (horizontally with margin)", async ({ page }) => {
await syncLV(page)

const source = page.getByTestId("margin-row-item-1")
const dragButton = page.getByTestId("drag-button")
const dragButton = getDragButton(page)

await verifyOrder(page, "[data-testid^=margin-row-item-]", [
"margin-row-item-1",
Expand All @@ -73,6 +75,7 @@
await source.click()
await expect(source).toHaveAttribute("data-selected", "true")
await expect(dragButton).toBeVisible()
await expect(dragButton.locator("span")).toHaveClass("hero-arrows-right-left")

await startDragging(page)
await dragTo(page, "margin-row-item-3")
Expand All @@ -87,12 +90,91 @@
])
})

// FIXME: review test
test.skip("Persistence on save", async ({ page }) => {
test("Reordering (vertically with margin)", async ({ page }) => {
await syncLV(page)

const source = page.getByTestId("margin-col-item-1")
const dragButton = getDragButton(page)

await verifyOrder(page, "[data-testid^=margin-col-item-]", [
"margin-col-item-1",
"margin-col-item-2",
"margin-col-item-3",
"margin-col-item-4",
"margin-col-item-5",
])

await source.click()
await expect(source).toHaveAttribute("data-selected", "true")
await expect(dragButton).toBeVisible()
await expect(dragButton.locator("span")).toHaveClass("hero-arrows-up-down")

await startDragging(page)
await dragTo(
page,
"margin-col-item-3",
// xPosition in target, use default
undefined,
// yPosition in target, add button position threshold
(y, targetHeight) => y + targetHeight / 2 + dragButtonBottomPosition,
)
await page.mouse.up()

await verifyOrder(page, "[data-testid^=margin-col-item-]", [
"margin-col-item-2",
"margin-col-item-3",
"margin-col-item-1",
"margin-col-item-4",
"margin-col-item-5",
])
})

test("Reordering (grid, horizontally and vertically)", async ({ page }) => {
await syncLV(page)

const source = page.getByTestId("grid-item-1")
const dragButton = getDragButton(page)

await verifyOrder(page, "[data-testid^=grid-item-]", [
"grid-item-1",
"grid-item-2",
"grid-item-3",
"grid-item-4",
"grid-item-5",
"grid-item-6",
])

await source.click()
await expect(source).toHaveAttribute("data-selected", "true")
await expect(dragButton).toBeVisible()
await expect(dragButton.locator("span")).toHaveClass("hero-arrows-pointing-out")

await startDragging(page)
await dragTo(
page,
"grid-item-4",
// xPosition in target, use default
undefined,
// yPosition in target, add button position threshold
(y, targetHeight) => y + targetHeight / 2 + dragButtonBottomPosition,
)
await page.mouse.up()

await verifyOrder(page, "[data-testid^=grid-item-]", [
"grid-item-2",
"grid-item-3",
"grid-item-4",
"grid-item-1",
"grid-item-5",
"grid-item-6",
])
})

test("Persistence on save", async ({ page }) => {
await syncLV(page)

const source = page.getByTestId("margin-row-item-1")
const dragButton = page.getByTestId("drag-button")
const dragButton = getDragButton(page)

await verifyOrder(page, "[data-testid^=margin-row-item-]", [
"margin-row-item-1",
Expand Down Expand Up @@ -121,8 +203,12 @@
await verifyOrder(page, "[data-testid^=margin-row-item-]", newOrder)

await page.getByRole("button", { name: "Save Changes" }).click()
await expect(page.locator('[id="flash"]')).toContainText("Page updated successfully")
await expect(page.locator('[id="flash"]')).toContainText("Page saved successfully")

// Reload page and switch back to visual editor
await page.reload()
await syncLV(page)
await page.getByRole("button", { name: "Visual Editor" }).click()

await verifyOrder(page, "[data-testid^=margin-row-item-]", newOrder)
})
11 changes: 9 additions & 2 deletions test/e2e/tests/visual-editor/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
import { expect, type Page as PlayWrightPage } from "@playwright/test"

export async function startDragging(page: PlayWrightPage) {
const dragButton = page.getByTestId("drag-button")
type DragTargetType = "parent" | "selected"

export function getDragButton(page: PlayWrightPage, dragTarget: DragTargetType = "selected") {
const testId = dragTarget === "parent" ? "drag-button-parent" : "drag-button"
return page.getByTestId(testId)
}

export async function startDragging(page: PlayWrightPage, dragTarget: DragTargetType = "selected") {
const dragButton = getDragButton(page, dragTarget)

await dragButton.waitFor()
await dragButton.hover() // move mouse to drag button
Expand Down
Loading