Question

我们正在开发脱机第一个应用程序基础知识的教程，并使用带磁带的JSDOM来测试我们的代码。在我们的代码中，我们更新DOM，使文本节点从“在线”变为“离线”，反之亦然，方法是将事件监听器附加到窗口并监听“在线”/“离线”事件，并{{1将文本初始化为在线/离线。像这样：

navigator.onLine

我们希望使用JSDOM来测试当离线事件触发时，我们的文本节点会更新为“离线”。

JSDOM有一个// 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'; });属性but it is read only，我们找不到改变它的方法（总是如此）。似乎它有online/offline events as well，但我看不出如何让它们发射。

在使用节点进行测试时，我们如何模拟上线/下线？

Answer 1

在更改navigator.onLine或生成online和offline事件时，JSDOM 11.0.0（我编写此答案的当前版本）中没有任何规定。

但是，可以接管navigator.onLine来控制它并自己生成事件。这是一个概念证明：

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

使用JSDOM模拟在线/离线

1 个答案: