Saverio Belviso

TestUI/src/app/app.component.html

@@ -1,12 +1,15 @@
 <div class="container">
+  <div class="content text-center">
+      <span>{{title}} app is running!</span>
+  </div>
   <div class="row">
     <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:'fullDate'}}</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" [ngStyle]="{'color': getWeatherColor(weather.summary!)}">{{weather.summary}}</p>
         </div>
       </div>
     </div>

TestUI/src/app/app.component.scss

@@ -1,3 +1,7 @@
+.content {
+  font-weight: 600;
+  font-size: 1.5rem;
+}
 .card {
   top: 1rem;
 }

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

@@ -1,35 +1,102 @@
-import { TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { AppComponent } from './app.component';
+import { of, throwError } from 'rxjs';
 
 describe('AppComponent', () => {
+
+  let fixture: ComponentFixture<AppComponent>;
+  let app: AppComponent;
+  let compiled: HTMLElement;
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule
+        RouterTestingModule,
+        HttpClientTestingModule
       ],
       declarations: [
         AppComponent
       ],
     }).compileComponents();
+
+    fixture = TestBed.createComponent(AppComponent);
+    app = fixture.componentInstance;
+
   });
 
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
   it(`should have as title 'TestUI'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
     expect(app.title).toEqual('TestUI');
   });
 
   it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
     expect(compiled.querySelector('.content span')?.textContent).toContain('TestUI app is running!');
   });
+
+  describe('getWeather', () => {
+
+    it('should handle next callback', () => {
+      const weatherData = [{summary: 'Hot', temperatureC: 30, temperatureF: 86, dateFormatted: '2022-01-01'}];
+      spyOn(app.client, 'unauthenticated').and.returnValue(of(weatherData));
+      app.getWeather();
+      expect(app.weatherData).toEqual(weatherData);
+    });
+
+    it('should handle error callback', () => {
+      const error = 'An error occurred';
+      spyOn(app.client, 'unauthenticated').and.returnValue(throwError(error));
+      spyOn(app, 'handleError');
+      app.getWeather();
+      expect(app.handleError).toHaveBeenCalledWith(error);
+    });
+
+    it('should handle complete callback', () => {
+      const completeSpy = spyOn(app, 'getWeather').and.callThrough();
+      app.getWeather();
+      expect(completeSpy).toHaveBeenCalled();
+    });
+
+  });
+
+  describe('getWeatherColor', () => {
+
+    it('should return cyan for freezing, bracing, or chilly', () => {
+      expect(app.getWeatherColor('Freezing')).toEqual('cyan');
+      expect(app.getWeatherColor('Bracing')).toEqual('cyan');
+      expect(app.getWeatherColor('Chilly')).toEqual('cyan');
+    });
+
+    it('should return green for mild, balmy, or cool', () => {
+      expect(app.getWeatherColor('Mild')).toEqual('green');
+      expect(app.getWeatherColor('Balmy')).toEqual('green');
+      expect(app.getWeatherColor('Cool')).toEqual('green');
+    });
+
+    it('should return orange for warm or hot', () => {
+      expect(app.getWeatherColor('Warm')).toEqual('orange');
+      expect(app.getWeatherColor('Hot')).toEqual('orange');
+    });
+
+    it('should return red for sweltering or scorching', () => {
+      expect(app.getWeatherColor('Sweltering')).toEqual('red');
+      expect(app.getWeatherColor('Scorching')).toEqual('red');
+    });
+
+    it('should return black for any other summary', () => {
+      expect(app.getWeatherColor('')).toEqual('black');
+      expect(app.getWeatherColor('Rainy')).toEqual('black');
+      expect(app.getWeatherColor('Sunny')).toEqual('black');
+      expect(app.getWeatherColor('Cloudy')).toEqual('black');
+    });
+
+  });
+
 });

TestUI/src/app/app.component.ts

@@ -10,8 +10,10 @@ import {Client, WeatherForecast} from "./weatherapp.swagger";
 export class AppComponent {
   weatherData: WeatherForecast[] = [];
 
+  title = 'TestUI';
+
   constructor(
-    private client: Client
+    public client: Client
   ) {
     this.getWeather();
   }
@@ -33,6 +35,33 @@ export class AppComponent {
     })
   }
 
+    /**
+   * Get Weather Color
+   *
+   * @description Returns color based on weather summary
+   * @param summary
+   */
+    getWeatherColor(summary: string): string {
+      summary = summary.toLowerCase();
+      switch (summary) {
+        case 'freezing':
+        case 'bracing':
+        case 'chilly':
+          return 'cyan';
+        case 'mild':
+        case 'balmy':
+        case 'cool':
+          return 'green';
+        case 'warm':
+        case 'hot':
+          return 'orange';
+        case 'sweltering':
+        case 'scorching':
+          return 'red';
+        default:
+          return 'black';
+      }
+    }
 
   /**
    * Dummy Error Handler

TestUI/src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  url:'https://localhost:5001'
+  url:'http://localhost:5100'
 };
 
 /*