Adjustments

- added component unittests

Signed-off-by: michelle <[email protected]>

.gitignore

@@ -14,3 +14,4 @@
 
 # OS files
 .DS_Store
+/node_modules

device-management-ui/src/app/app.component.spec.ts

@@ -1,12 +1,16 @@
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
+import {HttpClientTestingModule} from "@angular/common/http/testing";
+import {OAuthModule} from "angular-oauth2-oidc";
+import {RouterModule} from "@angular/router";
+import {LoaderSpinnerComponent} from "./components/loading-spinner/loader-spinner.component";
+import {ToastContainerComponent} from "./components/toast-container/toast-container.component";
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
+      imports: [HttpClientTestingModule, OAuthModule.forRoot(), RouterModule, ],
+      declarations: [AppComponent, LoaderSpinnerComponent, ToastContainerComponent],
     }).compileComponents();
   });
 
@@ -21,11 +25,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app.title).toEqual('device-management-ui');
   });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('device-management-ui app is running!');
-  });
 });

device-management-ui/src/app/components/date-time/date-time-picker.component.html

@@ -10,6 +10,9 @@
          id="date"
          ngbDatepicker
          readonly>
+
+  <input type="text" class="form-control bg-white2" (click)="start.toggle()" [value]="getTimeString(time)" readonly>
+
   <ng-template #footerTemplate>
     <div class="pt-1 pb-2 px-2">
       <hr>

device-management-ui/src/app/components/date-time/date-time-picker.component.spec.ts

@@ -1,17 +1,23 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { DateTimePickerComponent } from './date-time-picker.component';
+import {DateTimePickerComponent} from './date-time-picker.component';
+import {NgbCalendar, NgbModule} from "@ng-bootstrap/ng-bootstrap";
+import {FontAwesomeTestingModule} from "@fortawesome/angular-fontawesome/testing";
+import {FormsModule} from "@angular/forms";
 
 describe('DateTimePickerComponent', () => {
   let component: DateTimePickerComponent;
   let fixture: ComponentFixture<DateTimePickerComponent>;
+  let calendarSpy: jasmine.SpyObj<NgbCalendar>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ DateTimePickerComponent ]
+      imports: [NgbModule, FontAwesomeTestingModule, FormsModule],
+      declarations: [DateTimePickerComponent],
     })
-    .compileComponents();
+      .compileComponents();
 
+    calendarSpy = TestBed.inject(NgbCalendar) as jasmine.SpyObj<NgbCalendar>;
     fixture = TestBed.createComponent(DateTimePickerComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
@@ -20,4 +26,44 @@ describe('DateTimePickerComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should emit date and time on onFocusOut', () => {
+    spyOn(component.dateTime, 'emit');
+
+    component.onFocusOut();
+
+    expect(component.dateTime.emit).toHaveBeenCalledWith({
+      date: component['date'],
+      time: component['time'],
+    });
+  });
+
+  it('should set date and time from secretDate input', () => {
+    component.secretDate = '2023-05-15T10:00:00.000Z';
+
+    component.ngOnInit();
+
+    expect(component['date']).toEqual({ day: 15, month: 5, year: 2023 });
+    expect(component['time']).toEqual({ hour: 10, minute: 0, second: 0 });
+  });
+
+  it('should set date to today and emit date and time when secretDate is not provided', () => {
+    spyOn(component, 'onFocusOut');
+
+    component.secretDate = undefined;
+    fixture.detectChanges();
+
+    component.ngOnInit();
+    expect(component['date']).toEqual(component['calendar'].getToday());
+    expect(component['time']).toEqual({hour: 0, minute: 0, second: 0});
+    expect(component.onFocusOut).toHaveBeenCalled();
+  });
+
+  it('should return correct time string', () => {
+    const time = {hour: 12, minute: 30, second: 0};
+
+    const result = component['getTimeString'](time);
+    expect(result).toEqual('12:30:00');
+  });
+
 });

device-management-ui/src/app/components/date-time/date-time-picker.component.ts

