Wie kann ich diesen JavaScript-Code in Komponententests verwenden?

Ich habe eine grundlegende App, wo Sie auf ein Bild klicken, und es ändert das Src-Attribut für ein Video in einem Iframe. Ich frage mich, wie ich das testen kann. Ich verwende Karma und Schluck, um die Tests durchzuführen. Innerhalb eines "it" Testfalls versuche ich eine Funktion aufzurufen, zB changeIframeSrc, aber mein Test Runner gibt immer den Fehler "die Variable changeIframeSrc ist nicht definiert". Was ist der beste Weg, um Vanilla-JavaScript zu "importieren", damit es in den Unit-Tests verfügbar ist?Wie kann ich diesen JavaScript-Code in Komponententests verwenden?

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': 'ein Video'}; dataArray ["zweite"] = {'url': 'https://player.vimeo.com/video/43238313', 'description': 'etwas'};

})();

script.spec.js:

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


})

Und die Tests immer ausgegeben: "Reference: Kann nicht variabel finden: changeIframeSrc"

https://jsfiddle.net/14bmcLfb/

Quelle

2016-04-15 Jimothy

Wie Sie, dass Sie angeben, verwenden Karma, der beste Ansatz wäre für Sie, die JavaScript-Dateien aufzulisten, von denen die Tests abhängen, im Array "files" der Karma-Konfigurationsdatei:

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

Auch ich glaube nicht, dass die RequireJS-Syntax, die Sie verwenden, für diese Situation korrekt ist, "require ('./ script')" would be used within a defined module. Für diese Art von Situation müssten Sie die Funktionen in der Datei innerhalb einer Callback-Funktion, da der Prozess des Abrufens der Datei asynchron wäre definiert verwenden:

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

Quelle

2016-04-16 20:31:17 Andrew

Ich habe ‚script.js‘ auf das Array-Dateien in Karma .conf.js, aber ich, wenn ich den Test ausführen bekomme ich immer noch den Fehler, "ReferenceError: Kann nicht finden Variable: changeIframeSrc": '( – Jimothy

) Versuchen Sie die "singleRun" -Eigenschaft in der Karma-Konfigurationsdatei auf false setzen, können Sie Starten Sie dann Karma, navigieren Sie zu http: // localhost: 9876/debug.html (oder wie in der Konfigurationsdatei konfiguriert) und drücken Sie dann Debug, um die Tests im Debug-Modus auszuführen.Mit Ihren Browser-Entwicklertools können Sie diese script.js überprüfen wurde geladen und inspiziert, was in dem Bereich an dem Punkt verfügbar ist, an dem der Fehler auftritt, übrigens die Reihenfolge, in der die Dateien aufgelistet sind Das Dateiarray ist die Reihenfolge, in der sie geladen werden. Daher muss script.js für alle Fälle an erster Stelle stehen. – Andrew

Wie kann ich diesen JavaScript-Code in Komponententests verwenden?

Antwort

Verwandte Themen