單元測試aurelia視圖

我是Aurelia的新手，想知道是否有方法通過自定義綁定單元測試Aurelia視圖？我嘗試使用jasmine-jquery將Aurelia html視圖文件加載到html fixture中，但出於某種原因，我無法使用它們的id來獲取任何html DOM元素。單元測試aurelia視圖

我試圖單元測試的功能是當我將鼠標懸停在圖標上時，它應該增加圖標的大小並更改它的背景顏色。

查看

<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>

視圖模型

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";   
}

我想寫這樣的事情在我的測試文件來測試這一點。我究竟做錯了什麼？

測試文件

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" }); 
});

來源

2016-04-21 user1729409

骨架項目中有一些測試示例。你在使用它們嗎？ –

我確實看了一下框架項目中的例子，但似乎沒有我想要做的。你能詳細說明一下嗎？ – user1729409