model details simple tests

src/modules/models/components/model-details/model-details.component.html

@@ -1,25 +1,20 @@
 <div class="content modelDetail">
-    <div class="content-header">
+    <header class="content-header">
         <div class="content-header__title">{{ (model$ | async)?.name }}</div>
         <button class="button button--secondary button--secondary-remove" (click)="removeModel()">
             <hydro-icon class="button__icon" [type]="'icon-remove'"></hydro-icon>
             remove
         </button>
-    </div>
+    </header>
 
     <div class="content-body">
-        <div class="hydro-panel">
+        <div class="hydro-panel versions">
             <div class="hydro-panel__header">
                 <h5>Versions</h5>
             </div>
             <ng-container *ngIf="modelVersions$ | async; let modelVersions">
-                <ng-container *ngIf="modelVersions.length === 0">
-                    <span class="alert">
-                        <span class="alert__ancor">Ooops!</span> It looks like API does not return any builds for this model. Please check model.
-                    </span>
-                </ng-container>
-                <ng-container *ngIf="modelVersions.length">
-                    <table class='hydro-table hydro-table-models'>
+                <ng-container *ngIf="modelVersions.length; else emptyModelVersions">
+                    <table class='hydro-table hydro-table-models versions__table'>
                         <colgroup>
                             <col width="100px">
                             <col>
@@ -36,7 +31,7 @@ <h5>Versions</h5>
                         </thead>
                         <tbody>
                             <tr *ngFor="let modelVersion of modelVersions" class='hydro-table-body__row row'>
-                                <td class="hydro-table-body__cell">{{ modelVersion.id }}</td>
+                                <td class="hydro-table-body__cell">{{ modelVersion.modelVersion }}</td>
                                 <td class="hydro-table-body__cell">
                                     <span class="cs-text-overflow-ellipsis">
                                         {{ modelVersion.started | utcToLocal | amTimeAgo }}
@@ -53,13 +48,13 @@ <h5>Versions</h5>
                                     </div>
                                 </td>
                                 <td class="hydro-table-body__cell">
-                                    <ng-container *ngIf="modelVersion.applications.length > 0">
+                                    <ng-container *ngIf="modelVersion.applications.length > 0; else emptyApplication">
                                         <span class="model-item__application" *ngFor="let appName of modelVersion.applications"
                                             [routerLink]="['../../applications', appName]">
                                             <span>{{appName}}</span>
                                         </span>
                                     </ng-container>
-                                    <span *ngIf="modelVersion.applications.length === 0">-</span>
+                                    <ng-template #emptyApplication>-</ng-template>
                                 </td>
                                 <td class="hydro-table-body__cell">
                                     <div class="actions">
@@ -88,4 +83,10 @@ <h5>Versions</h5>
             </ng-container>
         </div>
     </div>
-</div>
+</div>
+
+<ng-template #emptyModelVersions>
+    <span class="alert">
+        <span class="alert__ancor">Ooops!</span> It looks like API does not return any builds for this model. Please check model.
+    </span>
+</ng-template>

src/modules/models/components/model-details/model-details.component.scss

