如何使用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 指令时,如何对元素是不是可见进行单元测试

如何使用 jQuery DOM 操作测试 HTML 页面

如何测试使用 jasmine + TypeScript 使用常量调用的函数

使用 Jasmine 测试 Node 项目

如何使用 Jasmine 为以下 javascript 函数编写单元测试用例

如何使用Jasmine Unit测试测试私有方法