test(device): link helpers next to the link tests, submitting via the form

Review feedback (two threads): the link-flow device helpers belong next
to the tests that use them, not in the shared lib — moved here from
editorPage/gestures.

typeAndSubmit also changes how it submits, answering why it dispatched a
synthetic Enter: the on-screen keyboard's action key is unreachable by
any automation channel (see README), and the dispatched keydown only
worked while the popovers had key handlers. With submission running off
the form's submit event, an untrusted keydown does nothing — the helper
was silently broken by the form rework. requestSubmit() is the browser's
own submission path and exercises the popover's real onSubmit wiring;
the IME's own action-key choice stays a manual release check.

Author: YousefED

tests/device/formattingToolbar.device.test.ts

@@ -8,17 +8,20 @@ import {
 } from "vite-plus/test";
 
 import { activeDevices } from "./devices.js";
-import { tapElement, typeAndSubmit } from "./lib/gestures.js";
+import { tapElement } from "./lib/gestures.js";
 import {
   docState,
-  LINK_POPOVER,
   MOBILE_TOOLBAR,
   openExample,
-  openLinkPopover,
-  selectFirstWord,
   startEditing,
   viewportHeight,
 } from "./lib/editorPage.js";
+import {
+  LINK_POPOVER,
+  openLinkPopover,
+  selectFirstWord,
+  typeAndSubmit,
+} from "./linkPopover.js";
 import { browserStackCredentials, DeviceSession } from "./lib/webdriver.js";
 
 const KEYBOARD_MIN_HEIGHT = 150;

tests/device/lib/editorPage.ts

@@ -90,4 +90,3 @@ export async function startEditing(session: DeviceSession): Promise<void> {
     verifyTimeoutMs: 15_000,
   });
 }
-

tests/device/lib/gestures.ts

@@ -170,4 +170,3 @@ export async function typeText(
     await session.typeKeys(text);
   }
 }
-

tests/device/linkPopover.ts

@@ -0,0 +1,96 @@
+/**
+ * Helpers for the create-link flow on real devices — next to the tests that
+ * use them, since only the link tests speak these concepts.
+ */
+import { MOBILE_TOOLBAR, PARAGRAPH, startEditing } from "./lib/editorPage.js";
+import { tapElement } from "./lib/gestures.js";
+import type { DeviceSession } from "./lib/webdriver.js";
+
+export const LINK_BUTTON = `${MOBILE_TOOLBAR} [data-test="createLink"]`;
+export const LINK_POPOVER = ".bn-form-popover";
+
+/**
+ * Selects the first word of the first paragraph via a DOM range (ProseMirror
+ * syncs its selection from `selectionchange`, so no editor handle is needed).
+ * iOS intermittently collapses programmatic selections, so the wait re-applies
+ * the range on every poll until the toolbar's link button confirms the editor
+ * sees a non-empty selection.
+ */
+export async function selectFirstWord(session: DeviceSession): Promise<void> {
+  const applyAndCheck = `
+    if (getSelection().isCollapsed) {
+      const p = document.querySelector(${JSON.stringify(PARAGRAPH)});
+      const textNode = [...p.childNodes].find((n) => n.nodeType === 3) || p.firstChild;
+      const range = document.createRange();
+      range.setStart(textNode, 0);
+      range.setEnd(textNode, Math.min(7, textNode.textContent.length));
+      const selection = getSelection();
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+    return {
+      ok: !getSelection().isCollapsed
+        && !!document.querySelector(${JSON.stringify(LINK_BUTTON)}),
+    };`;
+  await session.waitFor("selection + link button", applyAndCheck, 25_000);
+}
+
+/**
+ * Opens the create-link popover from the mobile toolbar and waits for its URL
+ * input to hold focus. A mis-aimed tap (iOS chrome-offset guessing) can hit
+ * the keyboard's accessory bar and collapse the whole editing state, so each
+ * attempt rebuilds editing + selection from scratch before tapping.
+ */
+export async function openLinkPopover(session: DeviceSession): Promise<void> {
+  let lastError: Error | undefined;
+  for (let attempt = 0; attempt < 4; attempt++) {
+    await startEditing(session);
+    await selectFirstWord(session);
+    await session.exec(`
+      const toolbar = document.querySelector(${JSON.stringify(MOBILE_TOOLBAR)});
+      toolbar.querySelectorAll('*').forEach((el) => {
+        if (el.scrollWidth > el.clientWidth + 5) el.scrollLeft = el.scrollWidth;
+      });`);
+    try {
+      await tapElement(session, LINK_BUTTON, {
+        keyboard: "open",
+        verify: `
+          const active = document.activeElement;
+          return {
+            ok: !!document.querySelector(${JSON.stringify(LINK_POPOVER)})
+              && active && active.tagName === 'INPUT'
+              && active.getAttribute('name') === 'url',
+          };`,
+      });
+      return;
+    } catch (error) {
+      lastError = error as Error;
+    }
+  }
+  throw new Error(`Could not open the link popover: ${lastError?.message}`);
+}
+
+/**
+ * Types into a popover field and submits it the way the browser does:
+ * `requestSubmit()` on the enclosing form, which runs the popover's real
+ * `onSubmit` wiring. A dispatched Enter keydown cannot do this — synthetic
+ * events trigger no default action, and the popovers commit through the
+ * form's `submit` event rather than key handlers. Tapping the on-screen
+ * keyboard's action key isn't an option either: no automation channel
+ * reaches it (see the README) — which also means the IME's own choice of
+ * action stays a manual release check.
+ */
+export async function typeAndSubmit(
+  session: DeviceSession,
+  css: string,
+  text: string,
+): Promise<void> {
+  await session.elementValue(css, text);
+  await session.exec(
+    `const el = document.querySelector(arguments[0]);
+     if (el && el.form) {
+       el.form.requestSubmit();
+     }`,
+    [css],
+  );
+}