-
{{weather.date}}
+
{{weather.date | date:'fullDate'}}
{{weather.temperatureF}} °F
{{weather.temperatureC}} °C
-
{{weather.summary}}
+
{{weather.summary}}
diff --git a/TestUI/src/app/app.component.scss b/TestUI/src/app/app.component.scss
index 64a2c06..9b169de 100644
--- a/TestUI/src/app/app.component.scss
+++ b/TestUI/src/app/app.component.scss
@@ -1,3 +1,7 @@
+.content {
+ font-weight: 600;
+ font-size: 1.5rem;
+}
.card {
top: 1rem;
}
diff --git a/TestUI/src/app/app.component.spec.ts b/TestUI/src/app/app.component.spec.ts
index 0254631..12a5afe 100644
--- a/TestUI/src/app/app.component.spec.ts
+++ b/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
;
+ 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');
+ });
+
+ });
+
});
diff --git a/TestUI/src/app/app.component.ts b/TestUI/src/app/app.component.ts
index 12ba596..fe40280 100644
--- a/TestUI/src/app/app.component.ts
+++ b/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
diff --git a/TestUI/src/environments/environment.ts b/TestUI/src/environments/environment.ts
index 12ba3e4..05727ae 100644
--- a/TestUI/src/environments/environment.ts
+++ b/TestUI/src/environments/environment.ts
@@ -4,7 +4,7 @@
export const environment = {
production: false,
- url:'https://localhost:5001'
+ url:'http://localhost:5100'
};
/*