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

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

javascript unit-testing jasmine

如何在单元测试中使用此JavaScript代码？,javascript,unit-testing,jasmine,karma-jasmine,Javascript,Unit Testing,Jasmine,Karma Jasmine,我有一个基本的应用程序，你点击一个图像，它会改变iframe中视频的src属性。我想知道我怎样才能单元测试这个东西。我正在使用karma和gulp来运行测试。在“it”测试用例中，我尝试调用一个函数，例如changeIframeSrc，但我的测试运行程序总是给出错误，“变量changeIframeSrc未定义”。“导入”普通javascript的最佳方式是什么，这样就可以在单元测试中使用它 index.html： <!DOCTYPE html> <html lang="

我有一个基本的应用程序，你点击一个图像，它会改变iframe中视频的src属性。我想知道我怎样才能单元测试这个东西。我正在使用karma和gulp来运行测试。在“it”测试用例中，我尝试调用一个函数，例如changeIframeSrc，但我的测试运行程序总是给出错误，“变量changeIframeSrc未定义”。“导入”普通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>

data.js：

dataArray=[]； dataArray[“first”]={'url'：''，'description'：'a video'}； dataArray[“second”]={'url'：''，'description'：'something'}

})（）

script.spec.js：

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


})

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

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

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

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

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

我在karma.conf.js中的文件数组中添加了'script.js'，但是当我运行测试时，仍然会得到错误，“ReferenceError:找不到变量：changeIframeSrc:”（尝试将karma配置文件中的“singleRun”属性设置为false，然后可以启动karma，导航到（或按照配置文件中的配置）然后按debug以调试模式运行测试。使用浏览器开发人员工具，您可以检查script.js是否已加载，并检查发生错误时作用域中的可用内容。顺便说一句，文件数组中列出的文件顺序就是加载的顺序，因此script.js需要出现首先，以防万一。

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