如何使用茉莉花测试带有DOM元素的JavaScript? [英] How to test JavaScript with DOM elements using jasmine?
问题描述
我正在尝试用茉莉花编写一个JavaScript代码的测试，其中包括不起作用的DOM元素.当我仅测试JavaScript代码(仅用于简单函数但不测试DOM元素)时，该方法有效.我已经研究了很长时间，找不到真正的答案.我还尝试使用jsdom，因为它应该在测试DOM元素时使用，但是我不断收到很多错误. 有什么简单"的方法仅使用茉莉花来测试DOM元素?
I am trying to write a test in jasmine for JavaScript code including DOM elements which doesn't work. It works when I test only for JavaScript code (just simple functions but not for DOM elements). I have been researching for so long and can't really find the answer. I also tried to use jsdom as it's supposed to be used when testing for DOM elements, however I keep getting a bunch of errors. Is there any 'easy' way to test DOM elements only using jasmine?
JavaScript:
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);
});
})
对于测试，我总是得到:
For the test I'm getting always:
无法读取未定义的属性"one".
Cannot read property 'one' of undefined.
我知道
var one1 = document.forms["myForm"]["one"].value;
var two1 = document.forms["myForm"]["two"].value;
在这个例子中看起来很奇怪，但是我的实际代码要大得多(我不想发布整个代码，因为这对于我的问题不是必需的)，并且有必要，所以我不得不在这里包括它(也许它会影响测试).
looks strange in this example, but my actual code was much bigger (I didn't want to post the entire code as it's not necessary for my question) and it was necessary so I had to include it here (perhaps it affects the testing).
推荐答案
必须有一个可以执行您的js的环境.
There HAS to be an environment where your js will execute.
- 浏览器
- 节点
您可以使用 Karma 在浏览器中运行测试(或找到类似的测试运行程序).业力在真正的浏览器(如 Chrome/IE/Firefox/Safari )或无头浏览器(如 PhantomJS )中执行HTML/JS/Jasmine-Test-JS.您还可以在此处利用 jquery 选择器.
You can run your test in Browser using Karma(or you can find similar test runners). Karma executes the HTML/JS/Jasmine-Test-JS in a real browser like Chrome/IE/Firefox/Safari OR a headless browser like PhantomJS. You can also take advantage of jquery selectors here.
您可以使用 JSDOM 在Node中运行测试.在这里，在内存中创建了一个虚拟DOM.如果您要运行选择器，则可以使用 Cheerio 获得类似行为的jQuery.
You can run your test in Node using JSDOM. Here a virtual DOM is created in-memory. You can use Cheerio to get a jquery like behaviour if you want to run selectors.
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.请参考示例以查看window对象如何通过jsdom进入图片.
To run test in Node, you will have to bring in the html content in a variable and initialize jsdom. Refer the example to see how a window object gets into picture by jsdom.
这篇关于如何使用茉莉花测试带有DOM元素的JavaScript?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
