mobile testing infrastructure

tests/database/kanban.shared.spec.ts

@@ -0,0 +1,47 @@
+
+import { portableLocator } from 'utils/query.js';
+
+import {
+  enterPlaygroundRoom,
+  initKanbanViewState,
+} from '../utils/actions/index.js';
+import { test } from '../utils/playwright.js';
+import {
+  focusKanbanCardHeader,
+} from './actions.js';
+
+test.describe('kanban view', () => {
+  test('drag and drop', async ({ page }) => {
+    await enterPlaygroundRoom(page);
+    await initKanbanViewState(page, {
+      rows: ['row1'],
+      columns: [
+        {
+          type: 'number',
+          value: [1],
+        },
+        {
+          type: 'rich-text',
+          value: ['text'],
+        },
+      ],
+    });
+
+    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/playwright.config.ts

@@ -1,6 +1,6 @@
 import type { PlaywrightWorkerOptions } from '@playwright/test';
 
-import { defineConfig } from '@playwright/test';
+import { defineConfig, devices } from '@playwright/test';
 import process from 'node:process';
 
 export default defineConfig({
@@ -17,6 +17,27 @@ export default defineConfig({
       COVERAGE: process.env.COVERAGE ?? '',
     },
   },
+  projects: [
+    // To avoid burning github actions minutes, we only run interesting tests on mobile.
+    // The rest of the tests are run on desktop.
+    //   .spec.ts files are run on desktop only
+    //   .mobile.spec.ts files are run on mobile only
+    //   .shared.spec.ts files are run on both desktop and mobile
+    {
+      name: 'desktop',
+      testIgnore: 'tests/**/*.mobile.spec.ts',
+    },
+    {
+      name: 'mobile',
+      testMatch: [
+        'tests/**/*.mobile.spec.ts',
+        'tests/**/*.shared.spec.ts',
+      ],
+      // Note: we ignore the BROWSER environment variable here.
+      // We can special-case firefox/webkit in the future if this causes us to miss bugs in CI.
+      use: { ...devices['Pixel 7'] },
+    },
+  ],
   use: {
     browserName:
       (process.env.BROWSER as PlaywrightWorkerOptions['browserName']) ??

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);
+}