|
| 1 | +// @vitest-environment jsdom |
| 2 | +/** |
| 3 | + * BrowserChrome.test.tsx — 浏览器痕迹去除前端层(v0.16.1)。AAA 模式。 |
| 4 | + * |
| 5 | + * @ai-context: 覆盖三契约——① 任意位置右键都 preventDefault(原生菜单不出现在 |
| 6 | + * 应用内);② 文本控件右键弹应用内小菜单(剪切/复制/粘贴/全选); |
| 7 | + * ③ 粘贴 = 剪贴板文本插入光标处(异步 readText)。原生事件监听器 |
| 8 | + * 触发的 setState 需 act 包裹(非 React 事件路径)。 |
| 9 | + */ |
| 10 | +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; |
| 11 | +import { act, cleanup, fireEvent, render, screen } from "@testing-library/react"; |
| 12 | +import BrowserChrome from "./BrowserChrome"; |
| 13 | + |
| 14 | +const readTextMock = vi.fn(); |
| 15 | + |
| 16 | +/** 追加到 body 的原生元素(脱离 React 树——单独清理避免跨测试残留) */ |
| 17 | +function append<T extends HTMLElement>(el: T): T { |
| 18 | + document.body.appendChild(el); |
| 19 | + return el; |
| 20 | +} |
| 21 | + |
| 22 | +beforeEach(() => { |
| 23 | + readTextMock.mockReset(); |
| 24 | + readTextMock.mockResolvedValue("剪贴板文本"); |
| 25 | + Object.defineProperty(globalThis.navigator, "clipboard", { |
| 26 | + value: { readText: readTextMock }, |
| 27 | + configurable: true, |
| 28 | + }); |
| 29 | + // jsdom 无 execCommand——模拟浏览器环境提供(复制/剪切走它) |
| 30 | + document.execCommand = vi.fn(() => true) as unknown as typeof document.execCommand; |
| 31 | +}); |
| 32 | +afterEach(() => { |
| 33 | + cleanup(); |
| 34 | + document.body.innerHTML = ""; |
| 35 | +}); |
| 36 | + |
| 37 | +describe("BrowserChrome 浏览器痕迹去除", () => { |
| 38 | + it("非文本区域右键:不弹菜单(原生菜单已被 preventDefault 抑制)", () => { |
| 39 | + render(<BrowserChrome />); |
| 40 | + const box = append(document.createElement("div")); |
| 41 | + const ev = new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: 10, clientY: 10 }); |
| 42 | + box.dispatchEvent(ev); |
| 43 | + expect(ev.defaultPrevented).toBe(true); |
| 44 | + expect(screen.queryByTestId("browser-chrome-menu")).toBeNull(); |
| 45 | + }); |
| 46 | + |
| 47 | + it("textarea 右键:弹出应用内菜单(剪切/复制/粘贴/全选)", () => { |
| 48 | + render(<BrowserChrome />); |
| 49 | + const ta = append(document.createElement("textarea")); |
| 50 | + act(() => { |
| 51 | + ta.dispatchEvent(new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: 20, clientY: 20 })); |
| 52 | + }); |
| 53 | + expect(screen.getByTestId("browser-chrome-menu")).toBeTruthy(); |
| 54 | + for (const label of ["剪切", "复制", "粘贴", "全选"]) { |
| 55 | + expect(screen.getByTestId(`browser-chrome-${label}`)).toBeTruthy(); |
| 56 | + } |
| 57 | + }); |
| 58 | + |
| 59 | + it("粘贴:读取剪贴板并插入光标处(setRangeText + input 事件)", async () => { |
| 60 | + render(<BrowserChrome />); |
| 61 | + const ta = append(document.createElement("textarea")); |
| 62 | + ta.value = "ab"; |
| 63 | + ta.setSelectionRange(1, 1); // 光标在 a|b |
| 64 | + act(() => { |
| 65 | + ta.dispatchEvent(new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: 20, clientY: 20 })); |
| 66 | + }); |
| 67 | + fireEvent.click(screen.getByTestId("browser-chrome-粘贴")); |
| 68 | + await vi.waitFor(() => { |
| 69 | + expect(ta.value).toBe("a剪贴板文本b"); |
| 70 | + }); |
| 71 | + expect(readTextMock).toHaveBeenCalled(); |
| 72 | + // 菜单已收起 |
| 73 | + expect(screen.queryByTestId("browser-chrome-menu")).toBeNull(); |
| 74 | + }); |
| 75 | + |
| 76 | + it("无选区:剪切/复制禁用;全选可点", () => { |
| 77 | + render(<BrowserChrome />); |
| 78 | + const inp = append(document.createElement("input")); |
| 79 | + inp.value = "hello"; |
| 80 | + inp.setSelectionRange(0, 0); |
| 81 | + act(() => { |
| 82 | + inp.dispatchEvent(new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: 20, clientY: 20 })); |
| 83 | + }); |
| 84 | + expect((screen.getByTestId("browser-chrome-剪切") as HTMLButtonElement).disabled).toBe(true); |
| 85 | + expect((screen.getByTestId("browser-chrome-复制") as HTMLButtonElement).disabled).toBe(true); |
| 86 | + fireEvent.click(screen.getByTestId("browser-chrome-全选")); |
| 87 | + expect(inp.selectionStart).toBe(0); |
| 88 | + expect(inp.selectionEnd).toBe(5); |
| 89 | + }); |
| 90 | + |
| 91 | + it("ESC 关闭菜单", () => { |
| 92 | + render(<BrowserChrome />); |
| 93 | + const inp = append(document.createElement("input")); |
| 94 | + act(() => { |
| 95 | + inp.dispatchEvent(new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: 20, clientY: 20 })); |
| 96 | + }); |
| 97 | + expect(screen.getByTestId("browser-chrome-menu")).toBeTruthy(); |
| 98 | + fireEvent.keyDown(window, { key: "Escape" }); |
| 99 | + expect(screen.queryByTestId("browser-chrome-menu")).toBeNull(); |
| 100 | + }); |
| 101 | +}); |
0 commit comments