Unit tests added

src/app/components/preferences/common/symbols/symbols.component.spec.ts

@@ -0,0 +1,56 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatCheckboxModule, MatIconModule, MatToolbarModule, MatMenuModule } from '@angular/material';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { of } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { RouterTestingModule } from '@angular/router/testing';
+import { SymbolsComponent } from './symbols.component';
+import { SymbolService } from '../../../../services/symbol.service';
+import { HttpClientModule } from '@angular/common/http';
+
+export class MockedSymbolService {
+    public list() {
+      return of([]);
+    }
+}
+
+describe('Symbols component', () => {
+    let component: SymbolsComponent;
+    let fixture: ComponentFixture<SymbolsComponent>;
+    let mockedSymbolsService = new MockedSymbolService;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+          imports:  [HttpClientModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
+          providers: [
+              {
+                  provide: SymbolService,  useValue: mockedSymbolsService
+              }
+          ],
+          declarations: [
+              SymbolsComponent
+          ],
+          schemas: [NO_ERRORS_SCHEMA]
+        }).compileComponents();
+      }));
+    
+      beforeEach(() => {
+        fixture = TestBed.createComponent(SymbolsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+      });
+    
+      it('should create', () => {
+          expect(component).toBeTruthy();
+      });
+
+      it('should emit event when symbol selected', () => {
+            spyOn(component.symbolChanged, 'emit');
+
+            component.setSelected('id');
+
+            expect(component.symbolChanged.emit).toHaveBeenCalled();
+            expect(component.isSelected).toBe('id');
+      });
+});

src/app/components/preferences/common/symbols/symbols.component.ts

