test: drag and drop test that works runs on desktop on mobile projects

tests/database/kanban.shared.spec.ts

@@ -1,4 +1,6 @@
 
+import { portableLocator } from 'utils/query.js';
+
 import {
   enterPlaygroundRoom,
   initKanbanViewState,
@@ -9,7 +11,7 @@ import {
 } from './actions.js';
 
 test.describe('kanban view', () => {
-  test('basic rendering of kanban card', async ({ page }) => {
+  test('drag and drop', async ({ page }) => {
     await enterPlaygroundRoom(page);
     await initKanbanViewState(page, {
       rows: ['row1'],
@@ -26,6 +28,20 @@ test.describe('kanban view', () => {
     });
 
     await focusKanbanCardHeader(page);
+    // https://playwright.dev/docs/input#dragging-manually mentions that you may need two drags to
+    // trigger `dragover`, so we drag to our own column header before dragging to "Ungroups".
+    await portableLocator(page, 'affine-data-view-kanban-card').hover()
+    await page.mouse.down();
+    await page.locator('[data-wc-dnd-drag-handler-id="g:0"]').hover();
+    await page.locator('[data-wc-dnd-drag-handler-id="Ungroups"]').hover({ force: true });
+    await page.mouse.up();
+
+    if (test.info().project.name === 'mobile') {
+      // Mobile does not support drag and drop yet
+      test.fixme();
+    }
+    // When we drag into "Ungroups", our old group collapses.
+    await test.expect(page.locator('[data-wc-dnd-drag-handler-id="g:0"]')).not.toBeVisible();
   });
 
 });

tests/utils/query.ts

@@ -1,4 +1,4 @@
-import { expect, type Page } from '@playwright/test';
+import { test, expect, type Page } from '@playwright/test';
 
 import { waitNextFrame } from './actions/misc.js';
 import { assertAlmostEqual } from './asserts.js';
@@ -123,3 +123,26 @@ export function getEmbedCardToolbar(page: Page) {
     cardStyleListButton,
   };
 }
+
+/**
+ * mobile views typically use different component names.
+ *
+ * If you want to write a test that works on both desktop and mobile,
+ * you need to use a different component name on mobile.
+ *
+ * Typically, it is good enough to replace the `affine-data-view-`
+ * prefix and replace it with `mobile-`.
+ *
+ * In the future, we might want to consider using data-testid attributes instead.
+ */
+export function portableLocator(page: Page, selector: string) {
+  if (!selector.startsWith('affine-data-view-')) {
+    throw new Error(`Received invalid selector '${selector}'). Please use a selector starting with affine-data-view-`);
+  }
+
+  if (test.info().project.name === 'mobile') {
+    return page.locator(selector.replaceAll('affine-data-view-', 'mobile-'));
+  }
+
+  return page.locator(selector);
+}