使用Font Awesome Icons Module测试组件

Question

我目前正在Angular 6项目中工作，我已经使用Fort-awesome模块导入了几个新的字体 - 令人敬畏的5个图标。

正如预期的那样，现在由于无法在我的页面中呈现fa-icon选择器，我的一些单元测试（Karma + Jasmine）将无法通过。

我知道我可以在TestBed中为每个组件使用CUSTOM_ELEMENTS_SCHEMA但我不知道如果这样做我可能有其他副作用会使我的单元测试不太可靠（即其他子组件可能会停止测试）。

另一种选择是在每个必需的单元测试中简单地导入模块，并在每个单元测试中，还添加带有所需图标的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(...)指定模块/组件中使用的所有字体真棒图标。