Francesco Cini

TestUI/service-mock/index.js

@@ -0,0 +1,65 @@
+const express = require('express');
+const cors = require('cors'); 
+const app = express();
+
+// enable all origins as a mock service
+app.use(cors({ origin: '*'}));
+
+// servoce costants
+const PORT = 5000;
+const N_RECORDS = 10;
+const TEMP_TYPES = [
+    { type: 'Freezing', min: -Infinity, max: 5 },
+    { type: 'Chilly', min: 5, max: 10 },
+    { type: 'Cool', min: 10, max: 15 },
+    { type: 'Mild', min: 15, max: 20 },
+    { type: 'Warm', min: 20, max: 25 },
+    { type: 'Balmy', min: 25, max: 30 },
+    { type: 'Hot', min: 30, max: 35 },
+    { type: 'Sweltering', min: 35, max: 40 },
+    { type: 'Scorching', min: 40, max: Infinity }
+  ];
+
+// service functions
+function getRandomTemperature(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+function celsiusToFahrenheit(celsius) {
+  return parseInt((celsius * 9/5)) + 32;
+}
+
+function setTemperatureType(celsiusTemp) {
+  for (const type of TEMP_TYPES) {
+    if (celsiusTemp >= type.min && celsiusTemp < type.max) {
+      return type.type;
+    }
+  }
+}  
+
+// enable route 
+app.get('/WeatherForecast/unauthenticated', (req, res) => {
+  const temperatureData = [];
+
+  // return N mock records 
+  for (let i = 0; i < N_RECORDS; i++) {
+    const today = new Date();
+    const celsiusTemp = parseInt(getRandomTemperature(-5, 50));
+    const fahrenheitTemp = celsiusToFahrenheit(celsiusTemp);
+    const temperatureType = setTemperatureType(celsiusTemp);
+    const data = {
+      date: today,
+      temperatureC: parseFloat(celsiusTemp.toFixed(2)),
+      temperatureF: parseFloat(fahrenheitTemp.toFixed(2)),
+      summary: temperatureType
+    };
+    temperatureData.push(data);
+  }
+
+  res.json(temperatureData);
+});
+
+// start the server
+app.listen(PORT, () => {
+  console.log('server started on port: '+PORT);
+});

TestUI/service-mock/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "weather-service",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Francesco Cini",
+  "license": "ISC",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.18.3"
+  }
+}

TestUI/src/app/app.component.html

@@ -1,12 +1,15 @@
 <div class="container">
+  <div class="content">
+    <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>
-          <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>
+          <h5 class="card-title">{{weather?.date | date:getDateFormat()}}</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" [ngClass]="getWeatherClass(weather.summary)">{{weather?.summary}}</p>
         </div>
       </div>
     </div>

TestUI/src/app/app.component.scss

@@ -1,3 +1,19 @@
 .card {
   top: 1rem;
-}
+
+  .cyan {
+    color: cyan;
+  }
+
+  .green {
+    color: green;
+  }
+
+  .orange {
+    color: orange;
+  }
+
+  .red {
+    color: red;
+  }
+}

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

@@ -1,12 +1,16 @@
 import { TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
+import { WeatherClass, WeatherDescription } from './models/weather';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('AppComponent', () => {
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule
+        RouterTestingModule,
+        HttpClientTestingModule 
       ],
       declarations: [
         AppComponent
@@ -32,4 +36,21 @@ describe('AppComponent', () => {
     const compiled = fixture.nativeElement as HTMLElement;
     expect(compiled.querySelector('.content span')?.textContent).toContain('TestUI app is running!');
   });
+
+  it('should return correct weather class based on weather description', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.getWeatherClass(WeatherDescription.FREEZING)).toBe(WeatherClass.CYAN);
+    expect(app.getWeatherClass(WeatherDescription.BRACING)).toBe(WeatherClass.CYAN);
+    expect(app.getWeatherClass(WeatherDescription.CHILLY)).toBe(WeatherClass.CYAN);
+    expect(app.getWeatherClass(WeatherDescription.MILD)).toBe(WeatherClass.GREEN);
+    expect(app.getWeatherClass(WeatherDescription.BALMY)).toBe(WeatherClass.GREEN);
+    expect(app.getWeatherClass(WeatherDescription.COOL)).toBe(WeatherClass.GREEN);
+    expect(app.getWeatherClass(WeatherDescription.WARM)).toBe(WeatherClass.ORANGE);
+    expect(app.getWeatherClass(WeatherDescription.HOT)).toBe(WeatherClass.ORANGE);
+    expect(app.getWeatherClass(WeatherDescription.SWELTERING)).toBe(WeatherClass.RED);
+    expect(app.getWeatherClass(WeatherDescription.SCORCHING)).toBe(WeatherClass.RED);
+    expect(app.getWeatherClass(undefined)).toBe('');
+  });
 });
