105 lines
3 KiB
TypeScript
105 lines
3 KiB
TypeScript
import { render, screen } from "@testing-library/react";
|
|
import type { ReactNode } from "react";
|
|
import { MemoryRouter } from "react-router-dom";
|
|
import { beforeEach, describe, expect, it, vi } from "vitest";
|
|
import UserMemoMap from "@/components/UserMemoMap/UserMemoMap";
|
|
|
|
const mocks = vi.hoisted(() => ({
|
|
bounds: {},
|
|
fitBounds: vi.fn(),
|
|
latLngBounds: vi.fn(),
|
|
useInfiniteMemos: vi.fn(),
|
|
}));
|
|
|
|
vi.mock("leaflet", () => ({
|
|
default: {
|
|
latLngBounds: mocks.latLngBounds,
|
|
point: vi.fn(),
|
|
},
|
|
DivIcon: class {
|
|
constructor(_options: unknown) {}
|
|
},
|
|
}));
|
|
|
|
vi.mock("react-leaflet", () => ({
|
|
MapContainer: ({ children, attributionControl }: { children: ReactNode; attributionControl?: boolean }) => (
|
|
<div data-testid="map" data-attribution-control={attributionControl}>
|
|
{children}
|
|
</div>
|
|
),
|
|
Marker: ({ children, title }: { children: ReactNode; title?: string }) => (
|
|
<div data-testid="memo-marker" data-title={title}>
|
|
{children}
|
|
</div>
|
|
),
|
|
Popup: ({ children }: { children: ReactNode }) => children,
|
|
useMap: () => ({ fitBounds: mocks.fitBounds }),
|
|
}));
|
|
|
|
vi.mock("react-leaflet-cluster", () => ({
|
|
default: ({ children }: { children: ReactNode }) => children,
|
|
}));
|
|
|
|
vi.mock("@/components/map/map-utils", () => ({
|
|
defaultMarkerIcon: {},
|
|
MinimalAttributionControl: () => <div data-testid="attribution" />,
|
|
OpenStreetMapTileLayer: () => <div data-testid="map-layer" />,
|
|
}));
|
|
|
|
vi.mock("@/components/MemoView/components/MemoSpaceBadge", () => ({
|
|
default: () => null,
|
|
}));
|
|
|
|
vi.mock("@/hooks/useMemoQueries", () => ({
|
|
useInfiniteMemos: mocks.useInfiniteMemos,
|
|
}));
|
|
|
|
describe("UserMemoMap", () => {
|
|
beforeEach(() => {
|
|
mocks.fitBounds.mockReset();
|
|
mocks.latLngBounds.mockReset();
|
|
mocks.latLngBounds.mockReturnValue(mocks.bounds);
|
|
mocks.useInfiniteMemos.mockReturnValue({ data: { pages: [] }, isLoading: false });
|
|
});
|
|
|
|
it("uses the explicit minimal attribution control", () => {
|
|
render(
|
|
<MemoryRouter>
|
|
<UserMemoMap creator="users/1" />
|
|
</MemoryRouter>,
|
|
);
|
|
|
|
expect(screen.getByTestId("map")).toHaveAttribute("data-attribution-control", "false");
|
|
expect(screen.getByTestId("attribution")).toBeInTheDocument();
|
|
expect(screen.getByTestId("map-layer")).toBeInTheDocument();
|
|
});
|
|
|
|
it("caps automatic zoom and gives memo markers an accessible name", () => {
|
|
mocks.useInfiniteMemos.mockReturnValue({
|
|
data: {
|
|
pages: [
|
|
{
|
|
memos: [
|
|
{
|
|
name: "memos/1",
|
|
snippet: "Lunch spot",
|
|
location: { latitude: 1, longitude: 2 },
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
isLoading: false,
|
|
});
|
|
|
|
render(
|
|
<MemoryRouter>
|
|
<UserMemoMap creator="users/1" />
|
|
</MemoryRouter>,
|
|
);
|
|
|
|
expect(mocks.latLngBounds).toHaveBeenCalledWith([[1, 2]]);
|
|
expect(mocks.fitBounds).toHaveBeenCalledWith(mocks.bounds, { padding: [50, 50], maxZoom: 15 });
|
|
expect(screen.getByTestId("memo-marker")).toHaveAttribute("data-title", "Lunch spot");
|
|
});
|
|
});
|