Unit testen Aurelia view

Question

Ich bin neu bei Aurelia und fragte mich, ob es eine Möglichkeit gab, die Aurelia Views mit ihren Custom-Bindungen zu testen? Ich habe versucht, die Aurelia-HTML-View-Datei in ein HTML-Fixture mit Jasmine-Jquery zu laden, aber aus irgendeinem Grund konnte ich keines der HTML-DOM-Elemente mit ihrer ID bekommen.

Die Funktionalität, die ich versuche, Unit Test ist, wenn ich Mouseover ein Symbol, sollte es die Größe des Symbols und ändern Sie die Hintergrundfarbe.

Ansicht

<template> 
<div> 
    <span repeat.for="[automobile] of automobilesArray"> 
     <object id.bind="automobile.Id" type="image/svg+xml" style='background-color: white;' data.bind="'./images/' + automobile.Id +'.svg'" class="auto-icon img-circle" width="50" mouseover.delegate="mover($event)" mouseout.delegate="mout($event)"> 
     </object> 
    </span> 
</div> 

Ansicht Modell

mover(event: Event) { 
    document.getElementById(event.srcElement.id).style.backgroundColor = "yellow"; 
    document.getElementById(event.srcElement.id).width = "60px"; 
} 
mout(event: Event) { 
    document.getElementById(event.srcElement.id).style.backgroundColor = "white"; 
    document.getElementById(event.srcElement.id).width = "60px";   
} 

Ich mag würde so etwas in meiner Testdatei schreiben dies zu testen. Was mache ich falsch?

Testdatei

it("vehicle icons should grow in size on mouseover", =>() { 
    jasmine.getFixtures().fixturesPath = 'base/'; 
    loadFixtures('view.html'); 

    expect($('#automobile.Id')).toHaveCss({ width: "50px" }); 

    $('#automobile.Id').mouseover(); 

    expect($('#automobile.Id')).toHaveCss({ width: "60px" }); 
}); 

Answer 1

Sie können mit einem Ende tun diesen Test mit so etwas wie Winkelmesser zu beenden. Jasmin-Komponententests sollen die App nicht vollständig laden und alles wie einen vollständigen End-to-End-Test vorbereiten. Sehen Sie sich hierzu die Ende-zu-Ende-Tests in den Skelett-Navigationsanwendungen an.