Dev

e2e/changepage-test.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Sidebar navigation', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('http://localhost:4200/');
+  });
+
+  test('should navigate to Predict page when clicking Predict link in sidebar', async ({ page }) => {
+    await page.click('nav.sidebar a[href="/predict"]');
+
+    await expect(page).toHaveURL(/\/predict$/);
+  });
+
+  test('should navigate to Dashboard page when clicking Dashboard link in sidebar', async ({ page }) => {
+    await page.click('nav.sidebar a[href="/"]');
+
+    await expect(page).toHaveURL(/\/$/);
+
+    await expect(page.locator('button', { hasText: /refresh/i })).toBeVisible();
+  });
+});

e2e/graphname-test.spec.ts

@@ -0,0 +1 @@
+import { test, expect } from '@playwright/test';

e2e/refreshgraph-test.spec.ts

@@ -0,0 +1,2 @@
+import { test, expect } from '@playwright/test';
+

e2e/support-test.spec.ts

@@ -0,0 +1,2 @@
+import { test, expect } from '@playwright/test';
+

e2e/switchlanguage-test.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+
+const LANGS = ['en', 'fr', 'it', 'de'];
+
+test.describe('Switch Language', () => {
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('http://localhost:4200/');
+    await page.waitForLoadState('domcontentloaded');
+  });
+
+  for (let i = 0; i < LANGS.length; i++) {
+    const lang = LANGS[i];
+    test(`should display correct "Refresh" text in ${lang}`, async ({ page }) => {
+      const jsonPath = path.join(process.cwd(), 'public', 'i18n', `${lang}.json`);
+      const fileContent = fs.readFileSync(jsonPath, 'utf-8');
+      const translations = JSON.parse(fileContent);
+      const refreshText = translations?.app?.dashboard?.refresh;
+      expect(refreshText).toBeDefined();
+
+      const langButton = page.locator('[name="toggleLocale"]');
+      await expect(langButton).toBeVisible({ timeout: 5000 });
+
+      for (let j = 0; j < i; j++) {
+        await langButton.click();
+      }
+
+      const refreshBtn = page.locator('[data-testid="refresh-button"]');
+      const btnText = await refreshBtn.textContent();
+      console.log("val btn: " + btnText);
+      console.log("i18n: " + refreshText);
+
+      await expect(refreshBtn).toBeVisible({ timeout: 5000 });
+      await expect(refreshBtn).toHaveText(refreshText);
+    });
+  }
+});
+

src/app/app.component.html

@@ -1,9 +1,9 @@
 <div class="min-h-screen flex flex-row w-full h-full">
-  <app-sidebar />
+  <app-sidebar></app-sidebar>
   <div class="flex flex-col flex-grow">
-    <app-header />
+    <app-header></app-header>
     <div class="flex-grow">
-      <router-outlet />
+      <router-outlet></router-outlet>
     </div>
   </div>
-</div>
+</div>

src/app/app.component.spec.ts

@@ -1,10 +1,16 @@
 import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent],
+      imports: [
+        AppComponent,
+        RouterTestingModule,
+        TranslateModule.forRoot()
+      ],
     }).compileComponents();
   });
 

src/app/components/chart/chart.component.spec.ts

@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { TranslateModule, TranslateLoader, TranslateFakeLoader } from '@ngx-translate/core';
 import { ChartComponent } from './chart.component';
 import { of } from 'rxjs';
 
@@ -9,17 +10,29 @@ describe('ChartComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ChartComponent, HttpClientTestingModule]
-    })
-    .compileComponents();
+      imports: [
+        ChartComponent,
+        HttpClientTestingModule,
+        TranslateModule.forRoot({
+          loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
+        })
+      ]
+    }).compileComponents();
 
     fixture = TestBed.createComponent(ChartComponent);
     component = fixture.componentInstance;
+
     component.source = () => of([]);
+
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should render a canvas element', () => {
+    const canvas: HTMLCanvasElement = fixture.nativeElement.querySelector('canvas');
+    expect(canvas).toBeTruthy();
+  });
 });

