我是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" });
});
骨架項目中有一些測試示例。你在使用它們嗎? –
我確實看了一下框架項目中的例子,但似乎沒有我想要做的。你能詳細說明一下嗎? – user1729409