Ember 测试具有使用服务的助手的组件

Question

假设我在一个组件中有这个：

{{#if (has-spotify)}}
  <i class="fa fa-spotify" data-toggle="modal" data-target="#myModal"></i>
{{else}}
  <i class="fa fa-spotify" {{action "authSpotify"}}></i>
{{/if}}

has-spotify 助手有这个：

import Ember from 'ember';

export function hasSpotify() {
  return this.get('spotifyService.spotifyInfo').then((result) =>{
    return result !== undefined;
  });
}

export default Ember.Helper.extend({
  spotifyService: Ember.inject.service(),
  compute: hasSpotify
});

然后 spotifyService 调用我们的 API。

如何在组件测试中存根该助手？

Answer 1

您可以在集成测试中使用 getOwner 和 register 存根服务：

test('when spotify service fails', function(assert) {
  let stub = Ember.Service.extend({ spotifyInfo: undefined });

  Ember.getOwner(this).register('service:spotify-service', stub);

  this.render(hbs`{{spotify-song}}`);

  assert.equal(this.$().text().trim(), 'Log in', 'asks for log in');
});

Here's an Ember Twiddle with a simplified version of your component, helper, and service, and working integration tests.

更多详情

你的助手 returns 一个承诺，它总是真实的，意味着你的示例组件永远不会到达第二个分支。 Look at ember-promise-helpers 解决这个问题。

为了回答您的测试问题，我简化了您的助手，使其不使用 promises，如下所示：

import Ember from 'ember';

export function hasSpotify() {
  return this.get('spotifyService.spotifyInfo') !== undefined;
}

export default Ember.Helper.extend({
  spotifyService: Ember.inject.service(),
  compute: hasSpotify
});

这是 "normal" Spotify 服务：

import Ember from 'ember';

export default Ember.Service.extend({
  spotifyInfo: { username: 'alisdair' }
});

下面是更简单的组件模板：

{{#if (has-spotify)}}
  Song info
{{else}}
  Log in
{{/if}}

快乐路径集成测试如下所示：

test('normal usage', function(assert) {
  this.render(hbs`{{spotify-song}}`);

  assert.equal(this.$().text().trim(), 'Song info', 'shows song info');
});

这是使用真正的服务和助手，所以一切正常。

要将存根服务注入您的助手，您需要创建一个替换服务对象。然后使用 Ember.getOwner 以与原始服务相同的名称注册存根，并渲染出您的组件：

let spotifyService = Ember.Service.extend({ spotifyInfo: undefined });

Ember.owner.register('service:spotify-service', spotifyService);

this.render(hbs`{{spotify-song}}`);

然后您的助手将注入此存根服务，您可以使用它来更改其行为以根据需要进行测试。

Ember 测试具有使用服务的助手的组件

Ember testing components that have helpers that use services

testing

ember.js

ember-cli

更多详情