From ee4cad017c0c63d513c94843be0db73075dfd7df Mon Sep 17 00:00:00 2001 From: Thomas Fozzi <43391847+tfozzi@users.noreply.github.com> Date: Wed, 13 Mar 2024 01:25:54 +0100 Subject: [PATCH 1/5] get original unit test successful --- TestUI/src/app/app.component.html | 3 +++ TestUI/src/app/app.component.spec.ts | 4 +++- TestUI/src/app/app.component.ts | 3 +++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/TestUI/src/app/app.component.html b/TestUI/src/app/app.component.html index 56bba0c..3cd3082 100644 --- a/TestUI/src/app/app.component.html +++ b/TestUI/src/app/app.component.html @@ -1,4 +1,7 @@
+
+ {{title}} app is running! +
diff --git a/TestUI/src/app/app.component.spec.ts b/TestUI/src/app/app.component.spec.ts index 0254631..05dcf68 100644 --- a/TestUI/src/app/app.component.spec.ts +++ b/TestUI/src/app/app.component.spec.ts @@ -1,12 +1,14 @@ import { TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; +import { HttpClientTestingModule } from '@angular/common/http/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - RouterTestingModule + RouterTestingModule, + HttpClientTestingModule ], declarations: [ AppComponent diff --git a/TestUI/src/app/app.component.ts b/TestUI/src/app/app.component.ts index 12ba596..f93c150 100644 --- a/TestUI/src/app/app.component.ts +++ b/TestUI/src/app/app.component.ts @@ -10,9 +10,12 @@ import {Client, WeatherForecast} from "./weatherapp.swagger"; export class AppComponent { weatherData: WeatherForecast[] = []; + title: string; + constructor( private client: Client ) { + this.title = "TestUI"; this.getWeather(); } From 6f92812323015169efb2bcc9f1505dab1f1e7610 Mon Sep 17 00:00:00 2001 From: Thomas Fozzi <43391847+tfozzi@users.noreply.github.com> Date: Wed, 13 Mar 2024 01:47:12 +0100 Subject: [PATCH 2/5] unit test coverage --- TestUI/src/app/app.component.spec.ts | 51 ++++++++++++++++++++++++---- 1 file changed, 44 insertions(+), 7 deletions(-) diff --git a/TestUI/src/app/app.component.spec.ts b/TestUI/src/app/app.component.spec.ts index 05dcf68..2ed73bb 100644 --- a/TestUI/src/app/app.component.spec.ts +++ b/TestUI/src/app/app.component.spec.ts @@ -2,8 +2,23 @@ import { 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'; + +const weatherData = [ + { + summary: 'Hot', + temperatureC: 38, + temperatureF: 100, + dateFormatted: '2024-01-01' + } +]; describe('AppComponent', () => { + + let fixture = TestBed.createComponent(AppComponent); + let app = fixture.componentInstance; + + beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ @@ -17,21 +32,43 @@ describe('AppComponent', () => { }); 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.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('.content span')?.textContent).toContain('TestUI app is running!'); + const rendered = fixture.nativeElement as HTMLElement; + expect(rendered.querySelector('.content span')?.textContent).toContain('TestUI app is running!'); }); + + describe('getWeather', () => { + + it('should handle complete', () => { + const completeSpy = spyOn( app, 'getWeather').and.callThrough(); + app.getWeather(); + expect(completeSpy).toHaveBeenCalled(); + }); + + it('should handle error', () => { + const error = 'Error message'; + spyOn(app, 'handleError'); + app.getWeather(); + expect(app.handleError).toHaveBeenCalledWith(error); + }); + + it('should handle next', () => { + app.getWeather(); + expect(app.weatherData).toEqual(weatherData); + }); + + }); + }); + + + + From 5049338814ee7547415a7d4df36d6067d803b424 Mon Sep 17 00:00:00 2001 From: Thomas Fozzi <43391847+tfozzi@users.noreply.github.com> Date: Wed, 13 Mar 2024 01:50:19 +0100 Subject: [PATCH 3/5] format weather datetime --- TestUI/src/app/app.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/TestUI/src/app/app.component.html b/TestUI/src/app/app.component.html index 3cd3082..ac25427 100644 --- a/TestUI/src/app/app.component.html +++ b/TestUI/src/app/app.component.html @@ -6,7 +6,7 @@
-
{{weather.date}}
+
{{weather.date | date: 'full' }}
{{weather.temperatureF}} °F
{{weather.temperatureC}} °C

{{weather.summary}}

