jasmineを使用してDOM要素でJavaScriptをテストする方法は？

jasmineで動作しないDOM要素を含むJavaScriptコードのテストを作成しようとしています。これは、JavaScriptコードのみをテストするときに機能します（DOM要素ではなく単純な関数です）。私はずっと長い間研究してきており、実際に答えを見つけることはできません。 DOM要素をテストするときにjsdomを使用することになっていたので、私はjsdomも使用しようとしましたが、私はたくさんのエラーを受けています。 jasmineを使って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 = {one：{value：5}、two：{value：1}};' –

私はテストのために/ whereをどのように使用するのか分かりません。指定していただけますか？ありがとうございます。 – javascript2016

jsが実行される環境が必要です。

ブラウザ
ノード

あなたはカルマ（またはあなたが同様のテストランナーを見つけることができます）を使用して、ブラウザでテストを実行することができます。カルマはクローム/ IE/Firefox/Safariのような実際のブラウザでPhantomJSのようなヘッドレスブラウザを使ってHTML/JS/Jasmine-Test-JSを実行します。 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をテストする方法は？

答えて

関連する問題