创建假路由来测试组件的 link-to

Question

我有一个组件可以获取菜单项并呈现导航栏。所以现在我正在编写集成测试，我想确保该组件呈现正确的链接和标签。首先，我添加了路由器初始化，使 link-to 显示 href prop:

moduleForComponent('main-menu', 'Integration | Component | main menu', 
{
  integration: true,
  setup() {
    const router = getOwner(this).lookup('router:main');
    router.setupRouter();
  }
});

现在我想创建一些假路由来测试组件，并独立于应用程序路由器的设置。所以我尝试使用地图功能：

moduleForComponent('main-menu', 'Integration | Component | main menu', {
  integration: true,
  setup() {
    const router = getOwner(this).lookup('router:main');
    router.map(function() {
      this.route('link1');
      this.route('link2');
    });
    router.setupRouter();
  }
});

我得到 Promise rejected before "it renders": router.map is not a function。那么我应该如何实现 "fake routes" 进行测试？

Answer 1

好的，问题解决了。如果有人需要类似的东西，我是这样做的：

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import { getOwner } from '@ember/application';
import CustomRouter from 'app/lib/router';

moduleForComponent('main-menu', 'Integration | Component | main menu', {
  integration: true,
  setup() {
    const application = getOwner(this),
          Router = CustomRouter.extend()
    ;
    Router.map(function() {
      this.route('link1');
      this.route('link2');
    });
    application.register('router:main', Router.extend());
    application.lookup('router:main').setupRouter();
  }
});

test('some awesome tests', function(assert) {
  const menuItems = [
      {url: 'link1', label: 'link1', href: '/link1'},
      {url: 'link2', label: 'link2', href: '/link2'},
    ]
  ;
  this.set('items', menuItems);
  this.render(hbs`{{main-menu items=items}}`);
  // some cool tests that now can check href attributes of links
  // and don't depend on app's router setup
});

创建假路由来测试组件的 link-to

Create fake routes to test component's link-to

ember.js