From 40c4a5401fceeee001b7431b8a7d174398b05dc3 Mon Sep 17 00:00:00 2001 From: Thomas Fozzi <43391847+tfozzi@users.noreply.github.com> Date: Wed, 13 Mar 2024 01:50:37 +0100 Subject: [PATCH 4/5] format weather datetime --- TestUI/src/app/app.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/TestUI/src/app/app.component.html b/TestUI/src/app/app.component.html index ac25427..cc4bf73 100644 --- a/TestUI/src/app/app.component.html +++ b/TestUI/src/app/app.component.html @@ -6,7 +6,7 @@
-
{{weather.date | date: 'full' }}
+
{{ weather.date | date: 'full' }}
{{weather.temperatureF}} °F
{{weather.temperatureC}} °C

{{weather.summary}}

From 7d9e08a1fbe58710165f496c59d9a3706a57696d Mon Sep 17 00:00:00 2001 From: Thomas Fozzi <43391847+tfozzi@users.noreply.github.com> Date: Wed, 13 Mar 2024 02:11:45 +0100 Subject: [PATCH 5/5] summary color method, unit test and apply to template --- TestUI/src/app/app.component.html | 2 +- TestUI/src/app/app.component.spec.ts | 41 ++++++++++++++++++++++++++-- TestUI/src/app/app.component.ts | 21 ++++++++++++++ 3 files changed, 60 insertions(+), 4 deletions(-) diff --git a/TestUI/src/app/app.component.html b/TestUI/src/app/app.component.html index cc4bf73..71ff692 100644 --- a/TestUI/src/app/app.component.html +++ b/TestUI/src/app/app.component.html @@ -9,7 +9,7 @@
{{ weather.date | date: 'full' }}
{{weather.temperatureF}} °F
{{weather.temperatureC}} °C
-

{{weather.summary}}

+

{{weather.summary}}

diff --git a/TestUI/src/app/app.component.spec.ts b/TestUI/src/app/app.component.spec.ts index 2ed73bb..3779727 100644 --- a/TestUI/src/app/app.component.spec.ts +++ b/TestUI/src/app/app.component.spec.ts @@ -3,13 +3,14 @@ import { RouterTestingModule } from '@angular/router/testing'; import { HttpClientTestingModule } from '@angular/common/http/testing'; import { AppComponent } from './app.component'; import { of, throwError } from 'rxjs'; +import { WeatherForecast } from './weatherapp.swagger'; -const weatherData = [ +const weatherData: WeatherForecast[] = [ { - summary: 'Hot', + date: new Date('2024-01-01'), temperatureC: 38, temperatureF: 100, - dateFormatted: '2024-01-01' + summary: 'Hot' } ]; @@ -45,6 +46,40 @@ describe('AppComponent', () => { expect(rendered.querySelector('.content span')?.textContent).toContain('TestUI app is running!'); }); + describe('getWeatherSummaryColor', () => { + + it('should return cyan for Freezing, Bracing, or Chilly', () => { + + expect(app.getWeatherSummaryColor('Freezing')).toEqual('cyan'); + expect(app.getWeatherSummaryColor('Bracing')).toEqual('cyan'); + expect(app.getWeatherSummaryColor('Chilly')).toEqual('cyan'); + + }); + + it('should return green for Mild, Balmy, or Cool', () => { + + expect(app.getWeatherSummaryColor('Mild')).toEqual('green'); + expect(app.getWeatherSummaryColor('Balmy')).toEqual('green'); + expect(app.getWeatherSummaryColor('Cool')).toEqual('green'); + + }); + + it('should return orange for Warm or Hot', () => { + + expect(app.getWeatherSummaryColor('Warm')).toEqual('orange'); + expect(app.getWeatherSummaryColor('Hot')).toEqual('orange'); + + }); + + it('should return red for Sweltering or Scorching', () => { + + expect(app.getWeatherSummaryColor('Sweltering')).toEqual('red'); + expect(app.getWeatherSummaryColor('Scorching')).toEqual('red'); + + }); + + }); + describe('getWeather', () => { it('should handle complete', () => { diff --git a/TestUI/src/app/app.component.ts b/TestUI/src/app/app.component.ts index f93c150..fe0e8b0 100644 --- a/TestUI/src/app/app.component.ts +++ b/TestUI/src/app/app.component.ts @@ -46,4 +46,25 @@ export class AppComponent { handleError(error: string) { alert(error); } + + getWeatherSummaryColor(summary: string): string { + 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'; + } + } }