Question

我有一个基本应用，您点击图片，它会更改iframe中视频的src属性。我想知道如何对单元测试进行测试。我正在使用karma和gulp来运行测试。在“it”测试用例中，我尝试调用一个函数，例如changeIframeSrc，但我的测试运行器总是给出错误，“变量changeIframeSrc未定义”。什么是“导入”vanilla 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'：'something'};

}）（）;

script.spec.js：

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


})

测试总是输出：“ReferenceError：找不到变量：changeIframeSrc”

https://jsfiddle.net/14bmcLfb/

Answer 1

当您声明您使用的是Karma时，最好的方法是在Karma配置文件的“files”数组中列出测试所依赖的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(...
});

如何在单元测试中使用此JavaScript代码？

1 个答案: