test(frontend): CBZ page-mode component test + e2e mode/RTL smoke (B1)

2026-09-16 16:50:55 +08:00
parent 26aafb3f53
commit 174c498757
4 changed files with 75 additions and 0 deletions
@@ -0,0 +1,53 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ThemeProvider } from "@/components/theme";
+import CbzReader from "@/readers/CbzReader";
+
+const okResponse = (body: unknown) =>
+  new Response(JSON.stringify(body), { status: 200, headers: { "Content-Type": "application/json" } });
+
+beforeEach(() => {
+  localStorage.clear();
+  vi.restoreAllMocks?.();
+  // 全局网络打桩:页数接口 + 图片对象 URL + 进度上报(页图数据解不真实也无需:PageImg 有占位态)
+  vi.spyOn(globalThis, "fetch").mockImplementation(async (input) => {
+    const url = String(input instanceof Request ? input.url : input);
+    if (url.includes("/pages")) return okResponse({ count: 3, chapters: null });
+    if (url.includes("/progress")) return okResponse(null);
+    return new Response("", { status: 200 }); // 页图 blob 等
+  });
+  Object.defineProperty(URL, "createObjectURL", { value: () => "blob:x", configurable: true });
+});
+
+const book = {
+  id: 1,
+  library_id: 1,
+  path: "p",
+  title: "t",
+  format: "cbz",
+  state: "ok",
+  percent: 0,
+  pages_url: "/pages",
+  page_url_fmt: "/page/{}",
+} as never;
+
+describe("CbzReader 页模式设置区", () => {
+  it("切「单页」后位置读数 1/3,切「双页」首页不变,切回「长卷」按钮仍可用", async () => {
+    render(
+      <ThemeProvider>
+        <QueryClientProvider client={new QueryClient()}>
+          <CbzReader book={book} chrome={{ on: true, toggle: () => {}, show: () => {} }} />
+        </QueryClientProvider>
+      </ThemeProvider>,
+    );
+    await screen.findByLabelText("漫画阅读器,点按左右两侧翻屏,点按中间显示工具栏");
+    fireEvent.click(await screen.findByRole("button", { name: "更多阅读设置" }));
+    fireEvent.click(await screen.findByRole("button", { name: "单页" }));
+    expect(screen.getByText(/^1\/3 · /)).toBeInTheDocument();
+    fireEvent.click(await screen.findByRole("button", { name: "双页" }));
+    expect(screen.getByText(/^1\/3 · /)).toBeInTheDocument();
+    // 模式按钮组仍在设置面板内(长卷收进同一展开区)
+    expect(screen.getByRole("button", { name: "长卷" })).toBeInTheDocument();
+  });
+});