如何使用aurelia测试测试阴性if.bind

我正在尝试为一个Aurelia组件编写一个测试，该组件在加载一些数据之前不会显示任何内容。它看起来像这样：

class MyComponent {
    @bindable
    someId;

    myData = undefined;

    someIdChanged() {
        externalService.someLookup(someId).then(data => this.myData = data);
    }
}

带模板

<template>
    <div if.bind="myData !== undefined" class="special-styling">
        ${myData.title}
    </div>
</template>

${myData.title}

为最终加载

myData

的场景编写测试很容易：我可以调用

ComponentTester.waitForElement（'.special styleing'）

或类似的程序。但是现在我想编写一个测试，其中加载数据会立即失败，我断言应该不存在

div

。但是，我不确定如何计时：如果我立即检查

div

是否存在，那可能是因为组件工作正常且

div

未显示，但也可能是组件有故障但尚未完成渲染

---

现在，作为一种解决方法，我正在做一些类似于

setTimeout（（）=>expect（div）.not.to.exist，50）

，但理想情况下，我希望有一些信号表明请求已完成，Aurelia已完成更新，然后断言没有

div

。有什么方法可以做到这一点吗？

在

attached（）

阶段，您通常会将支票放在

queueMicroTask（）

后面。这就是确保aurelia完成渲染所需的所有“延迟”。请看我之前给出的关于原因的详细信息

然而，

aurelia测试

在渲染等方面的时间安排略有不同。它实际上在实际框架不使用的地方使用了

setTimeout（）

。这是为了解释测试框架不可避免的延迟。因此，您需要保留

setTimeout（）

，或者您可以使用

queueTask（）

（内部使用

setTimeout（）

）来实现类似的效果

如果您确实想确定，只需执行以下操作：

ComponentTester.waitForElement（'.special Styleing'，{interval:5，timeout:15}）

---

尽管如此，你的测试还是有点不必要的。您需要验证的是，如果数据加载失败，传递给if.bind的表达式实际上会计算为false。您现在正在做的是测试

if.bind

是否也能正常工作，而且您确实不想/不需要测试Aurelia框架本身：）

促使我考虑使用

TaskQueue

来计时。我还在研究这个问题。接下来的结果是，对于简单的测试，只需等待一个周期就足够了（例如，

等待新承诺（setTimeout）

）。但是，我不确定这是否保证适用于所有情况。订阅。。请发布您自己的答案，当您找到答案时，我会做出微妙的区分，在这个测试中，我不是在检查

if.bind

是否有效，而是我没有搞错我在模板中传递给

if.bind

的表达式；）我可以做

expect（component.viewModel.data）.to.be.undefined

，但这并不妨碍我在模板中使用错误的表达式。在我的测试中，我尽可能多地将视图/视图模型组合视为一个黑匣子。如果您完全支持封装，为什么不向视图模型添加一个布尔属性

displayMyData

，并将其直接传递给

If.bind

，这样视图只处理显示部分，视图模型处理“显示内容”。然后将

@observable（）

添加到

myData

属性，并在

myDataChanged（newValue，oldValue）

中，根据是否定义了

newValue

将

displayMyData

设置为true/false。然后您只需测试

displayMyData

属性。简化您的测试，简化您的视图？如果我的目标是从视图模型中封装我的视图，以便我可以单独测试VM，那么这正是进行测试的方式，我同意。但我的思维模式始终是将两者视为一个封装单元，通过绑定和共享服务/状态管理与外部世界通信，但不隐藏彼此的状态。它们通过UI和用户通信，这是我想在测试中验证的。也许不一定是最好的模型，但它对我来说很好。我尊重你的模型，我不认为它本身是错的。然而，当你思考它时，你将自己限制在奥雷莉亚所能做的事情的一小部分。内置功能，如

router view layout.bind

，

useView（）

，

viewStrategy

，

compose

，以及许多其他功能都围绕着能够混合和匹配不同的视图和虚拟机来进一步提高代码的可重用性。我个人喜欢让我的虚拟机做所有的计算工作，并保持视图的简单和干净。这样做的一个重要原因是，它还提高了可测试性。测试html总是有点棘手：）有趣。谢谢你添加你的想法。