52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
/**
|
|
* 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";
|
|
|
|
// Mock react-simple-maps to avoid fetching real TopoJSON and to control geometry.
|
|
vi.mock("react-simple-maps", () => ({
|
|
ComposableMap: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
|
ZoomableGroup: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
|
Geography: ({ children }: { children?: React.ReactNode }) => <g>{children}</g>,
|
|
useGeographies: () => ({
|
|
geographies: [{ rsmKey: "geo-1", id: 840 }],
|
|
path: { centroid: () => [10, 10] },
|
|
}),
|
|
}));
|
|
|
|
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>,
|
|
);
|
|
|
|
// Tooltip should not be present initially
|
|
expect(screen.queryByRole("tooltip")).toBeNull();
|
|
|
|
const countryButton = screen.getByRole("button", { name: /US: 42 bans/i });
|
|
fireEvent.mouseEnter(countryButton, { clientX: 10, clientY: 10 });
|
|
|
|
const tooltip = screen.getByRole("tooltip");
|
|
expect(tooltip).toHaveTextContent("United States");
|
|
expect(tooltip).toHaveTextContent("42 bans");
|
|
expect(tooltip).toHaveStyle({ left: "22px", top: "22px" });
|
|
|
|
fireEvent.mouseLeave(countryButton);
|
|
expect(screen.queryByRole("tooltip")).toBeNull();
|
|
});
|
|
});
|