如何使用jasmine使用DOM元素测试JavaScript？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用jasmine使用DOM元素测试JavaScript？相关的知识，希望对你有一定的参考价值。
我试图在jasmine中为javascript代码编写测试，包括不起作用的DOM元素。当我只测试JavaScript代码（只是简单的函数而不是DOM元素）时，它可以工作。我一直在研究这个问题并且找不到答案。我也尝试使用jsdom，因为它应该在测试DOM元素时使用，但是我不断收到一堆错误。有没有“简单”的方法只使用茉莉花来测试DOM元素？
JavaScript的：
var result;
var adding = function(one, two) {
var one1 = document.forms["myForm"]["one"].value;
var two1 = document.forms["myForm"]["two"].value;
result = parseInt(one1) + parseInt(two);
var number = document.getElementById("number");
number.innerhtml = result;
return result;
}
HTML：
<html>
<head> </head>
<body>
<form name="myForm">
<h4>numner 1</h4> <input type="text" name="one" id="one"></input>
<h4>number 2</h4> <input type="text" name="two" id="two"></input> <input type="submit" onclick="adding(one.value, two.value); return false;"> </form>
<p id="number"> </p>
</body>
</html>
我的测试规格：
describe("additions", function() {
it("result should add two numbers", function() {
var final = adding(5, 1);
expect(final).toEqual(6);
});
})
对于测试我总是得到：
无法读取未定义的属性“one”。
我知道
var one1 = document.forms["myForm"]["one"].value;
var two1 = document.forms["myForm"]["two"].value;
在这个例子中看起来很奇怪，但我的实际代码要大得多（我不想发布整个代码，因为它不是我的问题所必需的）并且它是必要的所以我必须在这里包含它（也许它会影响测试） 。
有一个你的js将执行的环境。
- 浏览器
- 节点
您可以使用Karma在浏览器中运行测试（或者您可以找到类似的测试运行器）。 Karma在真实的浏览器中执行HTML / JS / Jasmine-Test-JS，如Chrome / IE / Firefox / Safari或像PhantomJS这样的无头浏览器。您还可以在此处利用jquery选择器。
您可以使用JSDOM在Node中运行测试。这里在内存中创建虚拟DOM。如果要运行选择器，可以使用Cheerio来获取类似jquery的行为。
import {expect} from 'chai';
import jsdom from 'jsdom';
import fs from 'fs';
describe('index.html', ()=>{
it('should have h1 that says Users', (done)=>{
const index = fs.readFileSync('./src/index.html', "utf-8");
jsdom.env(index, function(err, window){
if(err){
console.log(err);
}
else{
const h1 = window.document.getElementsByTagName('h1')[0];
expect(h1.innerHTML).to.equal("Users");
done();
window.close();
}
})
})
})
要在Node中运行测试，您必须在变量中引入html内容并初始化jsdom。请参阅示例，了解jazdom如何将window对象放入图片中。
文档被“未定义”加上使用ES6的问题（SyntaxError：Unexpected token import）也遇到了同样的问题。
我用茉莉与巴贝尔和jsdom。
Jasmine可以在Node或/和浏览器中运行测试。我猜使用Node版本更具普遍性。
我的解决方案
jasmine.json
{
"spec_dir": "spec",
"spec_files": [
"**/*[sS]pec.js"
],
"helpers": [
"../node_modules/babel-register/lib/node.js", // load babel first to use ES6 'import' and other features
"helpers/**/*.js"
],
"stopSpecOnExpectationFailure": false,
"random": true
}
testHelper.js
import jsdom from 'jsdom';
import fs from 'fs';
const index = fs.readFileSync('./static/index.html', 'utf-8');
const { JSDOM } = jsdom;
const { document } = (new JSDOM(index)).window;
global.document = document;
通过上述设置，您可以在测试中使用“文档”。
PS：上面没有完整的babel设置。请参阅babel文档或其他帖子。
以上是关于如何使用jasmine使用DOM元素测试JavaScript？的主要内容，如果未能解决你的问题，请参考以下文章
在 Angular 中使用 Jasmine 使用 *ngIf 指令时，如何对元素是不是可见进行单元测试
如何测试使用 jasmine + TypeScript 使用常量调用的函数