我已经编写了一个基本的测试框架，我正在挑战自己在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>"
);
});
提前致谢。
您需要在view-test.js中定义list。
describe("View #convert", function() {
var list = new List();
// ...
});
如果你需要在这个测试函数之外定义list，那么你需要将它作为参数传递，或者在window对象上定义它，以便它可以全局访问。