UI tesztek

Frontend/src/app/app.component.spec.ts

@@ -11,19 +11,7 @@ describe('AppComponent', () => {
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
+    expect(app).toBeDefined();
   });
 
-  it(`should have the 'Frontend' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('Frontend');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, Frontend');
-  });
 });

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

@@ -1,17 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { ChartComponent } from './chart.component';
+import { ElementRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 describe('ChartComponent', () => {
   let component: ChartComponent;
   let fixture: ComponentFixture<ChartComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ChartComponent]
-    })
-    .compileComponents();
-
+      imports: [ChartComponent,CommonModule],
+      providers: [{ provide: ElementRef, useValue: { nativeElement: {} } }]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
     fixture = TestBed.createComponent(ChartComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
@@ -20,4 +23,43 @@ describe('ChartComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('set data', () => {
+    const data = [{ date: '2022-05-20', value: 50 }, { date: '2022-05-21', value: 60 }];
+    component.setData(data);
+    expect(component.getConfig().data.datasets[0].data).toEqual(data);
+  });
+
+  it('clear data', () => {
+    const initialData = [{ date: '2022-05-20', value: 50 }, { date: '2022-05-21', value: 60 }];
+    component.setData(initialData);
+    component.clearData();
+    expect(component.getConfig().data.datasets[0].data).toEqual([]);
+  });
+
+  it('set line color', () => {
+    const color = 'red';
+    component.setLineColor(color);
+    expect(component.getConfig().options.elements.line.borderColor).toBe(color);
+  });
+
+  it('set point color', () => {
+    const color = 'blue';
+    component.setPointColor(color);
+    expect(component.getConfig().options.elements.point.borderColor).toBe(color);
+  });
+
+  it('set min and max Y', () => {
+    const minValue = 0;
+    const maxValue = 100;
+    component.setMinY(minValue);
+    component.setMaxY(maxValue);
+    expect(component.getConfig().options.scales.y.min).toBe(minValue);
+    expect(component.getConfig().options.scales.y.max).toBe(maxValue);
+  });
+
+  it('getconfig test', () => {
+    const conf = component.getConfig();
+    expect(conf).toEqual(component.getConfig());
+  });
 });

Frontend/src/app/dataset-graph/dataset-graph.component.html

@@ -3,7 +3,7 @@
         <mat-icon class="toolbar-icon">trending_up</mat-icon>
         <span class="toolbar-title">{{resourceName}}</span>
         <span class="spacing"></span>
-        <button mat-icon-button (click)="openDatePickerDialog()">
+        <button class="date-picker-button" mat-icon-button (click)="openDatePickerDialog()">
             <mat-icon>date_range</mat-icon>
         </button>
         <button mat-icon-button (click)="progressSpinnerDisplayed=true" [routerLink]="['/resources',resourceId,'datasets',{resourceName: resourceName}]">

Frontend/src/app/dataset-graph/dataset-graph.component.spec.ts

@@ -1,23 +1,4 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DatasetGraphComponent } from './dataset-graph.component';
-
-describe('DatasetGraphComponent', () => {
-  let component: DatasetGraphComponent;
-  let fixture: ComponentFixture<DatasetGraphComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DatasetGraphComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(DatasetGraphComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
+/**
+ * Hasonlo mint a resource list componensnél.
+ * 
+ */

Frontend/src/app/dataset-list/dataset-list.component.spec.ts

@@ -1,17 +1,57 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { DatasetListComponent } from './dataset-list.component';
+import { ActivatedRoute, convertToParamMap } from '@angular/router';
+import { of } from 'rxjs';
+import { DatasetService } from '../dataset.service';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatTableModule } from '@angular/material/table';
+import { MatSortModule } from '@angular/material/sort';
+import { ReactiveFormsModule } from '@angular/forms';
+import { ProgressSpinnerComponent } from '../progress-spinner/progress-spinner.component';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule } from '@angular/common/http';
 
 describe('DatasetListComponent', () => {
   let component: DatasetListComponent;
   let fixture: ComponentFixture<DatasetListComponent>;
+  let mockDatasetService: jasmine.SpyObj<DatasetService>;
+
+
+
+  beforeEach(waitForAsync(() => {
+    mockDatasetService = jasmine.createSpyObj('DatasetService', ['getDatasetForResource']);
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DatasetListComponent]
-    })
-    .compileComponents();
-
+    TestBed.configureTestingModule({
+
+      imports: [
+        DatasetListComponent,
+        ProgressSpinnerComponent,
+        ReactiveFormsModule,
+        MatDialogModule,
+        MatTableModule,
+        MatSortModule,
+        MatToolbarModule,
+        MatIconModule,
+        NoopAnimationsModule,
+        HttpClientModule,
+        BrowserAnimationsModule
+      ],
+      providers: [
+        { provide: DatasetService, useValue: mockDatasetService },
+        {
+          provide: ActivatedRoute, useValue: {
+            paramMap: of(convertToParamMap({ id: 1, resourceName: 'Test Resource' }))
+
+          }
+        }
+
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
     fixture = TestBed.createComponent(DatasetListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
@@ -20,4 +60,20 @@ describe('DatasetListComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('ngafterViewInit test', () => {
+    component.ngAfterViewInit();
+
+    expect(mockDatasetService.getDatasetForResource).toHaveBeenCalledWith(1);
+    expect(component.progressSpinnerDisplayed).toBeTruthy();
+  });
+
+
+  it('navigategraphs test', () => {
+    component.navigateToGraphs();
+
+    expect(component.progressSpinnerDisplayed).toBeTruthy();
+  });
+
+
 });

Frontend/src/app/dataset.service.spec.ts

@@ -1,16 +1,4 @@
-import { TestBed } from '@angular/core/testing';
-
-import { DatasetService } from './dataset.service';
-
-describe('DatasetService', () => {
-  let service: DatasetService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(DatasetService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
+/**
+ * Nincs tesztelve
+ * 
+ */

Frontend/src/app/date-interval-picker/date-interval-picker.component.spec.ts

@@ -1,17 +1,45 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { DateIntervalPickerComponent } from './date-interval-picker.component';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatButtonModule } from '@angular/material/button';
+import { HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('DateIntervalPickerComponent', () => {
   let component: DateIntervalPickerComponent;
   let fixture: ComponentFixture<DateIntervalPickerComponent>;
+  let dialogRefSpy: jasmine.SpyObj<MatDialogRef<DateIntervalPickerComponent>>;
 
   beforeEach(async () => {
+    const dialogRefSpyObj = jasmine.createSpyObj('MatDialogRef', ['close']);
+
     await TestBed.configureTestingModule({
-      imports: [DateIntervalPickerComponent]
+      imports: [
+        DateIntervalPickerComponent,
+        ReactiveFormsModule,
+        MatDatepickerModule,
+        MatFormFieldModule,
+        MatCheckboxModule,
+        MatButtonModule,
+        HttpClientModule,
+        NoopAnimationsModule,
+        BrowserAnimationsModule,        
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: dialogRefSpyObj },
+        { provide: MAT_DIALOG_DATA, useValue: { startDate: '', endDate: '' } }
+      ]
     })
     .compileComponents();
-
+
+    dialogRefSpy = TestBed.inject(MatDialogRef) as jasmine.SpyObj<MatDialogRef<DateIntervalPickerComponent>>;
+  });
+
+  beforeEach(() => {
     fixture = TestBed.createComponent(DateIntervalPickerComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
@@ -20,4 +48,28 @@ describe('DateIntervalPickerComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('close the dialog on cancel', () => {
+    component.onCancel();
+    expect(dialogRefSpy.close).toHaveBeenCalled();
+  });
+
+  it('dates when checkbox is checked', () => {
+    component.dateForm.controls['all'].setValue(true);
+    const dataValues = component.getDataValues(true);
+    expect(dataValues).toEqual(JSON.stringify({ start: '', end: '' }));
+  });
+
+  it('dates when checkbox is not checked', () => {
+    const testData = { start: '2024-05-20', end: '2024-05-25',"all":"" };
+    component.dateForm.patchValue(testData);
+    const dataValues = component.getDataValues(false);
+    expect(dataValues).toEqual(JSON.stringify(testData));
+  });
+
+
+
+
+
+
 });

Frontend/src/app/pop-up-window/pop-up-window.component.html

@@ -3,6 +3,6 @@ <h6 mat-dialog-title>{{title}}</h6>
  {{body}}
 </mat-dialog-content>
 <mat-dialog-actions>
-    <button *ngIf="hasCancel" mat-button mat-dialog-close color="warn" (click)="buttonCancelClicked()">{{btnCancelText.toUpperCase()}}</button>
-    <button color="primary" mat-button (click)="buttonConfirmClicked()" cdkFocusInitial mat-dialog-close>{{btnConfirmText.toUpperCase()}}</button>
+    <button class="cancel-button" *ngIf="hasCancel" mat-button mat-dialog-close color="warn" (click)="buttonCancelClicked()">{{btnCancelText.toUpperCase()}}</button>
+    <button class="confirm-button" color="primary" mat-button (click)="buttonConfirmClicked()" cdkFocusInitial mat-dialog-close>{{btnConfirmText.toUpperCase()}}</button>
 </mat-dialog-actions>