angular 2 - 具有 injectionToken 依赖性的模拟组件

Question

我正在尝试在一个包含子组件的组件中进行一些测试:

这是父组件模板:

<header></header>
<snackbar></snackbar>

当我尝试测试父组件时，这个“snackbar”组件给我带来了问题:“snackbar”组件与 injectionToken 有依赖关系，用于传递给组件组件需要的 appConfig(一些常量)。 appConfig 像这样注入(inject)到“snackbar”组件中:

import { APP_CONFIG, AppConfig } from '../../../../app.config';

export class SnackbarComponent implements OnInit {

  private config: MdSnackBarConfig;

  constructor(
    @Inject(APP_CONFIG) config: AppConfig
  ) {
    let snackBarConfig = new MdSnackBarConfig();
    this.config = snackBarConfig;
  }
}

父组件测试良好，但当尝试解决“snackbar”组件依赖时它失败了，因为它无法找到 injectionToken 依赖的提供者。

我想解决这个问题的正确方法是模拟“snackbar”组件，遗憾的是我还没有找到任何可行的方法。

Answer 1

我猜你的 app.config 看起来像 Angular tutorial: 中描述的这样

import { InjectionToken } from '@angular/core';

export interface IAppConfig {
  smartTable: {
    widthColumnNumber: string;
    widthColumnPercentage: string;
  };
}

export const APP_DI_CONFIG: IAppConfig = {
  smartTable: {
    widthColumnNumber: '5rem',
    widthColumnPercentage: '10rem',
  },
};

export let APP_CONFIG = new InjectionToken<IAppConfig>('app.config');

为了为此添加一个提供者，您应该像这样在 NgModule 中添加一个提供者:

import { APP_CONFIG, APP_DI_CONFIG } from '../../app.config';

...
...

{ provide: APP_CONFIG, useValue: APP_DI_CONFIG },

在你的单元测试中你可以这样做来模拟配置:

import { APP_CONFIG } from '../../app.config';

...
let mockConfig = {};
...

{ provide: APP_CONFIG, useValue: mockConfig },