feat(webui): highlight file previews and diffs

2026-07-11 00:57:37 +08:00
parent 9a1d1e64c7
commit 1ee4349a08
10 changed files with 502 additions and 48 deletions
@@ -0,0 +1,56 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { DiffSyntaxHighlight } from "@/components/thread/activity/DiffSyntaxHighlight";
+import { ThemeProvider } from "@/hooks/useTheme";
+
+describe("DiffSyntaxHighlight with Prism", () => {
+  it("loads the TSX grammar and renders styled syntax tokens", async () => {
+    render(
+      <ThemeProvider theme="light">
+        <DiffSyntaxHighlight
+          language="tsx"
+          lines={[
+            {
+              kind: "context",
+              old_lineno: 1,
+              new_lineno: 1,
+              content: 'import { useMemo } from "react";',
+            },
+            {
+              kind: "delete",
+              old_lineno: 2,
+              new_lineno: null,
+              content: "export function StatusBadge() {",
+            },
+            {
+              kind: "add",
+              old_lineno: null,
+              new_lineno: 2,
+              content: "export function StatusBadge(): JSX.Element {",
+            },
+            {
+              kind: "context",
+              old_lineno: 3,
+              new_lineno: 3,
+              content: '  return <span className="badge">ready</span>;',
+            },
+          ]}
+        />
+      </ThemeProvider>,
+    );
+
+    const highlighted = await screen.findByTestId("syntax-highlighted-diff-hunk");
+    await waitFor(
+      () => {
+        expect(highlighted.querySelectorAll('td:last-child span[style*="color"]')).not.toHaveLength(
+          0,
+        );
+      },
+      { timeout: 10_000 },
+    );
+
+    expect(highlighted).toHaveAttribute("data-language", "tsx");
+    expect(highlighted.querySelectorAll("tbody tr")).toHaveLength(4);
+  });
+});