Files
hmbown--codewhale/web/lib/search-utils.test.ts
Hanmiao Li a2239001d9 feat(web): add keyword search to docs hub and FAQ pages
Add client-side keyword search to two of the most content-heavy pages
on codewhale.net:

Docs hub (/docs):
- New DocsSearch client component with real-time filtering across all
  doc topics (label, description, source files, category — in both EN
  and ZH)
- Search input with / keyboard shortcut to focus, clear button, result
  count, and no-results state
- Matched text is highlighted inline
- The topic grid and category sections update live as you type

FAQ page (/faq):
- New FaqSearch client component wrapping the existing FAQ item list
- Full-text matching across question text, answer content (extracted
  from React nodes), and source citations
- Same UX patterns: / shortcut, highlight, result count

Shared logic:
- web/lib/search-utils.ts extracts the pure filtering functions for
  unit testability
- web/lib/search-utils.test.ts: 19 tests covering haystack building,
  locale-cross-matching, case-insensitivity, and edge cases

Styling:
- .search-input and mark.search-highlight classes in globals.css,
  using existing CSS variables for consistency with the site theme
2026-07-14 11:08:30 +08:00

132 lines
4.3 KiB
TypeScript

import { describe, it, expect } from "vitest";
import {
docTopicHaystack,
filterDocTopics,
normalizeQuery,
matches,
} from "./search-utils";
import { DOC_TOPICS } from "./docs-map";
describe("normalizeQuery", () => {
it("trims and lowercases", () => {
expect(normalizeQuery(" Hello World ")).toBe("hello world");
});
it("returns empty string for whitespace-only input", () => {
expect(normalizeQuery(" ")).toBe("");
});
});
describe("matches", () => {
it("returns true for empty query (shows everything)", () => {
expect(matches("anything", "")).toBe(true);
expect(matches("anything", " ")).toBe(true);
});
it("does case-insensitive substring matching", () => {
expect(matches("Install Guide", "install")).toBe(true);
expect(matches("install guide", "INSTALL")).toBe(true);
expect(matches("Configuration", "config")).toBe(true);
});
it("returns false when no match", () => {
expect(matches("Install", "docker")).toBe(false);
});
});
describe("docTopicHaystack", () => {
it("includes the topic id and slug", () => {
const install = DOC_TOPICS.find((t) => t.id === "install")!;
const hay = docTopicHaystack(install);
expect(hay).toContain("install");
});
it("includes both EN and ZH labels", () => {
const mcp = DOC_TOPICS.find((t) => t.id === "mcp")!;
const hay = docTopicHaystack(mcp);
expect(hay).toContain("mcp");
// ZH label is also "MCP" but description has Chinese
expect(hay).toContain("stdio");
expect(hay).toContain("工具"); // tools in Chinese description
});
it("includes source file paths", () => {
const config = DOC_TOPICS.find((t) => t.id === "configuration")!;
const hay = docTopicHaystack(config);
expect(hay).toContain("docs/configuration.md");
expect(hay).toContain("docs/legacy_paths.md");
});
it("includes category name in both locales", () => {
const install = DOC_TOPICS.find((t) => t.id === "install")!;
const hay = docTopicHaystack(install);
expect(hay).toContain("getting-started");
expect(hay).toContain("入门"); // ZH for getting-started
});
});
describe("filterDocTopics", () => {
it("returns all indices when query is empty", () => {
const result = filterDocTopics(DOC_TOPICS, "");
expect(result.length).toBe(DOC_TOPICS.length);
});
it("returns all indices when query is whitespace", () => {
const result = filterDocTopics(DOC_TOPICS, " ");
expect(result.length).toBe(DOC_TOPICS.length);
});
it("filters by English keyword", () => {
const result = filterDocTopics(DOC_TOPICS, "install");
const ids = result.map((i) => DOC_TOPICS[i].id);
expect(ids).toContain("install");
expect(ids.length).toBeGreaterThanOrEqual(1);
});
it("filters by Chinese keyword", () => {
const result = filterDocTopics(DOC_TOPICS, "沙箱"); // sandbox
const ids = result.map((i) => DOC_TOPICS[i].id);
expect(ids).toContain("sandbox");
});
it("filters by source file name", () => {
const result = filterDocTopics(DOC_TOPICS, "configuration.md");
const ids = result.map((i) => DOC_TOPICS[i].id);
expect(ids).toContain("configuration");
});
it("filters by category", () => {
const result = filterDocTopics(DOC_TOPICS, "extending");
const ids = result.map((i) => DOC_TOPICS[i].id);
// extending category includes mcp, hooks, runtime-api
expect(ids).toContain("mcp");
expect(ids).toContain("hooks");
expect(ids).toContain("runtime-api");
});
it("is case-insensitive", () => {
const lower = filterDocTopics(DOC_TOPICS, "mcp");
const upper = filterDocTopics(DOC_TOPICS, "MCP");
expect(lower).toEqual(upper);
});
it("returns empty array for gibberish query", () => {
const result = filterDocTopics(DOC_TOPICS, "zzzzzzz_nonexistent");
expect(result).toEqual([]);
});
it("matches partial keywords", () => {
const result = filterDocTopics(DOC_TOPICS, "tool");
const ids = result.map((i) => DOC_TOPICS[i].id);
// "tool" should match "tools" topic (id contains "tool")
expect(ids).toContain("tools");
});
it("matches across locales (EN query matches ZH content)", () => {
// "安装" is the ZH label for "install"
const result = filterDocTopics(DOC_TOPICS, "安装");
const ids = result.map((i) => DOC_TOPICS[i].id);
expect(ids).toContain("install");
});
});