Styjun

I'm currently working in an Angular 6 project where I have imported several of the new font-awesome 5 icons using the Fort-awesome module for angular.

As expected, by doing so now some of my Unit Tests (Karma + Jasmine) won't pass due to not being able to render the fa-icon selectors in my pages.

I understand that I could use a CUSTOM_ELEMENTS_SCHEMA in the TestBed for each component but I don't know if by doing so I may have other side effects that would make my unit tests less reliable (i.e. other sub-components may stop being tested).

Another option is to simply import the module in each of the required unit tests, and in each of those, also add the library.add() with the required icons. I do think, however, this could end up being tedious as there may be between 20 and 50 icons depending on the type of application.

I've also thought, but haven't tried yet, to add a stub module for the icons, so I simply "ignore" them. I think this could be reasonable, but not sure what the best practice would be in this case.

Below an excerpt of my imports in 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';

And in the constructor

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

Full repo here: https://github.com/Narshe1412/Code-Institute-Interactive-Frontend-Project/tree/taskman

As I know this is not debate forum I would simply ask:

• What are the side effects of using CUSTOM_ELEMENTS_SCHEMA in this use case and, if reliability is an issue when using this, which of the other two options would be preferable?

I would just like to throw out a 'third' option. This is the approach that my team and I have been using and prefer.

The module brings in the FontAwesomeModule.

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

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

export class AppModule 

The component that actually uses the font awesome icons imports only the icons it needs to know about.

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;

Then in our *.spec.ts files, we have a setup like the following:

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

Since the FontAwesomeModule is exported in the AppModule it will be available to the test bed here through the AppModule import. Since the icons are being imported explicitly in the component, there is no need to library.add(...) here either specifying all of the font awesome icons used in the module/component.