Question

我已经编写了一个基本的测试框架，我正在挑战自己在vanilla Javascript中制作单页应用程序。

我一直在努力弄清楚为什么我的视图测试在运行时无法识别'list'构造函数。

我的specrunner已将所有文件加载到其中，我之前对我的模型的测试工作正常。此外，在Specrunner中使用浏览器控制台模拟测试也会提供正确的输出。

如果速度更快here，请随意克隆我的回购。

请注意，我的测试框架“espresso”在assert的位置使用expect，并且还有一个额外的参数用于测试描述。

espresso.js

var describe = function(description, test) {
  document.getElementById("output").innerHTML +=
    "<br><b>" + description + "</b></br>";
  try {
    test();
  } catch (err) {
    document.getElementById("output").innerHTML +=
      "<br><li>error: " + err.message + "</li></br>";
    console.log(err);
  }
};

var expect = {
  isEqual: function(description, first, second) {
    if (first === second) {
      document.getElementById("output").innerHTML +=
        description +
        "<br><li><font color='green'>PASS: [" +
        first +
        "] is equal to [" +
        second +
        "]</li></br>";
    } else {
      document.getElementById("output").innerHTML +=
        "<br><li><font color='red'>FAIL: [" +
        first +
        "] is not equal to [" +
        second +
        "]</li></br>";
    }
  }
}

Specrunner.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Expresso Spec Runner</title>
  </head>
  <body>
    <h1><u>Expresso Spec Runner</u></h1>
    <br>
    <div id="output"></div>
    <script src="expresso/expresso.js"></script>

    <!-- include source files here... -->
    <script src="lib/list-model.js"></script>
    <script src="lib/note-model.js"></script>
    <script src="lib/list-view.js"></script>

    <!-- include spec files here... -->
    <script src="tests/expresso-test.js"></script>
    <script src="tests/model-tests.js"></script>
    <script src="tests/view-tests.js"></script>
  </body>
</html>

列表model.js

(function(exports) {
  "use strict";

  function List() {
    this.notelist = [];
  }

  List.prototype.add = function(text) {
    let note = new Note(text);
    this.notelist.push(note);
  };

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

// note-model.js

(function(exports) {
  "use strict";

  function Note(text) {
    this.text = text;
  }

  Note.prototype.show = function() {
    return this.text;
  };

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

列表view.js

(function(exports) {
  "use strict";

  function View() {
    this.test = "hello there";

    View.prototype.convert = function(note) {
      var output = [];
      list.notelist.forEach(function(element) {
        output.push("<br><ul>" + element.text + "</ul></br>");
      });
      console.log(output);
      return output;
    };
  }

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

模型test.js

describe("List #initialize", function() {
  var list = new List();
  expect.isEqual("blank array is loaded", list.notelist.length, 0);
});

describe("List #add", function() {
  var list = new List();
  list.add("hello");
  expect.isEqual(
    "can create and store a note",
    list.notelist[0].show(),
    "hello"
  );
  list.add("goodbye");
  expect.isEqual(
    "second note says goodbye",
    list.notelist[1].show(),
    "goodbye"
  );
  expect.isEqual("there are two notes in the list", list.notelist.length, 2);
});

view-tests.js（失败的测试）

describe("View #convert", function() {
  var view = new View();
  expect.isEqual(
    "converts the note into a HTML list",
    view.convert(list.notelist),
    "<br><ul>hello</ul></br>"
  );
});

提前致谢。

Answer 1

您需要在view-test.js中定义list。

describe("View #convert", function() {
  var list = new List();
  // ...
});

如果您需要在此测试函数之外定义list，那么您需要将其作为参数传递，或者在window对象上定义它，以便全局可访问。

测试html输出，但未定义

1 个答案: