From 4c9720e92c2460f8f80781091a6f22daf03eeaaf Mon Sep 17 00:00:00 2001 From: nlauvray Date: Wed, 2 Jul 2025 16:39:49 +0200 Subject: [PATCH 1/8] test_unitaire_fonctionnel --- src/app/app.component.html | 8 +++--- src/app/app.component.spec.ts | 16 ++---------- src/app/app.component.ts | 4 ++- .../components/chart/chart.component.spec.ts | 17 ++++++++++--- .../date-picker/date-picker.component.html | 4 +-- .../date-picker/date-picker.component.spec.ts | 19 ++++++++------ src/app/layout/header/header.component.html | 2 +- .../layout/header/header.component.spec.ts | 13 +++++++--- src/app/layout/sidebar/sidebar.component.html | 4 +-- .../layout/sidebar/sidebar.component.spec.ts | 25 ++++++++++++++++--- .../pages/dashboard/dashboard.component.html | 2 ++ .../dashboard/dashboard.component.spec.ts | 11 +++++--- src/app/pages/home/home.component.html | 4 +-- src/app/pages/home/home.component.spec.ts | 12 ++++++--- src/app/pages/landing/landing.component.html | 4 +-- .../pages/landing/landing.component.spec.ts | 15 ++++++++--- src/app/pages/predict/predict.component.html | 2 +- .../pages/predict/predict.component.spec.ts | 15 ++++++++--- src/app/services/api.service.spec.ts | 6 +++-- src/app/swagger/swagger.component.spec.ts | 15 ++++++++--- 20 files changed, 127 insertions(+), 71 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 6813df5..8e3d71d 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,9 +1,9 @@
- +
- +
- +
-
\ No newline at end of file + diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index a8e55e2..7302bd6 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -1,10 +1,11 @@ import { TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppComponent], + imports: [AppComponent, RouterTestingModule], }).compileComponents(); }); @@ -13,17 +14,4 @@ describe('AppComponent', () => { const app = fixture.componentInstance; expect(app).toBeTruthy(); }); - - it(`should have the 'Sanalyz_front' title`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('Sanalyz_front'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Hello, Sanalyz_front'); - }); }); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 33c881f..28d68c7 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -12,7 +12,9 @@ import { ThemeService } from "./services/theme.service"; styleUrls: ["./app.component.css"], }) export class AppComponent { + title = 'Sanalyz_front'; + constructor(private themeService: ThemeService) { this.themeService.initializeTheme(); } -} \ No newline at end of file +} diff --git a/src/app/components/chart/chart.component.spec.ts b/src/app/components/chart/chart.component.spec.ts index ea57557..b8adec6 100644 --- a/src/app/components/chart/chart.component.spec.ts +++ b/src/app/components/chart/chart.component.spec.ts @@ -1,6 +1,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; - import { ChartComponent } from './chart.component'; +import { of } from 'rxjs'; describe('ChartComponent', () => { let component: ChartComponent; @@ -8,16 +8,25 @@ describe('ChartComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ChartComponent] - }) - .compileComponents(); + imports: [ChartComponent], + }).compileComponents(); fixture = TestBed.createComponent(ChartComponent); component = fixture.componentInstance; + + component.source = (params: any) => { + return of([1, 2, 3]); // exemple tableau mocké + }; + fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); + + it('should render a canvas element', () => { + const canvas: HTMLCanvasElement = fixture.nativeElement.querySelector('canvas'); + expect(canvas).toBeTruthy(); + }); }); diff --git a/src/app/components/date-picker/date-picker.component.html b/src/app/components/date-picker/date-picker.component.html index f20f368..0f4ba14 100644 --- a/src/app/components/date-picker/date-picker.component.html +++ b/src/app/components/date-picker/date-picker.component.html @@ -1,7 +1,7 @@ -
+
{ - let component: DatePickerComponent; - let fixture: ComponentFixture; + let component: DatePicker; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [DatePickerComponent] - }) - .compileComponents(); + imports: [DatePicker], + }).compileComponents(); - fixture = TestBed.createComponent(DatePickerComponent); + fixture = TestBed.createComponent(DatePicker); component = fixture.componentInstance; fixture.detectChanges(); }); @@ -20,4 +18,9 @@ describe('DatePickerComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + it('should render an input[type="date"] element', () => { + const datePickerElement: HTMLInputElement = fixture.nativeElement.querySelector('input[type="date"]'); + expect(datePickerElement).toBeTruthy(); + }); }); diff --git a/src/app/layout/header/header.component.html b/src/app/layout/header/header.component.html index 287e9ff..99118a8 100644 --- a/src/app/layout/header/header.component.html +++ b/src/app/layout/header/header.component.html @@ -1,5 +1,5 @@
{ let component: HeaderComponent; @@ -8,9 +8,9 @@ describe('HeaderComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [HeaderComponent] - }) - .compileComponents(); + imports: [HeaderComponent], + providers: [provideHttpClientTesting()] + }).compileComponents(); fixture = TestBed.createComponent(HeaderComponent); component = fixture.componentInstance; @@ -20,4 +20,9 @@ describe('HeaderComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + it('should render header element with class "header"', () => { + const headerElement = fixture.nativeElement.querySelector('.header'); + expect(headerElement).toBeTruthy(); + }); }); diff --git a/src/app/layout/sidebar/sidebar.component.html b/src/app/layout/sidebar/sidebar.component.html index 0bf8aaa..383431e 100644 --- a/src/app/layout/sidebar/sidebar.component.html +++ b/src/app/layout/sidebar/sidebar.component.html @@ -1,5 +1,5 @@ \ No newline at end of file + diff --git a/src/app/layout/sidebar/sidebar.component.spec.ts b/src/app/layout/sidebar/sidebar.component.spec.ts index 5445f3c..fc746e3 100644 --- a/src/app/layout/sidebar/sidebar.component.spec.ts +++ b/src/app/layout/sidebar/sidebar.component.spec.ts @@ -1,6 +1,9 @@ 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'; describe('SidebarComponent', () => { let component: SidebarComponent; @@ -8,9 +11,18 @@ describe('SidebarComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [SidebarComponent] - }) - .compileComponents(); + imports: [SidebarComponent, RouterTestingModule], + providers: [ + provideHttpClientTesting(), + { + provide: ActivatedRoute, + useValue: { + params: of({}), // mock des params + snapshot: { paramMap: { get: () => null } } + } + } + ] + }).compileComponents(); fixture = TestBed.createComponent(SidebarComponent); component = fixture.componentInstance; @@ -20,4 +32,9 @@ describe('SidebarComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + it('should render sidebar element', () => { + const sidebarElement: HTMLElement = fixture.nativeElement.querySelector('.sidebar'); + expect(sidebarElement).toBeTruthy(); + }); }); diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html index e69de29..ba58783 100644 --- a/src/app/pages/dashboard/dashboard.component.html +++ b/src/app/pages/dashboard/dashboard.component.html @@ -0,0 +1,2 @@ +
+
diff --git a/src/app/pages/dashboard/dashboard.component.spec.ts b/src/app/pages/dashboard/dashboard.component.spec.ts index 30e39a2..c25b565 100644 --- a/src/app/pages/dashboard/dashboard.component.spec.ts +++ b/src/app/pages/dashboard/dashboard.component.spec.ts @@ -1,5 +1,4 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; - import { DashboardComponent } from './dashboard.component'; describe('DashboardComponent', () => { @@ -8,9 +7,8 @@ describe('DashboardComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [DashboardComponent] - }) - .compileComponents(); + imports: [DashboardComponent], + }).compileComponents(); fixture = TestBed.createComponent(DashboardComponent); component = fixture.componentInstance; @@ -20,4 +18,9 @@ describe('DashboardComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + it('should render element with class "dashboard"', () => { + const dashboardElement = fixture.nativeElement.querySelector('.dashboard'); + expect(dashboardElement).toBeTruthy(); + }); }); diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index f7a1e91..52a62e4 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -1,5 +1,5 @@
- \ No newline at end of file + diff --git a/src/app/pages/home/home.component.spec.ts b/src/app/pages/home/home.component.spec.ts index 1191557..8d11982 100644 --- a/src/app/pages/home/home.component.spec.ts +++ b/src/app/pages/home/home.component.spec.ts @@ -1,6 +1,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; - import { HomeComponent } from './home.component'; +import { HttpClientTestingModule } from '@angular/common/http/testing'; describe('HomeComponent', () => { let component: HomeComponent; @@ -8,9 +8,8 @@ describe('HomeComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [HomeComponent] - }) - .compileComponents(); + imports: [HomeComponent, HttpClientTestingModule], + }).compileComponents(); fixture = TestBed.createComponent(HomeComponent); component = fixture.componentInstance; @@ -20,4 +19,9 @@ describe('HomeComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + it('should render element with class "home"', () => { + const homeElement = fixture.nativeElement.querySelector('.home'); + expect(homeElement).toBeTruthy(); + }); }); diff --git a/src/app/pages/landing/landing.component.html b/src/app/pages/landing/landing.component.html index 91861fd..9a77cf0 100644 --- a/src/app/pages/landing/landing.component.html +++ b/src/app/pages/landing/landing.component.html @@ -1,6 +1,6 @@ -
+
-
\ No newline at end of file +
diff --git a/src/app/pages/landing/landing.component.spec.ts b/src/app/pages/landing/landing.component.spec.ts index 83cd131..e425aae 100644 --- a/src/app/pages/landing/landing.component.spec.ts +++ b/src/app/pages/landing/landing.component.spec.ts @@ -1,5 +1,5 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; - +import { RouterTestingModule } from '@angular/router/testing'; import { LandingComponent } from './landing.component'; describe('LandingComponent', () => { @@ -8,9 +8,11 @@ describe('LandingComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [LandingComponent] - }) - .compileComponents(); + imports: [ + LandingComponent, + RouterTestingModule + ], + }).compileComponents(); fixture = TestBed.createComponent(LandingComponent); component = fixture.componentInstance; @@ -20,4 +22,9 @@ describe('LandingComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + it('should render element with class "landing"', () => { + const landingElement = fixture.nativeElement.querySelector('.landing'); + expect(landingElement).toBeTruthy(); + }); }); diff --git a/src/app/pages/predict/predict.component.html b/src/app/pages/predict/predict.component.html index 39afbfe..3a9cde2 100644 --- a/src/app/pages/predict/predict.component.html +++ b/src/app/pages/predict/predict.component.html @@ -1,5 +1,5 @@
Une fois le rapport généré, il sera ajouté à la liste des rapports. Vous diff --git a/src/app/pages/predict/predict.component.spec.ts b/src/app/pages/predict/predict.component.spec.ts index 3d5efa2..57b8522 100644 --- a/src/app/pages/predict/predict.component.spec.ts +++ b/src/app/pages/predict/predict.component.spec.ts @@ -1,6 +1,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; - import { PredictComponent } from './predict.component'; +import { HttpClientTestingModule } from '@angular/common/http/testing'; // <-- Import describe('PredictComponent', () => { let component: PredictComponent; @@ -8,9 +8,11 @@ describe('PredictComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [PredictComponent] - }) - .compileComponents(); + imports: [ + PredictComponent, + HttpClientTestingModule + ], + }).compileComponents(); fixture = TestBed.createComponent(PredictComponent); component = fixture.componentInstance; @@ -20,4 +22,9 @@ describe('PredictComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + it('should render element with class "predict"', () => { + const predictElement = fixture.nativeElement.querySelector('.predict'); + expect(predictElement).toBeTruthy(); + }); }); diff --git a/src/app/services/api.service.spec.ts b/src/app/services/api.service.spec.ts index c0310ae..086ab81 100644 --- a/src/app/services/api.service.spec.ts +++ b/src/app/services/api.service.spec.ts @@ -1,12 +1,14 @@ import { TestBed } from '@angular/core/testing'; - import { ApiService } from './api.service'; +import { HttpClientTestingModule } from '@angular/common/http/testing'; describe('ApiService', () => { let service: ApiService; beforeEach(() => { - TestBed.configureTestingModule({}); + TestBed.configureTestingModule({ + imports: [HttpClientTestingModule], + }); service = TestBed.inject(ApiService); }); diff --git a/src/app/swagger/swagger.component.spec.ts b/src/app/swagger/swagger.component.spec.ts index 5bf2387..d0af399 100644 --- a/src/app/swagger/swagger.component.spec.ts +++ b/src/app/swagger/swagger.component.spec.ts @@ -1,5 +1,4 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; - import { SwaggerComponent } from './swagger.component'; describe('SwaggerComponent', () => { @@ -8,9 +7,8 @@ describe('SwaggerComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [SwaggerComponent] - }) - .compileComponents(); + imports: [SwaggerComponent], + }).compileComponents(); fixture = TestBed.createComponent(SwaggerComponent); component = fixture.componentInstance; @@ -20,4 +18,13 @@ describe('SwaggerComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + it('should render swagger container with iframe', () => { + const container = fixture.nativeElement.querySelector('.swagger-container'); + expect(container).toBeTruthy(); + + const iframe = container.querySelector('iframe'); + expect(iframe).toBeTruthy(); + expect(iframe.src).toContain('swagger-ui/index.html'); + }); }); From d681a0fbbe8526b70a6cc55b77421221f2e06063 Mon Sep 17 00:00:00 2001 From: nlauvray Date: Wed, 2 Jul 2025 16:52:10 +0200 Subject: [PATCH 2/8] dashboard --- src/app/pages/dashboard/dashboard.component.css | 0 src/app/pages/dashboard/dashboard.component.spec.ts | 2 +- src/app/pages/dashboard/dashboard.component.ts | 13 +++++++++++++ 3 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 src/app/pages/dashboard/dashboard.component.css create mode 100644 src/app/pages/dashboard/dashboard.component.ts diff --git a/src/app/pages/dashboard/dashboard.component.css b/src/app/pages/dashboard/dashboard.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/dashboard/dashboard.component.spec.ts b/src/app/pages/dashboard/dashboard.component.spec.ts index c25b565..2c8ce58 100644 --- a/src/app/pages/dashboard/dashboard.component.spec.ts +++ b/src/app/pages/dashboard/dashboard.component.spec.ts @@ -7,7 +7,7 @@ describe('DashboardComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [DashboardComponent], + imports: [DashboardComponent], }).compileComponents(); fixture = TestBed.createComponent(DashboardComponent); diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts new file mode 100644 index 0000000..b3b6b7f --- /dev/null +++ b/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 { +} From c8c07c6c9b7271d2cbabcd4d93e4787d6cf4c6ce Mon Sep 17 00:00:00 2001 From: nlauvray Date: Thu, 3 Jul 2025 07:57:18 +0200 Subject: [PATCH 3/8] add playwrite for the test --- e2e/Test1.spec.ts | 0 e2e/header.spec.ts | 29 +++++++++++++++++++++++++++++ e2e/sidebar.spec.ts | 34 ++++++++++++++++++++++++++++++++++ playrwright.config.ts | 19 +++++++++++++++++++ test-results/.last-run.json | 4 ++++ 5 files changed, 86 insertions(+) create mode 100644 e2e/Test1.spec.ts create mode 100644 e2e/header.spec.ts create mode 100644 e2e/sidebar.spec.ts create mode 100644 playrwright.config.ts create mode 100644 test-results/.last-run.json diff --git a/e2e/Test1.spec.ts b/e2e/Test1.spec.ts new file mode 100644 index 0000000..e69de29 diff --git a/e2e/header.spec.ts b/e2e/header.spec.ts new file mode 100644 index 0000000..09d40a1 --- /dev/null +++ b/e2e/header.spec.ts @@ -0,0 +1,29 @@ + +import { test, expect } from '@playwright/test'; + +test.describe('Header', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/'); + }); + + test('doit afficher le logo', async ({ page }) => { + const logo = page.locator('header img[alt="logo"]'); + await expect(logo).toBeVisible(); + }); + + test('doit contenir le titre de l\'application', async ({ page }) => { + await expect(page.locator('header')).toContainText(/DocNavigator/i); + }); + + test('le lien GitHub pointe vers le bon URL', async ({ page }) => { + const githubLink = page.locator('header a[href*="github.com"]'); + await expect(githubLink).toHaveAttribute('target', '_blank'); + await expect(githubLink).toHaveAttribute('href', /github\.com/); + }); + + test('le header est sticky', async ({ page }) => { + const header = page.locator('header'); + const position = await header.evaluate((el) => getComputedStyle(el).position); + expect(position).toBe('sticky'); + }); +}); diff --git a/e2e/sidebar.spec.ts b/e2e/sidebar.spec.ts new file mode 100644 index 0000000..e6d01d3 --- /dev/null +++ b/e2e/sidebar.spec.ts @@ -0,0 +1,34 @@ +import { test, expect } from '@playwright/test'; + +test.describe('Sidebar', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/'); + }); + + test('doit être visible', async ({ page }) => { + await expect(page.locator('aside')).toBeVisible(); + }); + + test('doit contenir des liens de navigation', async ({ page }) => { + const links = page.locator('aside nav a'); + await expect(await links.count()).toBeGreaterThan(0); + }); + + test('le lien actif doit être mis en surbrillance', async ({ page }) => { + const firstLink = page.locator('aside nav a').first(); + await firstLink.click(); + await expect(firstLink).toHaveClass(/active|text-primary|selected/); + }); + + test('le contenu principal change après clic sur un lien', async ({ page }) => { + await page.getByRole('link', { name: /Introduction/i }).click(); + await expect(page.locator('main')).toContainText(/Introduction/i); + }); + + test('la sidebar peut être fermée sur mobile', async ({ page }) => { + await page.setViewportSize({ width: 375, height: 667 }); // iPhone 6/7/8 + const toggleBtn = page.getByRole('button', { name: /menu|toggle/i }); + await toggleBtn.click(); + await expect(page.locator('aside')).toBeHidden(); + }); +}); diff --git a/playrwright.config.ts b/playrwright.config.ts new file mode 100644 index 0000000..a02362b --- /dev/null +++ b/playrwright.config.ts @@ -0,0 +1,19 @@ +import { defineConfig } from '@playwright/test'; + +export default defineConfig({ + testDir: './e2e', + testIgnore: [ + '**/src/app/**/*.spec.ts', + ], + webServer: { + command: 'npx ng serve', + port: 4200, + timeout: 120000, + }, + use: { + baseURL: 'http://localhost:4200', + headless: true, + screenshot: 'only-on-failure', + video: 'retain-on-failure', + }, +}); diff --git a/test-results/.last-run.json b/test-results/.last-run.json new file mode 100644 index 0000000..5fca3f8 --- /dev/null +++ b/test-results/.last-run.json @@ -0,0 +1,4 @@ +{ + "status": "failed", + "failedTests": [] +} \ No newline at end of file From 0c0509cb10bdc556a739eaed89f803ede548073b Mon Sep 17 00:00:00 2001 From: nlauvray Date: Thu, 3 Jul 2025 13:29:37 +0200 Subject: [PATCH 4/8] ajout_commencement_playwright_changepage_switchlanguage --- angular.json | 3 ++ e2e/changepage-test.spec.ts | 26 ++++++++++++ e2e/graphname-test.spec.ts | 1 + e2e/header.spec.ts | 29 ------------- e2e/refreshgraph-test.spec.ts | 2 + e2e/sidebar.spec.ts | 34 --------------- e2e/support-test.spec.ts | 2 + e2e/switchlanguage-test.spec.ts | 41 +++++++++++++++++++ src/app/app.component.spec.ts | 18 +++++++- src/app/app.component.ts | 3 +- .../components/chart/chart.component.spec.ts | 14 +++++-- .../date-picker/date-picker.component.spec.ts | 6 ++- .../layout/header/header.component.spec.ts | 6 ++- .../layout/sidebar/sidebar.component.spec.ts | 3 +- src/app/pages/home/home.component.html | 1 + src/app/pages/home/home.component.spec.ts | 9 ++-- .../pages/landing/landing.component.spec.ts | 4 +- .../pages/predict/predict.component.spec.ts | 7 +++- src/app/services/api.service.spec.ts | 4 +- test-results/.last-run.json | 2 +- 20 files changed, 133 insertions(+), 82 deletions(-) create mode 100644 e2e/changepage-test.spec.ts create mode 100644 e2e/graphname-test.spec.ts delete mode 100644 e2e/header.spec.ts create mode 100644 e2e/refreshgraph-test.spec.ts delete mode 100644 e2e/sidebar.spec.ts create mode 100644 e2e/support-test.spec.ts create mode 100644 e2e/switchlanguage-test.spec.ts diff --git a/angular.json b/angular.json index 436dc68..12dbb51 100644 --- a/angular.json +++ b/angular.json @@ -92,5 +92,8 @@ } } } + }, + "cli": { + "analytics": "9b5ca333-63fb-42e3-80e2-d9d3dacb5af2" } } diff --git a/e2e/changepage-test.spec.ts b/e2e/changepage-test.spec.ts new file mode 100644 index 0000000..ecc9d62 --- /dev/null +++ b/e2e/changepage-test.spec.ts @@ -0,0 +1,26 @@ +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 }) => { + // Cliquer sur le lien Predict dans la sidebar + await page.click('nav.sidebar a[href="/predict"]'); + + // Vérifier que l’URL a changé vers /predict + await expect(page).toHaveURL(/\/predict$/); + }); + + test('should navigate to Dashboard page when clicking Dashboard link in sidebar', async ({ page }) => { + // Cliquer sur le lien Dashboard dans la sidebar + await page.click('nav.sidebar a[href="/"]'); + + // Vérifier que l’URL est bien la racine + await expect(page).toHaveURL(/\/$/); + + // Vérifier que la page Dashboard affiche un contenu spécifique + await expect(page.locator('button', { hasText: /refresh/i })).toBeVisible(); + }); +}); diff --git a/e2e/graphname-test.spec.ts b/e2e/graphname-test.spec.ts new file mode 100644 index 0000000..ee3d6a7 --- /dev/null +++ b/e2e/graphname-test.spec.ts @@ -0,0 +1 @@ +import { test, expect } from '@playwright/test'; diff --git a/e2e/header.spec.ts b/e2e/header.spec.ts deleted file mode 100644 index 09d40a1..0000000 --- a/e2e/header.spec.ts +++ /dev/null @@ -1,29 +0,0 @@ - -import { test, expect } from '@playwright/test'; - -test.describe('Header', () => { - test.beforeEach(async ({ page }) => { - await page.goto('/'); - }); - - test('doit afficher le logo', async ({ page }) => { - const logo = page.locator('header img[alt="logo"]'); - await expect(logo).toBeVisible(); - }); - - test('doit contenir le titre de l\'application', async ({ page }) => { - await expect(page.locator('header')).toContainText(/DocNavigator/i); - }); - - test('le lien GitHub pointe vers le bon URL', async ({ page }) => { - const githubLink = page.locator('header a[href*="github.com"]'); - await expect(githubLink).toHaveAttribute('target', '_blank'); - await expect(githubLink).toHaveAttribute('href', /github\.com/); - }); - - test('le header est sticky', async ({ page }) => { - const header = page.locator('header'); - const position = await header.evaluate((el) => getComputedStyle(el).position); - expect(position).toBe('sticky'); - }); -}); diff --git a/e2e/refreshgraph-test.spec.ts b/e2e/refreshgraph-test.spec.ts new file mode 100644 index 0000000..6b49d88 --- /dev/null +++ b/e2e/refreshgraph-test.spec.ts @@ -0,0 +1,2 @@ +import { test, expect } from '@playwright/test'; + diff --git a/e2e/sidebar.spec.ts b/e2e/sidebar.spec.ts deleted file mode 100644 index e6d01d3..0000000 --- a/e2e/sidebar.spec.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test.describe('Sidebar', () => { - test.beforeEach(async ({ page }) => { - await page.goto('/'); - }); - - test('doit être visible', async ({ page }) => { - await expect(page.locator('aside')).toBeVisible(); - }); - - test('doit contenir des liens de navigation', async ({ page }) => { - const links = page.locator('aside nav a'); - await expect(await links.count()).toBeGreaterThan(0); - }); - - test('le lien actif doit être mis en surbrillance', async ({ page }) => { - const firstLink = page.locator('aside nav a').first(); - await firstLink.click(); - await expect(firstLink).toHaveClass(/active|text-primary|selected/); - }); - - test('le contenu principal change après clic sur un lien', async ({ page }) => { - await page.getByRole('link', { name: /Introduction/i }).click(); - await expect(page.locator('main')).toContainText(/Introduction/i); - }); - - test('la sidebar peut être fermée sur mobile', async ({ page }) => { - await page.setViewportSize({ width: 375, height: 667 }); // iPhone 6/7/8 - const toggleBtn = page.getByRole('button', { name: /menu|toggle/i }); - await toggleBtn.click(); - await expect(page.locator('aside')).toBeHidden(); - }); -}); diff --git a/e2e/support-test.spec.ts b/e2e/support-test.spec.ts new file mode 100644 index 0000000..6b49d88 --- /dev/null +++ b/e2e/support-test.spec.ts @@ -0,0 +1,2 @@ +import { test, expect } from '@playwright/test'; + diff --git a/e2e/switchlanguage-test.spec.ts b/e2e/switchlanguage-test.spec.ts new file mode 100644 index 0000000..5cbb499 --- /dev/null +++ b/e2e/switchlanguage-test.spec.ts @@ -0,0 +1,41 @@ +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 }) => { + // Charge la traduction JSON pour la langue + 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); + }); + } +}); + diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 7302bd6..3fd9209 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -1,11 +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, RouterTestingModule], + imports: [ + AppComponent, + RouterTestingModule, + TranslateModule.forRoot() + ], }).compileComponents(); }); @@ -14,4 +19,15 @@ describe('AppComponent', () => { const app = fixture.componentInstance; expect(app).toBeTruthy(); }); + + it(`should have the 'Sanalyz_front' title`, () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('Sanalyz_front'); + }); + + it('should render title', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + }); }); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 28d68c7..d4bd0ff 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -12,8 +12,7 @@ import { ThemeService } from "./services/theme.service"; styleUrls: ["./app.component.css"], }) export class AppComponent { - title = 'Sanalyz_front'; - + title = "Sanalyz_front"; constructor(private themeService: ThemeService) { this.themeService.initializeTheme(); } diff --git a/src/app/components/chart/chart.component.spec.ts b/src/app/components/chart/chart.component.spec.ts index b8adec6..86fbc05 100644 --- a/src/app/components/chart/chart.component.spec.ts +++ b/src/app/components/chart/chart.component.spec.ts @@ -1,4 +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'; @@ -8,15 +10,19 @@ describe('ChartComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ChartComponent], + imports: [ + ChartComponent, + HttpClientTestingModule, + TranslateModule.forRoot({ + loader: { provide: TranslateLoader, useClass: TranslateFakeLoader } + }) + ] }).compileComponents(); fixture = TestBed.createComponent(ChartComponent); component = fixture.componentInstance; - component.source = (params: any) => { - return of([1, 2, 3]); // exemple tableau mocké - }; + component.source = () => of([]); fixture.detectChanges(); }); diff --git a/src/app/components/date-picker/date-picker.component.spec.ts b/src/app/components/date-picker/date-picker.component.spec.ts index 83886ca..88115e1 100644 --- a/src/app/components/date-picker/date-picker.component.spec.ts +++ b/src/app/components/date-picker/date-picker.component.spec.ts @@ -1,5 +1,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { DatePicker } from './date-picker.component'; +import { TranslateModule } from '@ngx-translate/core'; describe('DatePickerComponent', () => { let component: DatePicker; @@ -7,7 +8,10 @@ describe('DatePickerComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [DatePicker], + imports: [ + DatePicker, + TranslateModule.forRoot() + ], }).compileComponents(); fixture = TestBed.createComponent(DatePicker); diff --git a/src/app/layout/header/header.component.spec.ts b/src/app/layout/header/header.component.spec.ts index b92e034..e0459c7 100644 --- a/src/app/layout/header/header.component.spec.ts +++ b/src/app/layout/header/header.component.spec.ts @@ -1,6 +1,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { HeaderComponent } from './header.component'; import { provideHttpClientTesting } from '@angular/common/http/testing'; +import { TranslateModule } from '@ngx-translate/core'; describe('HeaderComponent', () => { let component: HeaderComponent; @@ -8,7 +9,10 @@ describe('HeaderComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [HeaderComponent], + imports: [ + HeaderComponent, + TranslateModule.forRoot() + ], providers: [provideHttpClientTesting()] }).compileComponents(); diff --git a/src/app/layout/sidebar/sidebar.component.spec.ts b/src/app/layout/sidebar/sidebar.component.spec.ts index fc746e3..b7ea1f4 100644 --- a/src/app/layout/sidebar/sidebar.component.spec.ts +++ b/src/app/layout/sidebar/sidebar.component.spec.ts @@ -4,6 +4,7 @@ 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; @@ -11,7 +12,7 @@ describe('SidebarComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [SidebarComponent, RouterTestingModule], + imports: [SidebarComponent, RouterTestingModule, TranslateModule.forRoot()], providers: [ provideHttpClientTesting(), { diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 5f01dea..43f5a2d 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -3,6 +3,7 @@ >