mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 20:42:43 +00:00
Marc-André Bombeck
a23ee61184
A spec that arms `page.route(...)` in a `beforeEach` and never drops the handler races its own teardown. The context closes, an async handler is still awaiting, its next call rejects with "Test ended.", and Playwright attributes that to the test that had just passed. With `retries: 2` plus `failOnFlakyTests`, which spec bites is a matter of timing. `e2e/setup/test.ts` re-exports Playwright's `test` extended with an auto fixture that unroutes every page and the context after each test, and clears the page event listeners a spec subscribes to; `expect` rides along so a spec needs one import. Auto means a spec author cannot forget it and does not have to know it exists. Every spec now takes `test` from there, and `e2e-route-cleanup-guard.test.ts` keeps the import boundary closed with an allowlist that carries its reason. The per-file `afterEach` on the cycle spec goes away — leaving both would read as not trusting the fixture. Not covered: a page inside a context a spec builds itself. Only `share-documents.spec.ts` does that, and it owns those contexts.
343 lines
12 KiB
TypeScript
343 lines
12 KiB
TypeScript
import { expect, test } from "./setup/test";
|
|
|
|
import { STORAGE_STATE_PATH } from "./setup/global-setup";
|
|
|
|
/**
|
|
* v1.4.16 phase B2 — AI provider settings UX with single dropdown
|
|
* driving the form below. Three things to lock in here:
|
|
*
|
|
* 1. /settings/ai exposes the active-provider Pulldown
|
|
* (`data-testid="ai-active-provider-select"`).
|
|
* 2. Switching the dropdown changes the rendered config form below
|
|
* it: Codex form vs. OpenAI form vs. Anthropic form vs. Local
|
|
* form. Each form carries a stable `data-testid` so we don't
|
|
* lean on i18n labels.
|
|
* 3. The fallback chain card surfaces with stable
|
|
* `data-chain-row="<providerType>"` markers per row.
|
|
*/
|
|
test.describe("Settings → AI provider dropdown UX (B2)", () => {
|
|
test.use({ storageState: STORAGE_STATE_PATH });
|
|
|
|
test("dropdown switch changes the rendered config form", async ({ page }) => {
|
|
// Stable mocks for every endpoint the section reads. The chain
|
|
// mirrors the default order (codex first) so the rows render
|
|
// deterministically and the dropdown defaults to codex.
|
|
await page.route("**/api/insights/settings", (route) =>
|
|
route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
data: {
|
|
codexStatus: "disconnected",
|
|
codexConnectedAt: null,
|
|
hasAdminKey: false,
|
|
codexOauthConfigured: true,
|
|
privacyMode: "aggregated",
|
|
lastInsightAt: null,
|
|
},
|
|
error: null,
|
|
}),
|
|
}),
|
|
);
|
|
|
|
await page.route("**/api/user/ai-provider", (route) =>
|
|
route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
data: {
|
|
provider: null,
|
|
model: null,
|
|
baseUrl: null,
|
|
hasAnthropicKey: false,
|
|
anthropicKeyPreview: null,
|
|
hasLocalKey: false,
|
|
hasOpenaiKey: false,
|
|
openaiKeyPreview: null,
|
|
},
|
|
error: null,
|
|
}),
|
|
}),
|
|
);
|
|
|
|
await page.route("**/api/insights/provider-chain", (route) =>
|
|
route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
data: {
|
|
activeProvider: "codex",
|
|
cachedActiveProvider: null,
|
|
configuredChain: [
|
|
{ providerType: "codex", available: true },
|
|
{ providerType: "openai", available: true },
|
|
{ providerType: "anthropic", available: true },
|
|
{ providerType: "local", available: true },
|
|
],
|
|
},
|
|
error: null,
|
|
}),
|
|
}),
|
|
);
|
|
|
|
// Hydration gate — the provider query is fired by the same client
|
|
// boundary that renders the select, so its response proves React
|
|
// has hydrated the card and attached the select's change handler.
|
|
// `selectOption` on the SSR-painted element any earlier flips the
|
|
// native value without React noticing, and the config form below
|
|
// never switches (CI failure at slow hydration).
|
|
const cardHydrated = page.waitForResponse("**/api/user/ai-provider");
|
|
await page.goto("/settings/ai", { waitUntil: "domcontentloaded" });
|
|
await cardHydrated;
|
|
|
|
// 1. Dropdown surfaces on the page.
|
|
const select = page.getByTestId("ai-active-provider-select");
|
|
await expect(select).toBeVisible({ timeout: 10_000 });
|
|
|
|
// 2a. Default → Codex form rendered.
|
|
await expect(page.getByTestId("ai-provider-config-codex")).toBeVisible();
|
|
await expect(page.getByTestId("ai-provider-config-openai")).toHaveCount(0);
|
|
|
|
// 2b. Switch to OpenAI → OpenAI form rendered, Codex form gone.
|
|
await select.selectOption("openai");
|
|
await expect(page.getByTestId("ai-provider-config-openai")).toBeVisible();
|
|
await expect(page.getByTestId("ai-provider-config-codex")).toHaveCount(0);
|
|
await expect(page.getByTestId("ai-openai-api-key")).toBeVisible();
|
|
await expect(page.getByTestId("ai-openai-model")).toBeVisible();
|
|
|
|
// 2c. Switch to Anthropic → Anthropic form rendered.
|
|
await select.selectOption("anthropic");
|
|
await expect(
|
|
page.getByTestId("ai-provider-config-anthropic"),
|
|
).toBeVisible();
|
|
|
|
// 2d. Switch to Local → Local form rendered.
|
|
await select.selectOption("local");
|
|
await expect(page.getByTestId("ai-provider-config-local")).toBeVisible();
|
|
|
|
// 3. Fallback chain card surfaces with the four chain rows.
|
|
await expect(page.getByTestId("ai-fallback-chain")).toBeVisible();
|
|
for (const slug of ["codex", "openai", "anthropic", "local"]) {
|
|
await expect(page.locator(`[data-chain-row="${slug}"]`)).toBeVisible();
|
|
}
|
|
});
|
|
test("provider editors submit once by Enter or click and isolate connection tests", async ({
|
|
page,
|
|
}) => {
|
|
const patchBodies: Array<Record<string, unknown>> = [];
|
|
let releasePendingPatch: () => void = () => undefined;
|
|
let holdNextPatch = false;
|
|
let testConnectionRequests = 0;
|
|
let providerState: Record<string, unknown> = {
|
|
provider: null,
|
|
model: null,
|
|
baseUrl: null,
|
|
responseTimeoutSeconds: null,
|
|
hasAnthropicKey: false,
|
|
anthropicKeyPreview: null,
|
|
hasLocalKey: false,
|
|
hasOpenaiKey: false,
|
|
openaiKeyPreview: null,
|
|
};
|
|
|
|
await page.route("**/api/insights/settings", (route) =>
|
|
route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
data: {
|
|
codexStatus: "disconnected",
|
|
codexConnectedAt: null,
|
|
hasAdminKey: false,
|
|
codexOauthConfigured: true,
|
|
privacyMode: "aggregated",
|
|
lastInsightAt: null,
|
|
},
|
|
error: null,
|
|
}),
|
|
}),
|
|
);
|
|
await page.route("**/api/user/ai-provider", async (route) => {
|
|
if (route.request().method() === "PATCH") {
|
|
const body = route.request().postDataJSON() as Record<string, unknown>;
|
|
patchBodies.push(body);
|
|
providerState = { ...providerState, ...body };
|
|
if (holdNextPatch) {
|
|
holdNextPatch = false;
|
|
await new Promise<void>((resolve) => {
|
|
releasePendingPatch = resolve;
|
|
});
|
|
}
|
|
}
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({ data: providerState, error: null }),
|
|
});
|
|
});
|
|
await page.route("**/api/insights/provider-chain", (route) =>
|
|
route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
data: {
|
|
activeProvider: "codex",
|
|
cachedActiveProvider: null,
|
|
configuredChain: [
|
|
{ providerType: "codex", available: true },
|
|
{ providerType: "openai", available: true },
|
|
{ providerType: "anthropic", available: true },
|
|
{ providerType: "local", available: true },
|
|
],
|
|
},
|
|
error: null,
|
|
}),
|
|
}),
|
|
);
|
|
await page.route("**/api/ai/test", (route) => {
|
|
testConnectionRequests += 1;
|
|
return route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
data: { ok: true, providerType: "local", model: "test-model" },
|
|
error: null,
|
|
}),
|
|
});
|
|
});
|
|
|
|
const providerHydrated = page.waitForResponse("**/api/user/ai-provider");
|
|
await page.goto("/settings/ai?provider=openai", {
|
|
waitUntil: "domcontentloaded",
|
|
});
|
|
await providerHydrated;
|
|
|
|
const select = page.getByTestId("ai-active-provider-select");
|
|
|
|
async function assertEnterAndClickSubmitOnce({
|
|
provider,
|
|
formTestId,
|
|
inputId,
|
|
enterValue,
|
|
clickValue,
|
|
expectedField,
|
|
}: {
|
|
provider: "openai" | "anthropic" | "local";
|
|
formTestId: string;
|
|
inputId: string;
|
|
enterValue: string;
|
|
clickValue: string;
|
|
expectedField: string;
|
|
}) {
|
|
await select.selectOption(provider);
|
|
const form = page.getByTestId(formTestId);
|
|
await expect(form).toHaveJSProperty("tagName", "FORM");
|
|
const input = page.locator(`#${inputId}`);
|
|
const save = form.locator('button[type="submit"]');
|
|
await expect(save).toHaveCount(1);
|
|
|
|
await input.fill(enterValue);
|
|
const enterBaseline = patchBodies.length;
|
|
await input.press("Enter");
|
|
await expect.poll(() => patchBodies.length).toBe(enterBaseline + 1);
|
|
await page.waitForTimeout(50);
|
|
expect(patchBodies).toHaveLength(enterBaseline + 1);
|
|
expect(patchBodies.at(-1)?.[expectedField]).toBe(enterValue);
|
|
|
|
await input.fill(clickValue);
|
|
const clickBaseline = patchBodies.length;
|
|
await save.click();
|
|
await expect.poll(() => patchBodies.length).toBe(clickBaseline + 1);
|
|
await page.waitForTimeout(50);
|
|
expect(patchBodies).toHaveLength(clickBaseline + 1);
|
|
expect(patchBodies.at(-1)?.[expectedField]).toBe(clickValue);
|
|
}
|
|
|
|
await assertEnterAndClickSubmitOnce({
|
|
provider: "openai",
|
|
formTestId: "ai-provider-config-openai",
|
|
inputId: "ai-openai-key",
|
|
enterValue: "sk-enter-openai",
|
|
clickValue: "sk-click-openai",
|
|
expectedField: "openaiKey",
|
|
});
|
|
await assertEnterAndClickSubmitOnce({
|
|
provider: "anthropic",
|
|
formTestId: "ai-provider-config-anthropic",
|
|
inputId: "ai-anthropic-key",
|
|
enterValue: "sk-ant-enter",
|
|
clickValue: "sk-ant-click",
|
|
expectedField: "anthropicKey",
|
|
});
|
|
await assertEnterAndClickSubmitOnce({
|
|
provider: "local",
|
|
formTestId: "ai-provider-config-local",
|
|
inputId: "ai-local-base-url",
|
|
enterValue: "http://localhost:11434/v1",
|
|
clickValue: "http://localhost:11435/v1",
|
|
expectedField: "baseUrl",
|
|
});
|
|
|
|
const timeoutForm = page.locator("form").filter({
|
|
has: page.locator("#ai-response-timeout"),
|
|
});
|
|
const timeoutInput = page.locator("#ai-response-timeout");
|
|
const timeoutSave = timeoutForm.locator('button[type="submit"]');
|
|
await expect(timeoutForm).toHaveCount(1);
|
|
await expect(timeoutSave).toHaveCount(1);
|
|
|
|
await timeoutInput.fill("9");
|
|
const invalidTimeoutBaseline = patchBodies.length;
|
|
await timeoutInput.press("Enter");
|
|
await expect(timeoutForm.locator("p.text-destructive")).toBeVisible();
|
|
expect(patchBodies).toHaveLength(invalidTimeoutBaseline);
|
|
|
|
await timeoutInput.fill("180");
|
|
const timeoutEnterBaseline = patchBodies.length;
|
|
await timeoutInput.press("Enter");
|
|
await expect.poll(() => patchBodies.length).toBe(timeoutEnterBaseline + 1);
|
|
await page.waitForTimeout(50);
|
|
expect(patchBodies).toHaveLength(timeoutEnterBaseline + 1);
|
|
expect(patchBodies.at(-1)?.responseTimeoutSeconds).toBe(180);
|
|
|
|
await timeoutInput.fill("240");
|
|
const timeoutClickBaseline = patchBodies.length;
|
|
await timeoutSave.click();
|
|
await expect.poll(() => patchBodies.length).toBe(timeoutClickBaseline + 1);
|
|
await page.waitForTimeout(50);
|
|
expect(patchBodies).toHaveLength(timeoutClickBaseline + 1);
|
|
expect(patchBodies.at(-1)?.responseTimeoutSeconds).toBe(240);
|
|
|
|
holdNextPatch = true;
|
|
await page.locator("#ai-local-base-url").fill("http://localhost:11436/v1");
|
|
const pendingBaseline = patchBodies.length;
|
|
await page
|
|
.getByTestId("ai-provider-config-local")
|
|
.evaluate((form: HTMLFormElement) => {
|
|
form.requestSubmit();
|
|
form.requestSubmit();
|
|
});
|
|
await expect.poll(() => patchBodies.length).toBe(pendingBaseline + 1);
|
|
await expect(
|
|
page
|
|
.getByTestId("ai-provider-config-local")
|
|
.locator('button[type="submit"]'),
|
|
).toBeDisabled();
|
|
await page.waitForTimeout(50);
|
|
expect(patchBodies).toHaveLength(pendingBaseline + 1);
|
|
|
|
const testConnection = page.getByTestId("ai-test-active-provider");
|
|
await expect(testConnection).toHaveAttribute("type", "button");
|
|
await testConnection.click();
|
|
await expect.poll(() => testConnectionRequests).toBe(1);
|
|
expect(patchBodies).toHaveLength(pendingBaseline + 1);
|
|
|
|
releasePendingPatch();
|
|
await expect(
|
|
page
|
|
.getByTestId("ai-provider-config-local")
|
|
.locator('button[type="submit"]'),
|
|
).toBeEnabled();
|
|
});
|
|
});
|