import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import { pubkeyToHue } from "../../src/lib/utils/nostrUtils"; import { nip19 } from "nostr-tools"; describe("pubkeyToHue", () => { describe("Consistency", () => { it("returns consistent hue for same pubkey", () => { const pubkey = "a".repeat(64); const hue1 = pubkeyToHue(pubkey); const hue2 = pubkeyToHue(pubkey); expect(hue1).toBe(hue2); }); it("returns same hue for same pubkey called multiple times", () => { const pubkey = "abc123def456".repeat(5) + "abcd"; const hues = Array.from({ length: 10 }, () => pubkeyToHue(pubkey)); expect(new Set(hues).size).toBe(1); // All hues should be the same }); }); describe("Range Validation", () => { it("returns hue in valid range (0-360)", () => { const pubkeys = [ "a".repeat(64), "f".repeat(64), "0".repeat(64), "9".repeat(64), "abc123def456".repeat(5) + "abcd", "123456789abc".repeat(5) + "def0", ]; pubkeys.forEach((pubkey) => { const hue = pubkeyToHue(pubkey); expect(hue).toBeGreaterThanOrEqual(0); expect(hue).toBeLessThan(360); }); }); it("returns integer hue value", () => { const pubkey = "a".repeat(64); const hue = pubkeyToHue(pubkey); expect(Number.isInteger(hue)).toBe(true); }); }); describe("Format Handling", () => { it("handles hex format pubkeys", () => { const hexPubkey = "abcdef123456789".repeat(4) + "0123"; const hue = pubkeyToHue(hexPubkey); expect(hue).toBeGreaterThanOrEqual(0); expect(hue).toBeLessThan(360); }); it("handles npub format pubkeys", () => { const hexPubkey = "a".repeat(64); const npub = nip19.npubEncode(hexPubkey); const hue = pubkeyToHue(npub); expect(hue).toBeGreaterThanOrEqual(0); expect(hue).toBeLessThan(360); }); it("returns same hue for hex and npub format of same pubkey", () => { const hexPubkey = "abc123def456".repeat(5) + "abcd"; const npub = nip19.npubEncode(hexPubkey); const hueFromHex = pubkeyToHue(hexPubkey); const hueFromNpub = pubkeyToHue(npub); expect(hueFromHex).toBe(hueFromNpub); }); }); describe("Uniqueness", () => { it("different pubkeys generate different hues", () => { const pubkey1 = "a".repeat(64); const pubkey2 = "b".repeat(64); const pubkey3 = "c".repeat(64); const hue1 = pubkeyToHue(pubkey1); const hue2 = pubkeyToHue(pubkey2); const hue3 = pubkeyToHue(pubkey3); expect(hue1).not.toBe(hue2); expect(hue2).not.toBe(hue3); expect(hue1).not.toBe(hue3); }); it("generates diverse hues for multiple pubkeys", () => { const pubkeys = Array.from( { length: 10 }, (_, i) => String.fromCharCode(97 + i).repeat(64), ); const hues = pubkeys.map((pk) => pubkeyToHue(pk)); const uniqueHues = new Set(hues); // Most pubkeys should generate unique hues (allowing for some collisions) expect(uniqueHues.size).toBeGreaterThan(7); }); }); describe("Edge Cases", () => { it("handles empty string input", () => { const hue = pubkeyToHue(""); expect(hue).toBeGreaterThanOrEqual(0); expect(hue).toBeLessThan(360); }); it("handles invalid npub format gracefully", () => { const invalidNpub = "npub1invalid"; const hue = pubkeyToHue(invalidNpub); // Should still return a valid hue even if decode fails expect(hue).toBeGreaterThanOrEqual(0); expect(hue).toBeLessThan(360); }); it("handles short input strings", () => { const shortInput = "abc"; const hue = pubkeyToHue(shortInput); expect(hue).toBeGreaterThanOrEqual(0); expect(hue).toBeLessThan(360); }); it("handles special characters", () => { const specialInput = "!@#$%^&*()"; const hue = pubkeyToHue(specialInput); expect(hue).toBeGreaterThanOrEqual(0); expect(hue).toBeLessThan(360); }); }); describe("Color Distribution", () => { it("distributes colors across the spectrum", () => { // Generate hues for many different pubkeys const pubkeys = Array.from( { length: 50 }, (_, i) => i.toString().repeat(16), ); const hues = pubkeys.map((pk) => pubkeyToHue(pk)); // Check that we have hues in different ranges of the spectrum const hasLowHues = hues.some((h) => h < 120); const hasMidHues = hues.some((h) => h >= 120 && h < 240); const hasHighHues = hues.some((h) => h >= 240); expect(hasLowHues).toBe(true); expect(hasMidHues).toBe(true); expect(hasHighHues).toBe(true); }); }); }); describe("HighlightLayer Component", () => { let mockNdk: any; let mockSubscription: any; let eventHandlers: Map; beforeEach(() => { eventHandlers = new Map(); // Mock NDK subscription mockSubscription = { on: vi.fn((event: string, handler: Function) => { eventHandlers.set(event, handler); }), stop: vi.fn(), }; mockNdk = { subscribe: vi.fn(() => mockSubscription), }; // Mock DOM APIs global.document = { createTreeWalker: vi.fn(() => ({ nextNode: vi.fn(() => null), })), createDocumentFragment: vi.fn(() => ({ appendChild: vi.fn(), })), createTextNode: vi.fn((text: string) => ({ textContent: text, })), createElement: vi.fn((tag: string) => ({ className: "", style: {}, textContent: "", })), } as any; }); afterEach(() => { vi.clearAllMocks(); }); describe("NDK Subscription", () => { it("fetches kind 9802 events with correct filter when eventId provided", () => { const eventId = "a".repeat(64); // Simulate calling fetchHighlights mockNdk.subscribe({ kinds: [9802], "#e": [eventId], limit: 100 }); expect(mockNdk.subscribe).toHaveBeenCalledWith( expect.objectContaining({ kinds: [9802], "#e": [eventId], limit: 100, }), ); }); it("fetches kind 9802 events with correct filter when eventAddress provided", () => { const eventAddress = "30040:" + "a".repeat(64) + ":chapter-1"; // Simulate calling fetchHighlights mockNdk.subscribe({ kinds: [9802], "#a": [eventAddress], limit: 100 }); expect(mockNdk.subscribe).toHaveBeenCalledWith( expect.objectContaining({ kinds: [9802], "#a": [eventAddress], limit: 100, }), ); }); it("fetches with both eventId and eventAddress filters when both provided", () => { const eventId = "a".repeat(64); const eventAddress = "30040:" + "b".repeat(64) + ":chapter-1"; // Simulate calling fetchHighlights mockNdk.subscribe({ kinds: [9802], "#e": [eventId], "#a": [eventAddress], limit: 100, }); expect(mockNdk.subscribe).toHaveBeenCalledWith( expect.objectContaining({ kinds: [9802], "#e": [eventId], "#a": [eventAddress], limit: 100, }), ); }); it("cleans up subscription on unmount", () => { mockNdk.subscribe({ kinds: [9802], limit: 100 }); // Simulate unmount by calling stop mockSubscription.stop(); expect(mockSubscription.stop).toHaveBeenCalled(); }); }); describe("Color Mapping", () => { it("maps highlights to colors correctly", () => { const pubkey1 = "a".repeat(64); const pubkey2 = "b".repeat(64); const hue1 = pubkeyToHue(pubkey1); const hue2 = pubkeyToHue(pubkey2); const expectedColor1 = `hsla(${hue1}, 70%, 60%, 0.3)`; const expectedColor2 = `hsla(${hue2}, 70%, 60%, 0.3)`; expect(expectedColor1).toMatch(/^hsla\(\d+, 70%, 60%, 0\.3\)$/); expect(expectedColor2).toMatch(/^hsla\(\d+, 70%, 60%, 0\.3\)$/); expect(expectedColor1).not.toBe(expectedColor2); }); it("uses consistent color for same pubkey", () => { const pubkey = "abc123def456".repeat(5) + "abcd"; const hue = pubkeyToHue(pubkey); const color1 = `hsla(${hue}, 70%, 60%, 0.3)`; const color2 = `hsla(${hue}, 70%, 60%, 0.3)`; expect(color1).toBe(color2); }); it("generates semi-transparent colors with 0.3 opacity", () => { const pubkey = "a".repeat(64); const hue = pubkeyToHue(pubkey); const color = `hsla(${hue}, 70%, 60%, 0.3)`; expect(color).toContain("0.3"); }); it("uses HSL color format with correct values", () => { const pubkey = "a".repeat(64); const hue = pubkeyToHue(pubkey); const color = `hsla(${hue}, 70%, 60%, 0.3)`; // Verify format: hsla(hue, 70%, 60%, 0.3) expect(color).toMatch(/^hsla\(\d+, 70%, 60%, 0\.3\)$/); }); }); describe("Highlight Events", () => { it("handles no highlights gracefully", () => { const highlights: any[] = []; expect(highlights.length).toBe(0); // Component should render without errors }); it("handles single highlight from one user", () => { const mockHighlight = { id: "highlight1", kind: 9802, pubkey: "a".repeat(64), content: "highlighted text", created_at: Date.now(), tags: [], }; const highlights = [mockHighlight]; expect(highlights.length).toBe(1); expect(highlights[0].pubkey).toBe("a".repeat(64)); }); it("handles multiple highlights from same user", () => { const pubkey = "a".repeat(64); const mockHighlights = [ { id: "highlight1", kind: 9802, pubkey: pubkey, content: "first highlight", created_at: Date.now(), tags: [], }, { id: "highlight2", kind: 9802, pubkey: pubkey, content: "second highlight", created_at: Date.now(), tags: [], }, ]; expect(mockHighlights.length).toBe(2); expect(mockHighlights[0].pubkey).toBe(mockHighlights[1].pubkey); // Should use same color for both const hue = pubkeyToHue(pubkey); const color = `hsla(${hue}, 70%, 60%, 0.3)`; expect(color).toMatch(/^hsla\(\d+, 70%, 60%, 0\.3\)$/); }); it("handles multiple highlights from different users", () => { const pubkey1 = "a".repeat(64); const pubkey2 = "b".repeat(64); const pubkey3 = "c".repeat(64); const mockHighlights = [ { id: "highlight1", kind: 9802, pubkey: pubkey1, content: "highlight from user 1", created_at: Date.now(), tags: [], }, { id: "highlight2", kind: 9802, pubkey: pubkey2, content: "highlight from user 2", created_at: Date.now(), tags: [], }, { id: "highlight3", kind: 9802, pubkey: pubkey3, content: "highlight from user 3", created_at: Date.now(), tags: [], }, ]; expect(mockHighlights.length).toBe(3); // Each should have different color const hue1 = pubkeyToHue(pubkey1); const hue2 = pubkeyToHue(pubkey2); const hue3 = pubkeyToHue(pubkey3); expect(hue1).not.toBe(hue2); expect(hue2).not.toBe(hue3); expect(hue1).not.toBe(hue3); }); it("prevents duplicate highlights", () => { const mockHighlight = { id: "highlight1", kind: 9802, pubkey: "a".repeat(64), content: "highlighted text", created_at: Date.now(), tags: [], }; const highlights = [mockHighlight]; // Try to add duplicate const isDuplicate = highlights.some((h) => h.id === mockHighlight.id); expect(isDuplicate).toBe(true); // Should not add duplicate }); it("handles empty content gracefully", () => { const mockHighlight = { id: "highlight1", kind: 9802, pubkey: "a".repeat(64), content: "", created_at: Date.now(), tags: [], }; // Should not crash expect(mockHighlight.content).toBe(""); }); it("handles whitespace-only content", () => { const mockHighlight = { id: "highlight1", kind: 9802, pubkey: "a".repeat(64), content: " \n\t ", created_at: Date.now(), tags: [], }; const trimmed = mockHighlight.content.trim(); expect(trimmed.length).toBe(0); }); }); describe("Highlighter Legend", () => { it("displays legend with correct color for single highlighter", () => { const pubkey = "abc123def456".repeat(5) + "abcd"; const hue = pubkeyToHue(pubkey); const color = `hsla(${hue}, 70%, 60%, 0.3)`; const legend = { pubkey: pubkey, color: color, shortPubkey: `${pubkey.slice(0, 8)}...`, }; expect(legend.color).toBe(color); expect(legend.shortPubkey).toBe(`${pubkey.slice(0, 8)}...`); }); it("displays legend with colors for multiple highlighters", () => { const pubkeys = [ "a".repeat(64), "b".repeat(64), "c".repeat(64), ]; const legendEntries = pubkeys.map((pubkey) => ({ pubkey, color: `hsla(${pubkeyToHue(pubkey)}, 70%, 60%, 0.3)`, shortPubkey: `${pubkey.slice(0, 8)}...`, })); expect(legendEntries.length).toBe(3); // Each should have unique color const colors = legendEntries.map((e) => e.color); const uniqueColors = new Set(colors); expect(uniqueColors.size).toBe(3); }); it("shows truncated pubkey in legend", () => { const pubkey = "abcdefghijklmnop".repeat(4); const shortPubkey = `${pubkey.slice(0, 8)}...`; expect(shortPubkey).toBe("abcdefgh..."); expect(shortPubkey.length).toBeLessThan(pubkey.length); }); it("displays highlight count", () => { const highlights = [ { id: "1", pubkey: "a".repeat(64), content: "text1" }, { id: "2", pubkey: "b".repeat(64), content: "text2" }, { id: "3", pubkey: "a".repeat(64), content: "text3" }, ]; expect(highlights.length).toBe(3); // Count unique highlighters const uniqueHighlighters = new Set(highlights.map((h) => h.pubkey)); expect(uniqueHighlighters.size).toBe(2); }); }); describe("Text Matching", () => { it("matches text case-insensitively", () => { const searchText = "Hello World"; const contentText = "hello world"; const index = contentText.toLowerCase().indexOf(searchText.toLowerCase()); expect(index).toBeGreaterThanOrEqual(0); }); it("handles special characters in search text", () => { const searchText = 'text with "quotes" and symbols!'; const contentText = 'This is text with "quotes" and symbols! in it.'; const index = contentText.toLowerCase().indexOf(searchText.toLowerCase()); expect(index).toBeGreaterThanOrEqual(0); }); it("handles Unicode characters", () => { const searchText = "café résumé"; const contentText = "The café résumé was excellent."; const index = contentText.toLowerCase().indexOf(searchText.toLowerCase()); expect(index).toBeGreaterThanOrEqual(0); }); it("handles multi-line text", () => { const searchText = "line one\nline two"; const contentText = "This is line one\nline two in the document."; const index = contentText.indexOf(searchText); expect(index).toBeGreaterThanOrEqual(0); }); it("does not match partial words when searching for whole words", () => { const searchText = "cat"; const contentText = "The category is important."; // Simple word boundary check const wordBoundaryMatch = new RegExp(`\\b${searchText}\\b`, "i").test( contentText, ); expect(wordBoundaryMatch).toBe(false); }); }); describe("Subscription Lifecycle", () => { it("registers EOSE event handler", () => { const subscription = mockNdk.subscribe({ kinds: [9802], limit: 100 }); // Verify that 'on' method is available for registering handlers expect(subscription.on).toBeDefined(); // Register EOSE handler subscription.on("eose", () => { subscription.stop(); }); // Verify on was called expect(subscription.on).toHaveBeenCalledWith( "eose", expect.any(Function), ); }); it("registers error event handler", () => { const subscription = mockNdk.subscribe({ kinds: [9802], limit: 100 }); // Verify that 'on' method is available for registering handlers expect(subscription.on).toBeDefined(); // Register error handler subscription.on("error", () => { subscription.stop(); }); // Verify on was called expect(subscription.on).toHaveBeenCalledWith( "error", expect.any(Function), ); }); it("stops subscription on timeout", async () => { vi.useFakeTimers(); mockNdk.subscribe({ kinds: [9802], limit: 100 }); // Fast-forward time by 10 seconds vi.advanceTimersByTime(10000); // Subscription should be stopped after timeout // Note: This would be tested in the actual component vi.useRealTimers(); }); it("handles multiple subscription cleanup calls safely", () => { mockNdk.subscribe({ kinds: [9802], limit: 100 }); // Call stop multiple times mockSubscription.stop(); mockSubscription.stop(); mockSubscription.stop(); expect(mockSubscription.stop).toHaveBeenCalledTimes(3); // Should not throw errors }); }); describe("Performance", () => { it("handles large number of highlights efficiently", () => { const startTime = Date.now(); const highlights = Array.from({ length: 1000 }, (_, i) => ({ id: `highlight${i}`, kind: 9802, pubkey: (i % 10).toString().repeat(64), content: `highlighted text ${i}`, created_at: Date.now(), tags: [], })); // Generate colors for all highlights const colorMap = new Map(); highlights.forEach((h) => { if (!colorMap.has(h.pubkey)) { const hue = pubkeyToHue(h.pubkey); colorMap.set(h.pubkey, `hsla(${hue}, 70%, 60%, 0.3)`); } }); const endTime = Date.now(); const duration = endTime - startTime; expect(highlights.length).toBe(1000); expect(colorMap.size).toBe(10); expect(duration).toBeLessThan(1000); // Should complete in less than 1 second }); }); }); describe("Integration Tests", () => { describe("Toggle Functionality", () => { it("toggle button shows highlights when clicked", () => { let highlightsVisible = false; // Simulate toggle highlightsVisible = !highlightsVisible; expect(highlightsVisible).toBe(true); }); it("toggle button hides highlights when clicked again", () => { let highlightsVisible = true; // Simulate toggle highlightsVisible = !highlightsVisible; expect(highlightsVisible).toBe(false); }); it("toggle state persists between interactions", () => { let highlightsVisible = false; highlightsVisible = !highlightsVisible; expect(highlightsVisible).toBe(true); highlightsVisible = !highlightsVisible; expect(highlightsVisible).toBe(false); highlightsVisible = !highlightsVisible; expect(highlightsVisible).toBe(true); }); }); describe("Color Format Validation", () => { it("generates semi-transparent colors with 0.3 opacity", () => { const pubkeys = [ "a".repeat(64), "b".repeat(64), "c".repeat(64), ]; pubkeys.forEach((pubkey) => { const hue = pubkeyToHue(pubkey); const color = `hsla(${hue}, 70%, 60%, 0.3)`; expect(color).toContain("0.3"); }); }); it("uses HSL color format with correct saturation and lightness", () => { const pubkey = "a".repeat(64); const hue = pubkeyToHue(pubkey); const color = `hsla(${hue}, 70%, 60%, 0.3)`; expect(color).toContain("70%"); expect(color).toContain("60%"); }); it("generates valid CSS color strings", () => { const pubkeys = Array.from( { length: 20 }, (_, i) => String.fromCharCode(97 + i).repeat(64), ); pubkeys.forEach((pubkey) => { const hue = pubkeyToHue(pubkey); const color = `hsla(${hue}, 70%, 60%, 0.3)`; // Validate CSS color format expect(color).toMatch(/^hsla\(\d+, 70%, 60%, 0\.3\)$/); }); }); }); describe("End-to-End Flow", () => { it("complete highlight workflow", () => { // 1. Start with no highlights visible let highlightsVisible = false; let highlights: any[] = []; expect(highlightsVisible).toBe(false); expect(highlights.length).toBe(0); // 2. Fetch highlights const mockHighlights = [ { id: "h1", kind: 9802, pubkey: "a".repeat(64), content: "first highlight", created_at: Date.now(), tags: [], }, { id: "h2", kind: 9802, pubkey: "b".repeat(64), content: "second highlight", created_at: Date.now(), tags: [], }, ]; highlights = mockHighlights; expect(highlights.length).toBe(2); // 3. Generate color map const colorMap = new Map(); highlights.forEach((h) => { if (!colorMap.has(h.pubkey)) { const hue = pubkeyToHue(h.pubkey); colorMap.set(h.pubkey, `hsla(${hue}, 70%, 60%, 0.3)`); } }); expect(colorMap.size).toBe(2); // 4. Toggle visibility highlightsVisible = true; expect(highlightsVisible).toBe(true); // 5. Verify colors are different const colors = Array.from(colorMap.values()); expect(colors[0]).not.toBe(colors[1]); // 6. Toggle off highlightsVisible = false; expect(highlightsVisible).toBe(false); }); it("handles event updates correctly", () => { let eventId = "event1"; let highlights: any[] = []; // Initial load highlights = [ { id: "h1", kind: 9802, pubkey: "a".repeat(64), content: "highlight 1", created_at: Date.now(), tags: [], }, ]; expect(highlights.length).toBe(1); // Event changes eventId = "event2"; highlights = []; expect(highlights.length).toBe(0); // New highlights loaded highlights = [ { id: "h2", kind: 9802, pubkey: "b".repeat(64), content: "highlight 2", created_at: Date.now(), tags: [], }, ]; expect(highlights.length).toBe(1); expect(highlights[0].id).toBe("h2"); }); }); describe("Error Handling", () => { it("handles missing event ID and address gracefully", () => { const eventId = undefined; const eventAddress = undefined; // Should not attempt to fetch expect(eventId).toBeUndefined(); expect(eventAddress).toBeUndefined(); }); it("handles subscription errors gracefully", () => { const error = new Error("Subscription failed"); // Should log error but not crash expect(error.message).toBe("Subscription failed"); }); it("handles malformed highlight events", () => { const malformedHighlight = { id: "h1", kind: 9802, pubkey: "", // Empty pubkey content: undefined, // Missing content created_at: Date.now(), tags: [], }; // Should handle gracefully expect(malformedHighlight.pubkey).toBe(""); expect(malformedHighlight.content).toBeUndefined(); }); }); });