Question

我是Aurelia的新手，想知道是否有办法用Aurelia的自定义绑定对Aurelia视图进行单元测试？我尝试使用jasmine-jquery将Aurelia html视图文件加载到html fixture中，但由于某种原因，我永远无法使用他们的id获取任何html DOM元素。

我尝试进行单元测试的功能是当我将鼠标悬停在图标上时，它应该增加图标的大小并改变它的背景颜色。

查看

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

Answer 1

您可以使用量角器之类的东西进行端到端测试。 Jasmine单元测试并不意味着实际上应用程序完全加载并准备好所有内容，如完整的端到端测试。要实现这一目标，请查看骨架导航应用程序中的端到端测试。

单元测试aurelia视图

1 个答案: