test(device): cover the link-popover flow through real on-screen input

The toolbar/link suite on both device targets: the keyboard opening and
resizing the viewport, toolbar taps registering, the popover holding focus
through the IME reconfigure, and submission by pressing the on-screen
keyboard's actual Enter/action key. The IME-action-key test is the former
manual release-checklist item: Android's IME only offers a submitting
action inside a real <form> — with a lone field it picks Next, the
original create-link bug. Pairs with the emulated linkSubmit.test.tsx.

Author: YousefED

tests/device/formattingToolbar.device.test.ts

@@ -0,0 +1,185 @@
+import { afterAll, beforeAll, describe, expect, test } from "vite-plus/test";
+
+import { activeDevices } from "./devices.js";
+import { tapElement } from "./lib/gestures.js";
+import {
+  docState,
+  MOBILE_TOOLBAR,
+  openExample,
+  startEditing,
+  viewportHeight,
+} from "./lib/editorPage.js";
+import {
+  LINK_POPOVER,
+  openLinkPopover,
+  selectFirstWord,
+  typeAndSubmit,
+} from "./linkPopover.js";
+import type { DeviceSession } from "./lib/session.js";
+
+const KEYBOARD_MIN_HEIGHT = 150;
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+for (const device of await activeDevices()) {
+  describe(`mobile formatting toolbar on ${device.id}`, () => {
+    let session: DeviceSession;
+    let baselineHeight: number;
+
+    beforeAll(async () => {
+      session = await device.createSession();
+      await openExample(session, "/ui-components/mobile-formatting-toolbar");
+      baselineHeight = await viewportHeight(session);
+    });
+
+    afterAll(async () => {
+      if (session) {
+        await session.screenshot(`formatting-toolbar-final`);
+        await session.close();
+      }
+    });
+
+    test("tapping the editor opens the keyboard and shows the mobile toolbar", async () => {
+      await startEditing(session);
+
+      // The toolbar only renders while `useVirtualKeyboard` sees the
+      // keyboard, so its presence + the viewport drop prove the real
+      // on-screen keyboard opened.
+      expect(await viewportHeight(session)).toBeLessThan(
+        baselineHeight - KEYBOARD_MIN_HEIGHT,
+      );
+    });
+
+    test("toolbar buttons apply reliably", async () => {
+      await startEditing(session);
+      await selectFirstWord(session);
+      // Three bold toggles; every tap must register (covers the reported
+      // "buttons sometimes don't work", which traced back to a lingering
+      // popover overlaying the toolbar).
+      for (const expected of [true, false, true]) {
+        await tapElement(session, `${MOBILE_TOOLBAR} [data-test="bold"]`, {
+          keyboard: "open",
+          verify: `return { ok: ${expected} === !!document.querySelector('.bn-editor strong') };`,
+        });
+      }
+    });
+
+    test("link popover holds focus through the IME and creates a link", async () => {
+      // Captured before the popover opens: iOS Safari auto-zooms the page
+      // when an input with a computed font-size under 16px takes focus, and
+      // that zoom perturbs the visual viewport the mobile toolbar positions
+      // itself from. The `pointer: coarse` rule in blocknoteStyles.css
+      // prevents it; this pins the behaviour rather than the rule.
+      const scaleBefore = await session.exec<number>(
+        `return window.visualViewport ? window.visualViewport.scale : 1;`,
+      );
+
+      await openLinkPopover(session);
+
+      // Focusing an input makes the IME reconfigure (on Android this
+      // resizes the viewport), which historically hid the popover and
+      // collapsed the keyboard/toolbar (the Mantine `hideDetached` bug).
+      // The input must still hold focus once that settles.
+      await sleep(2_500);
+      const survival = await session.exec<{
+        focused: boolean;
+        popover: boolean;
+        toolbar: boolean;
+      }>(`
+          const active = document.activeElement;
+          return {
+            focused: !!(active && active.tagName === 'INPUT' && active.getAttribute('name') === 'url'),
+            popover: !!document.querySelector(${JSON.stringify(LINK_POPOVER)}),
+            toolbar: !!document.querySelector(${JSON.stringify(MOBILE_TOOLBAR)}),
+          };`);
+      await session.screenshot("link-popover-open");
+
+      // Focusing the URL input must not have zoomed the page.
+      const scaleAfter = await session.exec<number>(
+        `return window.visualViewport ? window.visualViewport.scale : 1;`,
+      );
+      expect(
+        scaleAfter,
+        `focusing the URL input zoomed the page (${scaleBefore} -> ${scaleAfter}); ` +
+          `check the pointer:coarse font-size rule for .bn-form-popover inputs`,
+      ).toBeLessThanOrEqual(scaleBefore + 0.01);
+
+      expect(survival).toEqual({
+        focused: true,
+        popover: true,
+        toolbar: true,
+      });
+
+      await typeAndSubmit(
+        session,
+        `${LINK_POPOVER} input`,
+        "example.com",
+        `return {
+            ok: !!document.querySelector('.bn-editor a[href="https://example.com"]')
+              && !document.querySelector(${JSON.stringify(LINK_POPOVER)}),
+            link: !!document.querySelector('.bn-editor a[href="https://example.com"]'),
+            popoverGone: !document.querySelector(${JSON.stringify(LINK_POPOVER)}),
+          };`,
+      );
+
+      expect((await docState(session)).links).toContain("https://example.com");
+      // Submitting must not dismiss the keyboard — but Appium's typing can
+      // itself hide the keyboard as an automation side effect (observed on
+      // Android), which the product can't distinguish from the user closing
+      // it. So only assert the toolbar survived while the keyboard is
+      // actually still up; the emulation suite covers this invariant
+      // deterministically.
+      if (
+        (await viewportHeight(session)) <
+        baselineHeight - KEYBOARD_MIN_HEIGHT
+      ) {
+        expect(
+          await session.exec<boolean>(
+            `return !!document.querySelector(${JSON.stringify(MOBILE_TOOLBAR)});`,
+          ),
+        ).toBe(true);
+      }
+    });
+
+    // The flow that used to be a manual release-checklist item: Android's
+    // IME decides what its action key does — with a lone text field outside
+    // a <form> it picks "Next" (advance focus, no key event at all), the
+    // original create-link bug. Only a backend that can press the on-screen
+    // keyboard can test the IME's actual choice.
+    test.skipIf(device.kind !== "local-android")(
+      "the IME action key submits the link popover",
+      async () => {
+        // Fresh document — the earlier tests linked the first word, and a
+        // linked selection opens the *edit* popover (pre-filled URL) instead
+        // of the create popover this flow is about.
+        await openExample(session, "/ui-components/mobile-formatting-toolbar");
+        await startEditing(session);
+        await openLinkPopover(session);
+
+        await session.elementValue(`${LINK_POPOVER} input`, "example.com");
+
+        if (!session.pressImeActionKey) {
+          throw new Error("this target must expose the IME action key");
+        }
+        await session.pressImeActionKey(
+          `return {
+            ok: !!document.querySelector('.bn-editor a[href="https://example.com"]')
+              && !document.querySelector(${JSON.stringify(LINK_POPOVER)}),
+            link: !!document.querySelector('.bn-editor a[href="https://example.com"]'),
+            popoverGone: !document.querySelector(${JSON.stringify(LINK_POPOVER)}),
+          };`,
+        );
+
+        // The action must not have advanced focus out of the editor — that
+        // was the original bug's symptom (focus jumping to the next editor).
+        const state = await session.exec<{ inFirstEditor: boolean }>(
+          `const editors = [...document.querySelectorAll(".bn-editor")];
+           return { inFirstEditor: editors[0].contains(document.activeElement) };`,
+        );
+        expect(state.inFirstEditor).toBe(true);
+      },
+    );
+  });
+}

tests/device/linkPopover.ts

@@ -0,0 +1,90 @@
+/**
+ * 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 { pressSoftKeyboardEnter, tapElement } from "./lib/gestures.js";
+import type { DeviceSession } from "./lib/session.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 by pressing the on-screen
+ * keyboard's Enter/action key — the real user gesture on both platforms (see
+ * `pressSoftKeyboardEnter`), driving the real submission path: key press ->
+ * implicit form submission -> the popover's `submit` handling.
+ *
+ * `verify` is a page script returning `{ ok: boolean }` observing the
+ * submission's effect — the tap ladders need it to know a tap landed.
+ */
+export async function typeAndSubmit(
+  session: DeviceSession,
+  css: string,
+  text: string,
+  verify: string,
+): Promise<void> {
+  await session.elementValue(css, text);
+  await pressSoftKeyboardEnter(session, verify);
+}