Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dario Buonora #42

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions TestUI/src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
<div class="container">
<div class="row">
<h2>{{title}}</h2>
</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: '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" [ngClass]="getWeatherClass(weather.summary)">{{weather.summary}}</p>
</div>
</div>
</div>
Expand Down
25 changes: 25 additions & 0 deletions TestUI/src/app/app.component.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,28 @@
.card {
top: 1rem;
}

.cyan-weather {
color: cyan;
font-weight: bold;
}

.green-weather {
color: green;
font-weight: bold;
}

.orange-weather {
color: orange;
font-weight: bold;
}

.red-weather {
color: red;
font-weight: bold;
}

.other-weather {
color: black;
font-weight: bold;
}
80 changes: 72 additions & 8 deletions TestUI/src/app/app.component.spec.ts
Original file line number Diff line number Diff line change
@@ -1,35 +1,99 @@
import { TestBed } from '@angular/core/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { AppComponent, WeatherClassConstants, WeatherDescriptionConstants } from './app.component';

describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [
RouterTestingModule
RouterTestingModule,
HttpClientTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
});

let fixture: ComponentFixture<AppComponent> = TestBed.createComponent(AppComponent);
let app: AppComponent = 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.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('.content span')?.textContent).toContain('TestUI app is running!');
});

describe('getWeather', () => {

it('should handle next', () => {
const weatherData = [{
summary: 'Chilly',
temperatureC: 8,
temperatureF: 47,
date: new Date()
},{
summary: 'Warm',
temperatureC: 37,
temperatureF: 100,
date: new Date()
}];

app.getWeather();
expect(app.weatherData).toEqual(weatherData);
});

it('should handle error', () => {
spyOn(app, 'handleError');
app.getWeather();
expect(app.handleError).toHaveBeenCalledWith('Error Message');
});

it('should handle complete', () => {
const completeSpy = spyOn( app, 'getWeather').and.callThrough();
app.getWeather();
expect(completeSpy).toHaveBeenCalled();
});

});

describe('getWeatherClass', () => {

it('should return cyan value for freezing, bracing, or chilly summary description', () => {
expect(app.getWeatherClass(WeatherDescriptionConstants.CYAN_WEATHER.FREEZING)).toEqual(WeatherClassConstants.CYAN_CLASS);
expect(app.getWeatherClass(WeatherDescriptionConstants.CYAN_WEATHER.CHILLY)).toEqual(WeatherClassConstants.CYAN_CLASS);
expect(app.getWeatherClass(WeatherDescriptionConstants.CYAN_WEATHER.BRACING)).toEqual(WeatherClassConstants.CYAN_CLASS);
});

it('should return green value for mild, balmy, or cool summary description', () => {
expect(app.getWeatherClass(WeatherDescriptionConstants.GREEN_WEATHER.BALMY)).toEqual(WeatherClassConstants.GREEN_CLASS);
expect(app.getWeatherClass(WeatherDescriptionConstants.GREEN_WEATHER.MILD)).toEqual(WeatherClassConstants.GREEN_CLASS);
expect(app.getWeatherClass(WeatherDescriptionConstants.GREEN_WEATHER.COOL)).toEqual(WeatherClassConstants.GREEN_CLASS);
});

it('should return orange value for warm or hot summary description', () => {
expect(app.getWeatherClass(WeatherDescriptionConstants.ORANGE_WEATHER.HOT)).toEqual(WeatherClassConstants.ORANGE_CLASS);
expect(app.getWeatherClass(WeatherDescriptionConstants.ORANGE_WEATHER.HOT)).toEqual(WeatherClassConstants.ORANGE_CLASS);
});

it('should return red for value sweltering or scorching summary description', () => {
expect(app.getWeatherClass(WeatherDescriptionConstants.RED_WEATHER.SCORCHING)).toEqual(WeatherClassConstants.RED_CLASS);
expect(app.getWeatherClass(WeatherDescriptionConstants.RED_WEATHER.SWELTERING)).toEqual(WeatherClassConstants.RED_CLASS);
});

it('should return default class for any other summary description', () => {
expect(app.getWeatherClass()).toEqual(WeatherClassConstants.DEFAULT_CLASS);
expect(app.getWeatherClass('Sunny')).toEqual(WeatherClassConstants.DEFAULT_CLASS);
});

});
});
64 changes: 64 additions & 0 deletions TestUI/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,48 @@
import {Component} from '@angular/core';
import {Client, WeatherForecast} from "./weatherapp.swagger";

export class WeatherDescriptionConstants {
public static CYAN_WEATHER = {
FREEZING : 'freezing',
BRACING : 'fracing',
CHILLY : 'chilly'
}

public static GREEN_WEATHER = {
MILD : 'mild',
BALMY : 'balmy',
COOL : 'cool'
}

public static ORANGE_WEATHER = {
WARM : 'warm',
HOT : 'hot',
}

public static RED_WEATHER = {
SWELTERING : 'sweltering',
SCORCHING : 'scorching'
}
}

export class WeatherClassConstants {
public static CYAN_CLASS = 'cyan-weather';
public static GREEN_CLASS = 'green-weather';
public static ORANGE_CLASS = 'orange-weather';
public static RED_CLASS = 'red-weather';
public static DEFAULT_CLASS = 'other-weather';
}

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
providers: [Client]
})
export class AppComponent {

weatherData: WeatherForecast[] = [];
title: string = 'My TestUI'

constructor(
private client: Client
Expand All @@ -33,6 +67,36 @@ export class AppComponent {
})
}

/**
* Get Weather Class
*
* @param weatherSummary
* @returns color based on the summery description
*/
getWeatherClass(weatherSummary?: string): string {
switch (weatherSummary?.toLowerCase()) {
case WeatherDescriptionConstants.CYAN_WEATHER.FREEZING:
case WeatherDescriptionConstants.CYAN_WEATHER.CHILLY:
case WeatherDescriptionConstants.CYAN_WEATHER.BRACING:
return WeatherClassConstants.CYAN_CLASS;

case WeatherDescriptionConstants.GREEN_WEATHER.BALMY:
case WeatherDescriptionConstants.GREEN_WEATHER.COOL:
case WeatherDescriptionConstants.GREEN_WEATHER.MILD:
return WeatherClassConstants.GREEN_CLASS;

case WeatherDescriptionConstants.ORANGE_WEATHER.HOT:
case WeatherDescriptionConstants.ORANGE_WEATHER.WARM:
return WeatherClassConstants.ORANGE_CLASS;

case WeatherDescriptionConstants.RED_WEATHER.SCORCHING:
case WeatherDescriptionConstants.RED_WEATHER.SWELTERING:
return WeatherClassConstants.RED_CLASS;

default:
return WeatherClassConstants.DEFAULT_CLASS
}
}

/**
* Dummy Error Handler
Expand Down