Stabilize runtime auth and E2E coverage
This commit is contained in:
Yun Chan
parent
6a3e3b541c
commit
188e899394
133 changed files with 55987 additions and 6775 deletions
428
apps/web/e2e/settings.spec.ts
Normal file
428
apps/web/e2e/settings.spec.ts
Normal file
|
|
@ -0,0 +1,428 @@
|
|||
import { expect, test, type APIResponse, type Page, type Response, type TestInfo } from "@playwright/test";
|
||||
import { expectNoHorizontalOverflow, useRealApi, withGlobalEngineConfigLock } from "./support";
|
||||
|
||||
type Role = "learner" | "admin";
|
||||
|
||||
interface UserProfileResponse {
|
||||
user_id: string;
|
||||
email: string;
|
||||
display_name: string;
|
||||
role: string;
|
||||
cohort_ids: string[];
|
||||
affiliation: string;
|
||||
}
|
||||
|
||||
interface UserPreferencesResponse {
|
||||
theme: string;
|
||||
voice_preset_id: string;
|
||||
voice_rate: number;
|
||||
notifications: {
|
||||
session_done: boolean;
|
||||
safety_signal: boolean;
|
||||
learner_progress: boolean;
|
||||
product_news: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
interface AdminEngineConfigResponse {
|
||||
engine_mode: string;
|
||||
engine_url: string;
|
||||
model: string;
|
||||
updated_by: string | null;
|
||||
updated_at: number | null;
|
||||
}
|
||||
|
||||
async function expectResponseOk(response: APIResponse | Response) {
|
||||
if (!response.ok()) {
|
||||
const body = await response.text();
|
||||
const method =
|
||||
typeof (response as Response).request === "function"
|
||||
? (response as Response).request().method()
|
||||
: "API";
|
||||
expect(
|
||||
response.ok(),
|
||||
`Expected ${method} ${response.url()} to be OK, got ${response.status()}: ${body}`,
|
||||
).toBeTruthy();
|
||||
}
|
||||
}
|
||||
|
||||
function isApiResponse(method: string, pathnameSuffix: string) {
|
||||
return (response: Response) => {
|
||||
const url = new URL(response.url());
|
||||
return response.request().method() === method && url.pathname.endsWith(pathnameSuffix);
|
||||
};
|
||||
}
|
||||
|
||||
function isApiRequest(method: string, pathnameSuffix: string) {
|
||||
return (request: { method: () => string; url: () => string }) => {
|
||||
const url = new URL(request.url());
|
||||
return request.method() === method && url.pathname.endsWith(pathnameSuffix);
|
||||
};
|
||||
}
|
||||
|
||||
async function runAndWaitForApiResponse(
|
||||
page: Page,
|
||||
method: string,
|
||||
pathnameSuffix: string,
|
||||
action: () => Promise<void>,
|
||||
responsePredicate: (response: Response) => boolean = () => true,
|
||||
) {
|
||||
const responsePromise = page.waitForResponse(
|
||||
(response) => isApiResponse(method, pathnameSuffix)(response) && responsePredicate(response),
|
||||
{
|
||||
timeout: 10_000,
|
||||
},
|
||||
);
|
||||
const failedRequestPromise = page
|
||||
.waitForEvent("requestfailed", {
|
||||
predicate: isApiRequest(method, pathnameSuffix),
|
||||
timeout: 10_000,
|
||||
})
|
||||
.then((request) => {
|
||||
throw new Error(
|
||||
`${method} ${pathnameSuffix} failed before a response: ${
|
||||
request.failure()?.errorText ?? "unknown network error"
|
||||
}`,
|
||||
);
|
||||
});
|
||||
|
||||
await action();
|
||||
return Promise.race([responsePromise, failedRequestPromise]);
|
||||
}
|
||||
|
||||
async function waitForReactInputCommit(page: Page) {
|
||||
await page.evaluate(
|
||||
() =>
|
||||
new Promise<void>((resolve) => {
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => resolve());
|
||||
});
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
function hasEngineConfigRequestBody(engineMode: string, model: string) {
|
||||
return (response: Response) => {
|
||||
try {
|
||||
const body = response.request().postDataJSON() as { engine_mode?: string; model?: string };
|
||||
return body.engine_mode === engineMode && body.model === model;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function slugFor(testInfo: TestInfo) {
|
||||
let hash = 0;
|
||||
for (const char of testInfo.title) {
|
||||
hash = (hash * 31 + char.charCodeAt(0)) >>> 0;
|
||||
}
|
||||
const project = testInfo.project.name.includes("mobile") ? "mob" : "desk";
|
||||
return `${project}.${testInfo.workerIndex}.${testInfo.retry}.${hash.toString(36)}`;
|
||||
}
|
||||
|
||||
function deferred() {
|
||||
let resolve!: () => void;
|
||||
const promise = new Promise<void>((next) => {
|
||||
resolve = next;
|
||||
});
|
||||
return { promise, resolve };
|
||||
}
|
||||
|
||||
function testEmail(role: Role, testInfo: TestInfo) {
|
||||
const domain = role === "admin" ? "twentyoz.kr" : "hs.ac.kr";
|
||||
return `settings.${role}.${slugFor(testInfo)}@${domain}`;
|
||||
}
|
||||
|
||||
async function signInAs(
|
||||
page: Page,
|
||||
role: Role,
|
||||
testInfo: TestInfo,
|
||||
displayName: string,
|
||||
email = testEmail(role, testInfo),
|
||||
) {
|
||||
const res = await page.request.post("/api/auth/dev-login", {
|
||||
data: {
|
||||
email,
|
||||
role,
|
||||
display_name: displayName,
|
||||
},
|
||||
});
|
||||
await expectResponseOk(res);
|
||||
return email;
|
||||
}
|
||||
|
||||
async function openSettings(page: Page, options: { admin?: boolean } = {}) {
|
||||
const profilePromise = page.waitForResponse(isApiResponse("GET", "/users/me"));
|
||||
const preferencesPromise = page.waitForResponse(
|
||||
isApiResponse("GET", "/users/me/preferences"),
|
||||
);
|
||||
const voicePresetsPromise = page.waitForResponse(
|
||||
isApiResponse("GET", "/users/me/voice-presets"),
|
||||
);
|
||||
const engineConfigPromise = options.admin
|
||||
? page.waitForResponse(isApiResponse("GET", "/admin/engine-config"))
|
||||
: null;
|
||||
|
||||
await page.goto("/settings");
|
||||
|
||||
const [profileResponse, preferencesResponse, voicePresetsResponse, engineConfigResponse] =
|
||||
await Promise.all([
|
||||
profilePromise,
|
||||
preferencesPromise,
|
||||
voicePresetsPromise,
|
||||
engineConfigPromise,
|
||||
]);
|
||||
|
||||
await expectResponseOk(profileResponse);
|
||||
await expectResponseOk(preferencesResponse);
|
||||
await expectResponseOk(voicePresetsResponse);
|
||||
if (engineConfigResponse) await expectResponseOk(engineConfigResponse);
|
||||
|
||||
const profile = (await profileResponse.json()) as UserProfileResponse;
|
||||
const preferences = (await preferencesResponse.json()) as UserPreferencesResponse;
|
||||
const engineConfig = engineConfigResponse
|
||||
? ((await engineConfigResponse.json()) as AdminEngineConfigResponse)
|
||||
: null;
|
||||
|
||||
await expect(page).toHaveURL(/\/settings$/);
|
||||
await expect(page.locator(".vg-set")).toBeVisible();
|
||||
|
||||
return { profile, preferences, engineConfig };
|
||||
}
|
||||
|
||||
test.describe("settings page", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await useRealApi(page);
|
||||
});
|
||||
|
||||
test("learner opens settings with server-backed account details", async ({ page }, testInfo) => {
|
||||
await page.addInitScript(() => {
|
||||
window.localStorage.setItem(
|
||||
"vignette.dev-auth",
|
||||
JSON.stringify({
|
||||
email: "browser-local@hs.ac.kr",
|
||||
name: "Browser Local Learner",
|
||||
role: "learner",
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
const displayName = `Settings Learner ${testInfo.project.name}`;
|
||||
const email = await signInAs(page, "learner", testInfo, displayName);
|
||||
|
||||
const { profile } = await openSettings(page);
|
||||
|
||||
expect(profile).toMatchObject({
|
||||
email,
|
||||
display_name: displayName,
|
||||
role: "learner",
|
||||
});
|
||||
|
||||
const account = page.locator("#set-account");
|
||||
await expect(account.locator(".vg-set__profile-meta .n")).toHaveText(displayName);
|
||||
await expect(account.locator(".vg-set__profile-meta .e")).toHaveText(email);
|
||||
await expect(account.locator("input").nth(0)).toHaveValue(displayName);
|
||||
await expect(account.locator("input").nth(1)).toHaveValue(email);
|
||||
await expect(page.getByText("Browser Local Learner")).toHaveCount(0);
|
||||
await expect(page.getByText("browser-local@hs.ac.kr")).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("does not expose fallback settings before server state arrives", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
const displayName = `Settings Loading Admin ${testInfo.project.name}`;
|
||||
await signInAs(page, "admin", testInfo, displayName);
|
||||
|
||||
const preferencesGate = deferred();
|
||||
const preferencesSeen = deferred();
|
||||
const voicesGate = deferred();
|
||||
const voicesSeen = deferred();
|
||||
const engineGate = deferred();
|
||||
const engineSeen = deferred();
|
||||
|
||||
await page.route("**/api/users/me/preferences", async (route) => {
|
||||
preferencesSeen.resolve();
|
||||
await preferencesGate.promise;
|
||||
await route.continue();
|
||||
});
|
||||
await page.route("**/api/users/me/voice-presets", async (route) => {
|
||||
voicesSeen.resolve();
|
||||
await voicesGate.promise;
|
||||
await route.continue();
|
||||
});
|
||||
await page.route("**/api/admin/engine-config", async (route) => {
|
||||
engineSeen.resolve();
|
||||
await engineGate.promise;
|
||||
await route.continue();
|
||||
});
|
||||
|
||||
await page.goto("/settings");
|
||||
await Promise.all([preferencesSeen.promise, voicesSeen.promise, engineSeen.promise]);
|
||||
|
||||
await expect(page.getByTestId("settings-preferences-loading")).toBeVisible();
|
||||
await expect(page.getByTestId("settings-voice-loading")).toBeVisible();
|
||||
await expect(page.getByTestId("settings-notify-loading")).toBeVisible();
|
||||
await expect(page.getByTestId("settings-engine-loading")).toBeVisible();
|
||||
await expect(page.getByText("soft-young-fem")).toHaveCount(0);
|
||||
await expect(page.getByRole("radio", { name: "Claude CLI 게이트웨이" })).toHaveCount(0);
|
||||
await expect(page.getByLabel("말하기 속도")).toHaveCount(0);
|
||||
await expect(page.getByRole("button", { name: "음성 저장" })).toHaveCount(0);
|
||||
await expect(page.getByRole("button", { name: "알림 저장" })).toHaveCount(0);
|
||||
await expect(page.getByRole("button", { name: "운영 설정 저장" })).toHaveCount(0);
|
||||
|
||||
preferencesGate.resolve();
|
||||
voicesGate.resolve();
|
||||
engineGate.resolve();
|
||||
|
||||
await expect(page.getByTestId("settings-preferences-loading")).toHaveCount(0);
|
||||
await expect(page.getByRole("button", { name: "음성 저장" })).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "알림 저장" })).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "운영 설정 저장" })).toBeVisible();
|
||||
});
|
||||
|
||||
test("learner saves display name and preferences", async ({ page }, testInfo) => {
|
||||
const displayName = `Settings Save Learner ${testInfo.project.name}`;
|
||||
await signInAs(page, "learner", testInfo, displayName);
|
||||
await openSettings(page);
|
||||
|
||||
const account = page.locator("#set-account");
|
||||
const displayNameInput = account.locator("input").nth(0);
|
||||
const nextName = `Updated Learner ${testInfo.project.name}`;
|
||||
await expect(displayNameInput).toHaveValue(displayName);
|
||||
|
||||
const profilePatchResponse = await runAndWaitForApiResponse(
|
||||
page,
|
||||
"PATCH",
|
||||
"/users/me",
|
||||
async () => {
|
||||
await displayNameInput.fill(nextName);
|
||||
await expect(displayNameInput).toHaveValue(nextName);
|
||||
await waitForReactInputCommit(page);
|
||||
await account.locator(".vg-set__foot .vg-btn").click();
|
||||
},
|
||||
);
|
||||
await expectResponseOk(profilePatchResponse);
|
||||
const profile = (await profilePatchResponse.json()) as UserProfileResponse;
|
||||
expect(profile.display_name).toBe(nextName);
|
||||
const persistedProfileResponse = await page.request.get("/api/users/me");
|
||||
await expectResponseOk(persistedProfileResponse);
|
||||
const persistedProfile = (await persistedProfileResponse.json()) as UserProfileResponse;
|
||||
expect(persistedProfile.display_name).toBe(nextName);
|
||||
await expect(account.locator(".vg-set__profile-meta .n")).toHaveText(nextName);
|
||||
await expect(displayNameInput).toHaveValue(nextName);
|
||||
|
||||
const notify = page.locator("#set-notify");
|
||||
const productNews = notify.getByRole("switch").last();
|
||||
const currentProductNews = (await productNews.getAttribute("aria-checked")) === "true";
|
||||
const nextProductNews = !currentProductNews;
|
||||
await productNews.click();
|
||||
await expect(productNews).toHaveAttribute("aria-checked", String(nextProductNews));
|
||||
|
||||
const preferencesPatchResponse = await runAndWaitForApiResponse(
|
||||
page,
|
||||
"PATCH",
|
||||
"/users/me/preferences",
|
||||
async () => {
|
||||
const saveButton = notify.locator(".vg-set__foot .vg-btn");
|
||||
await saveButton.scrollIntoViewIfNeeded();
|
||||
await saveButton.focus();
|
||||
await page.keyboard.press("Enter");
|
||||
},
|
||||
);
|
||||
await expectResponseOk(preferencesPatchResponse);
|
||||
const preferences = (await preferencesPatchResponse.json()) as UserPreferencesResponse;
|
||||
expect(preferences.notifications.product_news).toBe(nextProductNews);
|
||||
});
|
||||
|
||||
test("admin sees and updates the AI engine settings panel @single-run", async ({ page }, testInfo) => {
|
||||
const displayName = `Settings Admin ${testInfo.project.name}`;
|
||||
const email = await signInAs(page, "admin", testInfo, displayName);
|
||||
|
||||
await withGlobalEngineConfigLock(`settings-${slugFor(testInfo)}`, async () => {
|
||||
const { engineConfig } = await openSettings(page, { admin: true });
|
||||
expect(engineConfig).not.toBeNull();
|
||||
const originalEngineConfig = engineConfig!;
|
||||
|
||||
const engine = page.locator("#set-engine");
|
||||
await expect(engine).toBeVisible();
|
||||
await expect(engine.locator("input").nth(0)).toHaveValue(originalEngineConfig.engine_url);
|
||||
await expect(engine.locator("input").nth(1)).toHaveValue(originalEngineConfig.model);
|
||||
|
||||
const nextMode =
|
||||
originalEngineConfig.engine_mode === "claude_api" ? "claude_cli" : "claude_api";
|
||||
const nextModel = `e2e-model-${slugFor(testInfo)}`;
|
||||
|
||||
try {
|
||||
const nextModeButton = engine.locator(`[data-engine-mode="${nextMode}"]`);
|
||||
await nextModeButton.click();
|
||||
await expect(nextModeButton).toHaveAttribute("aria-checked", "true");
|
||||
await engine.locator("input").nth(1).fill(nextModel);
|
||||
await expect(engine.locator("input").nth(1)).toHaveValue(nextModel);
|
||||
await waitForReactInputCommit(page);
|
||||
|
||||
const enginePatchResponse = await runAndWaitForApiResponse(
|
||||
page,
|
||||
"PATCH",
|
||||
"/admin/engine-config",
|
||||
async () => {
|
||||
await engine.locator(".vg-set__foot .vg-btn").click();
|
||||
},
|
||||
hasEngineConfigRequestBody(nextMode, nextModel),
|
||||
);
|
||||
await expectResponseOk(enginePatchResponse);
|
||||
const updatedEngine = (await enginePatchResponse.json()) as AdminEngineConfigResponse;
|
||||
expect(updatedEngine).toMatchObject({
|
||||
engine_mode: nextMode,
|
||||
model: nextModel,
|
||||
updated_by: email,
|
||||
});
|
||||
await expect(engine.locator("input").nth(1)).toHaveValue(nextModel);
|
||||
|
||||
const healthResponse = await page.request.get("/api/admin/health");
|
||||
await expectResponseOk(healthResponse);
|
||||
const health = await healthResponse.json();
|
||||
expect(health.engine_mode).toBe(nextMode);
|
||||
} finally {
|
||||
const restoreResponse = await page.request.patch("/api/admin/engine-config", {
|
||||
data: {
|
||||
engine_mode: originalEngineConfig.engine_mode,
|
||||
engine_url: originalEngineConfig.engine_url,
|
||||
model: originalEngineConfig.model,
|
||||
},
|
||||
});
|
||||
await expectResponseOk(restoreResponse);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test("admin engine settings panel stays readable at a mobile viewport", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
const displayName = `Settings Mobile Admin ${testInfo.project.name}`;
|
||||
await signInAs(page, "admin", testInfo, displayName);
|
||||
|
||||
const { engineConfig } = await openSettings(page, { admin: true });
|
||||
expect(engineConfig).not.toBeNull();
|
||||
|
||||
const engine = page.locator("#set-engine");
|
||||
await expect(engine).toBeVisible();
|
||||
await expect(engine.locator("[data-engine-mode]")).toHaveCount(4);
|
||||
await expect(engine.locator("input").nth(0)).toBeVisible();
|
||||
await expect(engine.locator("input").nth(0)).toHaveValue(engineConfig!.engine_url);
|
||||
await expect(engine.locator("input").nth(1)).toBeVisible();
|
||||
await expect(engine.locator("input").nth(1)).toHaveValue(engineConfig!.model);
|
||||
|
||||
await expectNoHorizontalOverflow(page);
|
||||
});
|
||||
|
||||
test("does not horizontally overflow at a mobile viewport", async ({ page }, testInfo) => {
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await signInAs(page, "admin", testInfo, "E2E Admin", "admin@twentyoz.kr");
|
||||
|
||||
await openSettings(page, { admin: true });
|
||||
|
||||
await expectNoHorizontalOverflow(page);
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue