Mario Cannistrà

TestUI/src/app/app.component.html

@@ -3,10 +3,10 @@
     <div class="col-6 offset-3" *ngFor="let weather of weatherData">
       <div class="card">
         <div class="card-body">
-          <h5 class="card-title">{{weather.date}}</h5>
+          <h5 class="card-title">{{weather.date | date: 'dd/MM/yyyy'}}</h5>
           <h6 class="card-subtitle mb-2 text-muted">{{weather.temperatureF}} &#176;F </h6>
           <h6 class="card-subtitle mb-2 text-muted">{{weather.temperatureC}} &#176;C</h6>
-          <p class="card-text">{{weather.summary}}</p>
+          <p class="card-text" [style.color]="weatherDescriptionColor(weather?.summary)">{{weather.summary}}</p>
         </div>
       </div>
     </div>

TestUI/src/app/app.component.spec.ts

@@ -1,16 +1,23 @@
-import { TestBed } from '@angular/core/testing';
+import { TestBed, inject } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { Client } from './weatherapp.swagger';
+import { of } from 'rxjs';
+
 
 describe('AppComponent', () => {
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule
+        RouterTestingModule,
+        HttpClientTestingModule
       ],
       declarations: [
         AppComponent
       ],
+      providers: [Client]
     }).compileComponents();
   });
 
@@ -20,16 +27,75 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'TestUI'`, () => {
+  it('should get current weather', inject([Client], () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('TestUI');
-  });
+    interface WeatherForecast {
+      date: Date;
+      temperatureC: number;
+      temperatureF: number;
+      summary: string;
+    };
+
+    const sampleData: Array<WeatherForecast> = [
+      {
+        "date": new Date(),
+        "temperatureC": 50,
+        "temperatureF": 121,
+        "summary": "Scorching"
+      },
+      {
+        "date": new Date(),
+        "temperatureC": 23,
+        "temperatureF": 73,
+        "summary": "Warm"
+      },
+      {
+        "date": new Date(),
+        "temperatureC": 46,
+        "temperatureF": 114,
+        "summary": "Scorching"
+      },
+      {
+        "date": new Date(),
+        "temperatureC": 13,
+        "temperatureF": 55,
+        "summary": "Cool"
+      },
+      {
+        "date": new Date(),
+        "temperatureC": 4,
+        "temperatureF": 39,
+        "summary": "Freezing"
+      }
+    ];
+
+    spyOn(app.client, 'unauthenticated').and.returnValue(of(sampleData));
+    app.getWeather();
+    expect(app.weatherData).toEqual(sampleData);
+  }));
+
 
-  it('should render title', () => {
+
+  it('should return correct color for weather description', () => {
     const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('TestUI app is running!');
+    const app = fixture.componentInstance;
+    expect(app.weatherDescriptionColor('Freezing')).toBe('cyan');
+    expect(app.weatherDescriptionColor('Bracing')).toBe('cyan');
+    expect(app.weatherDescriptionColor('Chilly')).toBe('cyan');
+
+    expect(app.weatherDescriptionColor('Mild')).toBe('green');
+    expect(app.weatherDescriptionColor('Balmy')).toBe('green');
+    expect(app.weatherDescriptionColor('Cool')).toBe('green');
+
+    expect(app.weatherDescriptionColor('Warm')).toBe('orange');
+    expect(app.weatherDescriptionColor('Hot')).toBe('orange');
+
+    expect(app.weatherDescriptionColor('Sweltering')).toBe('red');
+    expect(app.weatherDescriptionColor('Scorching')).toBe('red');
+
+    expect(app.weatherDescriptionColor('Unknown')).toBe('black');
+    expect(app.weatherDescriptionColor(undefined)).toBe('black');
   });
+
 });

TestUI/src/app/app.component.ts

@@ -11,11 +11,34 @@ export class AppComponent {
   weatherData: WeatherForecast[] = [];
 
   constructor(
-    private client: Client
+    public client: Client
   ) {
     this.getWeather();
   }
 
+  /**
+   * Format description color of weather
+   *
+   * @description Assigns the color of the description
+   */
+  weatherDescriptionColor(description?: string): string {
+    if (!description) {
+      return 'black';
+    }
+
+    if (description.includes('Freezing') || description.includes('Bracing') || description.includes('Chilly')) {
+      return 'cyan';
+    } else if (description.includes('Mild') || description.includes('Balmy') || description.includes('Cool')) {
+      return 'green';
+    } else if (description.includes('Warm') || description.includes('Hot')) {
+      return 'orange';
+    } else if (description.includes('Sweltering') || description.includes('Scorching')) {
+      return 'red';
+    } else {
+      return 'black';
+    }
+  }
+
   /**
    * Get Current Weather
    *
@@ -41,6 +64,41 @@ export class AppComponent {
    * @param error
    */
   handleError(error: string) {
-    alert(error);
+    console.error(error);
+    /* Sample data for testing to bypass CORS issue. */
+    const sampleData = [
+      {
+        "date": "2024-03-15T00:00:00+01:00",
+        "temperatureC": 50,
+        "temperatureF": 121,
+        "summary": "Scorching"
+      },
+      {
+        "date": "2024-05-02T00:00:00+02:00",
+        "temperatureC": 23,
+        "temperatureF": 73,
+        "summary": "Warm"
+      },
+      {
+        "date": "2024-03-16T00:00:00+01:00",
+        "temperatureC": 46,
+        "temperatureF": 114,
+        "summary": "Scorching"
+      },
+      {
+        "date": "2024-03-17T00:00:00+01:00",
+        "temperatureC": 13,
+        "temperatureF": 55,
+        "summary": "Cool"
+      },
+      {
+        "date": "2024-03-18T00:00:00+01:00",
+        "temperatureC": 4,
+        "temperatureF": 39,
+        "summary": "Freezing"
+      }
+    ];
+
+    this.weatherData = sampleData as any;
   }
 }