使用 Font Awesome 图标模块测试组件

Question

我目前正在一个 Angular 6 项目中工作，在那里我使用 Fort-awesome 模块导入了几个新的 font-awesome 5 图标。

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

我知道我可以在 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

我不喜欢其他解决方案，即使它们可能有效。对我来说，AppModule在单元测试中导入似乎不干净。

我的解决方案是将图标与其他东西分开，如下所述。这个解决方案有点像已经接受的答案，但在我看来更清晰：

import { NgModule } from '@angular/core';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faDownload, faUpload, faFileExport, faCircle, faChevronRight, faChevronDown, faPlus, faTimes } from '@fortawesome/free-solid-svg-icons';

@NgModule({
  imports: [ FontAwesomeModule ],
  exports: [ FontAwesomeModule ]
})
export class IconsModule {
  constructor(library: FaIconLibrary) {
    // add icons to the library for convenient access in other components
    library.addIcons(faDownload, faUpload, faFileExport, faCircle, faChevronRight, faChevronDown, faPlus, faTimes);
  }
}

然后在任何需要的地方导入 IconsModule，无论是在应用程序本身还是在测试中：

应用模块：

import { IconsModule } from './icons.module';

@NgModule({
  declarations: [...],
  imports: [
    ...
    IconsModule,
  ],
  bootstrap: [...]
})
export class AppModule {}

单元测试：

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

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

  ...

});

HTML：

<fa-icon icon="download"></fa-icon>

不错的副作用：如果您曾经将字体库从 Font Awesome 更改为其他内容，现在这将容易得多，因为您只需更改IconsModule图标的相应 HTML 代码。

Answer 2

您现在可以像这样使用 font-awesome 测试模块：

import {FontAwesomeTestingModule} from '@fortawesome/angular-fontawesome/testing';

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