+

TestUI/src/app/app.component.ts

@@ -1,5 +1,7 @@
 import {Component} from '@angular/core';
 import {Client, WeatherForecast} from "./weatherapp.swagger";
+import { WeatherClass, WeatherDescription } from './models/weather';
+import { WeatherService } from './services/weather.service';
 
 @Component({
   selector: 'app-root',
@@ -8,19 +10,22 @@ import {Client, WeatherForecast} from "./weatherapp.swagger";
   providers: [Client]
 })
 export class AppComponent {
+
   weatherData: WeatherForecast[] = [];
+  weatherClass = WeatherClass;
+  title: string = 'TestUI';
 
   constructor(
+    private weatherService: WeatherService,
     private client: Client
-  ) {
+    ) {
     this.getWeather();
   }
 
-  /**
-   * Get Current Weather
-   *
-   * @description Gets current weather from API
-   */
+  public getDateFormat(){
+    return this.weatherService.getDateFormat();
+  }
+
   getWeather() {
     this.client.unauthenticated().subscribe({
       complete: () => {},
@@ -33,6 +38,26 @@ export class AppComponent {
     })
   }
 
+  public getWeatherClass(type: string | undefined): string {
+    switch (type) {
+      case WeatherDescription.FREEZING:
+      case WeatherDescription.BRACING:
+      case WeatherDescription.CHILLY:
+        return WeatherClass.CYAN;
+      case WeatherDescription.MILD:
+      case WeatherDescription.BALMY:
+      case WeatherDescription.COOL:
+        return WeatherClass.GREEN;
+      case WeatherDescription.WARM:
+      case WeatherDescription.HOT:
+        return WeatherClass.ORANGE;
+      case WeatherDescription.SWELTERING:
+      case WeatherDescription.SCORCHING:
+        return WeatherClass.RED;
+      default:
+        return '';
+    }
+  }
 
   /**
    * Dummy Error Handler

TestUI/src/app/app.model.ts

@@ -0,0 +1,4 @@
+export enum Language {
+    IT = 'it',
+    EN = 'en'
+}

TestUI/src/app/models/weather.ts

@@ -0,0 +1,19 @@
+  export enum WeatherClass {
+    CYAN = 'cyan',
+    GREEN = 'green',
+    ORANGE = 'orange',
+    RED = 'red'
+  }
+
+  export enum WeatherDescription {
+    FREEZING = 'Freezing',
+    BRACING = 'Bracing',
+    CHILLY = 'Chilly',
+    MILD = 'Mild',
+    BALMY = 'Balmy',
+    COOL = 'Cool',
+    WARM = 'Warm',
+    HOT = 'Hot',
+    SWELTERING = 'Sweltering',
+    SCORCHING = 'Scorching',
+  }

TestUI/src/app/services/weather.service.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { WeatherService } from './weather.service';
+import { WeatherForecast } from '../weatherapp.swagger';
+
+
+describe('WeatherService', () => {
+
+  let service: WeatherService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [WeatherService]
+    });
+    service = TestBed.inject(WeatherService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+});

TestUI/src/app/services/weather.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { environment } from 'src/environments/environment';
+import { Language } from '../app.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class WeatherService {
+
+  public getDateFormat(): string{
+    let format: string;
+    switch(environment.dateFormat){
+      case Language.IT:
+        format = 'dd/MM/YYYY';
+        break;
+      case Language.EN:
+        format = 'MM/dd/YYYY';
+        break;
+      default:
+        format = 'MM/dd/YYYY';
+    }
+    return format;
+  }
+
+}

TestUI/src/environments/environment.prod.ts

@@ -1,3 +1,5 @@
 export const environment = {
-  production: true
+  dateFormat: 'it',
+  production: true,
+  url:''
 };

TestUI/src/environments/environment.ts

@@ -3,8 +3,9 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
+  dateFormat: 'it',
   production: false,
-  url:'https://localhost:5001'
+  url:'http://localhost:5000'
 };
 
 /*