import { describe, it, expect, vi, afterEach } from "vitest"; import { render, screen, fireEvent } from "@testing-library/react"; import { MemoryRouter } from "react-router-dom"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { PacketList } from "../../../src/features/packets/PacketList"; import type { WsManager } from "../../../src/api/ws-manager"; import type { PacketSummary, PacketDetail } from "../../../src/types/api"; import type { WsPacketObservation } from "../../../src/types/ws"; const basePackets = () => ({ allPackets: [] as PacketSummary[], observerOptions: [], newPacketCount: 0, acknowledgeNewPackets: () => {}, fetchNextPage: () => {}, hasNextPage: false, isFetchingNextPage: false, isLoading: false, isError: false, observersByHash: new Map(), handlePacketObservation: () => {}, handleLagged: () => {}, laggedCount: 0, dismissLagged: () => {}, }); const usePackets = vi.fn(basePackets); vi.mock("../../../src/features/packets/usePackets", () => ({ usePackets: (...args: unknown[]) => usePackets(...(args as [])), })); const usePacketDetail = vi.fn(() => ({ data: undefined as PacketDetail | undefined })); vi.mock("../../../src/features/packets/usePacketDetail", () => ({ usePacketDetail: (hash: string | null) => usePacketDetail(hash as never), })); vi.mock("../../../src/hooks/useScopes", () => ({ useScopes: () => [] })); vi.mock("../../../src/hooks/useRegion", () => ({ useRegion: () => ({ iatas: ["YOW"], regionKey: "YOW" }), })); // capture the packet handler so tests can push a live observation through it let packetHandler: ((data: WsPacketObservation["data"]) => void) | null = null; vi.mock("../../../src/hooks/useWsHandlers", () => ({ useWsPacketHandler: (_manager: unknown, handler: (data: WsPacketObservation["data"]) => void) => { packetHandler = handler; }, useWsLaggedHandler: () => {}, })); // the virtual list needs ResizeObserver in jsdom; stub it down to the wiring under test vi.mock("../../../src/features/packets/PacketVirtualList", () => ({ PacketVirtualList: ({ packets, expandedHash, onToggleExpand, onOpenAnalyzer, onViewPath, }: { packets: PacketSummary[]; expandedHash: string | null; onToggleExpand: (hash: string) => void; onOpenAnalyzer: () => void; onViewPath: () => void; }) => (
{String(expandedHash)}
{packets.map((p) => ( ))}
), })); const packet = (hash: string): PacketSummary => ({ packetHash: hash, payloadType: 1, payloadTypeName: "ADVERT", routeType: 1, routeTypeName: "FLOOD", firstHeardAt: 1700000000, lastHeardAt: 1700000000, observationCount: 1, }); const observation = (hash: string): WsPacketObservation["data"] => ({ packetHash: hash, packet: { payloadType: 1, payloadTypeName: "ADVERT", routeType: 1, routeTypeName: "FLOOD", isFirstObservation: false, observationCount: 2, }, observation: { observerId: "o1", observerName: "Observer 1", iata: "YOW", heardAt: 1700000001, rssi: -90, snr: 5, sourceBroker: "b1", }, }); function renderList(url = "/", props: Partial[0]> = {}) { const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } }); const invalidate = vi.spyOn(queryClient, "invalidateQueries"); const onAnalyze = props.onAnalyze ?? vi.fn(); const onViewPath = props.onViewPath ?? vi.fn(); const onSelectObservation = props.onSelectObservation ?? vi.fn(); render( , ); return { onAnalyze, onViewPath, onSelectObservation, invalidate }; } describe("PacketList server filter wiring", () => { it("passes a single selected type to usePackets as the server filter", () => { usePackets.mockClear(); renderList("/?types=4"); expect(usePackets).toHaveBeenLastCalledWith(false, { payloadTypes: [4] }); }); it("passes a multi-select filter server-side so history stays filtered", () => { usePackets.mockClear(); renderList("/?types=2,4"); expect(usePackets).toHaveBeenLastCalledWith(false, { payloadTypes: [2, 4] }); }); }); describe("PacketList loading feedback", () => { afterEach(() => { usePackets.mockImplementation(basePackets); }); it("shows skeletons instead of the list plus a loading pill during an empty initial load", () => { usePackets.mockImplementation(() => ({ ...basePackets(), isLoading: true })); renderList(); expect(screen.queryByTestId("expanded")).toBeNull(); expect(screen.getByRole("status").textContent).toContain("Loading packets…"); }); it("keeps the list and shows the pill while paging in more history", () => { const pkt = { packetHash: "h1", payloadType: 4, routeType: 1, firstHeardAt: 1, lastHeardAt: 1, observationCount: 1 } as PacketSummary; usePackets.mockImplementation(() => ({ ...basePackets(), allPackets: [pkt], isFetchingNextPage: true })); renderList(); expect(screen.getByTestId("expanded")).toBeTruthy(); expect(screen.getByRole("status").textContent).toContain("Loading packets… (1)"); }); it("surfaces a failed history fetch through the pill", () => { usePackets.mockImplementation(() => ({ ...basePackets(), isError: true })); renderList(); expect(screen.getByRole("status").textContent).toContain("Failed to load packets"); }); it("renders neither pill nor skeletons when idle", () => { renderList(); expect(screen.getByTestId("expanded")).toBeTruthy(); expect(screen.queryByRole("status")).toBeNull(); }); }); describe("PacketList expanded row", () => { afterEach(() => { usePackets.mockImplementation(basePackets); usePacketDetail.mockReturnValue({ data: undefined }); }); it("expands a row from ?hash without opening the analyzer", () => { usePackets.mockImplementation(() => ({ ...basePackets(), allPackets: [packet("AA11")] })); const { onAnalyze } = renderList("/?tab=Packets&hash=AA11"); expect(screen.getByRole("button", { name: /AA11/ })).toHaveAttribute("aria-expanded", "true"); expect(onAnalyze).not.toHaveBeenCalled(); }); it("clicking a row sets ?hash and does not open the analyzer", () => { usePackets.mockImplementation(() => ({ ...basePackets(), allPackets: [packet("AA11")] })); const { onAnalyze } = renderList("/?tab=Packets"); fireEvent.click(screen.getByRole("button", { name: /AA11/ })); expect(onAnalyze).not.toHaveBeenCalled(); }); it("routes the expansion's Open analyzer through onAnalyze with the expanded hash", () => { usePackets.mockImplementation(() => ({ ...basePackets(), allPackets: [packet("AA11")] })); const { onAnalyze } = renderList("/?tab=Packets&hash=AA11"); fireEvent.click(screen.getByRole("button", { name: "Open analyzer" })); expect(onAnalyze).toHaveBeenCalledWith("AA11"); }); it("hands the loaded detail to onViewPath", () => { const detail = { packetHash: "AA11", observations: [] } as unknown as PacketDetail; usePackets.mockImplementation(() => ({ ...basePackets(), allPackets: [packet("AA11")] })); usePacketDetail.mockReturnValue({ data: detail }); const { onViewPath } = renderList("/?tab=Packets&hash=AA11"); fireEvent.click(screen.getByRole("button", { name: "View path on map" })); expect(onViewPath).toHaveBeenCalledWith(detail); }); it("does not call onViewPath before the detail has loaded", () => { usePackets.mockImplementation(() => ({ ...basePackets(), allPackets: [packet("AA11")] })); const { onViewPath } = renderList("/?tab=Packets&hash=AA11"); fireEvent.click(screen.getByRole("button", { name: "View path on map" })); expect(onViewPath).not.toHaveBeenCalled(); }); }); describe("PacketList live observation invalidation", () => { afterEach(() => { usePackets.mockImplementation(basePackets); packetHandler = null; }); it("refetches the expanded row's detail when an observation arrives for it", () => { const handlePacketObservation = vi.fn(); usePackets.mockImplementation(() => ({ ...basePackets(), allPackets: [packet("AA11")], handlePacketObservation })); const { invalidate } = renderList("/?tab=Packets&hash=AA11"); invalidate.mockClear(); packetHandler!(observation("AA11")); expect(handlePacketObservation).toHaveBeenCalledTimes(1); expect(invalidate).toHaveBeenCalledWith({ queryKey: ["packet-detail", "AA11"] }); }); it("leaves the detail query alone for observations on other packets", () => { const handlePacketObservation = vi.fn(); usePackets.mockImplementation(() => ({ ...basePackets(), allPackets: [packet("AA11")], handlePacketObservation })); const { invalidate } = renderList("/?tab=Packets&hash=AA11"); invalidate.mockClear(); packetHandler!(observation("BB22")); expect(handlePacketObservation).toHaveBeenCalledTimes(1); expect(invalidate).not.toHaveBeenCalled(); }); it("does not invalidate when no row is expanded", () => { const handlePacketObservation = vi.fn(); usePackets.mockImplementation(() => ({ ...basePackets(), allPackets: [packet("AA11")], handlePacketObservation })); const { invalidate } = renderList("/?tab=Packets"); invalidate.mockClear(); packetHandler!(observation("AA11")); expect(invalidate).not.toHaveBeenCalled(); }); });