adding typescript interfaces for type hinting and testing

some code reformatting adding tests for services and components. cleanup of unused dependencies in components. refactor dashboard service so that wrapper is removed before data is passed to component. (no more this.data.data...). refactored components so that variable names are consistent (dashboardService vs smartService). ensure argument and return types are specified everywhere. adding tests for pipes. adding ng test to ci steps. change dir before running npm install. trying to install nodejs in continer. test frontend separately. upload coverage for frontend and backend. upload coverage for frontend and backend. testing coverage file locations. retry file upload.
2022-07-08 18:19:07 -07:00
parent 0e2fec4e93
commit b71d6660a6
37 changed files with 1893 additions and 445 deletions
@@ -1,25 +1,64 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {DashboardDeviceDeleteDialogComponent} from './dashboard-device-delete-dialog.component';
+import {HttpClientModule} from '@angular/common/http';
+import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material/dialog';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {SharedModule} from '../../../shared/shared.module';
+import {DashboardDeviceDeleteDialogService} from './dashboard-device-delete-dialog.service';
+import {of} from 'rxjs';

-import { DashboardDeviceDeleteDialogComponent } from './dashboard-device-delete-dialog.component';

 describe('DashboardDeviceDeleteDialogComponent', () => {
-  let component: DashboardDeviceDeleteDialogComponent;
-  let fixture: ComponentFixture<DashboardDeviceDeleteDialogComponent>;
+    let component: DashboardDeviceDeleteDialogComponent;
+    let fixture: ComponentFixture<DashboardDeviceDeleteDialogComponent>;

-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ DashboardDeviceDeleteDialogComponent ]
-    })
-    .compileComponents();
-  }));
+    const matDialogRefSpy = jasmine.createSpyObj('MatDialogRef', ['closeDialog', 'close']);
+    const dashboardDeviceDeleteDialogServiceSpy = jasmine.createSpyObj('DashboardDeviceDeleteDialogService', ['deleteDevice']);

-  beforeEach(() => {
-    fixture = TestBed.createComponent(DashboardDeviceDeleteDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                HttpClientModule,
+                MatDialogModule,
+                MatButtonModule,
+                MatIconModule,
+                SharedModule,
+            ],
+            providers: [
+                {provide: MatDialogRef, useValue: matDialogRefSpy},
+                {provide: MAT_DIALOG_DATA, useValue: {wwn: 'test-wwn', title: 'my-test-device-title'}},
+                {provide: DashboardDeviceDeleteDialogService, useValue: dashboardDeviceDeleteDialogServiceSpy}
+            ],
+            declarations: [DashboardDeviceDeleteDialogComponent]
+        })
+            .compileComponents()
+    }));

-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DashboardDeviceDeleteDialogComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should close the component if cancel is clicked', () => {
+        matDialogRefSpy.closeDialog.calls.reset();
+        matDialogRefSpy.closeDialog()
+        expect(matDialogRefSpy.closeDialog).toHaveBeenCalled();
+    });
+
+    it('should attempt to delete device if delete is clicked', () => {
+        dashboardDeviceDeleteDialogServiceSpy.deleteDevice.and.returnValue(of({'success': true}));
+
+        component.onDeleteClick()
+        expect(dashboardDeviceDeleteDialogServiceSpy.deleteDevice).toHaveBeenCalledWith('test-wwn');
+        expect(dashboardDeviceDeleteDialogServiceSpy.deleteDevice.calls.count())
+            .withContext('one call')
+            .toBe(1);
+    });
 });
@@ -1,7 +1,6 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import {Component, Inject, OnInit} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import {DashboardDeviceDeleteDialogService} from 'app/layout/common/dashboard-device-delete-dialog/dashboard-device-delete-dialog.service';
-import {Subject} from 'rxjs';

