如何使用jasmine测试带有DOM元素的JavaScript？

我试图写JavaScript代码，包括不工作DOM元素茉莉测试。它只适用于JavaScript代码（只是简单的函数，但不适用于DOM元素）。我一直在研究这么久，无法真正找到答案。我也尝试使用jsdom，因为它应该在测试DOM元素时使用，但是我不断收到一些错误。是否有任何'简单'的方式来测试DOM元素只使用茉莉花？如何使用jasmine测试带有DOM元素的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); 
    }); 
})

对于测试我得到总是：

无法读取未定义的属性'one'。

我知道

var one1 = document.forms["myForm"]["one"].value; 
var two1 = document.forms["myForm"]["two"].value;

在这个例子中看起来很奇怪，但我实际的代码要大得多（我没有要发布整个代码，因为它是没有必要的，我的问题），它是必要的，所以我不得不将它包含在这里（可能会影响测试）。

来源

2017-03-20 javascript2016

只是嘲笑在您的测试形式; 'document.forms.myForm = {之一：{值：5}，二：{值：1}};' –

我不明白如何使用/在哪里把它在我的测试。你能指定一下吗？谢谢。 – javascript2016

，必须有一种环境，让您的js将被执行。

浏览器
节点

您可以运行使用噶您在浏览器中测试（或者你可以找到类似的测试运行）。噶执行像一个真正的浏览器的HTML/JS /茉莉花试验JS 铬/ IE/Firefox/Safari或无头的浏览器，如PhantomJS。您也可以利用这里的jquery选择器。

您可以运行使用JSDOM您在节点测试。这里虚拟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(); 
     } 
    }) 
    }) 
})

要运行在节点测试中，你将有一个变量的HTML内容带来和初始化jsdom。请参阅示例以了解window对象如何通过jsdom进入图片。

来源

2017-03-20 16:56:43 singsuyash

如何使用jasmine测试带有DOM元素的JavaScript？

回答

相关问题