@@ -3,7 +3,7 @@
 
 
 .model-details {
-    >p {
+    > p {
         >span {
             font-weight: bold;
         }

src/modules/models/components/model-details/model-details.component.spec.ts

@@ -1,15 +1,25 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { RouterTestingModule } from '@angular/router/testing';
+import { HydroServingState } from '@core/reducers';
 import { DialogService } from '@dialog/dialog.service';
+import * as fromModels from '@models/reducers';
+import { Store, StoreModule, combineReducers } from '@ngrx/store';
 import { SharedModule } from '@shared/shared.module';
+import { MockModel1 } from '@testing/factories/model';
+import { MockModelVersion1Model1, MockModelVersion2Model1 } from '@testing/factories/modelVersion';
 import { MockStoreProvider } from '@testing/mocks';
 import { MomentModule } from 'angular2-moment';
+import { of } from 'rxjs';
 import { ModelDetailsComponent } from './model-details.component';
 
-describe('ModelDetailsComponent', () => {
+import * as fromModelsActions from '@models/actions';
+
+fdescribe('ModelDetailsComponent', () => {
     let component: ModelDetailsComponent;
     let fixture: ComponentFixture<ModelDetailsComponent>;
+    let element: HTMLElement;
+    let store: Store<HydroServingState>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -20,23 +30,89 @@ describe('ModelDetailsComponent', () => {
                 SharedModule,
                 MomentModule,
                 RouterTestingModule,
+                StoreModule.forRoot({
+                    feature: combineReducers(fromModels.reducers),
+                }),
             ],
             providers: [
                 MockStoreProvider,
                 DialogService,
             ],
-        })
-            .compileComponents();
+        }).compileComponents();
+
     }));
 
     beforeEach(() => {
         fixture = TestBed.createComponent(ModelDetailsComponent);
         component = fixture.componentInstance;
+        element = fixture.nativeElement;
+
+        store = TestBed.get(Store);
+
+        spyOn(store, 'dispatch').and.callThrough();
+        store.dispatch(new fromModelsActions.GetModelVersionsSuccessAction([MockModelVersion1Model1]));
+
+        component.model$ = of(MockModel1);
+
         fixture.detectChanges();
     });
 
     it('it should be created', () => {
         expect(component).toBeTruthy();
     });
 
+    describe('header element', () => {
+        let headerElement: HTMLElement;
+
+        beforeEach(() => {
+            headerElement = element.querySelector('.content-header');
+        });
+
+        it('exists', () => {
+            expect(headerElement).toBeTruthy();
+        });
+
+        it('has title element with models name', () => {
+            const title = headerElement.querySelector('.content-header__title');
+
+            expect(title).toBeTruthy();
+            expect(title.textContent).toEqual(MockModel1.name);
+        });
+
+        it('has remove button', () => {
+            const button = headerElement.querySelector('button');
+
+            expect(button).toBeTruthy();
+        });
+    });
+
+    describe('versions block', () => {
+        let versionsElement: HTMLElement;
+        beforeEach(() => {
+            versionsElement = element.querySelector('.versions');
+        });
+
+        it('exists', () => {
+            expect(versionsElement).toBeTruthy();
+        });
+
+        describe('if modelVersions is empty', () => {
+            let errorElement: HTMLElement;
+            beforeEach(() => {
+                component.modelVersions$ = of([]);
+                fixture.detectChanges();
+                errorElement = versionsElement.querySelector('span.alert');
+
+            });
+
+            it('shows error message element', () => {
+                expect(errorElement).toBeTruthy();
+            });
+
+            it('shows error text', () => {
+                expect(errorElement.textContent)
+                .toEqual('Ooops! It looks like API does not return any builds for this model. Please check model. ');
+            });
+        });
+    });
 });

src/modules/models/components/model-details/model-details.component.ts

@@ -2,30 +2,31 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { Store } from '@ngrx/store';
 
 import { HydroServingState } from '@core/reducers';
-import { Model, ModelVersion } from '@shared/models/_index';
+import { Model, ModelVersion, IModel, IModelVersion } from '@shared/models/_index';
 
 import * as fromModels from '@models/reducers';
 import { Observable } from 'rxjs';
 
 import { DialogService } from '@dialog/dialog.service';
 import { DialogDeleteModelComponent, SELECTED_MODEL$ } from '@models/components/dialogs';
-import { switchMap, filter } from 'rxjs/operators';
+import { switchMap, filter, tap } from 'rxjs/operators';
 @Component({
     selector: 'hs-model-details',
     templateUrl: './model-details.component.html',
     styleUrls: ['./model-details.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ModelDetailsComponent {
-    public model$: Observable<Model>;
-    public modelVersions$: Observable<ModelVersion[]>;
+    public model$: Observable<IModel>;
+    public modelVersions$: Observable<IModelVersion[]>;
 
     constructor(
         private store: Store<HydroServingState>,
         private dialog: DialogService
     ) {
         this.model$ = this.store.select(fromModels.getSelectedModel).pipe(
-            filter(model => !!model));
+            filter(model => !!model)
+        );
 
         this.modelVersions$ = this.model$.pipe(
             switchMap(({id}) => this.store.select(fromModels.getModelVersionsByModelId(id)))

src/modules/shared/components/sidebar/sidebar.component.html

@@ -1,7 +1,6 @@
 <aside class="sidebar">
     <div class="sidebar-header">
         <div class="sidebar-header__row">
-            <!-- <h3 class='sidebar-title'>{{ sidebarTitle }}</h3> -->
             <ng-container *ngIf='actionButton'>
                 <ng-container *ngTemplateOutlet="actionButton"></ng-container>
             </ng-container>