src/app/components/date-picker/date-picker.component.html

@@ -1,5 +1,4 @@
-<div class="relative">
-  <!-- w-48 pour harmoniser la largeur -->
+<div class="datepicker relative">
   <input type="hidden" name="date" />
   <input
     type="text"

src/app/components/date-picker/date-picker.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { TranslateModule, TranslateLoader, TranslateFakeLoader } from '@ngx-translate/core';
-import { DatePicker } from './date-picker.component'; // ou le bon chemin
+import { DatePicker } from './date-picker.component';
 
 describe('DatePicker', () => {
   let component: DatePicker;
@@ -10,7 +10,7 @@ describe('DatePicker', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        DatePicker, // ✅ car standalone
+        DatePicker,
         HttpClientTestingModule,
         TranslateModule.forRoot({
           loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
@@ -19,7 +19,6 @@ describe('DatePicker', () => {
     }).compileComponents();
 
     fixture = TestBed.createComponent(DatePicker);
-
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/layout/header/header.component.html

@@ -1,5 +1,5 @@
 <div
-  class="flex items-center justify-between w-full bg-white text-gray-800 dark:bg-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 p-4 shadow-md transition-all duration-300 ease-in-out"
+  class="header flex items-center justify-between w-full bg-white text-gray-800 dark:bg-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 p-4 shadow-md transition-all duration-300 ease-in-out"
 >
   <div class="flex flex-row items-center gap-4 justify-between w-full">
     <img

src/app/layout/header/header.component.spec.ts

@@ -1,23 +1,80 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { HeaderComponent } from './header.component';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { ThemeService } from '../../services/theme.service';
+import { of } from 'rxjs';
 
 describe('HeaderComponent', () => {
   let component: HeaderComponent;
   let fixture: ComponentFixture<HeaderComponent>;
+  let themeServiceSpy: jasmine.SpyObj<ThemeService>;
+  let translateService: TranslateService;
 
   beforeEach(async () => {
+    themeServiceSpy = jasmine.createSpyObj('ThemeService', ['setDarkMode'], {
+      isDarkMode$: of(false), 
+    });
+
     await TestBed.configureTestingModule({
-      imports: [HeaderComponent]
-    })
-    .compileComponents();
+      imports: [
+        HeaderComponent,
+        TranslateModule.forRoot()
+      ],
+      providers: [
+        provideHttpClientTesting(),
+        { provide: ThemeService, useValue: themeServiceSpy }
+      ]
+    }).compileComponents();
 
     fixture = TestBed.createComponent(HeaderComponent);
     component = fixture.componentInstance;
+    translateService = TestBed.inject(TranslateService);
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should render header element with class "header"', () => {
+    const headerElement = fixture.nativeElement.querySelector('.header');
+    expect(headerElement).toBeTruthy();
+  });
+
+  it('should display light mode logo when isDarkMode is false', () => {
+    component.isDarkMode = false;
+    fixture.detectChanges();
+    const logo = fixture.nativeElement.querySelector('img[alt="Logo Sanalyz Bleu Marine"]');
+    expect(logo).toBeTruthy();
+  });
+
+  it('should display dark mode logo when isDarkMode is true', () => {
+    component.isDarkMode = true;
+    fixture.detectChanges();
+    const logo = fixture.nativeElement.querySelector('img[alt="Logo Sanalyz Blanc"]');
+    expect(logo).toBeTruthy();
+  });
+
+  it('should call themeService.setDarkMode() on toggleTheme()', () => {
+    component.toggleTheme();
+    expect(themeServiceSpy.setDarkMode).toHaveBeenCalledWith(true);
+    component.toggleTheme();
+    expect(themeServiceSpy.setDarkMode).toHaveBeenCalledWith(false);
+  });
+
+  it('should toggle locale and update localeIcon', () => {
+    const initialIcon = component.localeIcon;
+    component.toggleLocale();
+    fixture.detectChanges();
+
+    const updatedIcon = component.localeIcon;
+    expect(updatedIcon).not.toBe(initialIcon);
+  });
+
+  it('should unsubscribe on ngOnDestroy()', () => {
+    const unsubscribeSpy = spyOn(component['subscription'], 'unsubscribe');
+    component.ngOnDestroy();
+    expect(unsubscribeSpy).toHaveBeenCalled();
+  });
 });

src/app/layout/sidebar/sidebar.component.html

@@ -1,5 +1,5 @@
 <nav
-  class="flex h-full bg-white dark:bg-gray-900 w-64 p-6 text-gray-800 dark:text-white border-r border-gray-200 dark:border-gray-700 shadow-md top-0 left-0 transition-all duration-300 ease-in-out z-0"
+  class="sidebar flex h-full bg-white dark:bg-gray-900 w-64 p-6 text-gray-800 dark:text-white border-r border-gray-200 dark:border-gray-700 shadow-md top-0 left-0 transition-all duration-300 ease-in-out z-0"
 >
   <ul class="space-y-2 w-full">
     <li>

src/app/layout/sidebar/sidebar.component.spec.ts

@@ -1,16 +1,29 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { SidebarComponent } from './sidebar.component';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ActivatedRoute } from '@angular/router';
+import { of } from 'rxjs';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('SidebarComponent', () => {
   let component: SidebarComponent;
   let fixture: ComponentFixture<SidebarComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [SidebarComponent]
-    })
-    .compileComponents();
+      imports: [SidebarComponent, RouterTestingModule, TranslateModule.forRoot()],
+      providers: [
+        provideHttpClientTesting(),
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            params: of({}), // mock des params
+            snapshot: { paramMap: { get: () => null } }
+          }
+        }
+      ]
+    }).compileComponents();
 
     fixture = TestBed.createComponent(SidebarComponent);
     component = fixture.componentInstance;
