用JSDOM模拟在线/离线

我们正在编写一个教程，介绍离线的第一个应用程序的基础知识，并使用带有磁带的JSDOM来testing我们的代码。 在我们的代码中，我们更新了DOM，以便通过将事件监听器附加到窗口并监听“在线”/“离线”事件，以及navigator.onLine ，文本节点从说“在线”变为“离线”，反之亦然将文本初始化为在线/离线。 像这样：

 // get the online status element from the DOM var onlineStatusDom = document.querySelector('.online-status'); // navigator.onLine will be true when online and false when offline. We update the text in the online status element in the dom to reflect the online status from navigator.onLine if (navigator.onLine) { onlineStatusDom.innerText = 'online'; } else { onlineStatusDom.innerText = 'offline'; } // we use the 'online' and 'offline' events to update the online/offline notification to the user // in IE8 the offline/online events exist on document.body rather than window, so make sure to reflect that in your code! window.addEventListener('offline', function(e) { onlineStatusDom.innerText = 'offline'; }); window.addEventListener('online', function(e) { onlineStatusDom.innerText = 'online'; }); 

我们希望使用JSDOM来testing脱机时脱机事件触发，我们的文本节点更新说“脱机”。

JSDOM有一个window.navigator.onLine属性， 但它是只读的 ，我们无法find改变它的方法（总是为true）。 它似乎也有在线/离线的事件 ，但我不明白如何让他们开火。

在节点testing时，我们如何模拟在线/离线？

Answer 1

在JSDOM 11.0.0（这是我写这个答案的当前版本）中没有提供用于更改navigator.onLine或用于生成online和offline事件的规定。

但是，可以接pipenavigator.onLine来控制它并navigator.onLine生成事件。 这是一个概念的certificate：

 const { JSDOM } = require("jsdom"); const { window } = new JSDOM(); class OnlineController { constructor(win) { this.win = win; this.onLine = win.navigator.onLine; // Replace the default onLine implementation with our own. Object.defineProperty(win.navigator.constructor.prototype, "onLine", { get: () => { return this.onLine; }, }); } goOnline() { const was = this.onLine; this.onLine = true; // Fire only on transitions. if (!was) { this.fire("online"); } } goOffline() { const was = this.onLine; this.onLine = false; // Fire only on transitions. if (was) { this.fire("offline"); } } fire(event) { this.win.dispatchEvent(new this.win.Event(event)); } } window.addEventListener("offline", function () { console.log("gone offline"); }); window.addEventListener("online", function () { console.log("gone online"); }); const cont = new OnlineController(window); console.log("online?", window.navigator.onLine); cont.goOffline(); console.log("online?", window.navigator.onLine); cont.goOnline(); console.log("online?", window.navigator.onLine); 

如果你运行这个文件，你应该得到：

 online? true gone offline online? false gone online online? true