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

发布时间：2020-12-17 07:16:04 所属栏目：安全来源：网络整理

导读：我试图在其中包含子组件的组件中进行一些测试：这是父组件模板： header/headersnackbar/snackbar 当我尝试测试父组件时,这个snackbar组件给我带来了问题：snackbar组件与injectToken有一个依赖关系,用于将组件所需的appConfig(一些常量)传递给组件. appCon

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

这是父组件模板：

<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依赖项的提供程序.

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

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

解决方法

我想你的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中添加提供程序,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 },

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!