@Component({
  selector: 'app-dashboard-device-delete-dialog',
@@ -1,44 +1,21 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { Overlay } from '@angular/cdk/overlay';
-import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatButtonModule } from '@angular/material/button';
-import { MatSelectModule } from '@angular/material/select';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { SharedModule } from 'app/shared/shared.module';
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {SharedModule} from 'app/shared/shared.module';
 import {DashboardDeviceDeleteDialogComponent} from 'app/layout/common/dashboard-device-delete-dialog/dashboard-device-delete-dialog.component'
-import { MatButtonToggleModule} from '@angular/material/button-toggle';
-import {MatTabsModule} from '@angular/material/tabs';
-import {MatSliderModule} from '@angular/material/slider';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
-import {MatTooltipModule} from '@angular/material/tooltip';
 import {dashboardRoutes} from 'app/modules/dashboard/dashboard.routing';
-import {MatDividerModule} from '@angular/material/divider';
-import {MatMenuModule} from '@angular/material/menu';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
-import {MatSortModule} from '@angular/material/sort';
-import {MatTableModule} from '@angular/material/table';
-import {NgApexchartsModule} from 'ng-apexcharts';
-import { MatDialogModule } from '@angular/material/dialog';
+import {MatDialogModule} from '@angular/material/dialog';

@NgModule({
    declarations: [
        DashboardDeviceDeleteDialogComponent
    ],
-    imports     : [
+    imports: [
        RouterModule.forChild([]),
        RouterModule.forChild(dashboardRoutes),
        MatButtonModule,
-        MatDividerModule,
-        MatTooltipModule,
        MatIconModule,
-        MatMenuModule,
-        MatProgressBarModule,
-        MatSortModule,
-        MatTableModule,
-        NgApexchartsModule,
        SharedModule,
        MatDialogModule
    ],
@@ -1,25 +1,105 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';

-import { DashboardDeviceComponent } from './dashboard-device.component';
+import {DashboardDeviceComponent} from './dashboard-device.component';
+import {MatDialog} from '@angular/material/dialog';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {SharedModule} from 'app/shared/shared.module';
+import {MatMenuModule} from '@angular/material/menu';
+import {TREO_APP_CONFIG} from '@treo/services/config/config.constants';
+import {DeviceSummaryModel} from 'app/core/models/device-summary-model';
+import * as moment from 'moment';

 describe('DashboardDeviceComponent', () => {
-  let component: DashboardDeviceComponent;
-  let fixture: ComponentFixture<DashboardDeviceComponent>;
+    let component: DashboardDeviceComponent;
+    let fixture: ComponentFixture<DashboardDeviceComponent>;

-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ DashboardDeviceComponent ]
+    const matDialogSpy = jasmine.createSpyObj('MatDialog', ['open']);
+    // const configServiceSpy = jasmine.createSpyObj('TreoConfigService', ['config$']);
+
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                MatButtonModule,
+                MatIconModule,
+                MatMenuModule,
+                SharedModule,
+            ],
+            providers: [
+                {provide: MatDialog, useValue: matDialogSpy},
+                {provide: TREO_APP_CONFIG, useValue: {dashboardDisplay: 'name'}}
+            ],
+            declarations: [DashboardDeviceComponent]
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        // configServiceSpy.config$.and.returnValue(of({'success': true}));
+        fixture = TestBed.createComponent(DashboardDeviceComponent);
+        component = fixture.componentInstance;
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    describe('#classDeviceLastUpdatedOn()', () => {
+
+        it('if non-zero device status, should be red', () => {
+            // component.deviceSummary = summary.data.summary['0x5000c500673e6b5f'] as DeviceSummaryModel
+            expect(component.classDeviceLastUpdatedOn({
+                device: {
+                    device_status: 2
+                }
+            } as DeviceSummaryModel)).toBe('text-red')
+        });
+
+        it('if non-zero device status, should be red', () => {
+            // component.deviceSummary = summary.data.summary['0x5000c500673e6b5f'] as DeviceSummaryModel
+            expect(component.classDeviceLastUpdatedOn({
+                device: {
+                    device_status: 2
+                }
+            } as DeviceSummaryModel)).toBe('text-red')
+        });
+
+        it('if healthy device status and updated in the last two weeks, should be green', () => {
+            // component.deviceSummary = summary.data.summary['0x5000c500673e6b5f'] as DeviceSummaryModel
+            expect(component.classDeviceLastUpdatedOn({
+                device: {
+                    device_status: 0
+                },
+                smart: {
+                    collector_date: moment().subtract(13, 'days').toISOString()
+                }
+            } as DeviceSummaryModel)).toBe('text-green')
+        });
+
+        it('if healthy device status and updated more than two weeks ago, but less than 1 month, should be yellow', () => {
+            // component.deviceSummary = summary.data.summary['0x5000c500673e6b5f'] as DeviceSummaryModel
+            expect(component.classDeviceLastUpdatedOn({
+                device: {
+                    device_status: 0
+                },
+                smart: {
+                    collector_date: moment().subtract(3, 'weeks').toISOString()
+                }
+            } as DeviceSummaryModel)).toBe('text-yellow')
+        });
+
+        it('if healthy device status and updated more 1 month ago, should be red', () => {
+            // component.deviceSummary = summary.data.summary['0x5000c500673e6b5f'] as DeviceSummaryModel
+            expect(component.classDeviceLastUpdatedOn({
+                device: {
+                    device_status: 0
+                },
+                smart: {
+                    collector_date: moment().subtract(5, 'weeks').toISOString()
+                }
+            } as DeviceSummaryModel)).toBe('text-red')
+        });
    })
-    .compileComponents();
-  }));

-  beforeEach(() => {
-    fixture = TestBed.createComponent(DashboardDeviceComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
 });
@@ -1,18 +1,19 @@
-import { Component, Input, Output, OnInit, EventEmitter} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import * as moment from 'moment';
 import {takeUntil} from 'rxjs/operators';
 import {AppConfig} from 'app/core/config/app.config';
 import {TreoConfigService} from '@treo/services/config';
 import {Subject} from 'rxjs';
-import  humanizeDuration from 'humanize-duration'
+import humanizeDuration from 'humanize-duration'
 import {MatDialog} from '@angular/material/dialog';
 import {DashboardDeviceDeleteDialogComponent} from 'app/layout/common/dashboard-device-delete-dialog/dashboard-device-delete-dialog.component';
 import {DeviceTitlePipe} from 'app/shared/device-title.pipe';
+import {DeviceSummaryModel} from 'app/core/models/device-summary-model';

@Component({
-  selector: 'app-dashboard-device',
-  templateUrl: './dashboard-device.component.html',
-  styleUrls: ['./dashboard-device.component.scss']
+    selector: 'app-dashboard-device',
+    templateUrl: './dashboard-device.component.html',
+    styleUrls: ['./dashboard-device.component.scss']
 })
 export class DashboardDeviceComponent implements OnInit {

@@ -23,7 +24,8 @@ export class DashboardDeviceComponent implements OnInit {
        // Set the private defaults
        this._unsubscribeAll = new Subject();
    }
-    @Input() deviceSummary: any;
+
+    @Input() deviceSummary: DeviceSummaryModel;
    @Input() deviceWWN: string;
    @Output() deviceDeleted = new EventEmitter<string>();

@@ -47,28 +49,27 @@ export class DashboardDeviceComponent implements OnInit {
    // @ Public methods
    // -----------------------------------------------------------------------------------------------------

-    classDeviceLastUpdatedOn(deviceSummary): string {
+    classDeviceLastUpdatedOn(deviceSummary: DeviceSummaryModel): string {
        if (deviceSummary.device.device_status !== 0) {
            return 'text-red' // if the device has failed, always highlight in red
-        } else if(deviceSummary.device.device_status === 0 && deviceSummary.smart){
-            if(moment().subtract(14, 'd').isBefore(deviceSummary.smart.collector_date)){
+        } else if (deviceSummary.device.device_status === 0 && deviceSummary.smart) {
+            if (moment().subtract(14, 'days').isBefore(deviceSummary.smart.collector_date)) {
                // this device was updated in the last 2 weeks.
                return 'text-green'
-            } else if(moment().subtract(1, 'm').isBefore(deviceSummary.smart.collector_date)){
+            } else if (moment().subtract(1, 'months').isBefore(deviceSummary.smart.collector_date)) {
                // this device was updated in the last month
                return 'text-yellow'
-            } else{
+            } else {
                // last updated more than a month ago.
                return 'text-red'
            }
-
        } else {
            return ''
        }
    }

-    deviceStatusString(deviceStatus): string {
-        if(deviceStatus === 0){
+    deviceStatusString(deviceStatus: number): string {
+        if (deviceStatus === 0) {
            return 'passed'
        } else {
            return 'failed'
@@ -76,16 +77,18 @@ export class DashboardDeviceComponent implements OnInit {
    }


-
    openDeleteDialog(): void {
        const dialogRef = this.dialog.open(DashboardDeviceDeleteDialogComponent, {
            // width: '250px',
-            data: {wwn: this.deviceWWN, title: DeviceTitlePipe.deviceTitleWithFallback(this.deviceSummary.device, this.config.dashboardDisplay)}
+            data: {
+                wwn: this.deviceWWN,
+                title: DeviceTitlePipe.deviceTitleWithFallback(this.deviceSummary.device, this.config.dashboardDisplay)
+            }
        });

        dialogRef.afterClosed().subscribe(result => {
            console.log('The dialog was closed', result);
-            if(result.success){
+            if (result.success) {
                this.deviceDeleted.emit(this.deviceWWN)
            }
        });
@@ -1,53 +1,30 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { Overlay } from '@angular/cdk/overlay';
-import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatButtonModule } from '@angular/material/button';
-import { MatSelectModule } from '@angular/material/select';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { SharedModule } from 'app/shared/shared.module';
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {SharedModule} from 'app/shared/shared.module';
 import {DashboardDeviceComponent} from 'app/layout/common/dashboard-device/dashboard-device.component'
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatButtonToggleModule} from '@angular/material/button-toggle';
-import {MatTabsModule} from '@angular/material/tabs';
-import {MatSliderModule} from '@angular/material/slider';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
-import {MatTooltipModule} from '@angular/material/tooltip';
 import {dashboardRoutes} from '../../../modules/dashboard/dashboard.routing';
-import {MatDividerModule} from '@angular/material/divider';
 import {MatMenuModule} from '@angular/material/menu';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
-import {MatSortModule} from '@angular/material/sort';
-import {MatTableModule} from '@angular/material/table';
-import {NgApexchartsModule} from 'ng-apexcharts';
 import {DashboardDeviceDeleteDialogModule} from 'app/layout/common/dashboard-device-delete-dialog/dashboard-device-delete-dialog.module';

@NgModule({
    declarations: [
        DashboardDeviceComponent
    ],
-    imports     : [
+    imports: [
        RouterModule.forChild([]),
        RouterModule.forChild(dashboardRoutes),
        MatButtonModule,
-        MatDividerModule,
-        MatTooltipModule,
        MatIconModule,
        MatMenuModule,
-        MatProgressBarModule,
-        MatSortModule,
-        MatTableModule,
-        NgApexchartsModule,
        SharedModule,
        DashboardDeviceDeleteDialogModule
    ],
-    exports     : [
+    exports: [
        DashboardDeviceComponent,
    ],
-    providers   : []
+    providers: []
 })
-export class DashboardDeviceModule
-{
+export class DashboardDeviceModule {
 }
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DashboardSettingsComponent } from './dashboard-settings.component';
-
-describe('DashboardSettingsComponent', () => {
-  let component: DashboardSettingsComponent;
-  let fixture: ComponentFixture<DashboardSettingsComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ DashboardSettingsComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DashboardSettingsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -1,13 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {AppConfig} from 'app/core/config/app.config';
-import { TreoConfigService } from '@treo/services/config';
+import {TreoConfigService} from '@treo/services/config';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';

@Component({
-  selector: 'app-dashboard-settings',
-  templateUrl: './dashboard-settings.component.html',
-  styleUrls: ['./dashboard-settings.component.scss']
+    selector: 'app-dashboard-settings',
+    templateUrl: './dashboard-settings.component.html',
+    styleUrls: ['./dashboard-settings.component.scss']
 })
 export class DashboardSettingsComponent implements OnInit {

@@ -26,25 +26,23 @@ export class DashboardSettingsComponent implements OnInit {
        this._unsubscribeAll = new Subject();
    }

-  ngOnInit(): void {
-      // Subscribe to config changes
-      this._configService.config$
-          .pipe(takeUntil(this._unsubscribeAll))
-          .subscribe((config: AppConfig) => {
+    ngOnInit(): void {
+        // Subscribe to config changes
+        this._configService.config$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((config: AppConfig) => {

-              // Store the config
-              this.dashboardDisplay = config.dashboardDisplay;
-              this.dashboardSort = config.dashboardSort;
-              this.temperatureUnit = config.temperatureUnit;
-              this.theme = config.theme;
+                // Store the config
+                this.dashboardDisplay = config.dashboardDisplay;
+                this.dashboardSort = config.dashboardSort;
+                this.temperatureUnit = config.temperatureUnit;
+                this.theme = config.theme;

-          });
-
-  }
-
-  saveSettings(): void {
+            });

+    }

+    saveSettings(): void {
        const newSettings = {
            dashboardDisplay: this.dashboardDisplay,
            dashboardSort: this.dashboardSort,
@@ -53,7 +51,7 @@ export class DashboardSettingsComponent implements OnInit {
        }
        this._configService.config = newSettings
        console.log(`Saved Settings: ${JSON.stringify(newSettings)}`)
-  }
+    }

    formatLabel(value: number): number {
        return value;
@@ -1,16 +1,15 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { Overlay } from '@angular/cdk/overlay';
-import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatButtonModule } from '@angular/material/button';
-import { MatSelectModule } from '@angular/material/select';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { SharedModule } from 'app/shared/shared.module';
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatButtonModule} from '@angular/material/button';
+import {MatSelectModule} from '@angular/material/select';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {SharedModule} from 'app/shared/shared.module';
 import {DetailSettingsComponent} from 'app/layout/common/detail-settings/detail-settings.component'
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatSliderModule} from '@angular/material/slider';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
@@ -20,7 +19,7 @@ import {MatTooltipModule} from '@angular/material/tooltip';
    declarations: [
        DetailSettingsComponent
    ],
-    imports     : [
+    imports: [
        RouterModule.forChild([]),
        MatAutocompleteModule,
        MatDialogModule,
@@ -36,11 +35,10 @@ import {MatTooltipModule} from '@angular/material/tooltip';
        MatSlideToggleModule,
        SharedModule
    ],
-    exports     : [
+    exports: [
        DetailSettingsComponent
    ],
-    providers   : []
+    providers: []
 })
-export class DetailSettingsModule
-{
+export class DetailSettingsModule {
 }