Encountering problem with Karma, Angular 7, and FontAwesome: Unable to attach 'icon' property to 'fa-icon' as it is not recognized

An issue arises when attempting to bind to 'icon' since it is not recognized as a property of 'fa-icon'.

During the execution of this test within people.component.spec.ts

import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { PeopleComponent } from "./people.component";



describe("PeopleComponent Unit Test", () => {
  let component: PeopleComponent;
  let fixture: ComponentFixture<PeopleComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [PeopleComponent]
    })
      .compileComponents();
  }));


  beforeEach(() => {
    fixture = TestBed.createComponent(PeopleComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });


  it("should create", () => {
    expect(component).toBeTruthy();
  });
  ;
}) 

The test runner displays the following error message:

Failed: Template parse errors: Can't bind to 'icon' since it isn't a known property of 'fa-icon'.

  1. If 'fa-icon' is an Angular component and it has an 'icon' input, ensure it is part of this module.
  2. If 'fa-icon' is a Web Component, include 'CUSTOM_ELEMENTS_SCHEMA' in the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property, add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. Here is the HTML causing the issue.

https://i.sstatic.net/KHhKd.png

I have attempted to import FontAwesomeModule and FaIcon on the test side and added them to the TestBed configuration's imports statement. I have also made sure that the component side includes the necessary imports. However, none of these attempts have resolved the issue.

Answer №1

After some troubleshooting, I figured out the solution: correct usage of declarations, providers, and imports in configureTestingModule is crucial. By setting them up correctly, such as including the appmodel provider as shown below, even the styling appeared in the Jasmine test.

import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { PeopleComponent } from "./people.component";
import { FaIconComponent } from "@fortawesome/angular-fontawesome";
import { DisplayNamePipe } from "src/app/extensions/pipes.format.person.display-name";
import { RouterModule } from "@angular/router";
import { SSNFormatPipe } from "src/app/extensions/pipes.format.ssn";
import { AppModule } from "src/app/app.module"; 
import { RestangularModule } from "ngx-restangular";

describe("PeopleComponent", () => {
  let component: PeopleComponent;
  let fixture: ComponentFixture<PeopleComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [PeopleComponent, FaIconComponent, DisplayNamePipe, SSNFormatPipe ],
      providers: [AppModule],
      imports:[ RestangularModule.forRoot(), RouterModule.forRoot([])]
    })
      .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(PeopleComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it("should create", () => {
    expect(component).toBeTruthy();
  });
  ;
}) 

This experience emphasized the importance of accurately configuring the module to mirror the functionality of the Angular 7 application in order to ensure that the test accurately reflects the front-end rendering, routes, Icons, and Pipes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Make the if statement easier - Angular

