homeio

1/* @vitest-environment jsdom */
2
3import { act, renderHook, waitFor } from "@testing-library/react";
4import { beforeEach, describe, expect, it, vi } from "vitest";
5import { queryKeys } from "@/lib/shared/query-keys";
6import { useNotifications } from "@/modules/system/hooks/useNotifications";
7import { createTestQueryClient, createWrapper } from "@/test/query-client-wrapper";
8
9class MockEventSource {
10  static instances: MockEventSource[] = [];
11
12  private listeners = new Map<string, Set<(event: MessageEvent) => void>>();
13  close = vi.fn();
14
15  constructor(public readonly url: string) {
16    MockEventSource.instances.push(this);
17  }
18
19  addEventListener(type: string, listener: (event: MessageEvent) => void) {
20    const set = this.listeners.get(type) ?? new Set();
21    set.add(listener);
22    this.listeners.set(type, set);
23  }
24
25  removeEventListener(type: string, listener: (event: MessageEvent) => void) {
26    this.listeners.get(type)?.delete(listener);
27  }
28
29  emit(type: string, payload: unknown) {
30    const event = { data: JSON.stringify(payload) } as MessageEvent;
31    this.listeners.get(type)?.forEach((listener) => listener(event));
32  }
33}
34
35function notification(id: string, title: string, createdAt: string) {
36  return { id, title, body: "", kind: "info", read: false, createdAt };
37}
38
39describe("useNotifications", () => {
40  beforeEach(() => {
41    MockEventSource.instances = [];
42    vi.stubGlobal("EventSource", MockEventSource);
43    vi.stubGlobal(
44      "fetch",
45      vi.fn().mockResolvedValue({
46        ok: true,
47        json: async () => ({
48          notifications: [
49            notification("a", "App Redeployed", "2026-09-09T20:25:00.000Z"),
50            notification("b", "App Installed", "2026-09-09T20:23:00.000Z"),
51          ],
52        }),
53      }),
54    );
55  });
56
57  it("keeps the list newest-first when an event arrives out of order", async () => {
58    const client = createTestQueryClient();
59    const { result } = renderHook(() => useNotifications(), {
60      wrapper: createWrapper(client),
61    });
62
63    await waitFor(() => expect(result.current.notifications).toHaveLength(2));
64
65    const source = MockEventSource.instances.at(-1)!;
66
67    act(() => {
68      // Older than what is already at the top: several producers emit these and
69      // delivery order does not have to follow createdAt.
70      source.emit("notification.created", {
71        type: "notification.created",
72        notification: notification("c", "System Snapshot", "2026-09-09T20:18:00.000Z"),
73      });
74    });
75
76    act(() => {
77      source.emit("notification.created", {
78        type: "notification.created",
79        notification: notification("d", "CPU Warning", "2026-09-09T20:31:00.000Z"),
80      });
81    });
82
83    const titles = result.current.notifications.map((n) => n.title);
84    // Assert on the cache: that is what the panel renders, and it updates
85    // outside React's render cycle here.
86    const cached = client.getQueryData(queryKeys.notifications) as { title: string }[];
87    expect(cached.map((n) => n.title)).toEqual([
88      "CPU Warning",
89      "App Redeployed",
90      "App Installed",
91      "System Snapshot",
92    ]);
93  });
94});
95