stack/apps/web/src/components/federation/ProvenanceIndicator.test.tsx

/**
 * ProvenanceIndicator Component Tests
 */

import { describe, it, expect } from "vitest";
import { render, screen } from "@testing-library/react";
import { ProvenanceIndicator } from "./ProvenanceIndicator";

describe("ProvenanceIndicator", () => {
  it("should render instance name", () => {
    render(
      <ProvenanceIndicator
        instanceId="instance-work-001"
        instanceName="Work Instance"
        instanceUrl="https://mosaic.work.example.com"
      />
    );

    expect(screen.getByText("Work Instance")).toBeInTheDocument();
  });

  it("should render with compact mode", () => {
    const { container } = render(
      <ProvenanceIndicator
        instanceId="instance-work-001"
        instanceName="Work Instance"
        instanceUrl="https://mosaic.work.example.com"
        compact={true}
      />
    );

    // Compact mode should have smaller padding
    const badge = container.querySelector(".px-2");
    expect(badge).toBeInTheDocument();
  });

  it("should render with custom color", () => {
    const { container } = render(
      <ProvenanceIndicator
        instanceId="instance-work-001"
        instanceName="Work Instance"
        instanceUrl="https://mosaic.work.example.com"
        color="bg-blue-100"
      />
    );

    const badge = container.querySelector(".bg-blue-100");
    expect(badge).toBeInTheDocument();
  });

  it("should render with default color when not provided", () => {
    const { container } = render(
      <ProvenanceIndicator
        instanceId="instance-work-001"
        instanceName="Work Instance"
        instanceUrl="https://mosaic.work.example.com"
      />
    );

    const badge = container.querySelector(".bg-gray-100");
    expect(badge).toBeInTheDocument();
  });

  it("should show tooltip with instance details on hover", () => {
    render(
      <ProvenanceIndicator
        instanceId="instance-work-001"
        instanceName="Work Instance"
        instanceUrl="https://mosaic.work.example.com"
      />
    );

    // Check for title attribute (tooltip)
    const badge = screen.getByText("Work Instance");
    expect(badge.closest("div")).toHaveAttribute(
      "title",
      "From: Work Instance (https://mosaic.work.example.com)"
    );
  });

  it("should render with icon when showIcon is true", () => {
    render(
      <ProvenanceIndicator
        instanceId="instance-work-001"
        instanceName="Work Instance"
        instanceUrl="https://mosaic.work.example.com"
        showIcon={true}
      />
    );

    expect(screen.getByText("🔗")).toBeInTheDocument();
  });

  it("should not render icon by default", () => {
    render(
      <ProvenanceIndicator
        instanceId="instance-work-001"
        instanceName="Work Instance"
        instanceUrl="https://mosaic.work.example.com"
      />
    );

    expect(screen.queryByText("🔗")).not.toBeInTheDocument();
  });
});