@@ -19,7 +19,6 @@ export class SymbolsComponent implements OnInit {
     isSelected: string = '';
 
     constructor(
-        private route: ActivatedRoute,
         private symbolService: SymbolService
     ) {}
 

src/app/components/preferences/preferences.component.spec.ts

@@ -3,35 +3,42 @@ import { MatCheckboxModule, MatIconModule, MatToolbarModule, MatMenuModule } fro
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { PreferencesComponent } from './preferences.component';
 import { ActivatedRoute } from '@angular/router';
-import { Observable, of } from 'rxjs';
+import { of } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { RouterTestingModule } from '@angular/router/testing';
 
-describe('SettingsComponent', () => {
+export class MockedActivatedRoute {
+    get() {
+        return {
+            params: of({ id: 3 }),
+            snapshot: {
+                parent: {
+                    params: {
+                        id: 1
+                    }
+                },
+                paramMap: {
+                    get(name: string): string {
+                        return '1';
+                    }
+                }
+            },
+        };
+    }
+}
+
+describe('PreferencesComponent', () => {
     let component: PreferencesComponent;
     let fixture: ComponentFixture<PreferencesComponent>;
+    let activatedRoute = new MockedActivatedRoute().get();
   
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
         providers: [
             {
-                provide: ActivatedRoute,  useValue: {
-                    params: Observable.of({ id: 3 }),
-                    snapshot: {
-                        parent: {
-                            params: {
-                                id: 1
-                            }
-                        },
-                        paramMap: {
-                            get(name: string): string {
-                                return '1';
-                            }
-                        }
-                    },
-                }
+                provide: ActivatedRoute,  useValue: activatedRoute
             }
         ],
         declarations: [

src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html

@@ -14,7 +14,8 @@
                                 matInput type="text" 
                                 [(ngModel)]="qemuTemplate.name" 
                                 formControlName="templateName"
-                                placeholder="Please choose a descriptive name for your new QEMU virtual machine"/>
+                                placeholder="Please choose a descriptive name for your new QEMU virtual machine"
+                                ngDefaultContro/>
                         </mat-form-field><br/>
                         <mat-checkbox>
                             This is a legacy ASA VM
@@ -38,23 +39,22 @@
                             matInput type="number" 
                             placeholder="RAM" 
                             [(ngModel)]="ramMemory"
-                            formControlName="ramMemory"/>
+                            formControlName="ramMemory"
+                            ngDefaultContro/>
                         </mat-form-field>
                     </form>
                 </mat-step>
                 <mat-step label="Console type">
-                    <form [formGroup]="thirdStepForm">
-                        <mat-form-field class="form-field">
-                            <mat-select 
-                                placeholder="Console type" 
-                                [(ngModel)]="qemuTemplate.console_type"
-                                [ngModelOptions]="{standalone: true}" >
-                                <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                                    {{type}}
-                                </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                    </form>
+                    <mat-form-field class="form-field">
+                        <mat-select 
+                            placeholder="Console type" 
+                            [(ngModel)]="qemuTemplate.console_type"
+                            [ngModelOptions]="{standalone: true}" >
+                            <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                                {{type}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
                 </mat-step>
                 <mat-step label="Disk image">
                     <form [formGroup]="fourthStepForm">
@@ -77,7 +77,8 @@
                                 accept=".qcow2"
                                 #file
                                 class="nonvisible"
-                                (change)="uploadImageFile($event)"/>
+                                (change)="uploadImageFile($event)"
+                                ngDefaultContro/>
                             <button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
                             <mat-form-field class="file-name-form-field">
                                 <input

src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.spec.ts

@@ -0,0 +1,130 @@
+import { ComponentFixture, async, TestBed } from '@angular/core/testing';
+import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, MatSelectModule, MatAutocompleteModule, MatFormFieldModule, MatInputModule } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ActivatedRoute, Router } from '@angular/router';
+import { of } from 'rxjs';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MockedServerService } from '../../../../services/server.service.spec';
+import { ServerService } from '../../../../services/server.service';
+import { Server } from '../../../../models/server';
+import { ToasterService } from '../../../../services/toaster.service';
+import { TemplateMocksService } from '../../../../services/template-mocks.service';
+import { MockedToasterService } from '../../../../services/toaster.service.spec';
+import { MockedActivatedRoute } from '../../preferences.component.spec';
+import { QemuTemplate } from '../../../../models/templates/qemu-template';
+import { AddQemuVmTemplateComponent } from './add-qemu-vm-template.component';
+import { QemuService } from '../../../../services/qemu.service';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+export class MockedQemuService {
+    public addTemplate(server: Server, qemuTemplate: QemuTemplate) {
+        return of(qemuTemplate);    
+    }
+
+    public getBinaries(server: Server) {
+        return of([]);    
+    }
+
+    public getImages(server: Server) {
+        return of([]);    
+    }
+}
+
+describe('AddQemuVmTemplateComponent', () => {
+    let component: AddQemuVmTemplateComponent;
+    let fixture: ComponentFixture<AddQemuVmTemplateComponent>;
+
+    let mockedServerService = new MockedServerService;
+    let mockedQemuService = new MockedQemuService;
+    let mockedToasterService = new MockedToasterService;
+    let activatedRoute = new MockedActivatedRoute().get();
+    let router = {
+        navigate: jasmine.createSpy('navigate')
+    };
+    
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+          imports: [FormsModule, ReactiveFormsModule, MatSelectModule, MatAutocompleteModule, MatIconModule, MatFormFieldModule, MatInputModule,
+            MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
+          providers: [
+              {
+                  provide: ActivatedRoute,  useValue: activatedRoute
+              },
+              { provide: Router, useValue: router },
+              { provide: ServerService, useValue: mockedServerService },
+              { provide: QemuService, useValue: mockedQemuService },
+              { provide: ToasterService, useValue: mockedToasterService},
+              { provide: TemplateMocksService, useClass: TemplateMocksService }
+          ],
+          declarations: [
+              AddQemuVmTemplateComponent
+          ],
+          schemas: [NO_ERRORS_SCHEMA]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AddQemuVmTemplateComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should call add template', () => {
+        spyOn(mockedQemuService, 'addTemplate').and.returnValue(of({} as QemuTemplate));
+        component.firstStepForm.controls['templateName'].setValue('template name');
+        component.secondStepForm.controls['ramMemory'].setValue(0);
+        component.fourthStepForm.controls['fileName'].setValue('file name');
+        component.chosenImage = 'path';
+        component.selectedBinary = {
+            path: 'path',
+            version: 'version'
+        };
+        component.newImageSelected = true;
+        component.server = {id: 1} as Server;
+
+        component.addTemplate();
+
+        expect(mockedQemuService.addTemplate).toHaveBeenCalled();
+    });
+
+    it('should not call add template when template name is empty', () => {
+        spyOn(mockedQemuService, 'addTemplate').and.returnValue(of({} as QemuTemplate));
+        component.firstStepForm.controls['templateName'].setValue('');
+        component.secondStepForm.controls['ramMemory'].setValue(0);
+        component.fourthStepForm.controls['fileName'].setValue('file name');
+        component.chosenImage = 'path';
+        component.selectedBinary = {
+            path: 'path',
+            version: 'version'
+        };
+        component.newImageSelected = true;
+        component.server = {id: 1} as Server;
+
+        component.addTemplate();
+
+        expect(mockedQemuService.addTemplate).not.toHaveBeenCalled();
+    });
+
+    it('should not call add template when ram is not set', () => {
+        spyOn(mockedQemuService, 'addTemplate').and.returnValue(of({} as QemuTemplate));
+        component.firstStepForm.controls['templateName'].setValue('template name');
+        component.fourthStepForm.controls['fileName'].setValue('file name');
+        component.chosenImage = 'path';
+        component.selectedBinary = {
+            path: 'path',
+            version: 'version'
+        };
+        component.newImageSelected = true;
+        component.server = {id: 1} as Server;
+
+        component.addTemplate();
+
+        expect(mockedQemuService.addTemplate).not.toHaveBeenCalled();
+    });
+});

src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts

@@ -2,7 +2,6 @@ import { Component, OnInit } from "@angular/core";
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
-import { switchMap } from 'rxjs/operators';
 import { QemuService } from '../../../../services/qemu.service';
 import { QemuBinary } from '../../../../models/qemu/qemu-binary';
 import { QemuImage } from '../../../../models/qemu/qemu-image';
@@ -32,7 +31,6 @@ export class AddQemuVmTemplateComponent implements OnInit {
 
     firstStepForm: FormGroup;
     secondStepForm: FormGroup;
-    thirdStepForm: FormGroup;
     fourthStepForm: FormGroup;
     
     constructor(
@@ -53,8 +51,6 @@ export class AddQemuVmTemplateComponent implements OnInit {
         this.secondStepForm = this.formBuilder.group({
             ramMemory: new FormControl('', Validators.required)
         });
-        
-        this.thirdStepForm = this.formBuilder.group({});
 
         this.fourthStepForm = this.formBuilder.group({
             fileName: new FormControl('', Validators.required)
@@ -62,14 +58,8 @@ export class AddQemuVmTemplateComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.route.paramMap
-        .pipe(
-          switchMap((params: ParamMap) => {
-            const server_id = params.get('server_id');
-            return this.serverService.get(parseInt(server_id, 10));
-          })
-        )
-        .subscribe((server: Server) => {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
 
             this.templateMocksService.getQemuTemplate().subscribe((qemuTemplate: QemuTemplate) => {
@@ -95,8 +85,7 @@ export class AddQemuVmTemplateComponent implements OnInit {
     }
 
     addTemplate() {
-        if (!this.firstStepForm.invalid && !this.secondStepForm.invalid && !this.thirdStepForm.invalid 
-            && (this.selectedImage || this.chosenImage)) {
+        if (!this.firstStepForm.invalid && !this.secondStepForm.invalid && (this.selectedImage || this.chosenImage)) {
             this.qemuTemplate.ram = this.ramMemory;
             this.qemuTemplate.qemu_path = this.selectedBinary.path;
             if (this.newImageSelected) {

src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.spec.ts

@@ -0,0 +1,63 @@
+import { ComponentFixture, async, TestBed } from '@angular/core/testing';
+import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ActivatedRoute } from '@angular/router';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MockedServerService } from '../../../../services/server.service.spec';
+import { ServerService } from '../../../../services/server.service';
+import { MockedActivatedRoute } from '../../preferences.component.spec';
+import { QemuPreferencesComponent } from './qemu-preferences.component';
+import { ServerSettingsService } from '../../../../services/server-settings.service';
+import { HttpClientModule } from '@angular/common/http';
+import { MockedServerSettingsService } from '../../../../services/server-settings.service.spec';
+import { MockedToasterService } from '../../../../services/toaster.service.spec';
+import { ToasterService } from '../../../../services/toaster.service';
+import { of } from 'rxjs';
+
+describe('QemuPreferencesComponent', () => {
+    let component: QemuPreferencesComponent;
+    let fixture: ComponentFixture<QemuPreferencesComponent>;
+
+    let mockedServerService = new MockedServerService;
+    let activatedRoute = new MockedActivatedRoute().get();
+    let mockedServerSettingsService = new MockedServerSettingsService();
+    let mockedToasterService = new MockedToasterService();
+    
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+          imports: [HttpClientModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
+          providers: [
+              {
+                  provide: ActivatedRoute,  useValue: activatedRoute
+              },
+              { provide: ServerService, useValue: mockedServerService },
+              { provide: ServerSettingsService, useValue: mockedServerSettingsService },
+              { provide: ToasterService, useValue: mockedToasterService }
+          ],
+          declarations: [
+              QemuPreferencesComponent
+          ],
+          schemas: [NO_ERRORS_SCHEMA]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(QemuPreferencesComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should call update settings when restore defaults chosen', () => {
+        spyOn(mockedServerSettingsService, 'updateSettingsForQemu').and.returnValue(of([]));
+
+        component.restoreDefaults();
+
+        expect(mockedServerSettingsService.updateSettingsForQemu).toHaveBeenCalled();
+    });
+});

src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.ts

@@ -25,15 +25,10 @@ export class QemuPreferencesComponent implements OnInit {
     ) {}
 
     ngOnInit() {
-        this.route.paramMap
-        .pipe(
-          switchMap((params: ParamMap) => {
-            const server_id = params.get('server_id');
-            return this.serverService.get(parseInt(server_id, 10));
-          })
-        )
-        .subscribe((server: Server) => {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
+
             this.serverSettingsService.getSettingsForQemu(this.server).subscribe((settings: QemuSettings) => {
                 this.settings = settings;
             });

src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.spec.ts

@@ -0,0 +1,82 @@
+import { ComponentFixture, async, TestBed } from '@angular/core/testing';
+import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, MatTableModule } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ActivatedRoute } from '@angular/router';
+import { of } from 'rxjs';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MockedServerService } from '../../../../services/server.service.spec';
+import { ServerService } from '../../../../services/server.service';
+import { Server } from '../../../../models/server';
+import { MockedToasterService } from '../../../../services/toaster.service.spec';
+import { ToasterService } from '../../../../services/toaster.service';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MockedActivatedRoute } from '../../preferences.component.spec';
+import { QemuTemplate } from '../../../../models/templates/qemu-template';
+import { QemuVmTemplateDetailsComponent } from './qemu-vm-template-details.component';
+import { QemuService } from '../../../../services/qemu.service';
+
+export class MockedQemuService {
+    public getTemplate(server: Server, template_id: string) {
+        return of({} as QemuTemplate);  
+    }
+
+    public saveTemplate(server: Server, qemuTemplate: QemuTemplate) {
+        return of(qemuTemplate);    
+    }
+
+    public getBinaries(server: Server) {
+        return of([]);    
+    }
+
+    public getImages(server: Server) {
+        return of([]);    
+    }
+}
+
+describe('QemuVmTemplateDetailsComponent', () => {
+    let component: QemuVmTemplateDetailsComponent;
+    let fixture: ComponentFixture<QemuVmTemplateDetailsComponent>;
+
+    let mockedServerService = new MockedServerService;
+    let mockedQemuService = new MockedQemuService;
+    let mockedToasterService = new MockedToasterService;
+    let activatedRoute = new MockedActivatedRoute().get();
+    
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+          imports: [FormsModule, ReactiveFormsModule,  MatTableModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
+          providers: [
+              {
+                  provide: ActivatedRoute,  useValue: activatedRoute
+              },
+              { provide: ServerService, useValue: mockedServerService },
+              { provide: QemuService, useValue: mockedQemuService },
+              { provide: ToasterService, useValue: mockedToasterService}
+          ],
+          declarations: [
+              QemuVmTemplateDetailsComponent
+          ],
+          schemas: [NO_ERRORS_SCHEMA]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(QemuVmTemplateDetailsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should call save template', () => {
+        spyOn(mockedQemuService, 'saveTemplate').and.returnValue(of({} as QemuTemplate));
+
+        component.onSave();
+
+        expect(mockedQemuService.saveTemplate).toHaveBeenCalled();
+    });
+});

src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.ts

@@ -79,6 +79,7 @@ export class QemuVmTemplateDetailsComponent implements OnInit {
         const template_id = this.route.snapshot.paramMap.get("template_id");
         this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
+            
             this.qemuService.getTemplate(this.server, template_id).subscribe((qemuTemplate: QemuTemplate) => {
                 this.qemuTemplate = qemuTemplate;
 

src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.spec.ts

@@ -0,0 +1,57 @@
+import { ComponentFixture, async, TestBed } from '@angular/core/testing';
+import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ActivatedRoute } from '@angular/router';
+import { of } from 'rxjs';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MockedServerService } from '../../../../services/server.service.spec';
+import { ServerService } from '../../../../services/server.service';
+import { Server } from '../../../../models/server';
+import { MockedActivatedRoute } from '../../preferences.component.spec';
+import { QemuTemplate } from '../../../../models/templates/qemu-template';
+import { QemuVmTemplatesComponent } from './qemu-vm-templates.component';
+import { QemuService } from '../../../../services/qemu.service';
+
+export class MockedQemuService {
+    public getTemplates(server: Server) {
+        return of([{} as QemuTemplate]);
+    }
+}
+
+describe('QemuTemplatesComponent', () => {
+    let component: QemuVmTemplatesComponent;
+    let fixture: ComponentFixture<QemuVmTemplatesComponent>;
+
+    let mockedServerService = new MockedServerService;
+    let mockedQemuService = new MockedQemuService;
+    let activatedRoute = new MockedActivatedRoute().get();
+    
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
+          providers: [
+              {
+                  provide: ActivatedRoute,  useValue: activatedRoute
+              },
+              { provide: ServerService, useValue: mockedServerService },
+              { provide: QemuService, useValue: mockedQemuService }
+          ],
+          declarations: [
+              QemuVmTemplatesComponent
+          ],
+          schemas: [NO_ERRORS_SCHEMA]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(QemuVmTemplatesComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.ts

@@ -23,15 +23,11 @@ export class QemuVmTemplatesComponent implements OnInit {
     ) {}
 
     ngOnInit() {
-        this.route.paramMap
-        .pipe(
-          switchMap((params: ParamMap) => {
-            const server_id = params.get('server_id');
-            return this.serverService.get(parseInt(server_id, 10));
-          })
-        )
-        .subscribe((server: Server) => {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        const template_id = this.route.snapshot.paramMap.get("template_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
+            
             this.qemuService.getTemplates(server).subscribe((qemuTemplates: QemuTemplate[]) => {
                 qemuTemplates.forEach((template) => {
                     if ((template.template_type === 'qemu') && !template.builtin) {

src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.spec.ts

@@ -0,0 +1,112 @@
+import { ComponentFixture, async, TestBed } from '@angular/core/testing';
+import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ActivatedRoute } from '@angular/router';
+import { of } from 'rxjs';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MockedServerService } from '../../../../services/server.service.spec';
+import { ServerService } from '../../../../services/server.service';
+import { Server } from '../../../../models/server';
+import { ToasterService } from '../../../../services/toaster.service';
+import { TemplateMocksService } from '../../../../services/template-mocks.service';
+import { MockedToasterService } from '../../../../services/toaster.service.spec';
+import { VirtualBoxTemplate } from '../../../../models/templates/virtualbox-template';
+import { AddVirtualBoxTemplateComponent } from './add-virtual-box-template.component';
+import { VirtualBoxService } from '../../../../services/virtual-box.service';
+import { MockedActivatedRoute } from '../../preferences.component.spec';
+
+export class MockedVirtualBoxService {
+    public addTemplate(server: Server, virtualBoxTemplate: VirtualBoxTemplate) {
+        return of(virtualBoxTemplate);    
+    }
+
+    public getVirtualMachines(server: Server) {
+        return of([]);
+    }
+}
+
+describe('AddVirtualBoxTemplateComponent', () => {
+    let component: AddVirtualBoxTemplateComponent;
+    let fixture: ComponentFixture<AddVirtualBoxTemplateComponent>;
+
+    let mockedServerService = new MockedServerService;
+    let mockedVirtualBoxService = new MockedVirtualBoxService;
+    let mockedToasterService = new MockedToasterService;
+    let activatedRoute = new MockedActivatedRoute().get();
+    
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
+          providers: [
+              {
+                  provide: ActivatedRoute,  useValue: activatedRoute
+              },
+              { provide: ServerService, useValue: mockedServerService },
+              { provide: VirtualBoxService, useValue: mockedVirtualBoxService },
+              { provide: ToasterService, useValue: mockedToasterService},
+              { provide: TemplateMocksService, useClass: TemplateMocksService }
+          ],
+          declarations: [
+              AddVirtualBoxTemplateComponent
+          ],
+          schemas: [NO_ERRORS_SCHEMA]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AddVirtualBoxTemplateComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should call save template', () => {
+        spyOn(mockedVirtualBoxService, 'addTemplate').and.returnValue(of({} as VirtualBoxTemplate));
+        let template: VirtualBoxTemplate = {
+            adapter_type: 'Intel PRO/1000 MT Desktop (82540EM)',
+            adapters: 1,
+            builtin: false,
+            category: 'guest',
+            compute_id: 'local',
+            console_auto_start: false,
+            console_type: 'none',
+            custom_adapters: [],
+            default_name_format: '{name}-{0}',
+            first_port_name: '',
+            headless: false,
+            linked_clone: false,
+            name: '',
+            on_close: 'power_off',
+            port_name_format: 'Ethernet{0}',
+            port_segment_size: 0,
+            ram: 0,
+            symbol: ':/symbols/vbox_guest.svg',
+            template_id: '',
+            template_type: 'virtualbox',
+            usage: '',
+            use_any_adapter: false,
+            vmname: ''
+        }
+        component.virtualBoxTemplate = {} as VirtualBoxTemplate;
+        component.selectedVM = template;
+        component.server = {id: 1} as Server;
+
+        component.addTemplate();
+
+        expect(mockedVirtualBoxService.addTemplate).toHaveBeenCalled();
+    });
+
+    it('should not call save template when virtual machine is not selected', () => {
+        spyOn(mockedVirtualBoxService, 'addTemplate').and.returnValue(of({} as VirtualBoxTemplate));
+        component.server = {id: 1} as Server;
+
+        component.addTemplate();
+
+        expect(mockedVirtualBoxService.addTemplate).not.toHaveBeenCalled();
+    });
+});

src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.ts

@@ -32,14 +32,8 @@ export class AddVirtualBoxTemplateComponent implements OnInit {
     ) {}
 
     ngOnInit() {
-        this.route.paramMap
-        .pipe(
-          switchMap((params: ParamMap) => {
-            const server_id = params.get('server_id');
-            return this.serverService.get(parseInt(server_id, 10));
-          })
-        )
-        .subscribe((server: Server) => {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
 
             this.virtualBoxService.getVirtualMachines(this.server).subscribe((virtualMachines: VirtualBoxVm[]) => {

src/app/components/preferences/virtual-box/virtual-box-preferences/virtual-box-preferences.component.ts

@@ -1,10 +1,8 @@
 import { Component, OnInit } from "@angular/core";
-import { ServerSettingsService } from '../../../../services/server-settings.service';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { Server } from '../../../../models/server';
 import { switchMap } from 'rxjs/operators';
 import { ServerService } from '../../../../services/server.service';
-import { ToasterService } from '../../../../services/toaster.service';
 
 
 @Component({
@@ -18,20 +16,12 @@ export class VirtualBoxPreferencesComponent implements OnInit {
 
     constructor(
         private route: ActivatedRoute,
-        private serverService: ServerService,
-        private serverSettingsService: ServerSettingsService,
-        private toasterService: ToasterService
+        private serverService: ServerService
     ) {}
 
     ngOnInit() {
-        this.route.paramMap
-        .pipe(
-          switchMap((params: ParamMap) => {
-            const server_id = params.get('server_id');
-            return this.serverService.get(parseInt(server_id, 10));
-          })
-        )
-        .subscribe((server: Server) => {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
         });
     }

src/app/components/preferences/virtual-box/virtual-box-preferences/virtual-box-prefernces.component.spec.ts

@@ -0,0 +1,51 @@
+import { ComponentFixture, async, TestBed } from '@angular/core/testing';
+import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ActivatedRoute } from '@angular/router';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MockedServerService } from '../../../../services/server.service.spec';
+import { ServerService } from '../../../../services/server.service';
+import { VirtualBoxPreferencesComponent } from './virtual-box-preferences.component';
+import { MockedActivatedRoute } from '../../preferences.component.spec';
+
+describe('VirtualBoxPreferencesComponent', () => {
+    let component: VirtualBoxPreferencesComponent;
+    let fixture: ComponentFixture<VirtualBoxPreferencesComponent>;
+
+    let mockedServerService = new MockedServerService;
+    let activatedRoute = new MockedActivatedRoute().get();
+    
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
+          providers: [
+              {
+                  provide: ActivatedRoute,  useValue: activatedRoute
+              },
+              { provide: ServerService, useValue: mockedServerService }
+          ],
+          declarations: [
+              VirtualBoxPreferencesComponent
+          ],
+          schemas: [NO_ERRORS_SCHEMA]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(VirtualBoxPreferencesComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should clear path to virtual box manage', () => {
+        component.restoreDefaults();
+
+        expect(component.vboxManagePath).toBe('');
+    });
+});

src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.spec.ts

@@ -0,0 +1,74 @@
+import { ComponentFixture, async, TestBed } from '@angular/core/testing';
+import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, MatTableModule } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ActivatedRoute } from '@angular/router';
+import { Observable, of } from 'rxjs';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MockedServerService } from '../../../../services/server.service.spec';
+import { ServerService } from '../../../../services/server.service';
+import { Server } from '../../../../models/server';
+import { MockedToasterService } from '../../../../services/toaster.service.spec';
+import { ToasterService } from '../../../../services/toaster.service';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { VirtualBoxTemplate } from '../../../../models/templates/virtualbox-template';
+import { VirtualBoxTemplateDetailsComponent } from './virtual-box-template-details.component';
+import { VirtualBoxService } from '../../../../services/virtual-box.service';
+import { MockedActivatedRoute } from '../../preferences.component.spec';
+
+export class MockedVirtualBoxService {
+    public getTemplate(server: Server, template_id: string) {
+        return of({} as VirtualBoxTemplate);  
+    }
+
+    public saveTemplate(server: Server, virtualBoxTemplate: VirtualBoxTemplate) {
+        return of(virtualBoxTemplate);    
+    }
+}
+
+describe('VirtualBoxTemplateDetailsComponent', () => {
+    let component: VirtualBoxTemplateDetailsComponent;
+    let fixture: ComponentFixture<VirtualBoxTemplateDetailsComponent>;
+
+    let mockedServerService = new MockedServerService;
+    let mockedVirtualBoxService = new MockedVirtualBoxService;
+    let mockedToasterService = new MockedToasterService;
+    let activatedRoute = new MockedActivatedRoute().get();
+    
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+          imports: [FormsModule, ReactiveFormsModule, MatTableModule , MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
+          providers: [
+              {
+                  provide: ActivatedRoute,  useValue: activatedRoute
+              },
+              { provide: ServerService, useValue: mockedServerService },
+              { provide: VirtualBoxService, useValue: mockedVirtualBoxService },
+              { provide: ToasterService, useValue: mockedToasterService}
+          ],
+          declarations: [
+              VirtualBoxTemplateDetailsComponent
+          ],
+          schemas: [NO_ERRORS_SCHEMA]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(VirtualBoxTemplateDetailsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should call save template', () => {
+        spyOn(mockedVirtualBoxService, 'saveTemplate').and.returnValue(of({} as VirtualBoxTemplate));
+
+        component.onSave();
+
+        expect(mockedVirtualBoxService.saveTemplate).toHaveBeenCalled();
+    });
+});

src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.spec.ts

@@ -0,0 +1,57 @@
+import { ComponentFixture, async, TestBed } from '@angular/core/testing';
+import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ActivatedRoute } from '@angular/router';
+import { Observable, of } from 'rxjs';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MockedServerService } from '../../../../services/server.service.spec';
+import { ServerService } from '../../../../services/server.service';
+import { Server } from '../../../../models/server';
+import { VirtualBoxTemplate } from '../../../../models/templates/virtualbox-template';
+import { VirtualBoxTemplatesComponent } from './virtual-box-templates.component';
+import { VirtualBoxService } from '../../../../services/virtual-box.service';
+import { MockedActivatedRoute } from '../../preferences.component.spec';
+
+export class MockedVirtualBoxService {
+    public getTemplates(server: Server) {
+        return of([{} as VirtualBoxTemplate]);
+    }
+}
+
+describe('VirtualBoxTemplatesComponent', () => {
+    let component: VirtualBoxTemplatesComponent;
+    let fixture: ComponentFixture<VirtualBoxTemplatesComponent>;
+
+    let mockedServerService = new MockedServerService;
+    let mockedVirtualBoxService = new MockedVirtualBoxService;
+    let activatedRoute = new MockedActivatedRoute().get();
+    
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
+          providers: [
+              {
+                  provide: ActivatedRoute,  useValue: activatedRoute
+              },
+              { provide: ServerService, useValue: mockedServerService },
+              { provide: VirtualBoxService, useValue: mockedVirtualBoxService }
+          ],
+          declarations: [
+              VirtualBoxTemplatesComponent
+          ],
+          schemas: [NO_ERRORS_SCHEMA]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(VirtualBoxTemplatesComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.ts

@@ -23,14 +23,8 @@ export class VirtualBoxTemplatesComponent implements OnInit {
     ) {}
 
     ngOnInit() {
-        this.route.paramMap
-        .pipe(
-          switchMap((params: ParamMap) => {
-            const server_id = params.get('server_id');
-            return this.serverService.get(parseInt(server_id, 10));
-          })
-        )
-        .subscribe((server: Server) => {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
 
             this.virtualBoxService.getTemplates(this.server).subscribe((virtualBoxTemplates: VirtualBoxTemplate[]) => {

src/app/components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component.spec.ts

@@ -0,0 +1,85 @@
+import { ComponentFixture, async, TestBed } from '@angular/core/testing';
+import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ActivatedRoute } from '@angular/router';
+import { of } from 'rxjs';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MockedServerService } from '../../../../services/server.service.spec';
+import { ServerService } from '../../../../services/server.service';
+import { AddVpcsTemplateComponent } from './add-vpcs-template.component';
+import { Server } from '../../../../models/server';
+import { VpcsService } from '../../../../services/vpcs.service';
+import { ToasterService } from '../../../../services/toaster.service';
+import { TemplateMocksService } from '../../../../services/template-mocks.service';
+import { MockedToasterService } from '../../../../services/toaster.service.spec';
+import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
+import { MockedActivatedRoute } from '../../preferences.component.spec';
+
+export class MockedVpcsService {
+    public addTemplate(server: Server, vpcsTemplate: VpcsTemplate) {
+        return of(vpcsTemplate);    
+    }
+}
+
+describe('AddVpcsTemplateComponent', () => {
+    let component: AddVpcsTemplateComponent;
+    let fixture: ComponentFixture<AddVpcsTemplateComponent>;
+
+    let mockedServerService = new MockedServerService;
+    let mockedVpcsService = new MockedVpcsService;
+    let mockedToasterService = new MockedToasterService;
+    let activatedRoute = new MockedActivatedRoute().get();
+    
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
+          providers: [
+              {
+                  provide: ActivatedRoute,  useValue: activatedRoute
+              },
+              { provide: ServerService, useValue: mockedServerService },
+              { provide: VpcsService, useValue: mockedVpcsService },
+              { provide: ToasterService, useValue: mockedToasterService},
+              { provide: TemplateMocksService, useClass: TemplateMocksService }
+          ],
+          declarations: [
+              AddVpcsTemplateComponent
+          ],
+          schemas: [NO_ERRORS_SCHEMA]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AddVpcsTemplateComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should call add template', () => {
+        spyOn(mockedVpcsService, 'addTemplate').and.returnValue(of({} as VpcsTemplate));
+        component.templateName = "sample name";
+        component.server = {id: 1} as Server;
+
+        component.addTemplate();
+
+        expect(mockedVpcsService.addTemplate).toHaveBeenCalled();
+    });
+
+    it('should not call add template when template name is empty', () => {
+        spyOn(mockedVpcsService, 'addTemplate').and.returnValue(of({} as VpcsTemplate));
+        spyOn(mockedToasterService, 'error');
+        component.templateName = "";
+        component.server = {id: 1} as Server;
+
+        component.addTemplate();
+
+        expect(mockedVpcsService.addTemplate).not.toHaveBeenCalled();
+        expect(mockedToasterService.error).toHaveBeenCalled();
+    });
+});

src/app/components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component.ts

@@ -29,14 +29,8 @@ export class AddVpcsTemplateComponent implements OnInit {
     ) {}
 
     ngOnInit() {
-        this.route.paramMap
-        .pipe(
-          switchMap((params: ParamMap) => {
-            const server_id = params.get('server_id');
-            return this.serverService.get(parseInt(server_id, 10));
-          })
-        )
-        .subscribe((server: Server) => {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
         });
     }

src/app/components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component.spec.ts

@@ -0,0 +1,52 @@
+import { VpcsPreferencesComponent } from "./vpcs-preferences.component";
+import { ComponentFixture, async, TestBed } from '@angular/core/testing';
+import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MockedServerService } from '../../../../services/server.service.spec';
+import { ServerService } from '../../../../services/server.service';
+import { MockedActivatedRoute } from '../../preferences.component.spec';
+
+describe('VpcsPreferencesComponent', () => {
+    let component: VpcsPreferencesComponent;
+    let fixture: ComponentFixture<VpcsPreferencesComponent>;
+
+    let mockedServerService = new MockedServerService;
+    let activatedRoute = new MockedActivatedRoute().get();
+    
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
+          providers: [
+              {
+                  provide: ActivatedRoute,  useValue: activatedRoute
+              },
+              { provide: ServerService, useValue: mockedServerService }
+          ],
+          declarations: [
+              VpcsPreferencesComponent
+          ],
+          schemas: [NO_ERRORS_SCHEMA]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(VpcsPreferencesComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should clear path to executable', () => {
+        component.restoreDefaults();
+
+        expect(component.vpcsExecutable).toBe('');
+    });
+});

src/app/components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component.ts

@@ -1,10 +1,8 @@
 import { Component, OnInit } from "@angular/core";
-import { ServerSettingsService } from '../../../../services/server-settings.service';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { Server } from '../../../../models/server';
 import { switchMap } from 'rxjs/operators';
 import { ServerService } from '../../../../services/server.service';
-import { ToasterService } from '../../../../services/toaster.service';
 
 
 @Component({
@@ -18,20 +16,13 @@ export class VpcsPreferencesComponent implements OnInit {
 
     constructor(
         private route: ActivatedRoute,
-        private serverService: ServerService,
-        private serverSettingsService: ServerSettingsService,
-        private toasterService: ToasterService
+        private serverService: ServerService
     ) {}
 
     ngOnInit() {
-        this.route.paramMap
-        .pipe(
-          switchMap((params: ParamMap) => {
-            const server_id = params.get('server_id');
-            return this.serverService.get(parseInt(server_id, 10));
-          })
-        )
-        .subscribe((server: Server) => {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        const template_id = this.route.snapshot.paramMap.get("template_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
         });
     }

src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.spec.ts

@@ -0,0 +1,126 @@
+import { ComponentFixture, async, TestBed } from '@angular/core/testing';
+import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ActivatedRoute } from '@angular/router';
+import { of } from 'rxjs';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MockedServerService } from '../../../../services/server.service.spec';
+import { ServerService } from '../../../../services/server.service';
+import { VpcsTemplateDetailsComponent } from './vpcs-template-details.component';
+import { Server } from '../../../../models/server';
+import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
+import { MockedToasterService } from '../../../../services/toaster.service.spec';
+import { VpcsService } from '../../../../services/vpcs.service';
+import { ToasterService } from '../../../../services/toaster.service';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MockedActivatedRoute } from '../../preferences.component.spec';
+
+export class MockedVpcsService {
+    public getTemplate(server: Server, template_id: string) {
+        return of({} as VpcsTemplate);  
+    }
+
+    public saveTemplate(server: Server, vpcsTemplate: VpcsTemplate) {
+        return of(vpcsTemplate);    
+    }
+}
+
+describe('VpcsTemplateDetailsComponent', () => {
+    let component: VpcsTemplateDetailsComponent;
+    let fixture: ComponentFixture<VpcsTemplateDetailsComponent>;
+
+    let mockedServerService = new MockedServerService;
+    let mockedVpcsService = new MockedVpcsService;
+    let mockedToasterService = new MockedToasterService;
+    let activatedRoute = new MockedActivatedRoute().get();
+    
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+          imports: [FormsModule, ReactiveFormsModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
+          providers: [
+              {
+                  provide: ActivatedRoute,  useValue: activatedRoute
+              },
+              { provide: ServerService, useValue: mockedServerService },
+              { provide: VpcsService, useValue: mockedVpcsService },
+              { provide: ToasterService, useValue: mockedToasterService}
+          ],
+          declarations: [
+              VpcsTemplateDetailsComponent
+          ],
+          schemas: [NO_ERRORS_SCHEMA]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(VpcsTemplateDetailsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should call save template', () => {
+        spyOn(mockedVpcsService, 'saveTemplate').and.returnValue(of({} as VpcsTemplate));
+        component.inputForm.controls['templateName'].setValue('template name');
+        component.inputForm.controls['defaultName'].setValue('default name');
+        component.inputForm.controls['scriptFile'].setValue('script file');
+        component.inputForm.controls['symbol'].setValue('symbol');
+
+        component.onSave();
+
+        expect(mockedVpcsService.saveTemplate).toHaveBeenCalled();
+    });
+
+    it('should not call save template when template name is empty', () => {
+        spyOn(mockedVpcsService, 'saveTemplate').and.returnValue(of({} as VpcsTemplate));
+        component.inputForm.controls['templateName'].setValue('');
+        component.inputForm.controls['defaultName'].setValue('default name');
+        component.inputForm.controls['scriptFile'].setValue('script file');
+        component.inputForm.controls['symbol'].setValue('symbol');
+
+        component.onSave();
+
+        expect(mockedVpcsService.saveTemplate).not.toHaveBeenCalled();
+    });
+
+    it('should not call save template when default name is empty', () => {
+        spyOn(mockedVpcsService, 'saveTemplate').and.returnValue(of({} as VpcsTemplate));
+        component.inputForm.controls['templateName'].setValue('template name');
+        component.inputForm.controls['defaultName'].setValue('');
+        component.inputForm.controls['scriptFile'].setValue('script file');
+        component.inputForm.controls['symbol'].setValue('symbol');
+
+        component.onSave();
+
+        expect(mockedVpcsService.saveTemplate).not.toHaveBeenCalled();
+    });
+
+    it('should not call save template when script file is empty', () => {
+        spyOn(mockedVpcsService, 'saveTemplate').and.returnValue(of({} as VpcsTemplate));
+        component.inputForm.controls['templateName'].setValue('template name');
+        component.inputForm.controls['defaultName'].setValue('default name');
+        component.inputForm.controls['scriptFile'].setValue('');
+        component.inputForm.controls['symbol'].setValue('symbol');
+
+        component.onSave();
+
+        expect(mockedVpcsService.saveTemplate).not.toHaveBeenCalled();
+    });
+
+    it('should not call save template when symbol path is empty', () => {
+        spyOn(mockedVpcsService, 'saveTemplate').and.returnValue(of({} as VpcsTemplate));
+        component.inputForm.controls['templateName'].setValue('template name');
+        component.inputForm.controls['defaultName'].setValue('default name');
+        component.inputForm.controls['scriptFile'].setValue('script file');
+        component.inputForm.controls['symbol'].setValue('');
+
+        component.onSave();
+
+        expect(mockedVpcsService.saveTemplate).not.toHaveBeenCalled();
+    });
+});

src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.spec.ts

@@ -0,0 +1,57 @@
+import { ComponentFixture, async, TestBed } from '@angular/core/testing';
+import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ActivatedRoute } from '@angular/router';
+import { of } from 'rxjs';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MockedServerService } from '../../../../services/server.service.spec';
+import { ServerService } from '../../../../services/server.service';
+import { Server } from '../../../../models/server';
+import { VpcsService } from '../../../../services/vpcs.service';
+import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
+import { VpcsTemplatesComponent } from './vpcs-templates.component';
+import { MockedActivatedRoute } from '../../preferences.component.spec';
+
+export class MockedVpcsService {
+    public getTemplates(server: Server) {
+        return of([{} as VpcsTemplate]);
+    }
+}
+
+describe('VpcsTemplatesComponent', () => {
+    let component: VpcsTemplatesComponent;
+    let fixture: ComponentFixture<VpcsTemplatesComponent>;
+
+    let mockedServerService = new MockedServerService;
+    let mockedVpcsService = new MockedVpcsService;
+    let activatedRoute = new MockedActivatedRoute().get();
+    
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
+          providers: [
+              {
+                  provide: ActivatedRoute,  useValue: activatedRoute
+              },
+              { provide: ServerService, useValue: mockedServerService },
+              { provide: VpcsService, useValue: mockedVpcsService }
+          ],
+          declarations: [
+              VpcsTemplatesComponent
+          ],
+          schemas: [NO_ERRORS_SCHEMA]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(VpcsTemplatesComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.ts

@@ -23,14 +23,8 @@ export class VpcsTemplatesComponent implements OnInit {
     ) {}
 
     ngOnInit() {
-        this.route.paramMap
-        .pipe(
-          switchMap((params: ParamMap) => {
-            const server_id = params.get('server_id');
-            return this.serverService.get(parseInt(server_id, 10));
-          })
-        )
-        .subscribe((server: Server) => {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
             this.server = server;
 
             this.vpcsService.getTemplates(this.server).subscribe((vpcsTemplates: VpcsTemplate[]) => {

src/app/services/server-settings.service.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed, inject } from '@angular/core/testing';
+import { ServerSettingsService } from './server-settings.service';
+import { Server } from '../models/server';
+import { QemuSettings } from '../models/settings/qemu-settings';
+import { HttpServer } from './http-server.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { AppTestingModule } from '../testing/app-testing/app-testing.module';
+import { of } from 'rxjs';
+
+export class MockedServerSettingsService {
+    getSettingsForQemu(server: Server) {
+        return of([]);
+    }
+
+    updateSettingsForQemu(server: Server, qemuSettings: QemuSettings) {
+        return of([]);
+    }
+}
+
+describe('ServerSettingsService', () => {
+    let httpServer: HttpServer;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [HttpClientTestingModule, AppTestingModule],
+            providers: [HttpServer, ServerSettingsService]
+        });
+
+        httpServer = TestBed.get(HttpServer);
+    });
+
+    it('should be created', inject([ServerSettingsService], (service: ServerSettingsService) => {
+        expect(service).toBeTruthy();
+    }));
+});