@@ -14,7 +14,7 @@ export class DateTimePickerComponent implements OnInit {
   @Output()
   public dateTime: EventEmitter<any> = new EventEmitter<any>();
   protected date: NgbDateStruct | any;
-  protected time: any = {hour: 0, minute: 0, secondCol: 0};
+  protected time: any = {hour: 0, minute: 0, second: 0};
 
   protected maxDate: NgbDateStruct = {year: new Date().getUTCFullYear() + 100, month: 12, day: 31};
 
@@ -33,14 +33,14 @@ export class DateTimePickerComponent implements OnInit {
     if (this.secretDate) {
       const date = new Date(this.secretDate);
       this.date = {day: date.getUTCDate(), month: date.getUTCMonth() + 1, year: date.getUTCFullYear()};
-      this.time = {hour: date.getUTCHours(), minute: date.getUTCMinutes(), secondCol: date.getUTCSeconds()};
+      this.time = {hour: date.getUTCHours(), minute: date.getUTCMinutes(), second: date.getUTCSeconds()};
     } else {
       this.date = this.calendar.getToday();
       this.onFocusOut();
     }
   }
 
-  onFocusOut() {
+  public onFocusOut() {
     this.dateTime.emit({
       date: this.date,
       time: this.time
@@ -55,4 +55,12 @@ export class DateTimePickerComponent implements OnInit {
     return 'Your timezone differ to UTC time, please be aware that the UTC time (%h hour) will be taken.'
       .replace('%h', String(this.timezoneOffset));
   }
+
+  protected getTimeString(time: any): string {
+    const paddedHour = String(time.hour).padStart(2, '0');
+    const paddedMinute = String(time.minute).padStart(2, '0');
+    const paddedSecond = String(time.second).padStart(2, '0');
+
+    return `${paddedHour}:${paddedMinute}:${paddedSecond}`;
+  }
 }

device-management-ui/src/app/components/devices/device-detail/device-detail.component.html

@@ -71,7 +71,7 @@
       <span [innerHTML]="creationTimeLabel"></span>
     </div>
     <div class="d-inline-flex p-2 detail-value">
-      <span [innerHTML]="getCreationTime(device.status) | date:'medium': 'UTC'"></span>
+      <span [innerHTML]="getCreationTime(device.status)"></span>
     </div>
   </div>
 </div>

device-management-ui/src/app/components/devices/device-detail/device-detail.component.spec.ts

@@ -1,23 +1,67 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DeviceDetailComponent } from './device-detail.component';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {DeviceDetailComponent} from './device-detail.component';
+import {HttpClientTestingModule} from "@angular/common/http/testing";
+import {OAuthModule} from "angular-oauth2-oidc";
+import {FontAwesomeTestingModule} from "@fortawesome/angular-fontawesome/testing";
+import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
+import {ListConfigComponent} from "./list-config/list-config.component";
+import {Router} from "@angular/router";
+import {RouterTestingModule} from "@angular/router/testing";
+import {DatePipe} from "@angular/common";
 
 describe('DeviceDetailComponent', () => {
   let component: DeviceDetailComponent;
   let fixture: ComponentFixture<DeviceDetailComponent>;
+  let router: Router;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ DeviceDetailComponent ]
+      imports: [HttpClientTestingModule, OAuthModule.forRoot(), FontAwesomeTestingModule, NgbModule, RouterTestingModule],
+      declarations: [DeviceDetailComponent, ListConfigComponent],
+      providers: [DatePipe]
     })
-    .compileComponents();
+      .compileComponents();
 
     fixture = TestBed.createComponent(DeviceDetailComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    router = TestBed.inject(Router);
+    spyOn(router, 'navigate');
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should return the correct device detail', () => {
+    component['device'] = {
+      id: 'test-id',
+      status: {}
+    };
+    expect(component['deviceDetail']).toEqual('Device: test-id');
+  });
+
+  it('should return transformed date when status["created"] is in place', () => {
+    const status = {created: '2023-06-14T10:30:00Z'};
+
+    const result = component['getCreationTime'](status);
+    expect(result).toEqual('Jun 14, 2023, 10:30:00 AM');
+  });
+
+  it('should return "-" when status["created"] is not in place', () => {
+    const status = {name: '12345'};
+
+    const result = component['getCreationTime'](status);
+    expect(result).toEqual('-');
+  });
+
+  it('should navigate back to tenant detail page with state', () => {
+    component['tenant'] = {id: 'test-id', ext: 'tenant-test'};
+
+    component['navigateBack']();
+    expect(router.navigate).toHaveBeenCalledWith(['tenant-detail', 'test-id'], {
+      state: {tenant: component['tenant']},
+    });
+  });
+
 });

device-management-ui/src/app/components/devices/device-detail/device-detail.component.ts

@@ -13,6 +13,7 @@ import {CredentialsModalComponent} from '../../modals/credentials-modal/credenti
 import {Credentials} from 'src/app/models/credentials/credentials';
 import {CredentialsService} from "../../../services/credentials/credentials.service";
 import {NotificationService} from "../../../services/notification/notification.service";
