Угловатый Насмешливый Матикон

#angular #unit-testing #angular-material #mat-icon

Вопрос:

КомпонентТоТест

 <span>test</span>
<mat-icon svgIcon='admin_configuration_detail'></mat-icon>
 

Поэтому у меня есть макет компонента, например

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

Итак, на моем испытательном стенде у меня есть

 TestBed.configureTestingModule({
      declarations: [
        MockMatIconComponent,
        ComponentToTest,
        ],
      imports: [],
      providers: [
        ],
    })
 

Но когда я пытаюсь запустить это, я получаю ошибки разбора шаблона: «значок мата» не является известным элементом: Ошибка
Я что-то здесь упускаю? Я уже объявил макет компонента в декларациях. Я знаю, что не импортирую MatIconModule, но я не хочу этого, так как хочу, чтобы мой макет был там. Я могу переопределить свои модули, но я хотел попробовать сделать это таким образом. Кто-нибудь может сказать мне, что здесь не так?

Ответ №1:

Лучше всего правильно имитировать модули / компоненты mat, используя библиотеку насмешек, например, ng-насмешки с угловыми материальными компонентами.

Тогда ваш тест может выглядеть так:

 beforeEach(() => MockBuilder(ComponentToTest, MatIconModule));

// ... tests