模拟InnerHTML输出文本Javascript

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了模拟InnerHTML输出文本Javascript相关的知识,希望对你有一定的参考价值。

我正在做一个项目,我们正在构建一个Web应用程序,只使用vanilla javascript。我们一直在挑战编写自己的测试框架,然后用它来测试应用程序。

我正在尝试测试我的控制器,以便它将正确的Innerhtml文本输出到我的id标签。

在这样做时,我使用模拟来隔离此测试。我正在模拟我的构造函数参数,以及创建自定义标记和id,但我的console.logs似乎没有认识到它。

// note-controller.js

(function(exports) {
  function NoteController(list, listView, tag) {
    this.list = list;
    this.listView = listView;
    this.tag = tag;
  }

  NoteController.prototype.getListView = function() {
    return this.listView.converted;
  };

  NoteController.prototype.outputHTML = function() {
    document.getElementById(this.tag).innerHTML = this.getListView();
  };

  exports.NoteController = NoteController;
})(this);

// controller-tests.js

describe("#outputHTML", () => {
    var list = { text: "hello this is another note" };
    var listView = {
      converted: "<ul><li><div>hello this is another note</div></li></ul>"
    };
    var mockElement = document.createElement("div");
    mockElement.id = "mock";
    mockElement.innerHTML = "hello";
    var noteController = new NoteController(list, listView, "mock");

    console.log(mockElement); 
 // outputs <div id="mock">hello</div> 

    console.log(document.getElementById("mock"));
 // outputs null

    expect.isEqual(
      "outputs the note as HTML to the page",
      noteController.outputHTML(),
      "<ul><li><div>hello this is another note</div></li></ul>"
    );
  });

你知道为什么在第二个console.log中没有识别出这个创建的标签吗?

我知道这还不正确,但我只是想嘲笑document.getElementById是朝着正确方向迈出的一步。话虽这么说,你认为这将是一个有效的策略来测试我的outputHTML功能?

答案

谢谢西德尼的建议。这就是我想出来通过考试的原因;

describe("#outputHTML", () => {
    var list = { text: "hello this is another note" };
    var listView = {
      converted: "<ul><li><div>hello this is another note</div></li></ul>"
    };
    var body = document.getElementsByTagName("body");
    var mockElement = document.createElement("span");
    mockElement.id = "test";
    body.item(0).appendChild(mockElement);

    var noteController = new NoteController(list, listView, "test");

    expect.isEqual(
      "outputs the note as HTML to the page",
      noteController.outputHTML(),
      "<ul><li><div>hello this is another note</div></li></ul>"
    );

    body.item(0).removeChild(mockElement);
});

我设法创建了一个临时元素标记,我的函数可以识别它以通过测试。测试后我删除它,因为它实际上将它应用到我创建的specrunner页面。

以上是关于模拟InnerHTML输出文本Javascript的主要内容,如果未能解决你的问题,请参考以下文章

输出消失 Javascript 简单的 innerHTML

#innerHTML Javascript 中的文本

如果文本已经输入,JavaScript 不会复制 innerHTML

如何获取被 javascript 覆盖的文本的 innerHTML

Javascript innerHTML 不适用于图像,但适用于文本?

将innerhtml拆分为文本以在javascript中翻译JSON