javascript - 我如何使用 jasmine 测试这段代码？

Question

我即将构建一个小部件，我想使用 Jasmine 来测试代码，而我想测试的事情之一是 ChangeHtml 已被调用。这是我计划如何构建小部件的粗略示例。

var widget = function(userOptions){
  var options = userOptions

  var init = function(){
    changeHtml();
  };

  var changeHtml = function(){
    document.getElementById(options.widgetId).innerHTML = 'New and exiting things!';
  };

  init();
};

var myWidget = new widget({widgetId: 'widget-div'});

现在，因为 changeHtml() 是 widget 的私有(private)(正确的短语？)函数，我无法监视它以查看它是否已被调用或不是。

目前我唯一能想到的就是将所有内容都设为 widget 的公共(public)方法，但这似乎不是特别好，因为用户不必/想要调用changeHtml() 他们自己。

有什么办法可以解决这个问题吗？或者，我是否以错误的方式思考这个问题，检查 divs innerHTML 是否实际上已更改而不是正在调用的函数会更好吗？

Answer 1

要么 1) 测试最终结果，要么 2) 在函数/对象中公开的 spyOn 函数。

要测试场景中的最终结果，您需要在更改后检查 HTML 值，或者检查它是否被调用以便可以设置该值，如下所示:

describe("widget", function () {
    it("Should change html", function () {
        // Arrange
        spyOn(document, "getElementById").and.callThrough();

        // Act
        var myWidget = new widget({ widgetId: 'widget-div' });

        // Assert
        expect(document.getElementById).toHaveBeenCalled();
    });
});