Ember 组件集成测试：`link-to` href 为空

Posted 2023-02-22

【中文标题】Ember 组件集成测试：`link-to` href 为空

【英文标题】：Ember Component Integration Tests: `link-to` href empty

【发布时间】：2015-11-14 20:04:38

【问题描述】：

我正在尝试编写一个组件集成测试，例如 this blog post，但我的组件有一个 link-to 到动态路由，并且 href 属性没有被填写。这是一个简化版本我正在尝试做的事情。

我的组件的模板：

#link-to "myModel" model

这是我测试的相关部分：

this.set('model', 
  id: 'myId',
  name: 'My Name'
);

this.render(hbs`
my-component model=model
`);

assert.equal(this.$('a').attr('href'), '/myModel/myId'); // fails

link-to 被渲染，只是没有 href 属性。如果我在测试中记录 html，它看起来像：

<a id="ember283" class="ember-view">My Name</a>

我需要对我的“模型”做些什么来让link-to 拥有一个href？我试图在 ember 中查看 link-to 的测试，发现 this part of the tests，这基本上就是我正在做的 - 提供带有 id 键集的 POJO。有什么想法吗？

编辑：

DEBUG: -------------------------------
DEBUG: Ember      : 1.13.8
DEBUG: Ember Data : 1.13.10
DEBUG: jQuery     : 1.11.3
DEBUG: -------------------------------

【问题讨论】：

是集成测试还是单元测试？

@Daniel：集成测试

【参考方案1】：

事实证明，您只需查找路由器并告诉它在您的测试设置中开始路由，它就会工作。来自this commit 来自@rwjblue：

// tests/helpers/setup-router.js

export default function( container ) 
  const router = container.lookup('router:main');
  router.startRouting(true);



// tests/integration/components/my-component-test.js

import  moduleForComponent, test  from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import setupRouter from '../../helpers/setup-router';

moduleForComponent('my-component', 'Integration | Component | my component', 
  integration: true,
  setup() 
    setupRouter(this);
  
);

【讨论】：

谢谢，我现在可以看到href，但另一个错误TypeError: Cannot read property 'didCreateRootView' of undefined 阻止了测试通过

【参考方案2】：

这是在 Ember 中的操作方法 > 3

import  module, test  from 'qunit';
import  setupRenderingTest  from 'ember-qunit';
import  render  from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';

module('Integration | Component | my-component', function (hooks) 
  setupRenderingTest(hooks);

  test('it has a link', async function (assert) 
    this.owner.lookup('router:main').setupRouter();
    await render(hbs`my-component`);
    assert.equal(this.element.querySelector('a').getAttribute('href'), 'some-url');
  );
);

【参考方案3】：

如果您只想检查href 是否正常，最好使用setupRouter 而不是startRouting。 startRouting 尝试处理到初始 URL 的初始转换，这可能会出现问题。

// tests/helpers/setup-router.js
export default function( container ) 
 const router = container.lookup('router:main');
 router.setupRouter();

https://github.com/emberjs/ember.js/blob/d487061228a966d8aac6fa94a8d69abfc3f1f257/packages/ember-routing/lib/system/router.js#L202

【参考方案4】：

您使用的是什么版本的 Ember？我记得以前看到过这个，现在它似乎可以在我的应用程序中使用（尽管我使用的是 1.13.8）。

似乎在我的应用程序中添加了 href，并且基于 this computed property 如果 tagName 是“a”，它应该绑定到视图。

除了升级 Ember 之外，最好创建一个 ember-fiddle 或 repro 并在问题仍然存在时提交一个错误。

您可能还想看看https://github.com/intercom/ember-href-to。

【讨论】：

我在问题中添加了 Ember 版本信息（我也在 1.13.8 上），并且在我的应用程序中添加 href 没有问题 - 它们只是在测试中丢失.