From 979df7836034218f21ad22033dec56a10e4ad13e Mon Sep 17 00:00:00 2001
From: David Laban <alsuren@gmail.com>
Date: Mon, 30 Dec 2024 14:59:52 +0000
Subject: [PATCH] test(editor): playwright test for kanban drag and drop

---
 .../e2e/blocksuite/editor.spec.ts             | 33 +++++++++++++++++++
 tests/kit/utils/page-logic.ts                 |  8 +++++
 2 files changed, 41 insertions(+)

diff --git a/tests/affine-local/e2e/blocksuite/editor.spec.ts b/tests/affine-local/e2e/blocksuite/editor.spec.ts
index dc958d8c829d0..04053761c4be8 100644
--- a/tests/affine-local/e2e/blocksuite/editor.spec.ts
+++ b/tests/affine-local/e2e/blocksuite/editor.spec.ts
@@ -2,6 +2,7 @@ import { test } from '@affine-test/kit/playwright';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
 import {
   addDatabase,
+  addKanban,
   clickNewPageButton,
   getBlockSuiteEditorTitle,
   waitForEditorLoad,
@@ -33,6 +34,38 @@ test('database is useable', async ({ page }) => {
   await expect(database2).toBeVisible();
 });
 
+
+test('kanban drag and drop is useable', async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page);
+
+  await page.locator('[data-testid=page-editor-blank]').click();
+  await addKanban(page);
+
+  const database = page.locator('affine-database');
+  await expect(database).toBeVisible();
+
+  // find the card in the 0th group
+  const cardId = await page.locator("affine-data-view-kanban-group").nth(0).locator('affine-data-view-kanban-card').getAttribute("data-card-id")
+  expect(cardId).toBeTruthy()
+
+  // drag the card across by one group
+  await page.locator(`[data-card-id="${cardId}"]`).hover()
+  await page.mouse.down();
+  await page.locator(".group-header").nth(1).hover()
+
+  // drag preview of card should be visible
+  await expect(page.locator(".with-data-view-css-variable .card-body")).toBeVisible()
+
+  // wiggle the card a bit and then drop it (not sure how to do this in a non-racey way)
+  await page.locator(".group-body").nth(1).hover({ force: true })
+  await page.mouse.up()
+
+  // assert that it is in the intended column
+  await expect(page.locator(".group-body").nth(1).locator(`[data-card-id="${cardId}"]`)).toBeVisible()
+});
+
 test('link page is useable', async ({ page }) => {
   await openHomePage(page);
   await waitForEditorLoad(page);
diff --git a/tests/kit/utils/page-logic.ts b/tests/kit/utils/page-logic.ts
index aebf04523abe7..eaea83a8ba87d 100644
--- a/tests/kit/utils/page-logic.ts
+++ b/tests/kit/utils/page-logic.ts
@@ -217,3 +217,11 @@ export const addDatabaseRow = async (page: Page, databaseTitle: string) => {
   });
   await db.locator('.data-view-table-group-add-row-button').click();
 };
+
+
+export const addKanban = async (page: Page, title?: string) => {
+  await page.keyboard.press('/');
+  await expect(page.locator('affine-slash-menu .slash-menu')).toBeVisible();
+  await page.keyboard.type('kanban');
+  await page.getByTestId('Kanban View').click();
+}