// HubReportNavCard — the report card of the hub and its getting-started props
// (#432). No jsdom: react-dom/server renders the markup, and the component
// called as a function exposes the props of the link it returns (the
// FilterPanel.test.tsx pattern), for the click handler.
import { describe, it, expect, vi } from "vitest";
import { renderToStaticMarkup } from "react-dom/server";
import { MemoryRouter } from "react-router-dom";
import type { ReactElement } from "react";

vi.mock("react-i18next", async () => (await import("../../test/i18nMock")).i18nMock());

import HubReportNavCard, { REPORTS_TRENDS_TARGET, type HubReportNavCardProps } from "./HubReportNavCard";

const BASE: HubReportNavCardProps = {
  to: "/reports/trends",
  icon: null,
  title: "Tendances",
  description: "Évolution",
};

const HIGHLIGHT = 'data-onboarding-highlight="true"';

const render = (props: Partial<HubReportNavCardProps> = {}) =>
  renderToStaticMarkup(
    <MemoryRouter>
      <HubReportNavCard {...BASE} {...props} />
    </MemoryRouter>,
  );

/** The link the card returns, read without rendering it. */
const link = (props: Partial<HubReportNavCardProps> = {}) =>
  HubReportNavCard({ ...BASE, ...props }) as ReactElement<{ onClick?: () => void; to: string }>;

describe("HubReportNavCard — the getting-started target (#432)", () => {
  it("carries the highlight on its link with onboardingTarget", () => {
    const html = render({ onboardingTarget: true });
    expect(html).toContain(`data-onboarding-target="${REPORTS_TRENDS_TARGET}" ${HIGHLIGHT}`);
    expect(html.indexOf(HIGHLIGHT)).toBeLessThan(html.indexOf('href="/reports/trends"'));
    expect(html.split(HIGHLIGHT).length - 1).toBe(1);
  });

  it("carries no highlight without it", () => {
    for (const onboardingTarget of [undefined, false]) {
      const html = render({ onboardingTarget });
      expect(html).not.toContain("data-onboarding-target");
      expect(html).not.toContain("data-onboarding-highlight");
    }
  });

  it("a click calls onNavigate when it is given", () => {
    const onNavigate = vi.fn();
    const element = link({ onNavigate });
    expect(element.props.to).toBe("/reports/trends");
    element.props.onClick!();
    expect(onNavigate).toHaveBeenCalledTimes(1);
  });

  it("without onNavigate, the link has no click handler of its own", () => {
    expect(link().props.onClick).toBeUndefined();
  });

  it("keeps its lock badge, translated", () => {
    expect(render({ locked: true })).toContain('aria-label="t(nav.locked)"');
    expect(render()).not.toContain("t(nav.locked)");
  });
});