余烬组件集成测试:' link-to '为空

Ember Component Integration Tests: `link-to` href empty

本文关键字：link-to 为空 组件 集成测试 余烬      更新时间：2023-09-26

我正在尝试编写一个组件集成测试，就像这篇博客文章一样，但是我的组件有一个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?我试图查看十一月link-to的测试，并找到了测试的这一部分，这基本上是我正在做的-提供一个具有id键集的POJO。什么好主意吗?

编辑:

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

结果是你可以在测试设置中查找路由器并告诉它开始路由，它就会工作。@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);
  }
});

这是如何在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');
  });
});

如果你只是想检查href是ok的，它可以更好地使用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

你使用的是哪个版本的Ember ?我记得以前看到过这个，现在它似乎在我的应用程序中工作(虽然我使用1.13.8)。

似乎在我的应用程序中添加了href，并且基于此计算属性，如果tagName是"a"，它应该绑定到视图。

除了升级Ember之外，最好创建一个Ember -fiddle或repro，如果它仍然存在，则提交一个错误。

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

相关文章：