Question

我正在使用phantomjs与karma运行集成测试。如何模拟离线模式？

似乎我无法更改'navigator.online'，但我无法在离线模式下找到任何有关幻影的内容。

编辑：

应用程序正在向外部位置发送消息。当浏览器脱机时，它应该停止发送消息并将它们存储在队列中。恢复连接后，它应该从队列中发送所有消息。

我只是检查'navigator.online'是否返回false。

也许有更好的方法来实现和测试它。

任何建议都将受到赞赏。

Answer 1

navigator.online是一个只读属性。您的组件应该具有单独的属性，因此您可以在测试中将其设置为false或true（而不是始终直接检查navigator.online）

function Storer() {}
Storer.prototype.isOnline = true;


Storer.prototype.store = function() {
    // Instead of reading navigator.isOnline
    if (this.isOnline) {
        this.sendAjax();
    } else {
        this.storeLocally();
    }
}

// In your tests, you can modify isOnline
var storer = new Storer();
storer.isOnline = false;
storer.setSomething();
storer.store();
// Pseudo code here
expect(store.getLocalCache()).notToBeEmpty();

storer.isOnline = false;
store.setSomethingElse();
store.store();
// Pseudo code here
expect(storer.sendAjax).toHaveBeenCalledWith("some", "arg")

课程：如果可以，请不要在代码中使用全局对象，这会使模拟变得更加困难。相反，允许调用者对您的全局对象进行模拟/存根。

Answer 2

这是我用来在测试中控制navigator.onLine方法的代码。我在使用Karma运行的测试中使用它来启动浏览器并开始测试。摩卡是实际的试车手。以下内容在before（又名beforeAll）钩子中运行。整个事物（包括let onLine）的范围限定为需要它的describe块。

我使用了两种方法，但遗憾的是，没有办法以一种适用于所有地方的方式修改navigator。第一种方法适用于Chrome，Firefox，IE，Edge和Opera。第二种方法适用于Safari。相反，第二种方法在Chrome中不起作用。所以我们不能只使用一种方法。

let onLine = true;

function mockNavigatorOnline() {
  const descriptor = {
    get: function getOnline() {
      return onLine;
    },
  };

  // 1st method.
  Object.defineProperty(navigator.constructor.prototype, "onLine",
                        descriptor);

  // Check whether the code above "took". We check both for `true` 
  // and `false`.
  onLine = false;
  let passes = navigator.onLine === onLine;
  onLine = true;
  passes = passes && (navigator.onLine === onLine);

  // 2nd method.
  if (!passes) {
    navigator = Object.create(navigator, { onLine: descriptor });
  }
}

切换navigator.online

2 个答案: