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

我猜您的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 },

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

1 个答案: