/**
 * Tests for WorldMap component.
 *
 * Verifies that hovering a country shows a tooltip with the country name and ban count.
 */

import { describe, expect, it, vi } from "vitest";
import { fireEvent, render, screen } from "@testing-library/react";
import { FluentProvider, webLightTheme } from "@fluentui/react-components";

vi.mock(
  "world-atlas/countries-110m.json",
  () => ({
    default: {
      type: "Topology",
      objects: {
        countries: {
          type: "GeometryCollection",
          geometries: [
            {
              type: "Polygon",
              arcs: [[0]],
              id: "840",
            },
          ],
        },
      },
      arcs: [[[0, 0], [10, 0], [10, 10], [0, 10], [0, 0]]],
      transform: {
        scale: [1, 1],
        translate: [0, 0],
      },
    },
  }),
);

import { WorldMap } from "../WorldMap";

describe("WorldMap", () => {
  it("shows a tooltip with country name and ban count on hover", () => {
    render(
      <FluentProvider theme={webLightTheme}>
        <WorldMap
          countries={{ US: 42 }}
          countryNames={{ US: "United States" }}
          selectedCountry={null}
          onSelectCountry={vi.fn()}
        />
      </FluentProvider>,
    );

    expect(screen.queryByRole("tooltip")).toBeNull();

    const countryButton = screen.getByRole("button", { name: "US: 42 bans" });
    expect(countryButton).toBeInTheDocument();

    expect(screen.getByRole("button", { name: /Zoom in/i })).toBeInTheDocument();
    expect(screen.getByRole("button", { name: /Zoom out/i })).toBeInTheDocument();
    expect(screen.getByRole("button", { name: /Reset view/i })).toBeInTheDocument();

    fireEvent.mouseEnter(countryButton, { clientX: 10, clientY: 10 });

    const tooltip = screen.getByRole("tooltip");
    expect(tooltip).toHaveTextContent("United States");
    expect(tooltip).toHaveTextContent("42 bans");

    fireEvent.mouseLeave(countryButton);
    expect(screen.queryByRole("tooltip")).toBeNull();
  });
});
