snapme

1import { beforeEach, describe, expect, it, vi } from "vitest"
2import type { Mock } from "vitest"
3
4import {
5  EVENT_BATCH_SIZE,
6  SESSION_START_KEY,
7  firstPhotoBucket,
8} from "@/lib/analyticsEvents"
9
10/* Antrean analitik diuji sebagai modul klien: kapan peristiwanya dikirim,
11   lewat jalur apa, dan bucket durasi foto pertama. Antreannya ada di memori
12   modul, jadi tiap kasus memuat modulnya sendiri dari nol. */
13
14async function muatAnalitik() {
15  vi.resetModules()
16  return await import("@/lib/analytics")
17}
18
19function pasangBeacon(hasil = true) {
20  /* Argumennya ikut diuji (alamat dan Blob isinya), jadi mocknya diberi tipe
21     berparameter supaya `mock.calls` bertipe argumen, bukan tuple kosong. */
22  const beacon = vi.fn<(...args: unknown[]) => boolean>(() => hasil)
23  Object.defineProperty(window.navigator, "sendBeacon", {
24    value: beacon,
25    configurable: true,
26    writable: true,
27  })
28  return beacon
29}
30
31function isiBeacon(beacon: Mock, index = 0): Promise<unknown> {
32  const blob = beacon.mock.calls[index]?.[1] as Blob
33  return blob.text().then((text) => JSON.parse(text) as unknown)
34}
35
36beforeEach(() => {
37  window.sessionStorage.clear()
38  vi.unstubAllGlobals()
39  /* jsdom tidak punya sendBeacon; tiap kasus memasangnya sendiri. */
40  Reflect.deleteProperty(window.navigator, "sendBeacon")
41})
42
43describe("antrean analitik", () => {
44  it("menahan peristiwa di memori sampai ambang batch, lalu mengirimnya sekaligus", async () => {
45    const beacon = pasangBeacon()
46    const { track } = await muatAnalitik()
47
48    for (let index = 0; index < EVENT_BATCH_SIZE - 1; index += 1) {
49      track("welcome_loaded")
50    }
51    expect(beacon).not.toHaveBeenCalled()
52
53    track("download_png")
54    expect(beacon).toHaveBeenCalledTimes(1)
55    expect(beacon.mock.calls[0]?.[0]).toBe("/api/events")
56    expect(await isiBeacon(beacon)).toEqual({
57      events: [
58        ...Array.from({ length: EVENT_BATCH_SIZE - 1 }, () => "welcome_loaded"),
59        "download_png",
60      ],
61    })
62  })
63
64  it("mengirim sisa antrean saat halaman disembunyikan atau ditinggalkan", async () => {
65    const beacon = pasangBeacon()
66    const { track } = await muatAnalitik()
67    track("camera_granted")
68
69    Object.defineProperty(document, "visibilityState", {
70      value: "hidden",
71      configurable: true,
72    })
73    document.dispatchEvent(new Event("visibilitychange"))
74    expect(await isiBeacon(beacon)).toEqual({ events: ["camera_granted"] })
75
76    /* Antreannya kosong sesudah kirim pertama, jadi penyembunyian berikutnya
77       tidak mengirim apa-apa. */
78    document.dispatchEvent(new Event("visibilitychange"))
79    expect(beacon).toHaveBeenCalledTimes(1)
80
81    track("relay_created")
82    window.dispatchEvent(new Event("pagehide"))
83    expect(await isiBeacon(beacon, 1)).toEqual({ events: ["relay_created"] })
84  })
85
86  it("jatuh ke fetch bila beacon tidak ada, dan tidak pernah melempar", async () => {
87    const fetchPalsu = vi.fn(() => Promise.resolve(new Response(null, { status: 204 })))
88    vi.stubGlobal("fetch", fetchPalsu)
89    const { track } = await muatAnalitik()
90
91    expect(() => {
92      for (let index = 0; index < EVENT_BATCH_SIZE; index += 1) {
93        track("photo_taken_button")
94      }
95    }).not.toThrow()
96
97    expect(fetchPalsu).toHaveBeenCalledTimes(1)
98    const [alamat, options] = fetchPalsu.mock.calls[0] as unknown as [
99      string,
100      RequestInit,
101    ]
102    expect(alamat).toBe("/api/events")
103    expect(options.method).toBe("POST")
104    expect(JSON.parse(String(options.body))).toEqual({
105      events: Array.from({ length: EVENT_BATCH_SIZE }, () => "photo_taken_button"),
106    })
107  })
108
109  it("mengirim lewat fetch juga saat beacon menolak isinya", async () => {
110    pasangBeacon(false)
111    const fetchPalsu = vi.fn(() => Promise.resolve(new Response(null, { status: 204 })))
112    vi.stubGlobal("fetch", fetchPalsu)
113    const { track } = await muatAnalitik()
114
115    track("print_4r")
116    window.dispatchEvent(new Event("pagehide"))
117    expect(fetchPalsu).toHaveBeenCalledTimes(1)
118  })
119})
120
121describe("bucket cepat dipakai", () => {
122  it("memisahkan batas 15, 30, dan 60 detik", () => {
123    expect(firstPhotoBucket(0)).toBe("first_photo_under_15s")
124    expect(firstPhotoBucket(14_999)).toBe("first_photo_under_15s")
125    expect(firstPhotoBucket(15_000)).toBe("first_photo_15_30s")
126    expect(firstPhotoBucket(29_999)).toBe("first_photo_15_30s")
127    expect(firstPhotoBucket(30_000)).toBe("first_photo_30_60s")
128    expect(firstPhotoBucket(59_999)).toBe("first_photo_30_60s")
129    expect(firstPhotoBucket(60_000)).toBe("first_photo_over_60s")
130  })
131
132  it("membaca penanda waktu sesi dan menjawab null bila belum ditandai", async () => {
133    const { firstPhotoBucketEvent, markSessionStart } = await muatAnalitik()
134    expect(firstPhotoBucketEvent()).toBeNull()
135
136    markSessionStart()
137    expect(firstPhotoBucketEvent()).toBe("first_photo_under_15s")
138
139    window.sessionStorage.setItem(SESSION_START_KEY, String(Date.now() - 45_000))
140    expect(firstPhotoBucketEvent()).toBe("first_photo_30_60s")
141
142    window.sessionStorage.setItem(SESSION_START_KEY, "bukan-angka")
143    expect(firstPhotoBucketEvent()).toBeNull()
144  })
145})
146