79 lines
3.4 KiB
TypeScript
79 lines
3.4 KiB
TypeScript
import { renderToStaticMarkup } from "react-dom/server";
|
|
import { describe, expect, it } from "vitest";
|
|
import { UserWorldMap } from "./user-world-map";
|
|
|
|
describe("UserWorldMap", () => {
|
|
it("renders an accessible linked marker, text fallback, and open-data attribution", () => {
|
|
const markup = renderToStaticMarkup(<UserWorldMap locations={[{
|
|
userId: "11111111-1111-4111-8111-111111111111",
|
|
name: "Dani",
|
|
discordUsername: "dani",
|
|
nickname: "Dani (Steve)",
|
|
latitude: 37.4056,
|
|
longitude: -122.0775,
|
|
location: "Mountain View, California, US",
|
|
classification: "clear",
|
|
networkProvider: "Comcast Cable Communications, LLC",
|
|
networkAsn: "AS7922",
|
|
connectionType: "Residential",
|
|
proxy: false,
|
|
source: "game",
|
|
observedAt: new Date("2026-08-01T12:00:00Z"),
|
|
}, {
|
|
userId: "22222222-2222-4222-8222-222222222222",
|
|
name: "Alex",
|
|
discordUsername: "alex",
|
|
nickname: "Alex (AlexMC)",
|
|
latitude: 37.4057,
|
|
longitude: -122.0774,
|
|
location: "Mountain View, California, US",
|
|
classification: "vpn",
|
|
networkProvider: "Proton AG",
|
|
networkAsn: "AS62371",
|
|
connectionType: "VPN",
|
|
proxy: true,
|
|
source: "web",
|
|
observedAt: new Date("2026-08-01T13:00:00Z"),
|
|
}]} unavailableCount={2} />);
|
|
|
|
expect(markup).toContain('role="group"');
|
|
expect(markup).toContain('class="map-marker-target"');
|
|
expect(markup).toContain("Latest approximate location for registered users");
|
|
expect(markup).toContain('href="/admin/users/11111111-1111-4111-8111-111111111111"');
|
|
expect(markup).toContain("Dani (Steve)");
|
|
expect(markup).toContain("Alex (AlexMC)");
|
|
expect(markup).toContain("2 users near Mountain View, California, US");
|
|
expect(markup).toMatch(/<text[^>]*>2<\/text>/);
|
|
expect(markup).toContain('<details class="mt-5 border-t border-line pt-4" id="map-location-list">');
|
|
expect(markup).not.toContain('id="map-location-list" open');
|
|
expect(markup).toContain("Mountain View, California, US");
|
|
expect(markup).toContain("Comcast Cable Communications, LLC");
|
|
expect(markup).toContain("AS7922");
|
|
expect(markup).toContain("Residential");
|
|
expect(markup).toContain("Proton AG");
|
|
expect(markup).toContain(">Proxy/VPN<");
|
|
expect(markup).toContain(">Yes<");
|
|
expect(markup).toContain(">No<");
|
|
expect(markup).toContain("World overview");
|
|
expect(markup).toContain("Interactive OpenStreetMap");
|
|
expect(markup).toContain("OpenStreetMap, which receives your IP address");
|
|
expect(markup).toContain("map-marker-tooltip");
|
|
expect(markup).toContain('id="map-overview-panel"');
|
|
expect(markup).not.toContain("tile.openstreetmap.org");
|
|
expect(markup).toContain("Natural Earth, public domain");
|
|
expect(markup).toContain("2 without coordinates");
|
|
|
|
const countryPaths = [...markup.matchAll(/<path d="([^"]+)"/g)].map((match) => match[1] ?? "");
|
|
expect(countryPaths.length).toBeGreaterThan(100);
|
|
for (const path of countryPaths) {
|
|
const subpaths = path.split("M").slice(1);
|
|
for (const subpath of subpaths) {
|
|
const xCoordinates = [...subpath.matchAll(/(?:^|L)(-?\d+(?:\.\d+)?),/g)].map((match) => Number(match[1]));
|
|
for (let index = 1; index < xCoordinates.length; index += 1) {
|
|
expect(Math.abs(xCoordinates[index]! - xCoordinates[index - 1]!)).toBeLessThan(500);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|