Как добавить файлы SVG через MatIconRegistry в модульных тестах?

Question

В настоящее время я использую модульное тестирование в своем угловом приложении. Однако, если я их запускаю, я получаю несколько предупреждений / ошибок, подобных этой: '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

Смоделируйте селектор mat-icon со следующим компонентом в верхней части модульного теста

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

    selector: 'mat-icon',
    template: '<span></span>'
})

Затем переопределите MatIconModule в модульном тесте следующим образом

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"' при запуске модульных тестов