Как я могу использовать этот код JavaScript в модульных тестах?

У меня есть основное приложение, где вы нажимаете на изображение, и оно изменяет атрибут src для видео в iframe. Мне интересно, как я могу тестировать объекты. Я использую карму и глоток для проведения тестов. Внутри тестового примера «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', 'описание': '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/

источник

2016-04-15 Jimothy

Как вы утверждаете, что вы используете Карма, наилучшим подходом было бы перечисление файлов javascript, на которые зависят тесты в массиве «файлы» конфигурационного файла Karma:

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: не могу найти переменную: changeIframeSrc»: '( – Jimothy

Попробуйте установить значение свойства «singleRun» в файле конфигурации Karma на false, вы можете затем запустите Karma, перейдите в http: // localhost: 9876/debug.html (или настроен в файле конфигурации), а затем нажмите debug для запуска тестов в режиме отладки. Используя инструменты разработчика браузера, вы можете проверить, что script.js был загружен и проверен, что доступно в области действия в момент возникновения ошибки. Кстати, порядок, в котором файлы указаны в массив файлов - это порядок, в котором они загружены, поэтому script.js должен быть первым, на всякий случай. – Andrew

Как я могу использовать этот код JavaScript в модульных тестах?

ответ

Смежные вопросы