Question

我正在尝试在jasmine中为JavaScript代码编写一个测试，包括不起作用的DOM元素。当我只测试JavaScript代码（只是简单的函数而不是DOM元素）时，它可以工作。我一直在研究这个问题并且找不到答案。我也尝试使用jsdom，因为它应该在测试DOM元素时使用，但是我不断收到一堆错误。有没有“简单”的方法只使用jasmine来测试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);
    });
})

对于我总是得到的测试：

无法读取未定义的属性“一”。

我知道

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

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

Answer 1

有一个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。请参阅示例，了解window对象如何通过jsdom进入图片。

Answer 2

我对文档“未定义”有同样的问题，再加上使用ES6的问题（SyntaxError：意外的令牌导入）。

我将茉莉花与babel和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？

2 个答案: