A - unit tests class and service

src/app/components/town-selector/town-selector.component.ts

@@ -20,6 +20,6 @@ export class TownSelectorComponent {
 
   public onSelectTown(newSelectedTownWeather: TownWeather) {
     this.selectedTownWeather.set(newSelectedTownWeather);
-    this.selectedTownEvent.emit(newSelectedTownWeather);
+    this.selectedTownEvent.emit(Object.assign(new TownWeather(), newSelectedTownWeather));
   }
 }

src/app/components/weather-details/weather-details.component.html

@@ -18,7 +18,9 @@ <h3 class="display-5">Temperature</h3>
       </div>
       <div>
         <span>range: </span>
-        <span class="text-primary">Not implemented yet !!! </span>
+        @if (currentTownWeather) {
+          <span class="text-primary">{{ currentTownWeather.temperatureRange() }} </span><span>{{currentTownWeather.forecast.temperature.max?.unit}}</span>
+        }
       </div>
       <hr>
       <h3 class="display-5">Wind</h3>

src/app/components/weather/weather.component.html

@@ -1,11 +1,13 @@
 <h1 class="display-2" data-testid="app-title">Current Weather</h1>
-<div class="display-5 weather-tending">
-  <span>Trending: </span>
-  <span class="text-primary">Not implemented yet !!! </span>
-</div>
 @if (globalWeather$ | async) {
+  <div class="display-5 weather-tending">
+    <span>Trending: </span>
+    @if (trending()) {
+      <a [href]="trending()?.url" class="link-offset-1 link-underline link-underline-opacity-10">{{trending()?.label}}</a>
+    }
+  </div>
   <div class="weather-view">
-    <p class="mb-2">First select a town or use the filter before</p>
+    <p class="my-2">First select a town or use the filter before</p>
     <form class="mb-2" [formGroup]="townFilterForm" (ngSubmit)="onSubmitForm()">
       <div class="row">
         <div class="col-auto">

src/app/components/weather/weather.component.ts

@@ -7,6 +7,8 @@ import {WeatherDetailsComponent} from '@components/weather-details/weather-detai
 import {AsyncPipe} from '@angular/common';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {Observable} from 'rxjs';
+import {TrendingService} from '@services/trending.service';
+import {Trending} from '@models/trending';
 
 const SEARCH_FIELD_FORM_ID = 'townTextSearch';
 
@@ -26,10 +28,12 @@ export class WeatherComponent implements OnInit {
   public selectedTownWeather : WritableSignal<TownWeather | null> = signal(null);
   public globalWeather!: Signal<TownWeather[] | undefined>;
   public townFilter: WritableSignal<string | null> = signal(null);
-  public availableTownWeather!: Signal<TownWeather[] | undefined>;
+  public availableTownWeather!: Signal<TownWeather[]>;
+  public trending!: Signal<Trending | null>;
   public globalWeather$?: Observable<TownWeather[]>;
   public townFilterForm!: FormGroup;
   private weatherService = inject(WeatherService);
+  private trendingService = inject(TrendingService);
   private formBuilder = inject(FormBuilder);
 
   constructor() {
@@ -55,7 +59,9 @@ export class WeatherComponent implements OnInit {
         return globalWeather;
       }
     });
-
+    this.trending = computed(() => {
+      return this.trendingService.retrieveTrending(this.availableTownWeather())
+    });
   }
 
   public selectedTown($selectedTownWeather: TownWeather) {

src/app/models/town-weather.spec.ts

@@ -1,7 +1,65 @@
 import { TownWeather } from './town-weather';
 
+const A_TOWN = {
+  "id": 1,
+  "name": "Douala",
+  "forecast": {
+    "condition": "cloudy",
+    "wind": {
+      "speed": {
+        "value": 18.5,
+        "unit": "km/h"
+      },
+      "direction": "North-West"
+    },
+    "temperature": {
+      "min": {
+        "value": 10.8,
+        "unit": "°c"
+      },
+      "max": {
+        "value": 29,
+        "unit": "°c"
+      }
+    }
+  }
+};
+
+const ANOTHER_TOWN = {
+  "id": 1,
+  "name": "Douala",
+  "forecast": {
+    "condition": "cloudy",
+    "wind": {
+      "speed": {
+        "value": 18.5,
+        "unit": "km/h"
+      },
+      "direction": "North-West"
+    },
+    "temperature": {
+      "min": {
+        "value": 10.8,
+        "unit": "°c"
+      }
+    }
+  }
+};
+
 describe('Town', () => {
   it('should create an instance', () => {
     expect(new TownWeather()).toBeTruthy();
   });
+
+  it('should compute temperature range', () => {
+    const townWeather = Object.assign(new TownWeather(), A_TOWN);
+    expect(townWeather).toBeTruthy();
+    expect(townWeather.temperatureRange()).toEqual(18.2);
+  });
+
+  it('should throws error when compute temperature range with bad input', () => {
+    const townWeather = Object.assign(new TownWeather(), ANOTHER_TOWN);
+    expect(townWeather).toBeTruthy();
+    expect(() => townWeather.temperatureRange()).toThrow("Invalid temperature min and/or max");
+  });
 });

src/app/models/town-weather.ts

@@ -4,4 +4,12 @@ export class TownWeather {
     id !: number;
     name !: string;
     forecast !: Forecast;
+
+    temperatureRange(): number {
+      try {
+        return this.forecast.temperature.max!.value - this.forecast.temperature.min!.value;
+      } catch (e) {
+        throw Error("Invalid temperature min and/or max");
+      }
+    }
 }

src/app/models/trending.ts

@@ -0,0 +1,4 @@
+export type Trending = {
+  label: string,
+  url: string
+}

src/app/services/trending.service.spec.ts

@@ -0,0 +1,117 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TrendingService } from './trending.service';
+import {TownWeather} from '@models/town-weather';
+
+const TOWNS_WEATHER = [
+  {
+    "id": 1,
+    "name": "Douala",
+    "forecast": {
+      "condition": "cloudy",
+      "wind": {
+        "speed": {
+          "value": 18.5,
+          "unit": "km/h"
+        },
+        "direction": "North-West"
+      },
+      "temperature": {
+        "min": {
+          "value": 10.8,
+          "unit": "°c"
+        },
+        "max": {
+          "value": 29,
+          "unit": "°c"
+        }
+      }
+    }
+  },
+  {
+    "id": 2,
+    "name": "Bafoussam",
+    "forecast": {
+      "condition": "cloudy",
+      "wind": {
+        "speed": {
+          "value": 18.5,
+          "unit": "km/h"
+        },
+        "direction": "North-West"
+      },
+      "temperature": {
+        "min": {
+          "value": 10.8,
+          "unit": "°c"
+        },
+        "max": {
+          "value": 29,
+          "unit": "°c"
+        }
+      }
+    }
+  },
+  {
+    "id": 3,
+    "name": "Yaoundé",
+    "forecast": {
+      "condition": "cloudy",
+      "wind": {
+        "speed": {
+          "value": 18.5,
+          "unit": "km/h"
+        },
+        "direction": "North-West"
+      },
+      "temperature": {
+        "min": {
+          "value": 10.8,
+          "unit": "°c"
+        },
+        "max": {
+          "value": 29,
+          "unit": "°c"
+        }
+      }
+    }
+  }
+];
+
+describe('TrendingService', () => {
+  let service: TrendingService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TrendingService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should generate random index', () => {
+    expect(service).toBeTruthy();
+    const townWeathers = TOWNS_WEATHER as TownWeather[];
+    expect(service["generateRandomIndex"](townWeathers)).toBeGreaterThanOrEqual(0);
+    expect(service["generateRandomIndex"](townWeathers)).toBeLessThan(townWeathers.length);
+  });
+
+  it('retrieveTrending should return null empty array', () => {
+    expect(service).toBeTruthy();
+    const townWeathers: TownWeather[] = [];
+    expect(service.retrieveTrending(townWeathers)).toBeNull();
+  });
+
+  it('retrieveTrending should return trending', () => {
+    expect(service).toBeTruthy();
+    const townWeathers = TOWNS_WEATHER as TownWeather[];
+    service["generateRandomIndex"] = jest.fn().mockImplementation(() => 1);
+    const trending = service.retrieveTrending(townWeathers);
+    expect(service["generateRandomIndex"]).toHaveBeenCalledTimes(1);
+    expect(trending).toEqual({
+      label: "Visiter Bafoussam",
+      url: "https://www.google.com/search?q=Bafoussam"
+    });
+  });
+});

src/app/services/trending.service.ts

@@ -0,0 +1,26 @@
+import {Injectable} from '@angular/core';
+import {TownWeather} from '@models/town-weather';
+import {Trending} from '@models/trending';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TrendingService {
+
+  constructor() { }
+
+  public retrieveTrending(townWeathers: TownWeather[]): Trending | null {
+    if (townWeathers.length === 0) {
+      return null;
+    }
+    const randomIndex = this.generateRandomIndex(townWeathers);
+    return {
+      label: `Visiter ${townWeathers[randomIndex].name}`,
+      url: `https://www.google.com/search?q=${townWeathers[randomIndex].name}`
+    };
+  }
+
+  private generateRandomIndex(townWeathers: TownWeather[]): number {
+    return Math.floor(Math.random() * townWeathers.length);
+  }
+}