12299163954

Committed 12 Dec 2024 03:07PM UTC coverage: 96.197% (+2.6%) from 93.632%

Build # 12299163954

Build Type

push

github

Committed by

web-flow

Commit Message

test(devtools): improve coverage (#21)

* test(devtools): improve coverage

* fix(devtools): prevent internal readAtomState calls from being intercepted

* feat(devtools): improve store event logs UI and connectivity

- Redesign event logs interface with better layout and styling
- Add clear button to clean up event logs
- Fix connection issue with devtools tab on page refresh

---------

Co-authored-by: e7h4n <perfectworks@gmail.com>

Run Details

324 of 325 branches covered (99.69%)

Branch coverage included in aggregate %.

160 of 193 new or added lines in 10 files covered. (82.9%)

7 existing lines in 3 files now uncovered.

1320 of 1384 relevant lines covered (95.38%)

76.62 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

85.83

/packages/devtools/src/atoms/inspect-panel.ts

import { $computed, $func, $value, GLOBAL_RIPPLING_INTERCEPED_KEY } from 'rippling';
import { delay, interval } from 'signal-timers';

const internalReload$ = $value(0);
const reload$ = $func(({ set }) => {
  set(internalReload$, (x) => x + 1);
});

const devToolsTabId$ = $computed((get) => {
  get(internalReload$);
  return chrome.devtools.inspectedWindow.tabId;
});

const connectPort$ = $func(({ get }, signal: AbortSignal) => {
  const port = chrome.tabs.connect(get(devToolsTabId$));

  interval(
    () => {
      port.postMessage('heartbeat');
    },
    15000,
    { signal },
  );

  signal.addEventListener('abort', () => {
    port.disconnect();
  });

  return port;
});

const lastPanel$ = $value<chrome.devtools.panels.ExtensionPanel | null>(null);
const lastPanelWindow$ = $value<Window | null>(null);
const createDevtoolsPanel$ = $func(async ({ get, set }, signal: AbortSignal) => {
  const lastPanel = get(lastPanel$);
  if (lastPanel) {
    return lastPanel;
  }

  const panel = await new Promise<chrome.devtools.panels.ExtensionPanel>((resolve) => {
    chrome.devtools.panels.create('Rippling', '', 'panel.html', (createdPanel) => {
      resolve(createdPanel);
    });
  });
  signal.throwIfAborted();

  set(lastPanel$, panel);
  return panel;
});

const ripplingLoaded$ = $computed(async (get) => {
  get(internalReload$);

  for (let i = 0; i < 10; i++) {
    const loaded = await new Promise((resolve) => {
      chrome.devtools.inspectedWindow.eval('window.' + GLOBAL_RIPPLING_INTERCEPED_KEY, {}, function (result) {
        resolve(result);
      });
    });
    if (loaded) {
      return true;
    }
    await delay(100);
  }
  return false;
});

const setupDevtoolsPort$ = $func(({ set }, panelWindow: Window, signal: AbortSignal) => {
  const port = set(connectPort$, signal);
  const onMessage = (message: unknown) => {
    panelWindow.postMessage(message);
  };
  port.onMessage.addListener(onMessage);
  signal.addEventListener('abort', () => {
    port.onMessage.removeListener(onMessage);
    port.disconnect();
  });
});

export const initialize$ = $func(async ({ set, get }, signal: AbortSignal) => {
  set(reload$);

  const loaded = await get(ripplingLoaded$);
  if (!loaded || signal.aborted) {
    return;
  }

  const panel = await set(createDevtoolsPanel$, signal);

  let controller: AbortController | null = null;
  const onPanelShow = (panelWindow: Window) => {
    set(lastPanelWindow$, panelWindow);
    if (signal.aborted) {
      return;
    }
    controller?.abort();
    controller = new AbortController();
    set(setupDevtoolsPort$, panelWindow, AbortSignal.any([signal, controller.signal]));
  };
  const lastPanelWindow = get(lastPanelWindow$);
  if (lastPanelWindow) {
    onPanelShow(lastPanelWindow);
  }

  const onPanelHide = () => {
    controller?.abort();
    controller = null;
  };

  panel.onShown.addListener(onPanelShow);
  panel.onHidden.addListener(onPanelHide);
  signal.addEventListener('abort', () => {
    panel.onShown.removeListener(onPanelShow);
    panel.onHidden.removeListener(onPanelHide);
  });
});

1	import { $computed, $func, $value, GLOBAL_RIPPLING_INTERCEPED_KEY } from 'rippling';	1✔
2	import { delay, interval } from 'signal-timers';
3
4	const internalReload$ = $value(0);	1✔
5	const reload$ = $func(({ set }) => {	1✔
6	set(internalReload$, (x) => x + 1);	3✔
7	});	3✔
8
9	const devToolsTabId$ = $computed((get) => {	1✔
10	get(internalReload$);	3✔
11	return chrome.devtools.inspectedWindow.tabId;	3✔
12	});	3✔
13
14	const connectPort$ = $func(({ get }, signal: AbortSignal) => {	1✔
15	const port = chrome.tabs.connect(get(devToolsTabId$));	3✔
16
17	interval(	3✔
18	() => {	3✔
19	port.postMessage('heartbeat');	×
20	},	×
21	15000,	3✔
22	{ signal },	3✔
23	);	3✔
24
25	signal.addEventListener('abort', () => {	3✔
26	port.disconnect();	3✔
27	});	3✔
28
29	return port;	3✔
30	});	3✔
31
32	const lastPanel$ = $value<chrome.devtools.panels.ExtensionPanel \| null>(null);	1✔
33	const lastPanelWindow$ = $value<Window \| null>(null);	1✔
34	const createDevtoolsPanel$ = $func(async ({ get, set }, signal: AbortSignal) => {	1✔
35	const lastPanel = get(lastPanel$);	3✔
36	if (lastPanel) {	3✔
NEW 37	return lastPanel;	×
NEW 38	}	×
39
40	const panel = await new Promise<chrome.devtools.panels.ExtensionPanel>((resolve) => {	3✔
41	chrome.devtools.panels.create('Rippling', '', 'panel.html', (createdPanel) => {	3✔
42	resolve(createdPanel);	3✔
43	});	3✔
44	});	3✔
45	signal.throwIfAborted();	3✔
46
47	set(lastPanel$, panel);	3✔
48	return panel;	3✔
49	});	3✔
50
51	const ripplingLoaded$ = $computed(async (get) => {	1✔
52	get(internalReload$);	3✔
53
54	for (let i = 0; i < 10; i++) {	3✔
55	const loaded = await new Promise((resolve) => {	3✔
56	chrome.devtools.inspectedWindow.eval('window.' + GLOBAL_RIPPLING_INTERCEPED_KEY, {}, function (result) {	3✔
57	resolve(result);	3✔
58	});	3✔
59	});	3✔
60	if (loaded) {	3✔
61	return true;	3✔
62	}	3✔
63	await delay(100);	×
64	}	×
65	return false;	×
66	});	×
67
68	const setupDevtoolsPort$ = $func(({ set }, panelWindow: Window, signal: AbortSignal) => {	1✔
69	const port = set(connectPort$, signal);	3✔
70	const onMessage = (message: unknown) => {	3✔
71	panelWindow.postMessage(message);	6✔
72	};	6✔
73	port.onMessage.addListener(onMessage);	3✔
74	signal.addEventListener('abort', () => {	3✔
75	port.onMessage.removeListener(onMessage);	3✔
76	port.disconnect();	3✔
77	});	3✔
78	});	3✔
79
80	export const initialize$ = $func(async ({ set, get }, signal: AbortSignal) => {	1✔
81	set(reload$);	3✔
82
83	const loaded = await get(ripplingLoaded$);	3✔
84	if (!loaded \|\| signal.aborted) {	3✔
85	return;	×
86	}	×
87
88	const panel = await set(createDevtoolsPanel$, signal);	3✔
89
90	let controller: AbortController \| null = null;	3✔
91	const onPanelShow = (panelWindow: Window) => {	3✔
92	set(lastPanelWindow$, panelWindow);	3✔
93	if (signal.aborted) {	3✔
94	return;	×
95	}	×
96	controller?.abort();	3✔
97	controller = new AbortController();	3✔
98	set(setupDevtoolsPort$, panelWindow, AbortSignal.any([signal, controller.signal]));	3✔
99	};	3✔
100	const lastPanelWindow = get(lastPanelWindow$);	3✔
101	if (lastPanelWindow) {	3✔
NEW 102	onPanelShow(lastPanelWindow);	×
NEW 103	}	×
104
105	const onPanelHide = () => {	3✔
106	controller?.abort();	×
107	controller = null;	×
108	};	×
109
110	panel.onShown.addListener(onPanelShow);	3✔
111	panel.onHidden.addListener(onPanelHide);	3✔
112	signal.addEventListener('abort', () => {	3✔
113	panel.onShown.removeListener(onPanelShow);	3✔
114	panel.onHidden.removeListener(onPanelHide);	3✔
115	});	3✔
116	});	3✔

e7h4n / rippling / 12299163954

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous