carl-parrish / weather-channel

FCC code for the weather project
https://weather-project.sourcecodesamurai.com
0 stars 0 forks source link

Font awesome spinner isn't showing #3

Open carl-parrish opened 6 years ago

carl-parrish commented 6 years ago

I have the following in my template.

<fa *ngIf="!tempInFahrenheit"
        [name]="'fa-spinner'"
        [size]=5
        [spin]=true
        ></fa>

it seems to build fine but when I run my tests I get the following

Failed: Template parse errors:
Can't bind to 'name' since it isn't a known property of 'fa'. ("
    <img src="{{ icon }}" align="center"/><br/>
    <fa *ngIf="!tempInFahrenheit"
        [ERROR ->][name]="'fa-spinner'"
        [size]=5
        [spin]=true
"): ng:///DynamicTestModule/AppComponent.html@13:8
Can't bind to 'size' since it isn't a known property of 'fa'. ("
    <fa *ngIf="!tempInFahrenheit"
        [name]="'fa-spinner'"
        [ERROR ->][size]=5
        [spin]=true
        ></fa>
"): ng:///DynamicTestModule/AppComponent.html@14:8
Can't bind to 'spin' since it isn't a known property of 'fa'. ("
        [name]="'fa-spinner'"
        [size]=5
        [ERROR ->][spin]=true
        ></fa>
    <span *ngIf="tempInFahrenheit" class="temp-text">{{ (showCelsius) ?
"): ng:///DynamicTestModule/AppComponent.html@15:8
'fa' is not a known element:
1. If 'fa' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<span class="info-box">{{ description }}</span>
    <img src="{{ icon }}" align="center"/><br/>
    [ERROR ->]<fa *ngIf="!tempInFahrenheit"
        [name]="'fa-spinner'"
        [size]=5
"): ng:///DynamicTestModule/AppComponent.html@12:4

app.module.ts has the following

import { Angular2FontawesomeModule } from 'angular2-fontawesome';

and

@NgModule({
  declarations: [
    AppComponent,
    TemperaturePipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    Angular2FontawesomeModule
  ],

.angular-cli.json has

"styles": [
        "styles.css",
        "../node_modules/font-awesome/css/font-awesome.css"
      ],

and again it builds fine.

carl-parrish commented 6 years ago

Looks like I just needed to add the following to my test.

 beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ Angular2FontawesomeModule, HttpModule ],

So now it's building fine, passing all tests but I'm still not seeing my spinner on the page. (starting to think this is a problem with my logic though)