diff --git a/e2e/changepage-test.spec.ts b/e2e/changepage-test.spec.ts new file mode 100644 index 0000000..80a5f47 --- /dev/null +++ b/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(); + }); +}); 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/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/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..5d1c3ad --- /dev/null +++ b/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); + }); + } +}); + 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 f78eecd..9a1db4b 100644 --- a/src/app/app.component.spec.ts +++ b/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(); }); diff --git a/src/app/components/chart/chart.component.spec.ts b/src/app/components/chart/chart.component.spec.ts index f20a82f..86fbc05 100644 --- a/src/app/components/chart/chart.component.spec.ts +++ b/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(); + }); }); diff --git a/src/app/components/date-picker/date-picker.component.html b/src/app/components/date-picker/date-picker.component.html index 364b344..0b40a77 100644 --- a/src/app/components/date-picker/date-picker.component.html +++ b/src/app/components/date-picker/date-picker.component.html @@ -1,5 +1,4 @@ -
- +
{ 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(); }); diff --git a/src/app/layout/header/header.component.html b/src/app/layout/header/header.component.html index 2bac03c..6b1e942 100644 --- a/src/app/layout/header/header.component.html +++ b/src/app/layout/header/header.component.html @@ -1,5 +1,5 @@
{ let component: HeaderComponent; let fixture: ComponentFixture; + let themeServiceSpy: jasmine.SpyObj; + 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(); + }); }); diff --git a/src/app/layout/sidebar/sidebar.component.html b/src/app/layout/sidebar/sidebar.component.html index 408d409..899622f 100644 --- a/src/app/layout/sidebar/sidebar.component.html +++ b/src/app/layout/sidebar/sidebar.component.html @@ -1,5 +1,5 @@