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

Question

我目前正在我的 Angular 应用程序中实现“单元测试”。但是，如果我运行它们，我会收到多个类似于此的警告/错误:'Error retrieving icon: Unable to find icon with the name ":myIcon"'。我怀疑这可能是由于未将 svgs 添加到我的 MatIconRegistry 引起的。我通常在我的 AppComponent 中这样做，就像这样:

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

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

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();
  });
});

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

Error retrieving icon: <svg> tag not found

我最初的想法是我在路径上犯了错误，但在尝试了各种其他路径后我确定情况并非如此。

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

Answer 1

可以做到:

...
import { MatIcon } from '@angular/material/icon';
import { MatIconTestingModule } from '@angular/material/icon/testing';

describe('MyComponent', () => {
  ...

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent, MatIcon],
      imports: [MatIconTestingModule],
    }).compileComponents();
  }));

...

});

这将生成一个没有 http 请求的测试图标渲染