a2239001d9
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
132 lines
4.3 KiB
TypeScript
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");
|
|
});
|
|
});
|