External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

test(docs): make search and nav e2e tests hydration-aware (#551)

Browse Source 
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
This commit is contained in:
SnapOtter
2026-07-18 11:22:38 +08:00
committed by GitHub
parent 67f54347b2
commit e113684ddb
5 changed files with 73 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/e2e-docs/search-and-theme.spec.ts
+14 -8
View File
@@ -1,4 +1,5 @@
import { expect, test } from "@playwright/test";
import { openDocsSearch, waitForHydration } from "./helpers";
test.describe("docs search (Pagefind)", () => {
test("search button is visible", async ({ page }) => {
@@ -8,16 +9,18 @@ test.describe("docs search (Pagefind)", () => {
test("clicking search opens the dialog with an input", async ({ page }) => {
await page.goto("/");
await page.locator(".blog-search").first().click();
await expect(page.locator('input[placeholder="Search Docs"]')).toBeVisible();
const input = await openDocsSearch(page);
// It's the real search combobox with a (config-driven) placeholder. Don't
// assert the exact placeholder copy, just that one is present.
await expect(input).toHaveAttribute("role", "combobox");
await expect(input).toHaveAttribute("placeholder", /\S/);
});
test("typing a query shows results", async ({ page }) => {
await page.goto("/");
await page.locator(".blog-search").first().click();
const input = page.locator('input[placeholder="Search Docs"]');
const input = await openDocsSearch(page);
await input.fill("docker");
await expect(page.locator('[role="option"]').first()).toBeVisible({ timeout: 10000 });
await expect(page.locator('[role="option"]').first()).toBeVisible({ timeout: 10_000 });
});
});
@@ -32,13 +35,16 @@ test.describe("Theme Toggle", () => {
test("clicking theme toggle changes appearance", async ({ page }) => {
await page.goto("/guide/getting-started");
// The appearance switch is a Vue handler, so wait for hydration before the
// single click (otherwise the click is swallowed and the class never flips).
await waitForHydration(page);
const html = page.locator("html");
const initialClass = await html.getAttribute("class");
const wasDark = initialClass?.includes("dark") ?? false;
const wasDark = ((await html.getAttribute("class")) ?? "").includes("dark");
// Click the visible toggle inside our custom nav area (the hidden default
// VPNavBarAppearance is first in DOM order, so a bare querySelector would
// hit it instead). Playwright's click auto-waits for hydration.
// hit it instead).
await page.locator('.nav-bar-right button[role="switch"]').click();
// Assert the dark class actually toggled