Added test for AsyncPipe and warning that missing icon will become an…

… error

Closes #50

src/lib/icon/icon.component.spec.ts

@@ -1,9 +1,10 @@
 import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
 import { ComponentFixture, inject } from '@angular/core/testing';
-
-import { library } from '@fortawesome/fontawesome-svg-core';
+import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
 import { faUser as faUserRegular } from '@fortawesome/free-regular-svg-icons';
-import { faUser } from '@fortawesome/free-solid-svg-icons';
+import { faCircle, faUser } from '@fortawesome/free-solid-svg-icons';
+import { Subject } from 'rxjs';
+import { startWith } from 'rxjs/operators';
 import { initTest, queryByCss } from '../../testing/helpers';
 import { FaIconComponent } from './icon.component';
 import { FaIconService } from './icon.service';
@@ -105,6 +106,48 @@ describe('FaIconComponent', () => {
     expect(queryByCss(fixture, 'svg').getAttribute('role')).toBe('presentation');
   });
 
+  it('should show a warning when icon attribute is missing', () => {
+    @Component({
+      selector: 'fa-host',
+      template: '<fa-icon [icon]="undefined"></fa-icon>'
+    })
+    class HostComponent {
+    }
+
+    const spy = spyOn(console, 'error');
+
+    const fixture = initTest(HostComponent);
+    fixture.detectChanges();
+    expect(queryByCss(fixture, 'svg')).toBeTruthy();
+    expect(queryByCss(fixture, 'svg > path')).toBeFalsy();
+    expect(spy).toHaveBeenCalledWith(
+      'FontAwesome: Property `icon` is required for `fa-icon`/`fa-duotone-icon` components. ' +
+      'This warning will become a hard error in 0.6.0.'
+    );
+  });
+
+  it('should work with AsyncPipe and default value', () => {
+    @Component({
+      selector: 'fa-host',
+      template: '<fa-icon [icon]="icon | async"></fa-icon>'
+    })
+    class HostComponent {
+      iconSubject = new Subject<IconProp>();
+
+      icon = this.iconSubject.pipe(startWith(faCircle));
+    }
+
+    const spy = spyOn(console, 'error');
+
+    const fixture = initTest(HostComponent);
+    fixture.detectChanges();
+    expect(queryByCss(fixture, '.fa-circle')).toBeTruthy();
+    fixture.componentInstance.iconSubject.next(faUser);
+    fixture.detectChanges();
+    expect(queryByCss(fixture, '.fa-user')).toBeTruthy();
+    expect(spy).not.toHaveBeenCalledWith();
+  });
+
   describe('custom service configuration', () => {
 
     let fixture: ComponentFixture<HostComponent>;

src/lib/icon/icon.component.ts

@@ -82,6 +82,10 @@ export class FaIconComponent implements OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
+    if (this.icon == null) {
+      faWarnIfIconSpecMissing();
+    }
+
     if (changes) {
       const normalizedIcon = this.normalizeIcon();
       const params = this.buildParams();
@@ -137,7 +141,6 @@ export class FaIconComponent implements OnChanges {
   private renderIcon(iconLookup: IconLookup, params: IconParams) {
     const renderedIcon = icon(iconLookup, params);
 
-    faWarnIfIconSpecMissing(iconLookup);
     faWarnIfIconHtmlMissing(renderedIcon, iconLookup);
 
     this.renderedIconHTML = this.sanitizer.bypassSecurityTrustHtml(

src/lib/shared/errors/warn-if-icon-html-missing.ts

@@ -2,6 +2,9 @@ import { Icon, IconLookup } from '@fortawesome/fontawesome-svg-core';
 
 export const faWarnIfIconHtmlMissing = (iconObj: Icon, iconSpec: IconLookup) => {
   if (iconSpec && !iconObj) {
-    console.error(`FontAwesome: Could not find icon with iconName=${iconSpec.iconName} and prefix=${iconSpec.prefix}`);
+    console.error(
+      `FontAwesome: Could not find icon with iconName=${iconSpec.iconName} and prefix=${iconSpec.prefix}. ` +
+      `This warning will become a hard error in 0.6.0.`
+    );
   }
 };

src/lib/shared/errors/warn-if-icon-spec-missing.ts

@@ -1,8 +1,4 @@
-import { IconLookup } from '@fortawesome/fontawesome-svg-core';
-
-export const faWarnIfIconSpecMissing = (iconSpec: IconLookup) => {
-  if (!iconSpec) {
-    console.error('FontAwesome: Could not find icon. ' +
-      `It looks like you've provided a null or undefined icon object to this component.`);
-  }
+export const faWarnIfIconSpecMissing = () => {
+  console.error('FontAwesome: Property `icon` is required for `fa-icon`/`fa-duotone-icon` components. ' +
+    `This warning will become a hard error in 0.6.0.`);
 };

src/testing/helpers.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import { Type } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
@@ -13,6 +14,9 @@ import { FaStackComponent } from '../lib/stack/stack.component';
 
 export function initTest<T>(component: Type<T>, providers?: any[]): ComponentFixture<T> {
   TestBed.configureTestingModule({
+    imports: [
+      CommonModule,
+    ],
     declarations: [
       FaIconComponent,
       FaDuotoneIconComponent,