Would you like to know a more efficient way to streamline this If statement? The variables are all strings and are reused in both conditions, but the outcome varies depending on whether it returns true or false. if(params.province && !params.str ...

What is the best way to extract data from API console output using Angular?

Currently, I am deeply involved in a full stack project utilizing asp.net and angularjs. My goal is to extract output response from the Swagger API. You can view the code I've written for this purpose here: (https://i.stack.imgur.com/vLyIE.png) The A ...

Extract values from an object using Typescript

Here is my JavaScript code: const { a, b, c } = { a : "hello", b : "stackoverflow", c : "it's greate" }; I am interested in converting this to TypeScript. Is there any solution for this? ...

When utilizing a [ngSwitch] with the toolbar (md-toolbar) in Angular2, the buttons fail to load correctly

I am currently designing a toolbar that includes a menu button using the following code: <md-toolbar class="header"> <div class="header-wrapper m-x-30 clearfix"> <div class="logo-container"> <div class="logo-image align-middle" ...

Having trouble executing a click action on a toggle button in Selenium using C#projec

While attempting to automate my application, I encountered a webpage with three toggle buttons that needed to be selected. Here is the HTML code: <div class="row"> <div class="col-md-12 "> ...

Requires the refreshing of an Angular component without altering any @Input properties

Currently delving into the world of Angular (along with Typescript). I've put together a small application consisting of two components. This app is designed to help track work hours (yes, I am aware there are commercial products available for this pu ...

Having trouble displaying nested routes in Angular within the view

I'm encountering some issues with child/nested routes in Angular 4. In the app.module.ts file, my imports statement looks like this: RouterModule.forRoot([ { path: 'templates', component: TemplateLandingC ...

Angular conditional operator: running a series of statements

Let's break down the logic: When the enter key is pressed, we want to execute the following conditional statement: if (!elementB.isOpen) { elementB.open(); } else { elementC.open(); elementC.focus(); elementB.close(); } I attempted ...

What is the reason for not requiring checks with Union Types when utilizing a variable, yet necessitating them within a function?

Currently working on some Typescript challenges and encountered a scenario involving a union type. In this example, the function getIstanbulPostalCode is declared to return either a string or a number: function getIstanbulPostalCode(): string | number { ...

The condition in a Typescript function that checks for strings will never evaluate to true

I encountered a strange issue with a TypeScript condition in a function. Here is my current code, where the parameters are passed from outside: getLevel(validation: string, status: string): string { let card = ""; if (validation == &qu ...

Component's mocking service is being ignored

I am currently exploring how to simulate a service (specifically one that makes http calls) in order to test a component. @Component({ selector: 'ub-funding-plan', templateUrl: './funding-plan.component.html', styleUrls: ['. ...

Why does my export function get executed every time the TextInput changes?

Hey there, here is my React and TypeScript code. I'm wondering why the console.log statement gets called every time my text field changes... export default function TabOneScreen({ navigation, }) { const [out_1, set_out1] = useState('' ...

Unable to retrieve func from PropTypes

Struggling to understand why this specific import, among others, is not functioning properly: import * as React from 'react'; import TextField from '@material-ui/core/TextField'; import * as PropTypes from 'prop-types'; impor ...

OneGraph and Graphql Codegen produce enums with numerical representations

After migrating my project's codebase from using the direct Headless Wordpress GraphQL endpoint to OneGraph for Google+Facebook Business support, I encountered an error related to apollo referencing the output codegen. Here is the specific error messa ...

Encountering a 403 status code from the Spotify Web API while attempting to retrieve data using an OAuth 2.0 Token

I'm currently experimenting with the Spotify Web API and attempting to retrieve my most played songs. To obtain an access token for making requests, I am utilizing the client credentials OAuth flow. While I have successfully obtained the access token, ...

Exploring Typescript code through a practical example with reference to Uniswap's implementation

On the Uniswap website, I came across some code on the Swap page that caught my attention. You can find the code snippet in question at line 115 of the Uniswap GitHub repository. const { trade: { state: tradeState, trade }, allowedSlippage, cur ...

Tips for troubleshooting an error in ionic when compiling a template

Hello, I'm currently working on my first app but encountered an error during the extraction process. ? Starter template: my-first-app √ Preparing directory .\testarashelia - done! > git.exe clone https://github.com/ionic-team/photo-gallery- ...

Any ideas on how to fix the issue of 'type' property being absent in 'AsyncThunkAction' with Redux Toolkit while working with TypeScript?

While working with Redux Toolkit and the thunk/slice below, I decided to handle errors locally instead of setting them in state. To achieve this, I followed the example provided here. Although I could have set an error in the state, I wanted to explore wh ...

Error in Angular: The type 'Response' is not generic

Currently, I am attempting to extract a nested array from an HTTP response with Angular 14 getItems(): Observable<Item[]> { return this._httpClient.get<Item[]>(this.apiUrl + 'items').pipe( tap((items) => { t ...

Utilize the identical element

Incorporating the JwPaginationComponent into both my auction.component and auctiongroup.component has become a necessity. To achieve this, I have created a shared.module.ts: import { NgModule } from '@angular/core'; import { JwPaginationCompon ...