207 lines
11 KiB
TypeScript
207 lines
11 KiB
TypeScript
import { expect, test, type Page } from "@playwright/test";
|
|
import { createServer } from "node:http";
|
|
import type { AddressInfo } from "node:net";
|
|
import { mockAgentApi } from "./support/mock-agent-api";
|
|
import { mockWorkbenchContext } from "./support/mock-workbench-context";
|
|
import { responsesFixture } from "./support/responses-fixture";
|
|
|
|
const voiceCatalog = {
|
|
defaultVoice: "zh-CN-XiaoxiaoNeural",
|
|
voices: [
|
|
{ id: "zh-CN-XiaoxiaoNeural", name: "Xiaoxiao", locale: "zh-CN", gender: "Female" },
|
|
{ id: "zh-CN-YunyangNeural", name: "Yunyang", locale: "zh-CN", gender: "Male" },
|
|
{ id: "zh-CN-XiaoyiNeural", name: "Xiaoyi", locale: "zh-CN", gender: "Female" }
|
|
]
|
|
};
|
|
|
|
test("voice loading bypasses a cached catalog from an earlier application version", async ({ page, baseURL }) => {
|
|
let legacy = true;
|
|
let catalogRequests = 0;
|
|
const oldCatalog = { ...voiceCatalog, voices: [
|
|
...voiceCatalog.voices,
|
|
{ id: "en-US-AriaNeural", name: "Aria", locale: "en-US", gender: "Female" }
|
|
] };
|
|
const server = createServer((request, response) => {
|
|
if (request.url === "/api/tts/edge/voices") {
|
|
catalogRequests += 1;
|
|
response.setHeader("Content-Type", "application/json");
|
|
response.setHeader("Cache-Control", "private, max-age=3600");
|
|
response.end(JSON.stringify(legacy ? oldCatalog : voiceCatalog));
|
|
} else {
|
|
response.setHeader("Content-Type", "text/html");
|
|
response.end("<!doctype html><title>Speech catalog cache regression</title>");
|
|
}
|
|
});
|
|
await new Promise<void>((resolve) => server.listen(0, "127.0.0.1", resolve));
|
|
const { port } = server.address() as AddressInfo;
|
|
try {
|
|
await page.goto(`http://127.0.0.1:${port}`);
|
|
expect(await page.evaluate(async () => (await (await fetch("/api/tts/edge/voices")).json()).voices.length)).toBe(4);
|
|
legacy = false;
|
|
// Confirm that ordinary fetch really reuses the cached legacy response.
|
|
expect(await page.evaluate(async () => (await (await fetch("/api/tts/edge/voices")).json()).voices.length)).toBe(4);
|
|
expect(catalogRequests).toBe(1);
|
|
const catalog = await page.evaluate(async (viteOrigin) => {
|
|
const { fetchSpeechVoiceCatalog } = await import(`${viteOrigin}/src/features/agent/speech-voice-catalog.ts`);
|
|
return fetchSpeechVoiceCatalog(`${location.origin}/api/tts/edge/voices`);
|
|
}, baseURL);
|
|
expect(catalog.voices).toEqual(voiceCatalog.voices);
|
|
expect(catalogRequests).toBe(2);
|
|
} finally {
|
|
await new Promise<void>((resolve) => server.close(() => resolve()));
|
|
}
|
|
});
|
|
|
|
async function openSpeechMessage(page: Page, options: { liveVoices?: boolean; catalogUnavailable?: boolean; onCatalogRead?: () => void } = {}) {
|
|
if (!options.liveVoices) await page.route("**/api/tts/edge/voices", (route) => {
|
|
options.onCatalogRead?.();
|
|
return options.catalogUnavailable
|
|
? route.fulfill({ status: 503, json: { error: "音色列表暂时不可用" } })
|
|
: route.fulfill({ json: voiceCatalog });
|
|
});
|
|
await mockWorkbenchContext(page);
|
|
await mockAgentApi(page);
|
|
await page.route("**/api/v1/responses", (route) => route.fulfill({
|
|
headers: { "Access-Control-Allow-Origin": "*", "Content-Type": "text/event-stream" },
|
|
body: responsesFixture([
|
|
{ type: "start", messageId: "speech-example" },
|
|
{ type: "data-progress", data: { id: "checking", phase: "context", title: "运行情况核对完成", status: "completed" } },
|
|
{ type: "data-final_answer", data: { content: "当前供水运行平稳。" } },
|
|
{ type: "finish", finishReason: "stop" }
|
|
])
|
|
}));
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await page.getByRole("button", { name: (page.viewportSize()?.width ?? 1440) < 1024 ? "打开 Agent 面板" : /展开 Agent 助手面板/ }).click();
|
|
const panel = page.getByRole("complementary", { name: "Agent 命令面板" });
|
|
await panel.getByRole("textbox", { name: "询问供水问题，或描述需要处理的任务" }).fill("检查供水运行");
|
|
await panel.getByRole("button", { name: "发送 Agent 指令", exact: true }).click();
|
|
await expect(panel.getByText("当前供水运行平稳。", { exact: true })).toBeVisible();
|
|
return panel;
|
|
}
|
|
|
|
test("speech failure shows an explanation and playback can be retried", async ({ page }) => {
|
|
await page.addInitScript(() => {
|
|
Object.defineProperty(window, "Audio", { configurable: true, value: class {
|
|
preload = ""; onended = null; onerror = null;
|
|
async play() {} pause() {} load() {} removeAttribute() {}
|
|
} });
|
|
});
|
|
let requests = 0;
|
|
await page.route("**/api/tts/edge", (route) => {
|
|
requests += 1;
|
|
return requests === 1
|
|
? route.fulfill({ status: 502, contentType: "application/json", body: JSON.stringify({ error: "语音生成失败" }) })
|
|
: route.fulfill({ contentType: "audio/mpeg", body: "mock-audio" });
|
|
});
|
|
const panel = await openSpeechMessage(page);
|
|
const play = panel.getByRole("button", { name: "语音播放", exact: true });
|
|
await play.click();
|
|
const alert = page.getByRole("alert").filter({ hasText: "语音播放失败" });
|
|
await expect(alert).toBeVisible();
|
|
await expect(alert).toContainText("语音生成失败");
|
|
await expect(play).toBeVisible();
|
|
await play.click();
|
|
await expect(panel.getByRole("button", { name: "暂停语音播放", exact: true })).toBeVisible();
|
|
await panel.getByRole("button", { name: "停止语音播放", exact: true }).click();
|
|
await expect(play).toBeVisible();
|
|
expect(requests).toBe(2);
|
|
});
|
|
|
|
for (const width of [1440, 360, 320]) {
|
|
test(`voice selection supports search, persistence and keyboard dismissal at ${width}px`, async ({ page }, testInfo) => {
|
|
await page.setViewportSize({ width, height: width === 320 ? 640 : 900 });
|
|
await page.emulateMedia({ reducedMotion: "reduce" });
|
|
await page.addInitScript(() => {
|
|
Object.defineProperty(window, "Audio", { configurable: true, value: class {
|
|
preload = ""; onended = null; onerror = null;
|
|
async play() {} pause() {} load() {} removeAttribute() {}
|
|
} });
|
|
});
|
|
const requests: Array<{ text: string; voice?: string }> = [];
|
|
await page.route("**/api/tts/edge", (route) => {
|
|
requests.push(route.request().postDataJSON());
|
|
return route.fulfill({ contentType: "audio/mpeg", body: "mock-audio" });
|
|
});
|
|
let catalogReads = 0;
|
|
const panel = await openSpeechMessage(page, { onCatalogRead: () => { catalogReads += 1; } });
|
|
const picker = panel.getByRole("button", { name: /^选择朗读音色/ });
|
|
await expect(picker).toHaveAccessibleName("选择朗读音色，当前晓晓");
|
|
await picker.click();
|
|
const dialog = page.getByRole("dialog", { name: "选择朗读音色" });
|
|
await expect(dialog).toHaveCSS("background-color", "rgb(255, 255, 255)");
|
|
await expect(dialog).toHaveCSS("backdrop-filter", "none");
|
|
await expect(dialog.getByText("3 种音色，选择后下次播放生效")).toBeVisible();
|
|
await expect(dialog.getByRole("option")).toHaveCount(4);
|
|
await page.screenshot({ path: testInfo.outputPath(`voice-menu-${width}.png`) });
|
|
const bounds = await dialog.boundingBox();
|
|
expect(bounds!.x).toBeGreaterThanOrEqual(0);
|
|
expect(bounds!.x + bounds!.width).toBeLessThanOrEqual(width);
|
|
await dialog.getByRole("combobox", { name: "搜索音色" }).fill("云扬");
|
|
await dialog.getByRole("option", { name: /云扬/ }).click();
|
|
await expect(picker).toHaveAccessibleName("选择朗读音色，当前云扬");
|
|
await panel.getByRole("button", { name: "语音播放", exact: true }).click();
|
|
await expect(panel.getByRole("button", { name: "暂停语音播放", exact: true })).toBeVisible();
|
|
expect(await panel.locator("[data-agent-message-toolbar]").last().evaluate((element) => element.scrollWidth - element.clientWidth)).toBeLessThanOrEqual(1);
|
|
expect(requests.at(-1)?.voice).toBe("zh-CN-YunyangNeural");
|
|
await panel.getByRole("button", { name: "停止语音播放", exact: true }).click();
|
|
await picker.click();
|
|
await dialog.getByRole("combobox", { name: "搜索音色" }).fill("晓伊");
|
|
await page.keyboard.press("ArrowDown");
|
|
await page.keyboard.press("Enter");
|
|
await expect(picker).toHaveAccessibleName("选择朗读音色，当前晓伊");
|
|
await picker.click();
|
|
await page.keyboard.press("Escape");
|
|
await expect(dialog).not.toBeVisible();
|
|
await expect(panel).toBeVisible();
|
|
await expect(picker).toBeFocused();
|
|
expect(catalogReads).toBe(1);
|
|
await openSpeechMessage(page);
|
|
await expect(picker).toHaveAccessibleName("选择朗读音色，当前晓伊");
|
|
await panel.getByRole("button", { name: "语音播放", exact: true }).click();
|
|
await expect(panel.getByRole("button", { name: "暂停语音播放", exact: true })).toBeVisible();
|
|
expect(requests.at(-1)?.voice).toBe("zh-CN-XiaoyiNeural");
|
|
});
|
|
}
|
|
|
|
test("voice catalog failures can be retried without blocking the default choice", async ({ page }) => {
|
|
const panel = await openSpeechMessage(page, { catalogUnavailable: true });
|
|
await panel.getByRole("button", { name: /^选择朗读音色/ }).click();
|
|
const dialog = page.getByRole("dialog", { name: "选择朗读音色" });
|
|
await expect(dialog.getByRole("alert")).toContainText("音色列表加载失败");
|
|
await expect(dialog.getByRole("option", { name: /默认音色/ })).toBeVisible();
|
|
await page.route("**/api/tts/edge/voices", (route) => route.fulfill({ json: voiceCatalog }));
|
|
await dialog.getByRole("button", { name: "重新加载音色" }).click();
|
|
await expect(dialog.getByRole("option", { name: /云扬/ })).toBeVisible();
|
|
});
|
|
|
|
test("live Edge TTS lists Mandarin voices and plays the chosen voice in the browser", async ({ page }, testInfo) => {
|
|
test.skip(process.env.TJWATER_TEST_LIVE_TTS !== "true", "Requires the real Edge TTS upstream service");
|
|
test.setTimeout(60_000);
|
|
const panel = await openSpeechMessage(page, { liveVoices: true });
|
|
const catalog = await (await page.request.get("/api/tts/edge/voices")).json();
|
|
expect(catalog.voices.length).toBeGreaterThan(0);
|
|
expect(catalog.voices.every((voice: { locale: string }) => voice.locale === "zh-CN")).toBe(true);
|
|
const picker = panel.getByRole("button", { name: /^选择朗读音色/ });
|
|
await expect(picker).toHaveAccessibleName("选择朗读音色，当前晓晓", { timeout: 15_000 });
|
|
await picker.click();
|
|
const dialog = page.getByRole("dialog", { name: "选择朗读音色" });
|
|
await expect(dialog.getByRole("option")).toHaveCount(catalog.voices.length + 1);
|
|
await dialog.getByRole("combobox", { name: "搜索音色" }).fill("云扬");
|
|
await dialog.getByRole("option", { name: /云扬/ }).click();
|
|
const responsePromise = page.waitForResponse((response) => response.url().endsWith("/api/tts/edge"));
|
|
await panel.getByRole("button", { name: "语音播放", exact: true }).click();
|
|
const response = await responsePromise;
|
|
expect(response.status()).toBe(200);
|
|
expect(response.request().postDataJSON().voice).toBe("zh-CN-YunyangNeural");
|
|
expect(response.headers()["content-type"]).toBe("audio/mpeg");
|
|
expect(Number(response.headers()["content-length"])).toBeGreaterThan(0);
|
|
const pause = panel.getByRole("button", { name: "暂停语音播放", exact: true });
|
|
await expect(pause).toBeVisible({ timeout: 35_000 });
|
|
await pause.click();
|
|
await page.screenshot({ path: testInfo.outputPath("speech-paused.png") });
|
|
await panel.getByRole("button", { name: "继续语音播放", exact: true }).click();
|
|
await expect(pause).toBeVisible();
|
|
await panel.getByRole("button", { name: "停止语音播放", exact: true }).click();
|
|
await expect(panel.getByRole("button", { name: "语音播放", exact: true })).toBeVisible();
|
|
});
|