|
| 1 | +import type { InPageChannelRelayTransport } from './relay' |
| 2 | +import type { InPageChannelProtocol } from './types' |
| 3 | +import { afterEach, describe, expect, it, vi } from 'vitest' |
| 4 | +import { createPageScriptChannel } from './page-script' |
| 5 | +import { connectPanelChannel } from './panel' |
| 6 | +import { IN_PAGE_CHANNEL_TAG, IN_PAGE_CHANNEL_VERSION } from './protocol' |
| 7 | +import { createInPageChannelRelay } from './relay' |
| 8 | + |
| 9 | +interface Protocol extends InPageChannelProtocol { |
| 10 | + pageScript: { highlight: (selector: string) => string } |
| 11 | + panel: Record<string, never> |
| 12 | + sharedStates: { report: { route: string, count: number } } |
| 13 | +} |
| 14 | + |
| 15 | +function fakeWindow(origin = 'https://app.test') { |
| 16 | + const listeners = new Set<(event: MessageEvent) => void>() |
| 17 | + const storage = new Map<string, string>() |
| 18 | + const win = { |
| 19 | + location: { origin }, |
| 20 | + sessionStorage: { |
| 21 | + getItem: (key: string) => storage.get(key) ?? null, |
| 22 | + setItem: (key: string, value: string) => storage.set(key, value), |
| 23 | + }, |
| 24 | + parent: undefined as Window | undefined, |
| 25 | + opener: null, |
| 26 | + sender: undefined as Window | undefined, |
| 27 | + addEventListener: (_type: string, fn: (event: MessageEvent) => void) => listeners.add(fn), |
| 28 | + removeEventListener: (_type: string, fn: (event: MessageEvent) => void) => listeners.delete(fn), |
| 29 | + postMessage(data: unknown, _origin: string, ports: MessagePort[] = []) { |
| 30 | + win.dispatch({ data, origin, source: win.sender!, ports }) |
| 31 | + }, |
| 32 | + dispatch(event: Partial<MessageEvent>) { |
| 33 | + queueMicrotask(() => { |
| 34 | + for (const listener of listeners) |
| 35 | + listener(event as MessageEvent) |
| 36 | + }) |
| 37 | + }, |
| 38 | + listeners, |
| 39 | + } |
| 40 | + // eslint-disable-next-line slop/no-chained-type-assertions -- the fake substitutes the browser Window at the public channel boundary |
| 41 | + const window = win as unknown as Window |
| 42 | + win.parent = window |
| 43 | + win.sender = window |
| 44 | + return { win, window } |
| 45 | +} |
| 46 | + |
| 47 | +function transportPair() { |
| 48 | + const leftListeners = new Set<(data: unknown) => void>() |
| 49 | + const rightListeners = new Set<(data: unknown) => void>() |
| 50 | + function endpoint(local: typeof leftListeners, remote: typeof rightListeners): InPageChannelRelayTransport { |
| 51 | + return { |
| 52 | + postMessage(data) { |
| 53 | + const cloned = structuredClone(data) |
| 54 | + queueMicrotask(() => { |
| 55 | + for (const listener of remote) |
| 56 | + listener(cloned) |
| 57 | + }) |
| 58 | + }, |
| 59 | + onMessage(handler) { |
| 60 | + local.add(handler) |
| 61 | + return () => { |
| 62 | + local.delete(handler) |
| 63 | + } |
| 64 | + }, |
| 65 | + } |
| 66 | + } |
| 67 | + return { |
| 68 | + panel: endpoint(leftListeners, rightListeners), |
| 69 | + page: endpoint(rightListeners, leftListeners), |
| 70 | + listeners: [leftListeners, rightListeners], |
| 71 | + } |
| 72 | +} |
| 73 | + |
| 74 | +const cleanup: (() => void)[] = [] |
| 75 | +afterEach(() => { |
| 76 | + for (const dispose of cleanup.splice(0).reverse()) |
| 77 | + dispose() |
| 78 | +}) |
| 79 | + |
| 80 | +function session(route: string) { |
| 81 | + const viewer = fakeWindow() |
| 82 | + const panelWindow = fakeWindow() |
| 83 | + const page = fakeWindow() |
| 84 | + panelWindow.win.parent = viewer.window |
| 85 | + panelWindow.win.sender = viewer.window |
| 86 | + viewer.win.sender = panelWindow.window |
| 87 | + const transport = transportPair() |
| 88 | + const stopPage = createInPageChannelRelay({ role: 'page', window: page.window, transport: transport.page }) |
| 89 | + const stopPanel = createInPageChannelRelay({ role: 'panel', window: viewer.window, transport: transport.panel }) |
| 90 | + cleanup.push(stopPage, stopPanel) |
| 91 | + const highlight = vi.fn((selector: string) => `${route}:${selector}`) |
| 92 | + const pageScript = createPageScriptChannel<Protocol>({ |
| 93 | + name: 'devframes:relay-test', |
| 94 | + window: page.window, |
| 95 | + heartbeat: false, |
| 96 | + functions: { highlight: { handler: highlight } }, |
| 97 | + }) |
| 98 | + const panel = connectPanelChannel<Protocol>({ |
| 99 | + name: 'devframes:relay-test', |
| 100 | + window: panelWindow.window, |
| 101 | + heartbeat: false, |
| 102 | + helloIntervalMs: 5, |
| 103 | + functions: {}, |
| 104 | + }) |
| 105 | + cleanup.push(() => pageScript.close(), () => panel.close()) |
| 106 | + return { viewer, panelWindow, page, transport, stopPanel, stopPage, pageScript, panel, highlight } |
| 107 | +} |
| 108 | + |
| 109 | +describe('in-page channel relay', () => { |
| 110 | + it('connects existing panels to the inspected document for shared reports and highlighting', async () => { |
| 111 | + const s = session('/') |
| 112 | + const report = await s.pageScript.sharedState.get('report', { initialValue: { route: '/', count: 2 } }) |
| 113 | + await vi.waitFor(() => expect(s.panel.status).toBe('connected')) |
| 114 | + const remoteReport = await s.panel.sharedState.get('report') |
| 115 | + expect(remoteReport.value()).toEqual({ route: '/', count: 2 }) |
| 116 | + await expect(s.panel.call('highlight', '#submit')).resolves.toBe('/:#submit') |
| 117 | + expect(s.highlight).toHaveBeenCalledExactlyOnceWith('#submit') |
| 118 | + report.mutate((draft) => { |
| 119 | + draft.count = 3 |
| 120 | + }) |
| 121 | + await vi.waitFor(() => expect(remoteReport.value().count).toBe(3)) |
| 122 | + }) |
| 123 | + |
| 124 | + it('keeps two inspected sessions on the same origin isolated', async () => { |
| 125 | + const first = session('/first') |
| 126 | + const second = session('/second') |
| 127 | + await vi.waitFor(() => { |
| 128 | + expect(first.panel.status).toBe('connected') |
| 129 | + expect(second.panel.status).toBe('connected') |
| 130 | + }) |
| 131 | + await expect(first.panel.call('highlight', '#one')).resolves.toBe('/first:#one') |
| 132 | + await expect(second.panel.call('highlight', '#two')).resolves.toBe('/second:#two') |
| 133 | + expect(first.highlight).toHaveBeenCalledExactlyOnceWith('#one') |
| 134 | + expect(second.highlight).toHaveBeenCalledExactlyOnceWith('#two') |
| 135 | + }) |
| 136 | + |
| 137 | + it('reconnects an existing panel after its page relay is replaced', async () => { |
| 138 | + const s = session('/') |
| 139 | + await vi.waitFor(() => expect(s.panel.status).toBe('connected')) |
| 140 | + s.stopPage() |
| 141 | + await vi.waitFor(() => expect(s.panel.status).not.toBe('connected')) |
| 142 | + cleanup.push(createInPageChannelRelay({ role: 'page', window: s.page.window, transport: s.transport.page })) |
| 143 | + await vi.waitFor(() => expect(s.panel.status).toBe('connected')) |
| 144 | + await expect(s.panel.call('highlight', '#after-reconnect')).resolves.toBe('/:#after-reconnect') |
| 145 | + expect(s.pageScript.panels).toHaveLength(1) |
| 146 | + }) |
| 147 | + |
| 148 | + it('can dispose after the external transport has disconnected', async () => { |
| 149 | + const s = session('/') |
| 150 | + await vi.waitFor(() => expect(s.panel.status).toBe('connected')) |
| 151 | + s.transport.panel.postMessage = () => { |
| 152 | + throw new Error('transport disconnected') |
| 153 | + } |
| 154 | + expect(() => s.stopPanel()).not.toThrow() |
| 155 | + expect(s.viewer.win.listeners.size).toBe(0) |
| 156 | + await vi.waitFor(() => expect(s.panel.status).not.toBe('connected')) |
| 157 | + }) |
| 158 | + |
| 159 | + it('disconnects real endpoints and removes subscriptions when the relays are disposed', async () => { |
| 160 | + const s = session('/') |
| 161 | + await vi.waitFor(() => expect(s.panel.status).toBe('connected')) |
| 162 | + s.stopPanel() |
| 163 | + s.stopPanel() |
| 164 | + s.stopPage() |
| 165 | + await vi.waitFor(() => { |
| 166 | + expect(s.pageScript.panels).toHaveLength(0) |
| 167 | + expect(s.panel.status).not.toBe('connected') |
| 168 | + }) |
| 169 | + expect(s.viewer.win.listeners.size).toBe(0) |
| 170 | + for (const listeners of s.transport.listeners) |
| 171 | + expect(listeners.size).toBe(0) |
| 172 | + }) |
| 173 | + |
| 174 | + it('ignores unrelated, cross-origin, non-descendant and wrong-version window messages', async () => { |
| 175 | + const viewer = fakeWindow() |
| 176 | + const child = fakeWindow() |
| 177 | + const unrelated = fakeWindow() |
| 178 | + child.win.parent = viewer.window |
| 179 | + const send = vi.fn() |
| 180 | + const stop = createInPageChannelRelay({ |
| 181 | + role: 'panel', |
| 182 | + window: viewer.window, |
| 183 | + transport: { postMessage: send, onMessage: () => () => {} }, |
| 184 | + }) |
| 185 | + cleanup.push(stop) |
| 186 | + const hello = { |
| 187 | + channel: IN_PAGE_CHANNEL_TAG, |
| 188 | + v: IN_PAGE_CHANNEL_VERSION, |
| 189 | + kind: 'hello', |
| 190 | + name: 'devframes:relay-test', |
| 191 | + panelId: 'panel', |
| 192 | + } |
| 193 | + viewer.win.dispatch({ data: { arbitrary: true }, origin: 'https://app.test', source: child.window }) |
| 194 | + viewer.win.dispatch({ data: hello, origin: 'https://other.test', source: child.window }) |
| 195 | + viewer.win.dispatch({ data: hello, origin: 'https://app.test', source: unrelated.window }) |
| 196 | + viewer.win.dispatch({ data: { ...hello, v: 99 }, origin: 'https://app.test', source: child.window }) |
| 197 | + await new Promise(resolve => setTimeout(resolve, 0)) |
| 198 | + expect(send).not.toHaveBeenCalled() |
| 199 | + viewer.win.dispatch({ data: hello, origin: 'https://app.test', source: child.window }) |
| 200 | + await vi.waitFor(() => expect(send).toHaveBeenCalledOnce()) |
| 201 | + }) |
| 202 | +}) |
0 commit comments