我已经编写了一个基本的测试框架，并且正在挑战自己用 vanilla Javascript 制作一个单页应用。
我一直在努力弄清楚为什么我的 View 测试在运行时无法识别“列表”构造函数。
我的 specrunner 已将所有文件加载到其中，并且我之前对我的模型进行的测试工作正常。此外，使用 Specrunner 中的浏览器控制台模拟测试也提供了正确的输出。
如果更快，请随意克隆我的存储库 here .
请注意，我的测试框架“espresso”使用 expect 代替了 assert，并且还有一个额外的参数用于描述测试。
浓缩咖啡
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>
列表模型.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);
ListView .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);
模型测试.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 对象上定义它，这样它是全局可访问的。
关于javascript - 测试 html 输出，但未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47858867/