Reduce boilerplate in tests using direct component creation with bindings (#478)

Author: medbenmakhlouf

package.json

@@ -30,21 +30,21 @@
   "homepage": "https://github.com/FortAwesome/angular-fontawesome",
   "devDependencies": {
     "@angular-devkit/build-angular": "patch:@angular-devkit/build-angular@npm%3A20.0.0#~/.yarn/patches/@angular-devkit-build-angular-npm-19.0.0-131974ef98.patch",
-    "@angular-devkit/core": "^20.0.0",
-    "@angular-devkit/schematics": "^20.0.0",
-    "@angular/animations": "^20.0.0",
-    "@angular/build": "^20.0.0",
-    "@angular/cli": "^20.0.0",
-    "@angular/common": "^20.0.0",
-    "@angular/compiler": "^20.0.0",
-    "@angular/compiler-cli": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@angular/language-service": "^20.0.0",
-    "@angular/platform-browser": "^20.0.0",
-    "@angular/platform-browser-dynamic": "^20.0.0",
-    "@angular/platform-server": "^20.0.0",
-    "@angular/router": "^20.0.0",
-    "@angular/ssr": "^20.0.0",
+    "@angular-devkit/core": "^20.3.1",
+    "@angular-devkit/schematics": "^20.3.1",
+    "@angular/animations": "^20.3.0",
+    "@angular/build": "^20.3.1",
+    "@angular/cli": "^20.3.1",
+    "@angular/common": "^20.3.0",
+    "@angular/compiler": "^20.3.0",
+    "@angular/compiler-cli": "^20.3.0",
+    "@angular/core": "^20.3.0",
+    "@angular/language-service": "^20.3.0",
+    "@angular/platform-browser": "^20.3.0",
+    "@angular/platform-browser-dynamic": "^20.3.0",
+    "@angular/platform-server": "^20.3.0",
+    "@angular/router": "^20.3.0",
+    "@angular/ssr": "^20.3.1",
     "@fortawesome/free-regular-svg-icons": "^7.0.0",
     "@fortawesome/free-solid-svg-icons": "^7.0.0",
     "@types/express": "^4.17.21",

projects/demo/src/main.server.ts

@@ -1,7 +1,7 @@
-import { bootstrapApplication } from '@angular/platform-browser';
+import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { config } from './app/app.config.server';
 
-const bootstrap = () => bootstrapApplication(AppComponent, config);
+const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, config, context);
 
 export default bootstrap;

projects/schematics/src/ng-add/index.spec.ts

@@ -7,7 +7,7 @@ import { angularFontawesomeVersion, iconPackVersionMap } from './versions';
 const collectionPath = path.join(__dirname, '../collection.json');
 
 describe('ng-add', () => {
-  it('adds v6 dependencies to package.json', async () => {
+  it('adds v7 dependencies to package.json', async () => {
     const { runner, appTree } = await setup();
 
     const tree = await runner.runSchematic<Schema>('ng-add', { project: 'test-app' }, appTree);
@@ -17,6 +17,20 @@ describe('ng-add', () => {
 
     const dependencies = packageJson.dependencies;
 
+    expect(dependencies['@fortawesome/free-solid-svg-icons']).toBe(iconPackVersionMap['7'].iconPackVersion);
+    expect(dependencies['@fortawesome/angular-fontawesome']).toBe(angularFontawesomeVersion);
+  });
+
+  it('adds v6 dependencies to package.json', async () => {
+    const { runner, appTree } = await setup();
+
+    const tree = await runner.runSchematic<Schema>('ng-add', { project: 'test-app', version: '6' }, appTree);
+
+    const packageJson = JSON.parse(tree.readContent('package.json'));
+    expect(packageJson.dependencies).toBeDefined();
+
+    const dependencies = packageJson.dependencies;
+
     expect(dependencies['@fortawesome/free-solid-svg-icons']).toBe(iconPackVersionMap['6'].iconPackVersion);
     expect(dependencies['@fortawesome/angular-fontawesome']).toBe(angularFontawesomeVersion);
   });

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

@@ -1,110 +1,60 @@
-import { Component, signal, viewChild, ViewContainerRef } from '@angular/core';
+import { Component, inputBinding, viewChild, ViewContainerRef } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
 import { faUser } from '@fortawesome/free-solid-svg-icons';
-import { faDummy, initTest, queryByCss } from '../../testing/helpers';
+import { faDummy, queryByCss } from '../../testing/helpers';
 import { FaDuotoneIconComponent } from './duotone-icon.component';
 
 describe('FaDuotoneIconComponent', () => {
   it('should render the duotone icon', () => {
-    @Component({
-      selector: 'fa-host',
-      standalone: false,
-      template: '<fa-duotone-icon [icon]="faDummy()" />',
-    })
-    class HostComponent {
-      faDummy = signal(faDummy);
-    }
-
-    const fixture = initTest(HostComponent);
+    const fixture = TestBed.createComponent(FaDuotoneIconComponent, {
+      bindings: [inputBinding('icon', () => faDummy)],
+    });
     fixture.detectChanges();
     expect(queryByCss(fixture, 'svg')).toBeTruthy();
   });
 
   it('should allow to swap opacity of the layers', () => {
-    @Component({
-      selector: 'fa-host',
-      standalone: false,
-      template: '<fa-duotone-icon [icon]="faDummy()" [swapOpacity]="true" />',
-    })
-    class HostComponent {
-      faDummy = signal(faDummy);
-    }
-
-    const fixture = initTest(HostComponent);
+    const fixture = TestBed.createComponent(FaDuotoneIconComponent, {
+      bindings: [inputBinding('icon', () => faDummy), inputBinding('swapOpacity', () => true)],
+    });
     fixture.detectChanges();
     expect(queryByCss(fixture, 'svg').classList.contains('fa-swap-opacity')).toBeTruthy();
   });
 
   it('should allow to customize opacity of the primary layer', () => {
-    @Component({
-      selector: 'fa-host',
-      standalone: false,
-      template: '<fa-duotone-icon [icon]="faDummy()" [primaryOpacity]="0.1" />',
-    })
-    class HostComponent {
-      faDummy = signal(faDummy);
-    }
-
-    const fixture = initTest(HostComponent);
+    const fixture = TestBed.createComponent(FaDuotoneIconComponent, {
+      bindings: [inputBinding('icon', () => faDummy), inputBinding('primaryOpacity', () => 0.1)],
+    });
     fixture.detectChanges();
     expect(queryByCss(fixture, 'svg').style.getPropertyValue('--fa-primary-opacity')).toBe('0.1');
   });
 
   it('should allow to customize opacity of the secondary layer', () => {
-    @Component({
-      selector: 'fa-host',
-      standalone: false,
-      template: '<fa-duotone-icon [icon]="faDummy()" [secondaryOpacity]="0.9" />',
-    })
-    class HostComponent {
-      faDummy = signal(faDummy);
-    }
-
-    const fixture = initTest(HostComponent);
+    const fixture = TestBed.createComponent(FaDuotoneIconComponent, {
+      bindings: [inputBinding('icon', () => faDummy), inputBinding('secondaryOpacity', () => 0.9)],
+    });
     fixture.detectChanges();
     expect(queryByCss(fixture, 'svg').style.getPropertyValue('--fa-secondary-opacity')).toBe('0.9');
   });
 
   it('should allow to customize color of the primary layer', () => {
-    @Component({
-      selector: 'fa-host',
-      standalone: false,
-      template: '<fa-duotone-icon [icon]="faDummy()" primaryColor="red" />',
-    })
-    class HostComponent {
-      faDummy = signal(faDummy);
-    }
-
-    const fixture = initTest(HostComponent);
+    const fixture = TestBed.createComponent(FaDuotoneIconComponent, {
+      bindings: [inputBinding('icon', () => faDummy), inputBinding('primaryColor', () => 'red')],
+    });
     fixture.detectChanges();
     expect(queryByCss(fixture, 'svg').style.getPropertyValue('--fa-primary-color')).toBe('red');
   });
 
   it('should allow to customize color of the secondary layer', () => {
-    @Component({
-      selector: 'fa-host',
-      standalone: false,
-      template: '<fa-duotone-icon [icon]="faDummy()" secondaryColor="red" />',
-    })
-    class HostComponent {
-      faDummy = signal(faDummy);
-    }
-
-    const fixture = initTest(HostComponent);
+    const fixture = TestBed.createComponent(FaDuotoneIconComponent, {
+      bindings: [inputBinding('icon', () => faDummy), inputBinding('secondaryColor', () => 'red')],
+    });
     fixture.detectChanges();
     expect(queryByCss(fixture, 'svg').style.getPropertyValue('--fa-secondary-color')).toBe('red');
   });
 
   it('should throw if specified icon is not a Duotone icon', () => {
-    @Component({
-      selector: 'fa-host',
-      standalone: false,
-      template: '<fa-duotone-icon [icon]="faUser()" />',
-    })
-    class HostComponent {
-      faUser = signal(faUser);
-    }
-
-    const fixture = initTest(HostComponent);
+    const fixture = TestBed.createComponent(FaDuotoneIconComponent, { bindings: [inputBinding('icon', () => faUser)] });
     expect(() => fixture.detectChanges()).toThrow(
       new Error(
         'The specified icon does not appear to be a Duotone icon. ' +
@@ -117,7 +67,6 @@ describe('FaDuotoneIconComponent', () => {
   it('should be able to create component dynamically', () => {
     @Component({
       selector: 'fa-host',
-      standalone: false,
       template: '<ng-container #host></ng-container>',
     })
     class HostComponent {
@@ -129,7 +78,7 @@ describe('FaDuotoneIconComponent', () => {
       }
     }
 
-    const fixture = initTest(HostComponent);
+    const fixture = TestBed.createComponent(HostComponent);
     fixture.detectChanges();
     expect(queryByCss(fixture, 'svg')).toBeFalsy();