Тестирование компонентов с помощью модуля Font Awesome Icons

Question

В настоящее время я работаю в проекте Angular 6, где я импортировал несколько новых значков font-awesome 5, используя модуль Fort-awesome для angular.

Как и ожидалось, теперь некоторые из моих юнит-тестов (Карма + Жасмин) не пройдут из-за невозможности отобразить селекторы fa-icon на моих страницах.

Я понимаю, что мог бы использовать CUSTOM_ELEMENTS_SCHEMA в TestBed для каждого компонента, но я не знаю, если при этом у меня могут возникнуть другие побочные эффекты, которые сделают мои модульные тесты менее надежными (то есть другие подкомпоненты могут перестать быть проверено).

Другой вариант - просто импортировать модуль в каждом из необходимых модульных тестов, а в каждом из них также добавить library.add () с необходимыми значками. Однако я считаю, что это может оказаться утомительным, поскольку в зависимости от типа приложения может быть от 20 до 50 значков.

Я также подумал, но еще не пытался добавить модуль-заглушку для значков, поэтому я просто «игнорирую» их. Я думаю, что это может быть разумно, но я не уверен, какой будет наилучшая практика в этом случае.

Ниже приведена выдержка из моего импорта в App.Module

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faLock, faHourglassHalf, faLockOpen } from '@fortawesome/free-solid-svg-icons';

А в конструкторе

export class AppModule {
  constructor() {
    library.add(
      faHourglassHalf, // Task in progress
      faLockOpen, // Archive task
      faLock
    );
  }
} 

Полный репо здесь: https://github.com/Narshe1412/Code-Institute-Interactive-Frontend-Project/tree/taskman

Поскольку я знаю, что это не дискуссионный форум, я бы просто спросил:

• Каковы побочные эффекты использования CUSTOM_ELEMENTS_SCHEMA в этом случае использования и, если при использовании этого вопроса возникает проблема с надежностью, какой из двух других вариантов будет предпочтительнее?

Answer 1

Я просто хотел бы выбросить «третий» вариант. Это тот подход, который я и моя команда использовали и предпочитаем.

Модуль вводит модуль FontAwesomeModule.

import { NgModule } from '@angular/core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FontAwesomeModule
  ],
  exports: [
    FontAwesomeModule
  ]
})

export class AppModule { }

Компонент, который на самом деле использует потрясающие иконки шрифта, импортирует только те иконки, о которых ему нужно знать.

import {
  Component
} from '@angular/core';

import { faLock } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-fa-example',
  template: '<fa-icon [icon]="faLock"></fa-icon>'
})
export class AppComponent {
  faLock = faLock;
}

Затем в наших *.spec.ts файлах мы имеем следующую настройку:

TestBed.configureTestingModule({
  imports: [
    AppModule
  ]
})
.compileComponents();

Поскольку FontAwesomeModule экспортируется в AppModule, он будет доступен для тестирования здесь через импорт AppModule. Поскольку значки импортируются явно в компоненте, нет необходимости library.add(...) здесь также указывать все великолепные значки шрифта, используемые в модуле / компоненте.