Add hover tooltip to WorldMap and update task list

frontend/src/components/__tests__/WorldMap.test.tsx

@@ -0,0 +1,51 @@
+/**
+ * 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();
+  });
+});