angular 2 - 具有injectToken依赖关系的模拟组件

Question

我试图在其中包含子组件的组件中进行一些测试:

这是父组件模板:

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

当我尝试测试父组件时,这个snackbar组件给我带来了问题:snackbar组件与injectToken有一个依赖关系,用于将组件所需的appConfig(一些常量)传递给组件.appConfig注入了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组件依赖时,它失败,因为它无法找到injectToken依赖项的提供程序.

我想解决这个问题的一个正确的方法是嘲笑零食吧组件,我没有发现任何有效的方法.

任何帮助,将不胜感激.谢谢

Answer 1

I guess your app.config looks something like this as described in 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');

In order to add a provider for this, you should add a provider in NgModule like this:

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

...
...

{ provide: APP_CONFIG, useValue: APP_DI_CONFIG },

And in your unit test you can do this in order to mock the config:

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

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

{ provide: APP_CONFIG, useValue: mockConfig },