+import {DatePipe} from "@angular/common";
 
 @Component({
   selector: 'app-device-detail',
@@ -41,7 +42,8 @@ export class DeviceDetailComponent {
               private deviceService: DeviceService,
               private configService: ConfigService,
               private credentialsService: CredentialsService,
-              private notificationService: NotificationService) {
+              private notificationService: NotificationService,
+              private datePipe: DatePipe) {
     const navigation = this.router.getCurrentNavigation();
     if (navigation) {
       const state = navigation.extras.state
@@ -64,7 +66,7 @@ export class DeviceDetailComponent {
 
   protected getCreationTime(status: any) {
     if (status && status['created']) {
-      return status['created'];
+      return this.datePipe.transform(status['created'], 'medium', 'UTC')
     }
     return '-';
   }

device-management-ui/src/app/components/devices/device-detail/list-authentication/list-authentication.component.spec.ts

@@ -1,16 +1,19 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ListAuthenticationComponent } from './list-authentication.component';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ListAuthenticationComponent} from './list-authentication.component';
+import {HttpClientTestingModule} from "@angular/common/http/testing";
+import {OAuthModule} from "angular-oauth2-oidc";
+import {CredentialTypes} from "../../../../models/credentials/credentials";
 
 describe('ListAuthenticationComponent', () => {
   let component: ListAuthenticationComponent;
   let fixture: ComponentFixture<ListAuthenticationComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ListAuthenticationComponent ]
+      imports: [HttpClientTestingModule, OAuthModule.forRoot()],
+      declarations: [ ListAuthenticationComponent ],
     })
-    .compileComponents();
+      .compileComponents();
 
     fixture = TestBed.createComponent(ListAuthenticationComponent);
     component = fixture.componentInstance;
@@ -20,4 +23,33 @@ describe('ListAuthenticationComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should return true for RPK credentials', () => {
+    const authenticationValue = {type: CredentialTypes.RPK};
+    expect(component['isEditable'](authenticationValue)).toBe(true);
+  });
+
+  it('should return false for HASHED_PASSWORD credentials', () => {
+    const authenticationValue = {type: CredentialTypes.HASHED_PASSWORD};
+    expect(component['isEditable'](authenticationValue)).toBe(false);
+  });
+
+  it('should return "-" when type is undefined', () => {
+    const result = component['getAuthenticationType'](undefined);
+
+    expect(result).toEqual('-');
+  });
+
+  it('should return "JWT based" when type is RPK', () => {
+    const result = component['getAuthenticationType'](CredentialTypes.RPK);
+
+    expect(result).toEqual('JWT based');
+  });
+
+  it('should return "Password based" when type is HASHED_PASSWORD', () => {
+    const result = component['getAuthenticationType'](CredentialTypes.HASHED_PASSWORD);
+
+    expect(result).toEqual('Password based');
+  });
+
 });

device-management-ui/src/app/components/devices/device-detail/list-config/config-accordion/config-accordion.component.spec.ts

@@ -1,14 +1,17 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {ConfigAccordionComponent} from './config-accordion.component';
+import {NgbAccordion, NgbModule} from "@ng-bootstrap/ng-bootstrap";
+import {TruncatePipe} from "../../../../../shared/truncate.pipe";
 
 describe('ConfigAccordionComponent', () => {
   let component: ConfigAccordionComponent;
   let fixture: ComponentFixture<ConfigAccordionComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ConfigAccordionComponent]
+      declarations: [ConfigAccordionComponent, TruncatePipe],
+      imports: [NgbAccordion, NgbModule]
     })
       .compileComponents();
 
@@ -20,4 +23,22 @@ describe('ConfigAccordionComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should show text data', () => {
+    component.config = {
+      binaryData: 'VGVzdCBkYXRh', cloudUpdateTime: '', version: '', deviceAckTime: ''
+    };
+    component['showTextData'](true);
+    expect(component['fullConfig']).toEqual('Test data');
+  });
+
+  it('should hide text data', () => {
+    component['fullConfig'] = 'Test data';
+    component.config = {
+      binaryData: 'VGVzdCBkYXRh', cloudUpdateTime: '', version: '', deviceAckTime: ''
+    };
+    component['showTextData'](false);
+    expect(component['fullConfig']).toEqual('VGVzdCBkYXRh');
+  });
+
 });

device-management-ui/src/app/components/devices/device-detail/list-config/config-accordion/config-accordion.component.ts

@@ -9,7 +9,7 @@ import {Config} from "../../../../../models/config";
 export class ConfigAccordionComponent implements OnInit {
 
   @Input()
-  config: Config = new Config();
+  public config: Config = new Config();
 
   protected fullConfig: string = '';