角度观众测试:目标组件级服务

Question

在我的Angular应用程序中，我有一个在组件级别提供的服务：

@Component({
selector: 'my-component',
templateUrl: './my.component.html',
providers: [MyService],
})
export class MyComponent implements OnInit, OnDestroy { ... }

我在我的Angular测试中使用了旁观者，我试图通过以下方式测试提供服务的组件：

const createComponent = createComponentFactory({
component: MyComponent,
providers: [
// ... other services ...
mockProvider(MyService),
],
// ...
});
// ...
const spectator = createComponent();
const myService = spectator.inject(MyService);

但每当我试图模拟myService上的东西时，它都不起作用：它似乎得到了MyService的全局实例，而不是MyService的组件级实例。

Answer 1

在测试中处理组件级提供的服务时，需要采取两个重要步骤。

1( 在测试中以组件级别提供它们

替换：

const createComponent = createComponentFactory({
component: MyComponent,
providers: [
// ... other services ...
mockProvider(MyService),
],
// ...
});
// ...
const spectator = createComponent();

带有：

const createComponent = createComponentFactory({
component: MyComponent,
providers: [
// ... other services ...
],
// ...
});
// ...
const spectator = createComponent({
mockProvider(MyService),
});

请注意，提供者不再在createComponentFactory中指定，而是在createComponent中指定。

2( 从组件注入器而不是全局注入器获取它们

spectator.inject()方法采用可选的第二个参数fromComponentInjector(即boolean(。

替换：

const myService = spectator.inject(MyService);

带有：

const myService = spectator.inject(MyService, true);