如何在单元测试中通过 MatIconRegistry 添加 svg 文件?

问题描述

我目前正在我的 Angular 应用程序中实施单元测试".但是，如果我运行它们，我会收到多个类似于此的警告/错误:'Error retrieving icon: Unable to find icon with name ":myIcon"'.我怀疑这可能是由于未将 svg 添加到我的 MatIconRegistry 造成的.我通常在我的 AppComponent 中这样做，如下所示:

I'm currently implementing 'unit testing' in my angular application. However, if I run them, I receive multiple warnings/errors similar to this one: 'Error retrieving icon: Unable to find icon with the name ":myIcon"'. I suspect it might be caused by not adding the svgs to my MatIconRegistry. I usually do this in my AppComponent, like so:

constuctor(private iconRegistry: MatIconRegistry,
           private sanitizer: DomSanitizer,
           ...) {
        iconRegistry.addSvgIcon('myIcon', sanitizer.bypassSecurityTrustResourceUrl('./assets/icons/myIcon.svg'));
}

如果我运行另一个组件的单元测试，这将不会执行，因此不会将我的 svg 添加到注册表中.我已经尝试将其添加到相应组件的 .spec 文件中，如下所示:

If I run a unit test of another component though, this will not execute and thus not add my svg to the registry. I already tried adding it in my .spec file of the corresponding component, like so:

fdescribe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let iconRegistry;
  let sanitizer;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        ...
      ],
      imports: [
        ...
      ],
      providers: [
        ...
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    iconRegistry = TestBed.get(MatIconRegistry);
    sanitizer = TestBed.get(DomSanitizer);
    iconRegistry.addSvgIcon('myIcon', sanitizer.bypassSecurityTrustResourceUrl('./../../assets/icons/myIcon.svg'));
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create component', () => {
    expect(component).toBeTruthy();
  });
});

如果我运行它，它就不起作用.它只是返回一条不同的错误消息:

If I run this, it doesn't work. It just returns a different error message:

Error retrieving icon: <svg> tag not found

我最初的想法是我在路径上犯了一个错误，但在尝试了其他各种路径后我确定不是这样.

My initial thought was that I have made a mistake in the path, but after trying various other paths I'm sure thats not the case.

有谁知道如何解决这个问题?或者也许有更好的方法来做到这一点，因为我必须在我正在测试的每个组件中添加我的 svg 图标，这有点多余.

Does anyone know how do solve this problem? Or maybe there is a better way doing this, since I would have to add my svg icon in every component I'm testing, which would be kinda redundant.

推荐答案

在单元测试顶部使用以下组件模拟 mat-icon 选择器

Mock the mat-icon selector with the following component at the top of the unit test

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

然后在单元测试中覆盖MatIconModule如下

Then override the MatIconModule in the unit test as follows

beforeEach(() => {
    TestBed.configureTestingModule({
        declarations: [ ...],
        providers: [ ...  ],
        imports: [ MatIconModule, NoopAnimationsModule ]
    })
    .overrideModule(MatIconModule, {
    remove: {
       declarations: [MatIcon],
       exports: [MatIcon]
    },
    add: {
        declarations: [MockMatIconComponent],
        exports: [MockMatIconComponent]
   }
   })
  .compileComponents();

运行单元测试时，您将不再遇到 'Error retrieving icon: Unable to find icon with the name ":myIcon"' 问题

You will no longer have the 'Error retrieving icon: Unable to find icon with the name ":myIcon"' issue when running the unit tests

这篇关于如何在单元测试中通过 MatIconRegistry 添加 svg 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！