Unit tests added

src/app/app.module.ts

@@ -166,6 +166,7 @@ import { ServerManagementService } from './services/server-management.service';
 import { DeleteActionComponent } from './components/project-map/context-menu/actions/delete-action/delete-action.component';
 import { ListOfSnapshotsComponent } from './components/snapshots/list-of-snapshots/list-of-snapshots.component';
 import { DateFilter } from './filters/dateFilter.pipe';
+import { NameFilter } from './filters/nameFilter.pipe';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -269,6 +270,7 @@ if (environment.production) {
     SymbolsMenuComponent,
     SearchFilter,
     DateFilter,
+    NameFilter,
     ListOfSnapshotsComponent
   ],
   imports: [

src/app/components/snapshots/list-of-snapshots/list-of-snaphshots.component.spec.ts

@@ -0,0 +1,143 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ListOfSnapshotsComponent } from './list-of-snapshots.component';
+import { MatTableModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, MatDialogModule, Sort } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { SnapshotService } from '../../../services/snapshot.service';
+import { DateFilter } from '../../../filters/dateFilter.pipe';
+import { of } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
+import { ServerService } from '../../../services/server.service';
+import { MockedServerService } from '../../../services/server.service.spec';
+import { ProgressDialogService } from '../../../common/progress-dialog/progress-dialog.service';
+import { ToasterService } from '../../../services/toaster.service';
+import { Server } from '../../../models/server';
+import { Snapshot } from '../../../models/snapshot';
+import { MockedToasterService } from '../../../services/toaster.service.spec';
+import { NameFilter } from '../../../filters/nameFilter.pipe';
+
+export class MockedActivatedRoute {
+    get() {
+        return {
+            params: of({ id: 3 }),
+            snapshot: {
+                parent: {
+                    params: {
+                        id: 1
+                    }
+                },
+                paramMap: {
+                    get(name: string): string {
+                        return '1';
+                    }
+                }
+            },
+        };
+    }
+}
+
+export class MockedSnapshotService {
+    public list(server: Server, project_id: string) {
+        return of([]);
+    }
+
+    public delete(server: Server, project_id: string, snapshot_id: string) {
+        return of({});
+    }
+
+    public restore(server: Server, project_id: string, snapshot_id: string) {
+        return of({});
+    }
+}
+
+fdescribe('ListOfSnapshotsComponent', () => {
+    let component: ListOfSnapshotsComponent;
+    let fixture: ComponentFixture<ListOfSnapshotsComponent>;
+    let activatedRoute = new MockedActivatedRoute().get();
+    let mockedServerService = new MockedServerService();
+    let mockedSnapshotService = new MockedSnapshotService();
+    let mockedToasterService = new MockedToasterService();
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports:  [MatDialogModule, MatTableModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
+            providers: [
+                { provide: SnapshotService, useValue: mockedSnapshotService },
+                { provide: ActivatedRoute, useValue: activatedRoute },
+                { provide: ServerService, useValue: mockedServerService },
+                { provide: ProgressDialogService, useClass: ProgressDialogService },
+                { provide: ToasterService, useValue: mockedToasterService }
+            ],
+            declarations: [
+                ListOfSnapshotsComponent,
+                DateFilter,
+                NameFilter
+            ],
+            schemas: [NO_ERRORS_SCHEMA]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ListOfSnapshotsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should call snapshot service to get items', () => {
+        spyOn(mockedSnapshotService, 'list').and.returnValues(of([]));
+
+        component.getSnapshots();
+
+        expect(mockedSnapshotService.list).toHaveBeenCalled();
+    });
+
+    it('should call snapshot service to delete snapshot', () => {
+        let snapshot: Snapshot = {
+            snapshot_id: 1,
+            name: 'snapshot1',
+            created_at: '111111',
+            project_id: 1
+        };
+        spyOn(mockedSnapshotService, 'delete').and.returnValues(of([]));
+
+        component.deleteSnapshot(snapshot);
+
+        expect(mockedSnapshotService.delete).toHaveBeenCalled();
+    });
+
+    it('should sort snapshots in correct order', () => {
+        component.snapshots = [
+            {
+                snapshot_id: 2,
+                name: 'second snapshot',
+                created_at: '222222',
+                project_id: 1
+            },
+            {
+                snapshot_id: 1,
+                name: 'first snapshot',
+                created_at: '111111',
+                project_id: 1
+            }
+        ];
+        let sort: Sort = {
+            active: 'name',
+            direction: 'asc'
+        };
+
+        component.sortData(sort);
+
+        expect(component.snapshots[0].snapshot_id).toBe(1);
+
+        sort.direction = 'desc';
+        component.sortData(sort);
+
+        expect(component.snapshots[0].snapshot_id).toBe(2);
+    });
+});

src/app/components/snapshots/list-of-snapshots/list-of-snapshots.component.html

@@ -5,8 +5,16 @@
         </div>
     </div>
     <div class="default-content">
-        <div class="listcontainer mat-elevation-z8">
-            <mat-table #table matSort (matSortChange)= "sortData($event)" [dataSource]="snapshots">
+        <mat-card>
+            <mat-form-field class="filter-field">
+                <input matInput [(ngModel)]="searchText" placeholder="Filter">
+            </mat-form-field>
+
+            <mat-table 
+                class="mat-table" 
+                #table matSort 
+                (matSortChange)= "sortData($event)" 
+                [dataSource]="snapshots | namefilter: searchText">
                 <ng-container matColumnDef="name">
                     <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
                     <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
@@ -33,6 +41,6 @@
                 <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                 <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
             </mat-table>
-        </div>
+        </mat-card>
     </div>
 </div>

src/app/components/snapshots/list-of-snapshots/list-of-snapshots.component.scss

@@ -0,0 +1,7 @@
+.filter-field {
+    width: 100%;
+}
+
+.mat-table {
+    margin: -16px!important;
+}

src/app/components/snapshots/list-of-snapshots/list-of-snapshots.component.ts

@@ -20,6 +20,7 @@ export class ListOfSnapshotsComponent implements OnInit {
     projectId: string;
     snapshots: Snapshot[];
     displayedColumns = ['name', 'creationDate', 'actions'];
+    searchText: string;
 
     constructor(
         private snapshotService: SnapshotService,

src/app/filters/nameFilter.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+
+@Pipe({
+  name: 'namefilter'
+})
+export class NameFilter implements PipeTransform {
+    transform(items: any[], searchText: string): any[] {
+        if(!items) return [];
+        if(!searchText) return items;
+        
+        searchText = searchText.toLowerCase();
+            return items.filter( item => {
+              return item.name.toLowerCase().includes(searchText);
+            });
+    } 
+}