unit-testing - 是否可以模拟用于单元测试的自定义 Angular 2 Material SVG 图标？

Question

在我的应用程序的根组件中，我正在为 md-icon 定义自定义 SVG 图标.在对显示自定义图标的组件进行单元测试时，出现错误。似乎该错误可能是由于我的根组件在我的子单元测试中没有被使用/初始化。

在设置测试模块时，有没有办法模拟或添加这些自定义图标(或 md-icon)？我只是在我正在测试的组件中定义图标，但我知道其他组件也需要它们。

错误:

Uncaught Error: Error in ./CustomerComponent class CustomerComponent - inline template:34:19 caused by: __WEBPACK_IMPORTED_MODULE_4_rxjs_Observable__.Observable.throw is not a function

完整错误:

从模板中删除自定义图标可解决该错误。

我的模板使用这样的自定义图标:

<md-icon svgIcon="vip">vip</md-icon>

根组件像这样初始化图标:

this.iconRegistry.addSvgIcon(
    'vip',
    this.sanitizer.bypassSecurityTrustResourceUrl('assets/icons/vip.svg') as string,
);

我这样设置测试组件:

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [
            SharedModule,
            CoreModule,
            FormsModule,
            ReactiveFormsModule,
        ],
        providers: [
            {
                provide: Router,
                useClass: class {
                    navigate = jasmine.createSpy('navigate');
                },
            },
            {
                provide: ActivatedRoute,
                useValue: {
                    data: {
                        subscribe: (fn: (value: Data) => void) => fn({
                            customer: CUSTOMER,
                            company: COMPANY,
                        }),
                    },
                },
            },
            {
                provide: UtilityService,
                useClass: UtilityServiceMock,
            },
            // etc...
        ],
        declarations: [
            CustomerComponent,
        ],
        schemas: [
            CUSTOM_ELEMENTS_SCHEMA,
        ],
    })
    .compileComponents();
}));

版本

Angular 2.3.0

Material 2.0.0-beta.1

Answer 1

我能够使用 overrideModule stub 方法MdIcon .文档很少，但我能找到 GitHub issue Angular 团队成员讨论如何覆盖声明。想法是从 MdIconModule 中删除组件这样我们就可以声明我们自己的模拟图标组件。

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ TestedComponent ],
      imports: [
        RouterTestingModule.withRoutes([]),
        SharedModule,
      ],
    })
    .overrideModule(MdIconModule, {
      remove: {
        declarations: [MdIcon],
        exports: [MdIcon]
      },
      add: {
        declarations: [MockMdIconComponent],
        exports: [MockMdIconComponent]
      }
    })
    .compileComponents();
  }));

MockMdIconComponent定义很简单

@Component({
  selector: 'md-icon',
  template: '<span></span>'
})
class MockMdIconComponent {
  @Input() svgIcon: any;
  @Input() fontSet: any;
  @Input() fontIcon: any;
}

我使用这种方法是因为我没有单独导入 Material 模块，并且我不希望我的测试必须进行 Http 调用来获取 svg 图标。 MockMdIconComponent可以在测试模块中声明，但我选择在模块覆盖中声明/导出它，以便我可以将对象提取到测试助手中。