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

How Can I Use This JavaScript Code in Unit Tests?

本文关键字：JavaScript 代码 单元测试      更新时间：2023-09-26

我有一个基本的应用程序，您可以在其中单击图像，它可以更改iframe中视频的src属性。我想知道我该如何进行单元测试。我在利用因果报应和吞咽来进行测试。在"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/

当您声明您正在使用Karma时，最好的方法是在Karma配置文件的"files"数组中列出测试所依赖的javascript文件：

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

此外，我认为您使用的RequireJS语法不适合这种情况，"require（'./script'）"将在定义的模块中使用。对于这种情况，您需要在回调函数中使用文件中定义的函数，因为获取文件的过程是异步的：

require(['./script'], function(script) {
 describe(...
});
相关文章：