| ... | ... | @@ -18,13 +18,10 @@ import { |
| 18 | 18 | useState, |
| 19 | 19 | type Ref, |
| 20 | 20 | } from "react"; |
| 21 | | import { renderToStaticMarkup } from "react-dom/server"; |
| 22 | 21 | import { create, type ReactTestRenderer } from "react-test-renderer"; |
| 23 | 22 | import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test"; |
| 24 | 23 | |
| 25 | 24 | const testState = vi.hoisted(() => ({ |
| 26 | | codeViewClassName: null as string | null, |
| 27 | | codeViewOptions: null as Record<string, unknown> | null, |
| 28 | 25 | workers: [] as NodeWorkerThreads.Worker[], |
| 29 | 26 | terminations: [] as Promise<number>[], |
| 30 | 27 | requests: [] as WorkerRequest[], |
| ... | ... | @@ -102,8 +99,6 @@ vi.mock("@pierre/diffs/worker/worker.js?worker", async () => { |
| 102 | 99 | vi.mock("@pierre/diffs/react", async (importOriginal) => ({ |
| 103 | 100 | ...(await importOriginal<typeof import("@pierre/diffs/react")>()), |
| 104 | 101 | CodeView: (props: CodeViewProps) => { |
| 105 | | testState.codeViewClassName = props.className ?? null; |
| 106 | | testState.codeViewOptions = props.options ? { ...props.options } : null; |
| 107 | 102 | return props.items?.map((item) => |
| 108 | 103 | item.type === "file" ? <FileOutput key={item.id} file={item.file} /> : null, |
| 109 | 104 | ); |
| ... | ... | @@ -158,49 +153,6 @@ function renderViews(count: number) { |
| 158 | 153 | ); |
| 159 | 154 | } |
| 160 | 155 | |
| 161 | | describe("StyledDiffCodeView", () => { |
| 162 | | beforeEach(() => { |
| 163 | | testState.codeViewClassName = null; |
| 164 | | testState.codeViewOptions = null; |
| 165 | | }); |
| 166 | | |
| 167 | | it("always pairs the shared diff styling with its virtualized geometry", () => { |
| 168 | | const loadDiffFiles = vi.fn(async () => ({ |
| 169 | | oldFile: { name: "before.ts", contents: "before\n" }, |
| 170 | | newFile: { name: "after.ts", contents: "after\n" }, |
| 171 | | })); |
| 172 | | renderToStaticMarkup( |
| 173 | | <StyledDiffCodeView |
| 174 | | className="min-h-0" |
| 175 | | items={[]} |
| 176 | | options={{ theme: "pierre-dark", stickyHeaders: true, loadDiffFiles }} |
| 177 | | />, |
| 178 | | ); |
| 179 | | |
| 180 | | expect(testState.codeViewClassName).toBe( |
| 181 | | "diff-render-surface [--code-background:var(--background)] outline-none min-h-0", |
| 182 | | ); |
| 183 | | expect(testState.codeViewOptions).toMatchObject({ |
| 184 | | theme: "pierre-dark", |
| 185 | | stickyHeaders: true, |
| 186 | | loadDiffFiles, |
| 187 | | itemMetrics: { |
| 188 | | diffHeaderHeight: 32, |
| 189 | | hunkSeparatorHeight: 24, |
| 190 | | paddingTop: 0, |
| 191 | | paddingBottom: 8, |
| 192 | | }, |
| 193 | | layout: { paddingTop: 0, paddingBottom: 0, gap: 0 }, |
| 194 | | }); |
| 195 | | expect(testState.codeViewOptions?.unsafeCSS).toEqual( |
| 196 | | expect.stringContaining("[data-unmodified-lines]::before"), |
| 197 | | ); |
| 198 | | expect(testState.codeViewOptions?.unsafeCSS).toEqual( |
| 199 | | expect.stringContaining(")[data-expand-index]\n [data-unmodified-lines]"), |
| 200 | | ); |
| 201 | | }); |
| 202 | | }); |
| 203 | | |
| 204 | 156 | describe("code-view worker lifecycle", () => { |
| 205 | 157 | let renderer: ReactTestRenderer | undefined; |
| 206 | 158 | |
Julius Marminge <julius0216@outlook.com> 2026-09-05 01:56:35-07:00
GitHub <noreply@github.com> 2026-09-05 01:56:35-07:00