From 6b933a040066083310bdd0e6f5bcdca2fa08cc4b Mon Sep 17 00:00:00 2001 From: Bastian Wagner Date: Thu, 28 Nov 2024 15:01:30 +0100 Subject: [PATCH] testing --- .../archive/archive.component.spec.ts | 62 +++++++++++ .../components/archive/archive.component.ts | 2 +- .../app/modules/keys/keys.component.spec.ts | 104 ++++++++++++++++++ client/src/app/modules/keys/keys.component.ts | 5 +- client/src/mocks/services/mock.api.service.ts | 11 ++ 5 files changed, 181 insertions(+), 3 deletions(-) create mode 100644 client/src/app/modules/keys/components/archive/archive.component.spec.ts create mode 100644 client/src/app/modules/keys/keys.component.spec.ts create mode 100644 client/src/mocks/services/mock.api.service.ts diff --git a/client/src/app/modules/keys/components/archive/archive.component.spec.ts b/client/src/app/modules/keys/components/archive/archive.component.spec.ts new file mode 100644 index 0000000..416a4d8 --- /dev/null +++ b/client/src/app/modules/keys/components/archive/archive.component.spec.ts @@ -0,0 +1,62 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { HotToastService, provideHotToastConfig } from '@ngxpert/hot-toast'; +import { from, map, of } from 'rxjs'; +import { GridReadyEvent } from 'ag-grid-community'; +import { MatDialog } from '@angular/material/dialog'; +import { ArchiveComponent } from './archive.component'; +import { ApiService } from '../../../../shared/api.service'; +import { MockApiService } from '../../../../../mocks/services/mock.api.service'; + +// Mocking the dependencies +jest.mock('@ngxpert/hot-toast', () => ({ + HotToastService: jest.fn(), +})); + +describe('ArchiveComponent', () => { + let component: ArchiveComponent; + let fixture: ComponentFixture; + + const mockGridReadyEvent: GridReadyEvent = { + api: { setGridOption: jest.fn(), addEventListener: jest.fn() }, + columnApi: { someColumnApiMethod: jest.fn() }, + type: 'gridReady', + } as any; + + const mockHotToastService = { + observe: jest.fn().mockImplementation(() => ({ + loading: 'speichern...', + success: 'Änderungen gespeichert', + error: 'Änderungen konnten nicht gespeichert werden!', + subscribe: jest.fn().mockReturnValue(of([])) + })) + }; + + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ArchiveComponent, ], + providers: [ + { provide: HotToastService, useValue: mockHotToastService }, + { provide: ApiService, useClass: MockApiService }, + ] + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ArchiveComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + component.onGridReady(mockGridReadyEvent); + }); + + it('should create the archive', () => { + expect(component).toBeTruthy(); + }); + + + it('should load the data on start', () => { + expect(component['api'].getKeyArchive).toHaveBeenCalled(); + }); + + +}); \ No newline at end of file diff --git a/client/src/app/modules/keys/components/archive/archive.component.ts b/client/src/app/modules/keys/components/archive/archive.component.ts index a742913..250cf6d 100644 --- a/client/src/app/modules/keys/components/archive/archive.component.ts +++ b/client/src/app/modules/keys/components/archive/archive.component.ts @@ -39,7 +39,7 @@ export class ArchiveComponent { field: 'deletedAt' , headerName: 'Gelöscht' , width: 160 - , type: 'date' + // , type: 'date' , cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value), 'short') }, { diff --git a/client/src/app/modules/keys/keys.component.spec.ts b/client/src/app/modules/keys/keys.component.spec.ts new file mode 100644 index 0000000..17b3e1e --- /dev/null +++ b/client/src/app/modules/keys/keys.component.spec.ts @@ -0,0 +1,104 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { KeysComponent } from './keys.component'; +import { HotToastService, provideHotToastConfig } from '@ngxpert/hot-toast'; +import { from, map, of } from 'rxjs'; +import { ApiService } from '../../shared/api.service'; +import { GridReadyEvent } from 'ag-grid-community'; +import { MatDialog } from '@angular/material/dialog'; +import { CreateKeyComponent } from './create/create.component'; +import { MockApiService } from '../../../mocks/services/mock.api.service'; + +// Mocking the dependencies +jest.mock('@ngxpert/hot-toast', () => ({ + HotToastService: jest.fn(), +})); + +describe('KeysComponent', () => { + let component: KeysComponent; + let fixture: ComponentFixture; + + const mockGridReadyEvent: GridReadyEvent = { + api: { setGridOption: jest.fn(), addEventListener: jest.fn() }, + columnApi: { someColumnApiMethod: jest.fn() }, + type: 'gridReady', + } as any; + + + const mockHotToastService = { + observe: jest.fn().mockImplementation(() => ({ + loading: 'speichern...', + success: 'Änderungen gespeichert', + error: 'Änderungen konnten nicht gespeichert werden!', + subscribe: jest.fn().mockReturnValue(of([])) + })) + }; + + const mockMatDialog = { + open: jest.fn().mockReturnValue({ + afterClosed: jest.fn().mockReturnValue(of(true)), + }), + }; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [KeysComponent, ], + providers: [ + { provide: HotToastService, useValue: mockHotToastService }, + { provide: ApiService, useClass: MockApiService }, + { provide: MatDialog, useValue: mockMatDialog }, + ] + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(KeysComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + component.onGridReady(mockGridReadyEvent); + }); + + it('should create the keyscomponent', () => { + expect(component).toBeTruthy(); + }); + + it('should call getCylinders on ngOnInit', () => { + component.ngOnInit(); + expect(component['api'].getCylinders).toHaveBeenCalled(); + }); + + it('should call getKeys and set rowData when loadKeys is called', () => { + component.loadKeys(); + expect(component['api'].getKeys).toHaveBeenCalled(); + expect(component.gridApi.setGridOption).toHaveBeenCalledWith('rowData', [{ name: 'Key 1' }]); + }); + + it('should call deleteKey when deleteKey is triggered', () => { + const keyId = '123'; + component.deleteKey(keyId); + expect(component['api'].deleteKey).toHaveBeenCalledWith(keyId); + }); + + it.skip('should call updateKey on cellEditEnd when a value is changed', () => { + const mockEvent = { + data: { id: '1', name: 'Old Name' }, + oldValue: 'Old Name', + newValue: 'New Name', + valueChanged: true, + }; + component.cellEditEnd(mockEvent as any); + expect(component['api'].updateKey).toHaveBeenCalledWith(mockEvent.data); + }); + + it('should not call updateKey on cellEditEnd if value is not changed', () => { + const mockEvent = { + data: { id: '1', name: 'Old Name' }, + oldValue: 'Old Name', + newValue: 'Old Name', + valueChanged: false, + }; + component.cellEditEnd(mockEvent as any); + expect(component['api'].updateKey).not.toHaveBeenCalled(); + }); + +}); + diff --git a/client/src/app/modules/keys/keys.component.ts b/client/src/app/modules/keys/keys.component.ts index c2b6b57..09d5759 100644 --- a/client/src/app/modules/keys/keys.component.ts +++ b/client/src/app/modules/keys/keys.component.ts @@ -13,6 +13,7 @@ import { AgDeleteKeyComponent } from '../../shared/ag-grid/components/ag-delete- import { MatIconModule } from '@angular/material/icon'; import { ArchiveComponent } from './components/archive/archive.component'; import { AgLoadingComponent } from '../../shared/ag-grid/components/ag-loading/ag-loading.component'; +import { map, of } from 'rxjs'; @Component({ selector: 'app-keys', @@ -55,7 +56,7 @@ export class KeysComponent { field: 'createdAt' , headerName: 'Erstellt' , width: 120 - , type: 'date' + // , type: 'date' , cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value)) , tooltipValueGetter: (data: any) => this.datePipe.transform(new Date(data.value), 'medium') },{ @@ -63,7 +64,7 @@ export class KeysComponent { field: 'updatedAt' , headerName: 'Geändert' , width: 120 - , type: 'date' + // , type: 'date' , cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value)) : '-' , tooltipValueGetter: (data: any) => this.datePipe.transform(new Date(data.value), 'medium') }, diff --git a/client/src/mocks/services/mock.api.service.ts b/client/src/mocks/services/mock.api.service.ts new file mode 100644 index 0000000..27ab216 --- /dev/null +++ b/client/src/mocks/services/mock.api.service.ts @@ -0,0 +1,11 @@ +import { of } from "rxjs"; + +export class MockApiService { + getCylinders = jest.fn().mockReturnValue(of([{ name: 'Cylinder 1' }])); + getKeys = jest.fn().mockReturnValue(of([{ name: 'Key 1' }])); + deleteKey = jest.fn().mockReturnValue(of({})); + updateKey = jest.fn().mockReturnValue( + of([]) + ); + getKeyArchive = jest.fn().mockReturnValue(of([{ name: 'Key 1' }])); +} \ No newline at end of file