gc-alexandria/tests/unit/highlightLayer.test.ts

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<string, Function>;

  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<string, string>();
      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<string, string>();
      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();
    });
  });
});