javascript - 如何在 Jasmine 中假装离线？

Question

我有一个 javascript 函数，作为一种保障，它在离线时与在线时的行为应该有所不同。我想要一个 Jasmine 单元测试，它可以在离线和在线模式下测试功能 - 例如，

// offline
describe('When there is no connection to the internet', function() {
  beforeEach(function(){
    spyOn(navigator, 'onLine').and.returnValue(false);
  });

  it('offline behavior happens', function() {
    myFunction();

    expect(something).not.toHaveBeenCalled();
  });
});

// online
describe('When there is a connection to the internet', function() {
  beforeEach(function(){
    spyOn(navigator, 'onLine').and.returnValue(true);
  });

  it('online behavior happens', function() {
    myFunction();

    expect(something).toHaveBeenCalled();
  });
});

但是，我无法伪造 navigator.onLine 的值。在我的之前，我也试过:

navigator = {
  'onLine': false
}

这也没有用。为彻底起见，我在 window.navigator.onLine 上尝试了相同的技术，但也没有用。

有谁知道如何为 Jasmine 测试模拟离线？

Answer 1

您没有机会覆盖某些内置属性。虽然有 Object.defineProperty()您可以重新配置内置属性。

Jasmine 2.6 及更新版本

从 Jasmine 2.6 ( release notes ) 开始有 spyOnProperty() .

这就是你监视 navigator.onLine 的方式:

beforeEach(function(){
    spyOnProperty(Navigator.prototype, 'onLine').and.returnValue(false);
});

请注意，原型(prototype)对象 Navigator 被引用，而不是实例 window.navigator。

Jasmine 2.6 之前

为浏览器对象构建外观

使用 Jasmine 2.6 之前的版本，您不能直接监视属性(或属性)。

我建议使用 getter 方法为此类浏览器内置函数创建外观。然后您可以在测试中模拟这些方法以返回您喜欢的内容。

const Browser = (function() {
    return {
        isOnline: function() {
            return navigator.onLine;
        }
    };
})();

在您的代码中:

if (Browser.isOnline()) {
    // ...
}

在你的测试中:

beforeEach(function(){
    spyOn(Browser, 'isOnline').and.returnValue(false);
});

自己做 spyOnProperty() 做的事情

如果您由于某种原因无法从 2.6 之前的版本升级，您甚至可以使用 Object.defineProperty() 手动监视和 Object.getOwnPropertyDescriptor() .

var onlineState,
    origOnLineProp;

beforeEach(function() {
    // Remember original config
    origOnLineProp = Object.getOwnPropertyDescriptor(Navigator.prototype, "onLine");

    onlineState = true;

    // New behavior
    Object.defineProperty(Navigator.prototype, "onLine", {
        enumerable: origOnLineProp.enumerable,
        configurable: origOnLineProp.configurable,
        get: function() { return  onlineState }
    });
});

it("...", function() {
    onlineState = false;
    expect("code").toBe("correctly functioning in offline mode");
});

afterEach(function() {
    // Restore original behavior
    Object.defineProperty(Navigator.prototype, "onLine", {
        enumerable: origOnLineProp.enumerable,
        configurable: origOnLineProp.configurable,
        get: origOnLineProp.get
    });
});

如果你绝望的话，你甚至可以实现你自己的 spyOnProperty() backport(虽然这超出了这个答案)。