angular - 使用 Font Awesome Icons 模块测试组件

Question

我目前正在从事 Angular 6 项目，在该项目中，我使用 Angular 的 Fort-awesome 模块导入了几个新的 font-awesome 5 图标。

正如预期的那样，现在通过这样做，我的一些单元测试(Karma + Jasmine)将无法通过，因为无法在我的页面中呈现 fa-icon 选择器。

我知道我可以在 TestBed 中为每个组件使用 CUSTOM_ELEMENTS_SCHEMA，但我不知道这样做是否可能会产生其他副作用，从而使我的单元测试不太可靠(即其他子组件可能会停止运行)已测试)。

另一种选择是简单地在每个所需的单元测试中导入模块，并在每个测试中添加带有所需图标的library.add()。不过，我确实认为这最终可能会很乏味，因为根据应用程序的类型，可能会有 20 到 50 个图标。

我也想过，但还没有尝试过，为图标添加一个 stub 模块，所以我只是“忽略”它们。我认为这可能是合理的，但不确定在这种情况下最佳实践是什么。

下面是我在 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 代码即可图标。