@@ -20,4 +33,9 @@ describe('SidebarComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should render sidebar element', () => {
+    const sidebarElement: HTMLElement = fixture.nativeElement.querySelector('.sidebar');
+    expect(sidebarElement).toBeTruthy();
+  });
 });

src/app/pages/dashboard/dashboard.component.html

@@ -0,0 +1,2 @@
+<div class="dashboard">
+</div>

src/app/pages/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render element with class "dashboard"', () => {
+    const dashboardElement = fixture.nativeElement.querySelector('.dashboard');
+    expect(dashboardElement).toBeTruthy();
+  });
+});

src/app/pages/dashboard/dashboard.component.ts

@@ -0,0 +1,13 @@
+import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
+import { Chart, BarController, BarElement, CategoryScale, LinearScale, Tooltip, Legend } from 'chart.js';
+import { CommonModule } from '@angular/common';
+Chart.register(BarController, BarElement, CategoryScale, LinearScale, Tooltip, Legend);
+
+@Component({
+  selector: 'app-dashboard',
+  imports: [CommonModule],
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.css']
+})
+export class DashboardComponent {
+}

src/app/pages/home/home.component.html

@@ -1,8 +1,9 @@
 <main
-  class="pt-10 flex flex-col flex-grow h-full items-center justify-start space-y-4 px-4 bg-white text-gray-800 dark:bg-gray-900 dark:text-white transition-colors duration-300"
+  class="home pt-10 flex flex-col flex-grow h-full items-center justify-start space-y-4 px-4 bg-white text-gray-800 dark:bg-gray-900 dark:text-white transition-colors duration-300"
 >
   <div class="flex flex-row justify-between px-5 pb-20 w-full">
     <button
+      data-testid="refresh-button"
       (click)="pruneCache()"
       class="bg-blue-500 hover:bg-blue-600 dark:bg-gray-800 dark:hover:bg-blue-600 text-white dark:text-gray-300 dark:hover:text-white font-semibold py-2 px-4 border border-blue-500 hover-border-blue-600 dark:border-gray-700 dark:hover:border-blue-600 rounded transition-colors duration-300"
       translate