ユニットテストでこのJavaScriptコードを使用するにはどうすればよいですか？

イメージをクリックすると、iframe内のビデオのsrc属性が変更される基本的なアプリケーションがあります。私はどのようにユニットテストのことができますかと思います。私はテストを実行するためにカルマとギャルを使用しています。 "it"テストケースの中で、私はchangeIframeSrcのような関数を呼び出そうとしますが、テストランナーは "変数changeIframeSrcが定義されていません"というエラーを常に出します。何がバニラのjavascriptを "インポート"するための最良の方法は、それはユニットテストの中で利用可能ですか？ユニットテストでこのJavaScriptコードを使用するにはどうすればよいですか？

のindex.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
</head> 
<body class="background" onload="onLoad()"> 

<img id="bg-image" src="img/right.png"> 


<div> 
    <a href="javascript:fd.navigationExitItem();" id="exit-text"> 
     < Exit Videos 
    </a> 
</div> 

<iframe id="video-iframe" src="https://player.vimeo.com/video/32342452" width="552" height="331" frameborder="0" 
     webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 

<div id="video-description">Video Description</div> 

<img src="img/thumbnail1.png" width="180px" height="174px" id="first" onclick="thumbnailClicked(this)"> 
<img src="img/thumbnail2.png" width="180px" height="174px" id="second" onclick="thumbnailClicked(this)"> 
<img src="img/thumbnail3.png" width="180px" height="174px" id="third" onclick="thumbnailClicked(this)"> 
<img src="img/thumbnail4.png" width="180px" height="174px" id="fourth" onclick="thumbnailClicked(this)"> 
<img src="img/thumbnail5.png" width="180px" height="174px" id="fifth" onclick="thumbnailClicked(this)"> 
<img src="img/thumbnail6.png" width="180px" height="174px" id="sixth" onclick="thumbnailClicked(this)"> 
<img src="img/thumbnail7.png" width="180px" height="174px" id="seventh" onclick="thumbnailClicked(this)"> 

<!--<script href="jquery-1.12.0.min.js"></script>--> 
<script src="data.js"></script> 
<script src="script.js"></script> 

<!--<script src="jquery.js"></script>--> 
<link rel="stylesheet" href="styles.css"> 

</body> 
</html>

script.js：

document.addEventListener("DOMContentLoaded", function(event) { 
    document.getElementById('video-iframe').src = dataArray["first"].url; 
    document.getElementById('video-description').innerHTML = dataArray["first"].description; 
}); 

function onLoad() { 

} 

function thumbnailClicked(element) { 
    console.log("Thumbnail clicked: " + element.id); 
    changeIframeSrc(element.id); 
} 

function changeIframeSrc(id) { 

    var newVideoUrl = ""; 
    var newVideoTitle = ""; 
    var newVideoDescription = ""; 

    newVideoDescription = dataArray[id].description; 
    newVideoUrl = dataArray[id].url; 

    document.getElementById('video-iframe').src = newVideoUrl; 
    document.getElementById('video-description').innerHTML = newVideoDescription; 
}

data.js：

dataArray = []; dataArray ["first"] = {'url'： 'https://player.vimeo.com/video/1231434'、 'description'： 'a video'}; dataArray ["second"] = {'url'： 'https://player.vimeo.com/video/43238313'、 'description'： '何か'}; （）; 0123あなたが使用していることを状態として

https://jsfiddle.net/14bmcLfb/

出典

2016-04-15 Jimothy

script.spec.js：

require('./script') 
describe('the script', function() { 
    it('should do this', function() { 
      changeIframeSrc("first"); 
    }) 


})

そして、テストは常に出力は： "changeIframeSrcにReferenceError：変数を見つけることができません"カルマ、最良の方法は、カルマコンフィギュレーションファイルの "ファイル"配列に依存するjavascriptファイルを一覧表示することです：

files = [ 
    '../pathToFile/script.js', 
    //other dependencies 
    '../pathToFile/script.spec.js' 
]

また、使用しているRequireJS構文がこの状況に対して正しいとは限りません。「require（ './ script'）」would be used within a defined module。あなたがファイルを取得するプロセスが非同期であるように、コールバック関数内のファイルで定義された関数を使用する必要がありますこの種の状況について：

require(['./script'], function(script) { 
describe(... 
});

出典

2016-04-16 20:31:17 Andrew

私はカルマ内のファイルの配列に「script.js」を追加しました.conf.jsが、私はまだ、 "ReferenceError：variable：changeIframeSrc"を見つけることができませんエラー： "（ – Jimothy

カルマ設定ファイルの" singleRun "プロパティをfalseに設定してみてください。 Karmaを起動し、http：// localhost：9876/debug.html（または設定ファイルで設定されているもの）に移動し、debugを押してテストをデバッグモードで実行します。ブラウザの開発者ツールを使用して、script.jsがロードされ、エラーが発生している時点のスコープ内で利用可能なものを検査します。 files配列はロードされた順番であるため、場合によってはscript.jsが最初に来る必要があります。 – Andrew

ユニットテストでこのJavaScriptコードを使用するにはどうすればよいですか？

答えて

関連する問題