我认为有 3 个非常简单的测试。
1) 检查组件渲染属性(Ember-CLI 自动生成此属性)
2) 单击导航到“user.index”路线的类(它是一个 {{link-to}})
3) 单击导航到“brands.index”路线的类(它是一个 {{link-to}})
当我在浏览器中单击路由时,我可以确认路由是可访问的,但是测试失败了。尽管指定单击了“brands-link”,但“brands.index”测试仍然期望“users.index”。
任何帮助将不胜感激!
测试如下:
import {
moduleForComponent,
test
} from 'ember-qunit';
moduleForComponent('navigation-bar', 'NavigationBarComponent', {
// specify the other units that are required for this test
// needs: ['component:foo', 'helper:bar']
});
test('it renders', function () {
expect(2);
// creates the component instance
var component = this.subject();
equal(component._state, 'preRender');
// appends the component to the page
this.append();
equal(component._state, 'inDOM');
});
test('it can navigate to users', function () {
expect(3);
var component = this.subject();
equal(component._state, 'preRender');
this.append();
equal(component._state, 'inDOM');
click('.users-link');
andThen(function () {
equal(currentRouteName(), 'users.index');
});
});
test('it can navigate to brands', function () {
expect(3);
var component = this.subject();
equal(component._state, 'preRender');
this.append();
equal(component._state, 'inDOM');
click('.brands-link');
andThen(function () {
equal(currentRouteName(), 'brands.index');
});
});
组件模板是:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<!--<img alt="Brand" src="...">-->
</a>
</div>
<ul class="nav navbar-nav">
{{#link-to 'users' tagName='li' classNames='users-link'}}<a href="#">Users</a>{{/link-to}}
{{#link-to 'brands' tagName='li' classNames='brands-link'}}<a href="#">Brands</a>{{/link-to}}
</ul>
</div>
</nav>
最佳答案
我相信这是因为当您使用 moduleForComponent
帮助程序时,您没有启动 Ember 应用程序。 link-to
帮助程序需要路由器,除非应用程序实际启动(即使用常规 module
帮助程序并调用 startApp()
在 beforeEach
block 中)。
我不确定这里的最佳解决方案...您可以对使用此组件的路由进行正常的集成测试,但这看起来相当尴尬。
关于ember.js - 使用 {{link-to}} 帮助程序测试 Ember-CLI 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27076092/