mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
SnapOtterandGitHub
e113684ddb
The docs e2e suite clicked navbar and sidebar controls before Vue hydrated the multi-locale bundle, so the clicks were swallowed. That raced the Pagefind search open (filed as #551), the appearance toggle, and the homepage and sidebar navigation tests. The old search tests also matched an input placeholder the config overrides, so they failed against a working build. Add a waitForHydration helper (gates on #app.__vue_app__, set inside Vue's app.mount()) and an openDocsSearch helper, and route the affected tests through them. Search itself was never broken; this change is test-only. Docs e2e suite is green (43/43). Closes #551
46 lines
1.9 KiB
TypeScript
46 lines
1.9 KiB
TypeScript
import { expect, type Locator, type Page } from "@playwright/test";
|
|
|
|
/**
|
|
* Wait for VitePress to finish the initial client hydration.
|
|
*
|
|
* The docs navbar (the Pagefind search box, the appearance toggle) is
|
|
* server-rendered, so it's present in the DOM the instant the page loads, but
|
|
* its Vue click handlers aren't wired until the app hydrates. A click that
|
|
* lands before then is silently swallowed. That's the flaky "search won't
|
|
* open" race behind issue #551: the bundle for 21 locales takes a few hundred
|
|
* ms to hydrate, and a fast (or automated) click inside that window does
|
|
* nothing. Playwright's actionability checks don't cover framework hydration,
|
|
* so tests have to wait for it explicitly.
|
|
*
|
|
* Vue assigns `__vue_app__` to the mount container inside `app.mount()`, which
|
|
* for SSR is the same call that hydrates the initial tree. Its presence on
|
|
* `#app` is therefore a deterministic, side-effect-free signal that handlers
|
|
* are attached.
|
|
*/
|
|
export async function waitForHydration(page: Page): Promise<void> {
|
|
await page.waitForFunction(
|
|
() => {
|
|
const app = document.getElementById("app");
|
|
return app !== null && "__vue_app__" in app;
|
|
},
|
|
null,
|
|
{ timeout: 15_000 },
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Open the Pagefind search dialog and return its input locator.
|
|
*
|
|
* Waits for hydration first (so the click registers), then asserts the dialog
|
|
* input is visible. The selector is placeholder-agnostic on purpose: the docs
|
|
* config overrides the input placeholder, so keying off a hard-coded string
|
|
* (as the old tests did) breaks whenever that copy changes.
|
|
*/
|
|
export async function openDocsSearch(page: Page): Promise<Locator> {
|
|
await waitForHydration(page);
|
|
await page.locator(".nav-search-btn-wait").first().click();
|
|
const input = page.locator("[command-dialog-wrapper] input").first();
|
|
await expect(input).toBeVisible({ timeout: 5_000 });
|
|
return input;
|
|
}
|