单元测试 aurelia 视图答案

【问题标题】：Unit testing aurelia view单元测试 aurelia 视图
【发布时间】：2016-04-21 21:30:30
【问题描述】：

我是 Aurelia 的新手，想知道是否可以使用自定义绑定对 Aurelia 视图进行单元测试？我尝试使用 jasmine-jquery 将 Aurelia html 视图文件加载到 html 夹具中，但由于某种原因，我永远无法使用它们的 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" });
});

【问题讨论】：

骨架项目中有一些测试示例。你在用吗？
我确实看过骨架项目中的示例，但它似乎没有我想要做的。你能详细说明一下吗？

标签： jasmine aurelia jasmine-jquery

【解决方案1】：

您可以使用量角器之类的端到端测试来执行此操作。 Jasmine 单元测试并不意味着真正让应用程序完全加载并像完整的端到端测试一样准备一切。为此，请查看骨架导航应用程序中的端到端测试。

【讨论】：

谢谢，我会为它创建一个 e2e 测试。