085460b5e0
SSOT 대시보드:
- 한신대 기술분석 PDF(19쪽) 정합성 분석 + 이번 세션 발견 섹션 추가
- 섹션 폴드아웃(접기)·상단 목차(드릴다운)·모두 펼치기/접기 — 내용 보존, 레이아웃만 정리
페르소나 반응 강화('저항·반응 조절' 핵심 차별):
- PersonaCard.triggers(역린) 필드 + CCD 핵심상처 파생 역린 블록
- L0에 무례·모욕·조롱 시 현실적 동맹 균열 반응 지침
버그·성능 수정(라이브/E2E로 포착):
- 게이트웨이 페르소나 격리: --append-system-prompt를 --system-prompt(교체)로 + --exclude-dynamic-system-prompt-sections (내담자 캐릭터 붕괴·개발맥락 누출 차단)
- RAG: 임베더 동기 로드(약 7-13초)를 _warm_rag_caches 백그라운드 warm으로(세션 생성 블로킹 회귀 수정)
- voice TTS RMS 데드힌트 제거, init_state OpennessParams 파라미터객체화
- 한국어 PII(날짜·금액·주소) 마스킹 보강
- 레이아웃 시각 게이트: 폼 컨트롤 값 스크롤 오탐 제외(7/7)
검증: 백엔드 84/84, E2E 42(데스크톱 27·모바일 11·아바타 4), 시각 게이트 7/7
665 lines
23 KiB
TypeScript
665 lines
23 KiB
TypeScript
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;
|
|
}
|
|
};
|
|
}
|
|
|
|
async function expectNoEngineSegmentClipping(page: Page) {
|
|
await expect
|
|
.poll(async () =>
|
|
page.evaluate(() => {
|
|
const issues: Array<{
|
|
target: string;
|
|
text: string;
|
|
inlineOverflow: number;
|
|
blockOverflow: number;
|
|
leftOverflow: number;
|
|
rightOverflow: number;
|
|
width: number;
|
|
height: number;
|
|
}> = [];
|
|
|
|
const segment = document.querySelector<HTMLElement>("#set-engine .vg-set__seg");
|
|
if (!segment) {
|
|
return [
|
|
{
|
|
target: "segment",
|
|
text: "missing",
|
|
inlineOverflow: 0,
|
|
blockOverflow: 0,
|
|
leftOverflow: 0,
|
|
rightOverflow: 0,
|
|
width: 0,
|
|
height: 0,
|
|
},
|
|
];
|
|
}
|
|
|
|
const segmentRect = segment.getBoundingClientRect();
|
|
const segmentInlineOverflow = Math.ceil(segment.scrollWidth - segment.clientWidth);
|
|
const segmentBlockOverflow = Math.ceil(segment.scrollHeight - segment.clientHeight);
|
|
if (segmentInlineOverflow > 1 || segmentBlockOverflow > 1) {
|
|
issues.push({
|
|
target: "segment",
|
|
text: "",
|
|
inlineOverflow: segmentInlineOverflow,
|
|
blockOverflow: segmentBlockOverflow,
|
|
leftOverflow: 0,
|
|
rightOverflow: 0,
|
|
width: Math.ceil(segmentRect.width),
|
|
height: Math.ceil(segmentRect.height),
|
|
});
|
|
}
|
|
|
|
for (const button of Array.from(
|
|
segment.querySelectorAll<HTMLElement>(".vg-set__seg-btn"),
|
|
)) {
|
|
const rect = button.getBoundingClientRect();
|
|
const inlineOverflow = Math.ceil(button.scrollWidth - button.clientWidth);
|
|
const blockOverflow = Math.ceil(button.scrollHeight - button.clientHeight);
|
|
const leftOverflow = Math.ceil(segmentRect.left - rect.left);
|
|
const rightOverflow = Math.ceil(rect.right - segmentRect.right);
|
|
|
|
if (
|
|
inlineOverflow > 1 ||
|
|
blockOverflow > 1 ||
|
|
leftOverflow > 1 ||
|
|
rightOverflow > 1
|
|
) {
|
|
issues.push({
|
|
target: "button",
|
|
text: (button.textContent ?? "").replace(/\s+/g, " ").trim(),
|
|
inlineOverflow,
|
|
blockOverflow,
|
|
leftOverflow,
|
|
rightOverflow,
|
|
width: Math.ceil(rect.width),
|
|
height: Math.ceil(rect.height),
|
|
});
|
|
}
|
|
}
|
|
|
|
return issues;
|
|
}),
|
|
)
|
|
.toEqual([]);
|
|
}
|
|
|
|
async function expectNoSettingsControlClipping(page: Page) {
|
|
await expect
|
|
.poll(async () =>
|
|
page.evaluate(() => {
|
|
const selector = [
|
|
".vg-set",
|
|
".vg-set__rail",
|
|
".vg-set__rail-card",
|
|
".vg-set__nav",
|
|
".vg-set__nav-item",
|
|
".vg-set__forms",
|
|
".vg-set__group",
|
|
".vg-set__profile",
|
|
".vg-set__field",
|
|
".vg-set__control-block",
|
|
".vg-set__opt",
|
|
".vg-set__voice",
|
|
".vg-set__range-row",
|
|
".vg-set__seg",
|
|
".vg-set__seg-btn",
|
|
".vg-btn",
|
|
".vg-toggle",
|
|
].join(",");
|
|
const issues: Array<{
|
|
target: string;
|
|
text: string;
|
|
inlineOverflow: number;
|
|
blockOverflow: number;
|
|
width: number;
|
|
height: number;
|
|
}> = [];
|
|
|
|
for (const element of Array.from(document.querySelectorAll<HTMLElement>(selector))) {
|
|
const rect = element.getBoundingClientRect();
|
|
const style = window.getComputedStyle(element);
|
|
const visible =
|
|
style.display !== "none" &&
|
|
style.visibility !== "hidden" &&
|
|
Number(style.opacity) !== 0 &&
|
|
rect.width > 0 &&
|
|
rect.height > 0;
|
|
|
|
if (!visible) continue;
|
|
|
|
const inlineOverflow = Math.ceil(element.scrollWidth - element.clientWidth);
|
|
const blockOverflow = Math.ceil(element.scrollHeight - element.clientHeight);
|
|
const allowsInlineScroll = element.classList.contains("vg-set__nav");
|
|
|
|
if ((!allowsInlineScroll && inlineOverflow > 1) || blockOverflow > 1) {
|
|
issues.push({
|
|
target: `.${Array.from(element.classList).join(".") || element.tagName.toLowerCase()}`,
|
|
text: (element.textContent ?? "").replace(/\s+/g, " ").trim().slice(0, 80),
|
|
inlineOverflow,
|
|
blockOverflow,
|
|
width: Math.ceil(rect.width),
|
|
height: Math.ceil(rect.height),
|
|
});
|
|
}
|
|
}
|
|
|
|
return issues.slice(0, 8);
|
|
}),
|
|
)
|
|
.toEqual([]);
|
|
}
|
|
|
|
async function expectPracticalSettingsLayout(page: Page, mode: "desktop" | "mobile") {
|
|
await expect
|
|
.poll(async () =>
|
|
page.evaluate((layoutMode) => {
|
|
const countColumns = (template: string) =>
|
|
template === "none" ? 0 : template.split(" ").filter(Boolean).length;
|
|
const root = document.querySelector<HTMLElement>(".vg-set");
|
|
const forms = document.querySelector<HTMLElement>(".vg-set__forms");
|
|
const railCard = document.querySelector<HTMLElement>(".vg-set__rail-card");
|
|
const nav = document.querySelector<HTMLElement>(".vg-set__nav");
|
|
const account = document.querySelector<HTMLElement>("#set-account");
|
|
const appearance = document.querySelector<HTMLElement>("#set-appearance");
|
|
const notify = document.querySelector<HTMLElement>("#set-notify");
|
|
const voice = document.querySelector<HTMLElement>("#set-voice");
|
|
|
|
if (!root || !forms || !railCard || !nav || !account || !appearance || !notify || !voice) {
|
|
return { ready: false };
|
|
}
|
|
|
|
const rootColumns = countColumns(getComputedStyle(root).gridTemplateColumns);
|
|
const formColumns = countColumns(getComputedStyle(forms).gridTemplateColumns);
|
|
const railCardRect = railCard.getBoundingClientRect();
|
|
const navRect = nav.getBoundingClientRect();
|
|
const accountStyle = getComputedStyle(account);
|
|
const appearanceRect = appearance.getBoundingClientRect();
|
|
const notifyRect = notify.getBoundingClientRect();
|
|
const voiceRect = voice.getBoundingClientRect();
|
|
|
|
if (layoutMode === "desktop") {
|
|
return {
|
|
ready: true,
|
|
rootColumns,
|
|
formColumns,
|
|
railCardVisible: railCardRect.height > 24,
|
|
shortPanelsShareRow:
|
|
Math.abs(appearanceRect.top - notifyRect.top) <= 4 &&
|
|
appearanceRect.left < notifyRect.left,
|
|
voiceBelowShortPanels:
|
|
voiceRect.top > appearanceRect.top && voiceRect.top > notifyRect.top,
|
|
};
|
|
}
|
|
|
|
return {
|
|
ready: true,
|
|
rootColumns,
|
|
formColumns,
|
|
railCardHidden: railCardRect.height === 0,
|
|
navSingleLine: navRect.height <= 54,
|
|
compactPanelPadding: Number.parseFloat(accountStyle.paddingTop) <= 14,
|
|
};
|
|
}, mode),
|
|
)
|
|
.toEqual(
|
|
mode === "desktop"
|
|
? {
|
|
ready: true,
|
|
rootColumns: 2,
|
|
formColumns: 2,
|
|
railCardVisible: true,
|
|
shortPanelsShareRow: true,
|
|
voiceBelowShortPanels: true,
|
|
}
|
|
: {
|
|
ready: true,
|
|
rootColumns: 1,
|
|
formColumns: 1,
|
|
railCardHidden: true,
|
|
navSingleLine: true,
|
|
compactPanelPadding: true,
|
|
},
|
|
);
|
|
}
|
|
|
|
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 settings use a compact clipping-safe control layout", async ({
|
|
page,
|
|
}, testInfo) => {
|
|
const isMobile = testInfo.project.name.includes("mobile");
|
|
const displayName = `Settings Layout Admin ${testInfo.project.name}`;
|
|
await signInAs(page, "admin", testInfo, displayName);
|
|
|
|
await openSettings(page, { admin: true });
|
|
|
|
await expectPracticalSettingsLayout(page, isMobile ? "mobile" : "desktop");
|
|
await expectNoSettingsControlClipping(page);
|
|
await expectNoHorizontalOverflow(page);
|
|
});
|
|
|
|
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 expectNoEngineSegmentClipping(page);
|
|
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 expectNoSettingsControlClipping(page);
|
|
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 expectNoSettingsControlClipping(page);
|
|
await expectNoHorizontalOverflow(page);
|
|
});
|
|
});
|