7269462225

Committed 20 Dec 2023 12:51AM UTC coverage: 91.551% (+0.2%) from 91.342%

Build # 7269462225

Build Type

push

github

Committed by

web-flow

Commit Message

optimize: update modal toast (#26)

* optimize: update modal toast

* add Toast tests

* use document.contains to confirm node exist in DOM

* remove 'window' prefix in global timers

* correct the timer reference

* remove unused code

Run Details

778 of 872 branches covered (0.0%)

Branch coverage included in aggregate %.

50 of 53 new or added lines in 3 files covered. (94.34%)

1 existing line in 1 file now uncovered.

3123 of 3389 relevant lines covered (92.15%)

79.28 hits per line

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

86.13

/src/index.ts

import type { InitConfig } from 'types';
import copy from 'copy-to-clipboard';
import { Modal } from './component/modal';
import { Content } from './component/content';

import type PageSpyPlugin from './plugins';
import ConsolePlugin from './plugins/console';
import ErrorPlugin from './plugins/error';
import NetworkPlugin from './plugins/network';
import SystemPlugin from './plugins/system';
import PagePlugin from './plugins/page';
import { StoragePlugin } from './plugins/storage';

import socketStore from './utils/socket';
import Request from './api';
import { getRandomId, psLog } from './utils';
import pkg from '../package.json';

import type { UElement } from './utils/moveable';
import { moveable } from './utils/moveable';
import './index.less';
import logoUrl from './assets/logo.svg';
import { Config } from './utils/config';
import { ROOM_SESSION_KEY } from './utils/constants';
import { DatabasePlugin } from './plugins/database';
import { Toast } from './component/toast';

const Identifier = '__pageSpy';

export default class PageSpy {
  root: HTMLElement | null = null;

  version = pkg.version;

  plugins: Record<string, PageSpyPlugin> = {};

  request: Request | null = null;

  // System info: <os>-<browser>:<browserVersion>
  name = '';

  // Room address
  address = '';

  // Completed websocket room url
  roomUrl = '';

  socketStore = socketStore;

  static instance: PageSpy | null = null;

  constructor(init: InitConfig = {}) {
    if (PageSpy.instance) {
      psLog.warn('Cannot initialize PageSpy multiple times');
      // eslint-disable-next-line no-constructor-return
      return PageSpy.instance;
    }
    PageSpy.instance = this;

    const { api } = Config.mergeConfig(init);
    this.request = new Request(api);

    this.loadPlugins(
      new ConsolePlugin(),
      new ErrorPlugin(),
      new NetworkPlugin(),
      new SystemPlugin(),
      new PagePlugin(),
      new StoragePlugin(),
      new DatabasePlugin(),
    );
    this.init();
  }

  loadPlugins(...args: PageSpyPlugin[]) {
    args.forEach((plugin) => {
      this.plugins[plugin.name] = plugin;
      if (plugin.onCreated) {
        plugin.onCreated();
      }
    });
  }

  async init() {
    const ok = this.checkConfig();
    if (!ok) return;

    const config = Config.get();
    const roomCache = sessionStorage.getItem(ROOM_SESSION_KEY);
    if (roomCache === null) {
      await this.createNewConnection();
    } else {
      const {
        name,
        address,
        roomUrl,
        usable,
        project: prev,
      } = JSON.parse(roomCache);
      if (!usable || config.project !== prev) {
        await this.createNewConnection();
      } else {
        this.name = name;
        this.address = address;
        this.roomUrl = roomUrl;
        this.useOldConnection();
      }
    }
    psLog.log('Plugins inited');
    if (config.autoRender) {
      this.render();
    }
  }

  async createNewConnection() {
    const configOK = this.checkConfig();
    if (!configOK) return;

    if (!this.request) {
      psLog.error('Cannot get the Request');
      return;
    }
    const { data } = await this.request.createRoom();
    const roomUrl = this.request.getRoomUrl({
      address: data.address,
      name: `client:${getRandomId()}`,
      userId: 'Client',
    });
    this.name = data.name;
    this.address = data.address;
    this.roomUrl = roomUrl;
    this.refreshRoomInfo();
    socketStore.init(roomUrl);
  }

  useOldConnection() {
    this.refreshRoomInfo();
    socketStore.init(this.roomUrl);
  }

  // In FeiShu browser (Android, Chrome/75), due to the premature execution of synchronous render,
  // when execute `document.documentElement.append(root)` in the `render` function,
  // the browser will directly create a `body` element, and the final result is that
  // there will be multiple `body` elements on the page,
  // which leads to strange phenomena such as css style mismatches
  render() {
    const root = document.querySelector(`#${Identifier}`);
    if (root) {
      psLog.warn('Cannot render the widget because it has been in the DOM');
      return;
    }
    if (document !== undefined) {
      if (document.readyState === 'loading') {
        window.addEventListener('DOMContentLoaded', this.render.bind(this));
      } else {
        this.startRender();
      }
    } else {
      // if document does not exist, wait for it
      let timer: ReturnType<typeof setTimeout>;
      const pollingDocument = () => {
        if (!!document && document.readyState === 'complete') {
          if (timer) {
            clearTimeout(timer);
          }
          this.startRender();
        } else {
          timer = setTimeout(pollingDocument, 1);
        }
      };
      timer = setTimeout(pollingDocument, 1);
    }
  }

  refreshRoomInfo() {
    /* c8 ignore start */
    this.saveSession();
    const timerId = setInterval(() => {
      const latestRoomInfo = sessionStorage.getItem(ROOM_SESSION_KEY);
      if (latestRoomInfo !== null) {
        const { usable } = JSON.parse(latestRoomInfo);
        if (usable === false) {
          clearInterval(timerId);
          return;
        }
      }

      this.saveSession();
    }, 15 * 1000);
    /* c8 ignore stop */
  }

  saveSession() {
    const ok = this.checkConfig();
    if (!ok) return;

    const { name, address, roomUrl } = this;
    const roomInfo = JSON.stringify({
      name,
      address,
      roomUrl,
      usable: true,
      project: Config.get().project,
    });
    sessionStorage.setItem(ROOM_SESSION_KEY, roomInfo);
  }

  startRender() {
    const { project, clientOrigin } = Config.get();
    const ok = this.checkConfig();
    if (!ok) return;

    const root = document.createElement('div');
    root.id = Identifier;
    this.root = root;

    const logo = document.createElement('div');
    logo.className = 'page-spy-logo';
    const img = document.createElement('img');
    img.alt = 'PageSpy Logo';
    img.src = logoUrl;
    img.width = 50;
    img.height = 50;
    logo.append(img);
    root.insertAdjacentElement('afterbegin', logo);
    window.addEventListener('sdk-inactive', () => {
      logo.classList.add('inactive');
    });

    const modal = new Modal();
    const [os, browser] = this.name.split(' ');
    const content = new Content({
      content: `
      <p><b>Device ID:</b> <span style="font-family: 'Monaco'">${this.address.slice(
        0,
        4,
      )}</span></p>
      <p><b>System:</b> ${os}</p>
      <p><b>Browser:</b> ${browser}</p>
      <p><b>Project:</b> ${project}</p>
      `,
      onOk: () => {
        const text = `${clientOrigin}/devtools?version=${this.name}&address=${this.address}`;
        const copyRes = copy(text);
        let message = '';
        const langs = navigator.languages;
        const isCN = ['zh-CN', 'zh-HK', 'zh-TW', 'zh'].some((l) => {
          return langs.includes(l);
        });
        if (isCN) {
          message = copyRes ? '拷贝成功!' : '拷贝失败!';
        } else {
          message = copyRes ? 'Copy successfully!' : 'Copy failed!';
        }
        Toast.message(message);
        modal.close();
      },
    });
    modal.append(content.el!);
    root.append(modal.el);

    function showModal(e: any) {
      const { isMoveEvent } = logo as unknown as UElement;
      /* c8 ignore next 3 */
      if (isMoveEvent) {
        return;
      }
      e.stopPropagation();
      modal.show();
    }
    logo.addEventListener('click', showModal, false);
    logo.addEventListener('touchend', showModal, false);
    document.documentElement.append(root);
    moveable(logo);
    this.handleDeviceDPR();

    psLog.log('Render success');
  }

  // eslint-disable-next-line class-methods-use-this
  checkConfig() {
    const config = Config.get();
    if (!config) {
      psLog.error('Cannot get the config info');
      return false;
    }
    return true;
  }

  handleDeviceDPR() {
    /* c8 ignore start */
    const dpr = window.devicePixelRatio || 1;
    const viewportEl = document.querySelector('[name="viewport"]');

    if (viewportEl) {
      const viewportContent = viewportEl.getAttribute('content') || '';
      const initialScale = viewportContent.match(/initial-scale=\d+(\.\d+)?/);
      const scale = initialScale
        ? parseFloat(initialScale[0].split('=')[1])
        : 1;
      if (scale < 1) {
        this.root!.style.fontSize = `${14 * dpr}px`;
      }
    }
    /* c8 ignore stop */
  }
}

1	import type { InitConfig } from 'types';	2✔
2	import copy from 'copy-to-clipboard';	2✔
3	import { Modal } from './component/modal';	2✔
4	import { Content } from './component/content';	2✔
5		2✔
6	import type PageSpyPlugin from './plugins';	2✔
7	import ConsolePlugin from './plugins/console';	2✔
8	import ErrorPlugin from './plugins/error';	2✔
9	import NetworkPlugin from './plugins/network';	2✔
10	import SystemPlugin from './plugins/system';	2✔
11	import PagePlugin from './plugins/page';	2✔
12	import { StoragePlugin } from './plugins/storage';	2✔
13		2✔
14	import socketStore from './utils/socket';	2✔
15	import Request from './api';	2✔
16	import { getRandomId, psLog } from './utils';	2✔
17	import pkg from '../package.json';	2✔
18		2✔
19	import type { UElement } from './utils/moveable';	2✔
20	import { moveable } from './utils/moveable';	2✔
21	import './index.less';	2✔
22	import logoUrl from './assets/logo.svg';	2✔
23	import { Config } from './utils/config';	2✔
24	import { ROOM_SESSION_KEY } from './utils/constants';	2✔
25	import { DatabasePlugin } from './plugins/database';	2✔
26	import { Toast } from './component/toast';	2✔
27		2✔
28	const Identifier = '__pageSpy';	2✔
29		2✔
30	export default class PageSpy {	2✔
31	root: HTMLElement \| null = null;	2✔
32		22✔
33	version = pkg.version;	22✔
34		22✔
35	plugins: Record<string, PageSpyPlugin> = {};	22✔
36		22✔
37	request: Request \| null = null;	22✔
38		22✔
39	// System info: <os>-<browser>:<browserVersion>	22✔
40	name = '';	22✔
41		22✔
42	// Room address	22✔
43	address = '';	22✔
44		22✔
45	// Completed websocket room url	22✔
46	roomUrl = '';	22✔
47		22✔
48	socketStore = socketStore;	2✔
49		2✔
50	static instance: PageSpy \| null = null;	2✔
51		2✔
52	constructor(init: InitConfig = {}) {	2✔
53	if (PageSpy.instance) {	22!
54	psLog.warn('Cannot initialize PageSpy multiple times');	×
55	// eslint-disable-next-line no-constructor-return	×
56	return PageSpy.instance;	×
57	}	×
58	PageSpy.instance = this;	22✔
59		22✔
60	const { api } = Config.mergeConfig(init);	22✔
61	this.request = new Request(api);	22✔
62		22✔
63	this.loadPlugins(	22✔
64	new ConsolePlugin(),	22✔
65	new ErrorPlugin(),	22✔
66	new NetworkPlugin(),	22✔
67	new SystemPlugin(),	22✔
68	new PagePlugin(),	22✔
69	new StoragePlugin(),	22✔
70	new DatabasePlugin(),	22✔
71	);	22✔
72	this.init();	22✔
73	}	22✔
74		2✔
75	loadPlugins(...args: PageSpyPlugin[]) {	2✔
76	args.forEach((plugin) => {	26✔
77	this.plugins[plugin.name] = plugin;	168✔
78	if (plugin.onCreated) {	168✔
79	plugin.onCreated();	168✔
80	}	168✔
81	});	26✔
82	}	26✔
83		2✔
84	async init() {	2✔
85	const ok = this.checkConfig();	24✔
86	if (!ok) return;	24!
87		24✔
88	const config = Config.get();	24✔
89	const roomCache = sessionStorage.getItem(ROOM_SESSION_KEY);	24✔
90	if (roomCache === null) {	24✔
91	await this.createNewConnection();	20✔
92	} else {	24✔
93	const {	4✔
94	name,	4✔
95	address,	4✔
96	roomUrl,	4✔
97	usable,	4✔
98	project: prev,	4✔
99	} = JSON.parse(roomCache);	4✔
100	if (!usable \|\| config.project !== prev) {	4✔
101	await this.createNewConnection();	2✔
102	} else {	2✔
103	this.name = name;	2✔
104	this.address = address;	2✔
105	this.roomUrl = roomUrl;	2✔
106	this.useOldConnection();	2✔
107	}	2✔
108	}	4✔
109	psLog.log('Plugins inited');	4✔
110	if (config.autoRender) {	4✔
111	this.render();	4✔
112	}	4✔
113	}	24✔
114		2✔
115	async createNewConnection() {	2✔
116	const configOK = this.checkConfig();	22✔
117	if (!configOK) return;	22!
118		22✔
119	if (!this.request) {	22!
120	psLog.error('Cannot get the Request');	×
121	return;	×
122	}	×
123	const { data } = await this.request.createRoom();	22✔
124	const roomUrl = this.request.getRoomUrl({	22✔
125	address: data.address,	22✔
126	name: `client:${getRandomId()}`,	22✔
127	userId: 'Client',	22✔
128	});	22✔
129	this.name = data.name;	22✔
130	this.address = data.address;	22✔
131	this.roomUrl = roomUrl;	22✔
132	this.refreshRoomInfo();	22✔
133	socketStore.init(roomUrl);	22✔
134	}	22✔
135		2✔
136	useOldConnection() {	2✔
137	this.refreshRoomInfo();	2✔
138	socketStore.init(this.roomUrl);	2✔
139	}	2✔
140		2✔
141	// In FeiShu browser (Android, Chrome/75), due to the premature execution of synchronous render,	2✔
142	// when execute `document.documentElement.append(root)` in the `render` function,	2✔
143	// the browser will directly create a `body` element, and the final result is that	2✔
144	// there will be multiple `body` elements on the page,	2✔
145	// which leads to strange phenomena such as css style mismatches	2✔
146	render() {	2✔
147	const root = document.querySelector(`#${Identifier}`);	12✔
148	if (root) {	12!
149	psLog.warn('Cannot render the widget because it has been in the DOM');	×
150	return;	×
151	}	×
152	if (document !== undefined) {	12✔
153	if (document.readyState === 'loading') {	12!
154	window.addEventListener('DOMContentLoaded', this.render.bind(this));	×
155	} else {	12✔
156	this.startRender();	12✔
157	}	12✔
158	} else {	12!
159	// if document does not exist, wait for it	×
NEW 160	let timer: ReturnType<typeof setTimeout>;	×
161	const pollingDocument = () => {	×
162	if (!!document && document.readyState === 'complete') {	×
163	if (timer) {	×
164	clearTimeout(timer);	×
165	}	×
166	this.startRender();	×
167	} else {	×
NEW 168	timer = setTimeout(pollingDocument, 1);	×
169	}	×
170	};	×
NEW 171	timer = setTimeout(pollingDocument, 1);	×
172	}	×
173	}	12✔
174		2✔
175	refreshRoomInfo() {	2✔
176	/* c8 ignore start */	2✔
177	this.saveSession();	2✔
178	const timerId = setInterval(() => {	2✔
179	const latestRoomInfo = sessionStorage.getItem(ROOM_SESSION_KEY);	2✔
180	if (latestRoomInfo !== null) {	2✔
181	const { usable } = JSON.parse(latestRoomInfo);	2✔
182	if (usable === false) {	2✔
183	clearInterval(timerId);	2✔
184	return;	2✔
185	}	2✔
186	}	2✔
187		2✔
188	this.saveSession();	2✔
189	}, 15 * 1000);	2✔
190	/* c8 ignore stop */	2✔
191	}	4✔
192		2✔
193	saveSession() {	2✔
194	const ok = this.checkConfig();	4✔
195	if (!ok) return;	4!
196		4✔
197	const { name, address, roomUrl } = this;	4✔
198	const roomInfo = JSON.stringify({	4✔
199	name,	4✔
200	address,	4✔
201	roomUrl,	4✔
202	usable: true,	4✔
203	project: Config.get().project,	4✔
204	});	4✔
205	sessionStorage.setItem(ROOM_SESSION_KEY, roomInfo);	4✔
206	}	4✔
207		2✔
208	startRender() {	2✔
209	const { project, clientOrigin } = Config.get();	12✔
210	const ok = this.checkConfig();	12✔
211	if (!ok) return;	12!
212		12✔
213	const root = document.createElement('div');	12✔
214	root.id = Identifier;	12✔
215	this.root = root;	12✔
216		12✔
217	const logo = document.createElement('div');	12✔
218	logo.className = 'page-spy-logo';	12✔
219	const img = document.createElement('img');	12✔
220	img.alt = 'PageSpy Logo';	12✔
221	img.src = logoUrl;	12✔
222	img.width = 50;	12✔
223	img.height = 50;	12✔
224	logo.append(img);	12✔
225	root.insertAdjacentElement('afterbegin', logo);	12✔
226	window.addEventListener('sdk-inactive', () => {	12✔
227	logo.classList.add('inactive');	×
228	});	12✔
229		12✔
230	const modal = new Modal();	12✔
231	const [os, browser] = this.name.split(' ');	12✔
232	const content = new Content({	12✔
233	content: `	12✔
234	<p><b>Device ID:</b> <span style="font-family: 'Monaco'">${this.address.slice(	12✔
235	0,	12✔
236	4,	12✔
237	)}</span></p>	12✔
238	<p><b>System:</b> ${os}</p>	12✔
239	<p><b>Browser:</b> ${browser}</p>	12✔
240	<p><b>Project:</b> ${project}</p>	12✔
241	`,	12✔
242	onOk: () => {	12✔
243	const text = `${clientOrigin}/devtools?version=${this.name}&address=${this.address}`;	2✔
244	const copyRes = copy(text);	2✔
245	let message = '';	2✔
246	const langs = navigator.languages;	2✔
247	const isCN = ['zh-CN', 'zh-HK', 'zh-TW', 'zh'].some((l) => {	2✔
248	return langs.includes(l);	8✔
249	});	2✔
250	if (isCN) {	2!
UNCOV 251	message = copyRes ? '拷贝成功!' : '拷贝失败!';	×
252	} else {	2✔
253	message = copyRes ? 'Copy successfully!' : 'Copy failed!';	2!
254	}	2✔
255	Toast.message(message);	2✔
256	modal.close();	2✔
257	},	12✔
258	});	12✔
259	modal.append(content.el!);	12✔
260	root.append(modal.el);	12✔
261		12✔
262	function showModal(e: any) {	12✔
263	const { isMoveEvent } = logo as unknown as UElement;	4✔
264	/* c8 ignore next 3 */	2✔
265	if (isMoveEvent) {	2✔
266	return;	2✔
267	}	2✔
268	e.stopPropagation();	4✔
269	modal.show();	4✔
270	}	4✔
271	logo.addEventListener('click', showModal, false);	12✔
272	logo.addEventListener('touchend', showModal, false);	12✔
273	document.documentElement.append(root);	12✔
274	moveable(logo);	12✔
275	this.handleDeviceDPR();	12✔
276		12✔
277	psLog.log('Render success');	12✔
278	}	12✔
279		2✔
280	// eslint-disable-next-line class-methods-use-this	2✔
281	checkConfig() {	2✔
282	const config = Config.get();	62✔
283	if (!config) {	62!
284	psLog.error('Cannot get the config info');	×
285	return false;	×
286	}	×
287	return true;	62✔
288	}	62✔
289		2✔
290	handleDeviceDPR() {	2✔
291	/* c8 ignore start */	2✔
292	const dpr = window.devicePixelRatio \|\| 1;	2✔
293	const viewportEl = document.querySelector('[name="viewport"]');	2✔
294		2✔
295	if (viewportEl) {	2✔
296	const viewportContent = viewportEl.getAttribute('content') \|\| '';	2✔
297	const initialScale = viewportContent.match(/initial-scale=\d+(\.\d+)?/);	2✔
298	const scale = initialScale	2✔
299	? parseFloat(initialScale[0].split('=')[1])	2✔
300	: 1;	2✔
301	if (scale < 1) {	2✔
302	this.root!.style.fontSize = `${14 * dpr}px`;	2✔
303	}	2✔
304	}	2✔
305	/* c8 ignore stop */	2✔
306	}	12✔
307	}	2✔

HuolalaTech / page-spy / 7269462225

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