FE-2013: Wait for controls inside an opening Collapse to be fully shown before clicking

tests/hash-playwright/tests/features/entities-page.spec.ts

@@ -2,6 +2,7 @@ import {
   changeSidebarListDisplay,
   expandSidebarSection,
 } from "../shared/change-sidebar-list-display";
+import { expectFullyShown } from "../shared/expect-fully-shown";
 import { expect, test } from "../shared/runtime";
 
 test("user can visit a page listing entities of a type", async ({ page }) => {
@@ -18,7 +19,7 @@ test("user can visit a page listing entities of a type", async ({ page }) => {
 
   const sidebar = page.getByTestId("page-sidebar");
   const documentItem = sidebar.getByText("Document", { exact: true });
-  await expect(documentItem).toBeVisible();
+  await expectFullyShown(documentItem);
   await documentItem.click();
 
   await page.waitForURL((url) => {

tests/hash-playwright/tests/features/entity-type-editing.spec.ts

@@ -13,6 +13,7 @@ import {
   rowMenuButton,
   saveChanges,
 } from "../shared/entity-type-editor";
+import { expectFullyShown } from "../shared/expect-fully-shown";
 import { expect, test } from "../shared/runtime";
 
 /**
@@ -39,6 +40,7 @@ test("removing a type's only parent survives a reload", async ({ page }) => {
   await expect(parentCard(page, parentName)).toBeVisible();
 
   await parentCard(page, parentName).hover();
+  await expectFullyShown(removeParentButton(page, parentName));
   await removeParentButton(page, parentName).click();
   await expect(parentCard(page, parentName)).toHaveCount(0);
 

tests/hash-playwright/tests/features/file-preview/docx.spec.ts

@@ -1,3 +1,4 @@
+import { expectFullyShown } from "../../shared/expect-fully-shown";
 import {
   generateHostileTestDocx,
   generateDocx,
@@ -99,13 +100,15 @@ test.describe("DOCX preview", () => {
     page,
   }) => {
     await page.getByRole("button", { name: "Show search" }).click();
-    await page
-      .getByPlaceholder("Search the document...")
-      .fill(testDocumentSearchWord);
+    const searchInput = page.getByPlaceholder("Search the document...");
+    await expectFullyShown(searchInput);
+    await searchInput.fill(testDocumentSearchWord);
     await expect(page.getByText("1 of 2", { exact: true })).toBeVisible();
     await expect(page.locator("[data-folio-selection-rect]")).toBeVisible();
 
-    await page.getByRole("button", { name: "Next result" }).click();
+    const nextResult = page.getByRole("button", { name: "Next result" });
+    await expectFullyShown(nextResult);
+    await nextResult.click();
     await expect(page.getByText("2 of 2", { exact: true })).toBeVisible();
     await expect(getDocxPage(page, thirdPage.heading)).toBeInViewport();
     await expect(page.locator("[data-folio-selection-rect]")).toBeVisible();

tests/hash-playwright/tests/features/file-preview/pdf.spec.ts

@@ -1,3 +1,4 @@
+import { expectFullyShown } from "../../shared/expect-fully-shown";
 import { generatePdf } from "../../shared/file-preview/generate-test-pdf";
 import {
   testDocumentPages,
@@ -56,17 +57,21 @@ test.describe("PDF preview", () => {
     const pdfPage = getPdfPage(page);
 
     await page.getByRole("button", { name: "Show search" }).click();
-    await page
-      .getByPlaceholder("Search the document...")
-      .fill(testDocumentSearchWord);
+    const searchInput = page.getByPlaceholder("Search the document...");
+    await expectFullyShown(searchInput);
+    await searchInput.fill(testDocumentSearchWord);
 
     const searchHighlight = pdfPage.locator('span[style*="border-bottom"]', {
       hasText: testDocumentSearchWord,
     });
 
     await expect(searchHighlight).toBeVisible();
+    await expect(page.getByText("1 of 2", { exact: true })).toBeVisible();
 
-    await page.getByRole("button", { name: "Next result" }).click();
+    const nextResult = page.getByRole("button", { name: "Next result" });
+    await expectFullyShown(nextResult);
+    await nextResult.click();
+    await expect(page.getByText("2 of 2", { exact: true })).toBeVisible();
     await expect(
       pdfPage.getByText(thirdPage.heading, { exact: true }),
     ).toBeVisible();

tests/hash-playwright/tests/shared/expect-fully-shown.ts

@@ -0,0 +1,12 @@
+import { expect } from "./runtime";
+
+import type { Locator } from "./runtime";
+
+/**
+ * Wait until no ancestor clips any part of the element, such as a `Collapse`
+ * that is still opening. Playwright clicks a clipped element by scrolling its
+ * clipping ancestor, which scrolls back as the ancestor grows and moves the
+ * element out from under the pointer before the click lands.
+ */
+export const expectFullyShown = (locator: Locator) =>
+  expect(locator).toBeInViewport({ ratio: 1 });