Merge pull request #93 from GNS3/keyboard-shortcuts

Delete nodes by `delete` key, Fixes: #86

package.json

@@ -36,6 +36,7 @@
     "@angular/platform-browser-dynamic": "^5.2.1",
     "@angular/router": "^5.2.1",
     "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
+    "angular2-hotkeys": "^2.0.4",
     "angular2-indexeddb": "^1.2.2",
     "bootstrap": "4.0.0",
     "core-js": "^2.4.1",

src/app/app.module.ts

@@ -24,6 +24,8 @@ import {
 import { D3Service } from 'd3-ng2-service';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
+import { HotkeyModule } from 'angular2-hotkeys';
+
 import { AppRoutingModule } from './app-routing.module';
 
 import { VersionService } from './shared/services/version.service';
@@ -62,6 +64,7 @@ import { InRectangleHelper } from "./cartography/map/helpers/in-rectangle-helper
 import { DrawingsDataSource } from "./cartography/shared/datasources/drawings-datasource";
 import { MoveLayerDownActionComponent } from './shared/node-context-menu/actions/move-layer-down-action/move-layer-down-action.component';
 import { MoveLayerUpActionComponent } from './shared/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component';
+import { ProjectMapShortcutsComponent } from './project-map/project-map-shortcuts/project-map-shortcuts.component';
 
 
 @NgModule({
@@ -82,6 +85,7 @@ import { MoveLayerUpActionComponent } from './shared/node-context-menu/actions/m
     NodeSelectInterfaceComponent,
     MoveLayerDownActionComponent,
     MoveLayerUpActionComponent,
+    ProjectMapShortcutsComponent,
   ],
   imports: [
     NgbModule.forRoot(),
@@ -104,7 +108,8 @@ import { MoveLayerUpActionComponent } from './shared/node-context-menu/actions/m
     MatProgressSpinnerModule,
     MatSnackBarModule,
     CdkTableModule,
-    CartographyModule
+    CartographyModule,
+    HotkeyModule.forRoot()
   ],
   providers: [
     D3Service,

src/app/cartography/shared/widgets/layers.spec.ts

@@ -51,6 +51,27 @@ describe('LayersWidget', () => {
     expect(drew.nodes()[1].getAttribute('data-index')).toEqual('2');
   });
 
+  it('should draw links container', () => {
+    widget.draw(svg.canvas, layers);
+
+    const drew = svg.canvas.selectAll<SVGGElement, Layer>('g.links');
+    expect(drew.size()).toEqual(2);
+  });
+
+  it('should draw nodes container', () => {
+    widget.draw(svg.canvas, layers);
+
+    const drew = svg.canvas.selectAll<SVGGElement, Layer>('g.nodes');
+    expect(drew.size()).toEqual(2);
+  });
+
+  it('should draw drawings container', () => {
+    widget.draw(svg.canvas, layers);
+
+    const drew = svg.canvas.selectAll<SVGGElement, Layer>('g.drawings');
+    expect(drew.size()).toEqual(2);
+  });
+
   it('should redraw on layers change', () => {
     widget.draw(svg.canvas, layers);
     layers[0].index = 3;

src/app/cartography/shared/widgets/layers.ts

@@ -20,26 +20,50 @@ export class LayersWidget implements Widget {
         .append<SVGGElement>('g')
         .attr('class', 'layer')
 
+    // add container for links
+    layers_enter
+      .append<SVGGElement>('g')
+        .attr('class', 'links');
+
+    // add container for nodes
+    layers_enter
+      .append<SVGGElement>('g')
+        .attr('class', 'nodes');
+
+    // add container for drawings
+    layers_enter
+      .append<SVGGElement>('g')
+        .attr('class', 'drawings');
+
     const merge = layers_selection.merge(layers_enter);
 
     merge
       .attr('data-index', (layer: Layer) => layer.index);
 
+    const links_container = merge
+      .select<SVGGElement>('g.links');
+
+    const nodes_container = merge
+      .select<SVGGElement>('g.nodes');
+
+    const drawings_container = merge
+      .select<SVGGElement>('g.drawings');
+
     layers_selection
       .exit()
         .remove();
 
     this.graphLayout
       .getLinksWidget()
-      .draw(merge);
+      .draw(links_container);
 
     this.graphLayout
       .getNodesWidget()
-      .draw(merge);
+      .draw(nodes_container);
 
     this.graphLayout
       .getDrawingsWidget()
-      .draw(merge);
+      .draw(drawings_container);
 
   }
 }

src/app/project-map/project-map-shortcuts/project-map-shortcuts.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectMapShortcutsComponent } from './project-map-shortcuts.component';
+
+describe('ProjectMapShortcutsComponent', () => {
+  let component: ProjectMapShortcutsComponent;
+  let fixture: ComponentFixture<ProjectMapShortcutsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProjectMapShortcutsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  // beforeEach(() => {
+  //   fixture = TestBed.createComponent(ProjectMapShortcutsComponent);
+  //   component = fixture.componentInstance;
+  //   fixture.detectChanges();
+  // });
+
+  // it('should create', () => {
+  //   expect(component).toBeTruthy();
+  // });
+});

src/app/project-map/project-map-shortcuts/project-map-shortcuts.component.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { HotkeysService, Hotkey } from 'angular2-hotkeys';
+
+import { SelectionManager } from '../../cartography/shared/managers/selection-manager';
+import { NodeService } from '../../shared/services/node.service';
+import { Server } from '../../shared/models/server';
+import { ToasterService } from '../../shared/services/toaster.service';
+
+
+@Component({
+  selector: 'app-project-map-shortcuts',
+  templateUrl: './project-map-shortcuts.component.html'
+})
+export class ProjectMapShortcutsComponent implements OnInit, OnDestroy {
+  @Input() server: Server;
+  @Input() selectionManager: SelectionManager;
+
+  private deleteHotkey: Hotkey;
+
+  constructor(
+    private hotkeysService: HotkeysService,
+    private toaster: ToasterService,
+    private nodesService: NodeService,
+  ) { }
+
+  ngOnInit() {
+    this.deleteHotkey = new Hotkey('del', (event: KeyboardEvent): boolean => {
+      const selectedNodes = this.selectionManager.getSelectedNodes();
+      if (selectedNodes) {
+        selectedNodes.forEach((node) => {
+          this.nodesService.delete(this.server, node).subscribe(data => {
+            this.toaster.success("Node has been deleted");
+          });
+        });
+      }
+      return false;
+    });
+
+    this.hotkeysService.add(this.deleteHotkey);
+  }
+
+  ngOnDestroy() {
+    this.hotkeysService.remove(this.deleteHotkey);
+  }
+}

src/app/project-map/project-map.component.html

@@ -55,4 +55,4 @@
   </mat-spinner>
 </div>
 
-
+<app-project-map-shortcuts [server]="server" [selectionManager]="selectionManager"></app-project-map-shortcuts>

src/app/project-map/project-map.component.ts

@@ -1,5 +1,6 @@
-import  {Component, Inject, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, Inject, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
+import { HotkeysService } from 'angular2-hotkeys';
 
 import { Observable } from 'rxjs/Observable';
 import { Subject } from "rxjs/Subject";
@@ -41,6 +42,7 @@ import { InRectangleHelper } from "../cartography/map/helpers/in-rectangle-helpe
 import { DrawingsDataSource } from "../cartography/shared/datasources/drawings-datasource";
 
 
+
 @Component({
   selector: 'app-project-map',
   encapsulation: ViewEncapsulation.None,
@@ -60,6 +62,8 @@ export class ProjectMapComponent implements OnInit {
   private drawLineMode =  false;
   private movingMode = false;
 
+  protected selectionManager: SelectionManager;
+
   public isLoading = true;
 
   @ViewChild(MapComponent) mapChild: MapComponent;
@@ -81,8 +85,11 @@ export class ProjectMapComponent implements OnInit {
               private projectWebServiceHandler: ProjectWebServiceHandler,
               protected nodesDataSource: NodesDataSource,
               protected linksDataSource: LinksDataSource,
-              protected drawingsDataSource: DrawingsDataSource
+              protected drawingsDataSource: DrawingsDataSource,
+              protected hotkeysService: HotkeysService
               ) {
+    this.selectionManager = new SelectionManager(
+      this.nodesDataSource, this.linksDataSource, new InRectangleHelper());
   }
 
   ngOnInit() {
@@ -169,14 +176,12 @@ export class ProjectMapComponent implements OnInit {
   }
 
   setUpMapCallbacks(project: Project) {
-    const selectionManager = new SelectionManager(this.nodesDataSource, this.linksDataSource, new InRectangleHelper());
-
     this.mapChild.graphLayout.getNodesWidget().setOnContextMenuCallback((event: any, node: Node) => {
       this.nodeContextMenu.open(node, event.clientY, event.clientX);
     });
 
     this.mapChild.graphLayout.getNodesWidget().setOnNodeClickedCallback((event: any, node: Node) => {
-      selectionManager.setSelectedNodes([node]);
+      this.selectionManager.setSelectedNodes([node]);
       if (this.drawLineMode) {
         this.nodeSelectInterfaceMenu.open(node, event.clientY, event.clientX);
       }
@@ -191,7 +196,7 @@ export class ProjectMapComponent implements OnInit {
         });
     });
 
-    selectionManager.subscribe(this.mapChild.graphLayout.getSelectionTool().rectangleSelected);
+    this.selectionManager.subscribe(this.mapChild.graphLayout.getSelectionTool().rectangleSelected);
   }
 
   onNodeCreation(appliance: Appliance) {

src/app/shared/services/http-server.service.spec.ts

@@ -4,7 +4,7 @@ import { HttpClient } from "@angular/common/http";
 
 import { Server } from '../models/server';
 import { HttpServer } from './http-server.service';
-
+import { getTestServer } from './testing';
 
 class MyType {
   id: number;
@@ -31,10 +31,7 @@ describe('HttpServer', () => {
     httpTestingController = TestBed.get(HttpTestingController);
     service = TestBed.get(HttpServer);
 
-    server = new Server();
+    server = getTestServer();
-    server.ip = "127.0.0.1";
-    server.port = 3080;
-    server.authorization = "none";
   });
 
   afterEach(() => {

src/app/shared/services/indexed-db.service.spec.ts

@@ -9,7 +9,13 @@ describe('IndexedDbService', () => {
     });
   });
 
-  // it('should be created', inject([IndexedDbService], (service: IndexedDbService) => {
+  it('should be created', inject([IndexedDbService], (service: IndexedDbService) => {
-  //   expect(service).toBeTruthy();
+    expect(service).toBeTruthy();
-  // }));
+  }));
+
+  it('should get AngularIndexedDB', inject([IndexedDbService], (service: IndexedDbService) => {
+    const indexeddb = service.get();
+    expect(indexeddb.dbWrapper.dbName).toEqual(IndexedDbService.DATABASE);
+    expect(indexeddb.dbWrapper.dbVersion).toEqual(IndexedDbService.VERSION);
+  }));
 });

src/app/shared/services/indexed-db.service.ts

@@ -3,10 +3,14 @@ import { AngularIndexedDB } from 'angular2-indexeddb';
 
 @Injectable()
 export class IndexedDbService {
+  static VERSION = 1;
+  static DATABASE = 'gns3-web-ui';
+
   private db: AngularIndexedDB;
 
   constructor() {
-    this.db = new AngularIndexedDB('gns3-web-ui', 1);
+    this.db = new AngularIndexedDB(
+      IndexedDbService.DATABASE, IndexedDbService.VERSION);
   }
 
   public get() {

src/app/shared/services/link.service.spec.ts

@@ -1,15 +1,78 @@
 import { TestBed, inject } from '@angular/core/testing';
 
 import { LinkService } from './link.service';
+import { HttpClient } from '@angular/common/http';
+import { HttpTestingController, HttpClientTestingModule } from '@angular/common/http/testing';
+import { HttpServer } from './http-server.service';
+import { Server } from '../models/server';
+import { Node } from '../../cartography/shared/models/node';
+import { Port } from '../models/port';
+import { getTestServer } from './testing';
 
 describe('LinkService', () => {
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+  let httpServer: HttpServer;
+  let service: LinkService;
+  let server: Server;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [LinkService]
+      imports: [
+        HttpClientTestingModule
+      ],
+      providers: [
+        HttpServer,
+        LinkService
+      ]
     });
+
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
+    httpServer = TestBed.get(HttpServer);
+    service = TestBed.get(LinkService);
+    server = getTestServer();
   });
 
-  // it('should be created', inject([LinkService], (service: LinkService) => {
+  afterEach(() => {
-  //   expect(service).toBeTruthy();
+    httpTestingController.verify();
-  // }));
+  });
+
+  it('should be created', inject([LinkService], (service: LinkService) => {
+    expect(service).toBeTruthy();
+  }));
+
+  it('should create link', inject([LinkService], (service: LinkService) => {
+    const sourceNode = new Node();
+    sourceNode.project_id = "myproject";
+    sourceNode.node_id = "sourceid";
+
+    const sourcePort = new Port();
+    sourcePort.port_number = 1;
+    sourcePort.adapter_number = 2;
+
+    const targetNode = new Node();
+    targetNode.node_id = "targetid";
+
+    const targetPort = new Port();
+    targetPort.port_number = 3;
+    targetPort.adapter_number = 4;
+
+    service.createLink(server, sourceNode, sourcePort, targetNode, targetPort).subscribe();
+
+    const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/projects/myproject/links');
+    expect(req.request.method).toEqual("POST");
+    expect(req.request.body).toEqual({"nodes": [
+      {
+        node_id: "sourceid",
+        port_number: 1,
+        adapter_number: 2
+      },
+      {
+        node_id: "targetid",
+        port_number: 3,
+        adapter_number: 4
+      }
+    ]});
+  }));
 });

src/app/shared/services/node.service.spec.ts

@@ -1,15 +1,136 @@
 import { TestBed, inject } from '@angular/core/testing';
 
+import { HttpClient } from '@angular/common/http';
+import { HttpTestingController, HttpClientTestingModule } from '@angular/common/http/testing';
+import { HttpServer } from './http-server.service';
+import { Server } from '../models/server';
+import { Node } from '../../cartography/shared/models/node';
+import { Port } from '../models/port';
+import { getTestServer } from './testing';
 import { NodeService } from './node.service';
+import { Appliance } from '../models/appliance';
+import { Project } from '../models/project';
 
 describe('NodeService', () => {
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+  let httpServer: HttpServer;
+  let service: NodeService;
+  let server: Server;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [NodeService]
+      imports: [
+        HttpClientTestingModule
+      ],
+      providers: [
+        HttpServer,
+        NodeService
+      ]
     });
+
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
+    httpServer = TestBed.get(HttpServer);
+    service = TestBed.get(NodeService);
+    server = getTestServer();
   });
 
-  // it('should be created', inject([NodeService], (service: NodeService) => {
+  afterEach(() => {
-  //   expect(service).toBeTruthy();
+    httpTestingController.verify();
-  // }));
+  });
+
+  it('should be created', inject([NodeService], (service: NodeService) => {
+    expect(service).toBeTruthy();
+  }));
+
+  it('should start node', inject([NodeService], (service: NodeService) => {
+    const node = new Node();
+    node.project_id = "myproject";
+    node.node_id = "id";
+
+    service.start(server, node).subscribe();
+
+    const req = httpTestingController.expectOne(
+      'http://127.0.0.1:3080/v2/projects/myproject/nodes/id/start');
+    expect(req.request.method).toEqual("POST");
+    expect(req.request.body).toEqual({});
+  }));
+
+  it('should stop node', inject([NodeService], (service: NodeService) => {
+    const node = new Node();
+    node.project_id = "myproject";
+    node.node_id = "id";
+
+    service.stop(server, node).subscribe();
+
+    const req = httpTestingController.expectOne(
+      'http://127.0.0.1:3080/v2/projects/myproject/nodes/id/stop');
+    expect(req.request.method).toEqual("POST");
+    expect(req.request.body).toEqual({});
+  }));
+
+  it('should createFromAppliance node', inject([NodeService], (service: NodeService) => {
+    const project = new Project();
+    project.project_id = "myproject";
+    const appliance = new Appliance();
+    appliance.appliance_id = "myappliance";
+
+    service.createFromAppliance(server, project, appliance, 10, 20, "compute").subscribe();
+
+    const req = httpTestingController.expectOne(
+      'http://127.0.0.1:3080/v2/projects/myproject/appliances/myappliance');
+    expect(req.request.method).toEqual("POST");
+    expect(req.request.body).toEqual({
+      'x': 10, 'y': 20, 'compute_id': 'compute'});
+  }));
+
+  it('should updatePosition of node', inject([NodeService], (service: NodeService) => {
+    const node = new Node();
+    node.project_id = "myproject";
+    node.node_id = "id";
+
+    service.updatePosition(server, node, 10, 20).subscribe();
+
+    const req = httpTestingController.expectOne(
+      'http://127.0.0.1:3080/v2/projects/myproject/nodes/id');
+    expect(req.request.method).toEqual("PUT");
+    expect(req.request.body).toEqual({
+      'x': 10,
+      'y': 20
+    });
+  }));
+
+  it('should update node', inject([NodeService], (service: NodeService) => {
+    const node = new Node();
+    node.project_id = "myproject";
+    node.node_id = "id";
+    node.x = 10;
+    node.y = 20;
+    node.z = 30;
+
+    service.update(server, node).subscribe();
+
+    const req = httpTestingController.expectOne(
+      'http://127.0.0.1:3080/v2/projects/myproject/nodes/id');
+    expect(req.request.method).toEqual("PUT");
+    expect(req.request.body).toEqual({
+      'x': 10,
+      'y': 20,
+      'z': 30
+    });
+  }));
+
+  it('should delete node', inject([NodeService], (service: NodeService) => {
+    const node = new Node();
+    node.project_id = "myproject";
+    node.node_id = "id";
+
+    service.delete(server, node).subscribe();
+
+    const req = httpTestingController.expectOne(
+      'http://127.0.0.1:3080/v2/projects/myproject/nodes/id');
+    expect(req.request.method).toEqual("DELETE");
+  }));
+
 });

src/app/shared/services/node.service.ts

@@ -51,4 +51,8 @@ export class NodeService {
                 });
   }
 
+  delete(server: Server, node: Node) {
+    return this.httpServer.delete<Node>(server, `/projects/${node.project_id}/nodes/${node.node_id}`);
+  }
+
 }

src/app/shared/services/project.service.spec.ts

@@ -1,15 +1,108 @@
 import { TestBed, inject } from '@angular/core/testing';
 
+import { HttpClient } from '@angular/common/http';
+import { HttpTestingController, HttpClientTestingModule } from '@angular/common/http/testing';
+import { HttpServer } from './http-server.service';
+import { Server } from '../models/server';
+import { Node } from '../../cartography/shared/models/node';
+import { Port } from '../models/port';
+import { getTestServer } from './testing';
+import { Appliance } from '../models/appliance';
+import { Project } from '../models/project';
 import { ProjectService } from './project.service';
 
 describe('ProjectService', () => {
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+  let httpServer: HttpServer;
+  let service: ProjectService;
+  let server: Server;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [ProjectService]
+      imports: [
+        HttpClientTestingModule
+      ],
+      providers: [
+        HttpServer,
+        ProjectService
+      ]
     });
+
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
+    httpServer = TestBed.get(HttpServer);
+    service = TestBed.get(ProjectService);
+    server = getTestServer();
   });
 
-  // it('should be created', inject([ProjectService], (service: ProjectService) => {
+  afterEach(() => {
-  //   expect(service).toBeTruthy();
+    httpTestingController.verify();
-  // }));
+  });
+
+  it('should be created', inject([ProjectService], (service: ProjectService) => {
+    expect(service).toBeTruthy();
+  }));
+
+  it('should get the project', inject([ProjectService], (service: ProjectService) => {
+    service.get(server, "myproject").subscribe();
+
+    const req = httpTestingController.expectOne(
+      'http://127.0.0.1:3080/v2/projects/myproject');
+    expect(req.request.method).toEqual("GET");
+  }));
+
+  it('should open the project', inject([ProjectService], (service: ProjectService) => {
+    service.open(server, "myproject").subscribe();
+
+    const req = httpTestingController.expectOne(
+      'http://127.0.0.1:3080/v2/projects/myproject/open');
+    expect(req.request.method).toEqual("POST");
+    expect(req.request.body).toEqual({});
+  }));
+
+  it('should list projects', inject([ProjectService], (service: ProjectService) => {
+    service.list(server).subscribe();
+
+    const req = httpTestingController.expectOne(
+      'http://127.0.0.1:3080/v2/projects');
+    expect(req.request.method).toEqual("GET");
+  }));
+
+  it('should get nodes of project', inject([ProjectService], (service: ProjectService) => {
+    service.nodes(server, "myproject").subscribe();
+
+    const req = httpTestingController.expectOne(
+      'http://127.0.0.1:3080/v2/projects/myproject/nodes');
+    expect(req.request.method).toEqual("GET");
+  }));
+
+  it('should get links of project', inject([ProjectService], (service: ProjectService) => {
+    service.links(server, "myproject").subscribe();
+
+    const req = httpTestingController.expectOne(
+      'http://127.0.0.1:3080/v2/projects/myproject/links');
+    expect(req.request.method).toEqual("GET");
+  }));
+
+  it('should get drawings of project', inject([ProjectService], (service: ProjectService) => {
+    service.drawings(server, "myproject").subscribe();
+
+    const req = httpTestingController.expectOne(
+      'http://127.0.0.1:3080/v2/projects/myproject/drawings');
+    expect(req.request.method).toEqual("GET");
+  }));
+
+  it('should delete the project', inject([ProjectService], (service: ProjectService) => {
+    service.delete(server, "myproject").subscribe();
+
+    const req = httpTestingController.expectOne(
+      'http://127.0.0.1:3080/v2/projects/myproject');
+    expect(req.request.method).toEqual("DELETE");
+  }));
+
+  it('should get notifications path of project', inject([ProjectService], (service: ProjectService) => {
+    const path = service.notificationsPath(server, "myproject");
+    expect(path).toEqual('ws://127.0.0.1:3080/v2/projects/myproject/notifications/ws')
+  }));
 });

src/app/shared/services/snapshot.service.spec.ts

@@ -1,26 +1,64 @@
 import { TestBed, inject } from '@angular/core/testing';
 
-import { SnapshotService } from './snapshot.service';
+import { HttpClient } from '@angular/common/http';
+import { HttpTestingController, HttpClientTestingModule } from '@angular/common/http/testing';
 import { HttpServer } from './http-server.service';
+import { Server } from '../models/server';
+import { Node } from '../../cartography/shared/models/node';
+import { Port } from '../models/port';
+import { getTestServer } from './testing';
+import { SnapshotService } from './snapshot.service';
+import { Snapshot } from '../models/snapshot';
 
-class MockedHttpServer {
-  post(server: any, url: string, data: any) {}
-
-  get(server: any, url: string, data: any) {}
-}
 
 describe('SnapshotService', () => {
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+  let httpServer: HttpServer;
+  let service: SnapshotService;
+  let server: Server;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [
+      imports: [
-        SnapshotService,
+        HttpClientTestingModule
-        {provide: HttpServer, useClass: MockedHttpServer}
       ],
-
+      providers: [
+        HttpServer,
+        SnapshotService
+      ]
     });
+
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
+    httpServer = TestBed.get(HttpServer);
+    service = TestBed.get(SnapshotService);
+    server = getTestServer();
+  });
+
+  afterEach(() => {
+    httpTestingController.verify();
   });
 
   it('should be created', inject([SnapshotService], (service: SnapshotService) => {
     expect(service).toBeTruthy();
   }));
+
+  it('should create snapshot', inject([SnapshotService], (service: SnapshotService) => {
+    const snapshot = new Snapshot();
+    service.create(server, "myproject", snapshot).subscribe();
+
+    const req = httpTestingController.expectOne(
+      'http://127.0.0.1:3080/v2/projects/myproject/snapshots');
+    expect(req.request.method).toEqual("POST");
+    expect(req.request.body).toEqual(snapshot);
+  }));
+
+  it('should list snapshots', inject([SnapshotService], (service: SnapshotService) => {
+    service.list(server, "myproject").subscribe();
+
+    const req = httpTestingController.expectOne(
+    'http://127.0.0.1:3080/v2/projects/myproject/snapshots');
+    expect(req.request.method).toEqual("GET");
+  }))
 });

src/app/shared/services/symbol.service.spec.ts

@@ -1,15 +1,90 @@
 import { TestBed, inject } from '@angular/core/testing';
 
+import { HttpClient } from '@angular/common/http';
+import { HttpTestingController, HttpClientTestingModule } from '@angular/common/http/testing';
+import { HttpServer } from './http-server.service';
+import { Server } from '../models/server';
+import { Node } from '../../cartography/shared/models/node';
+import { Port } from '../models/port';
+import { getTestServer } from './testing';
 import { SymbolService } from './symbol.service';
+import { Symbol } from '../../cartography/shared/models/symbol';
+
 
 describe('SymbolService', () => {
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+  let httpServer: HttpServer;
+  let service: SymbolService;
+  let server: Server;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [SymbolService]
+      imports: [
+        HttpClientTestingModule
+      ],
+      providers: [
+        HttpServer,
+        SymbolService
+      ]
     });
+
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
+    httpServer = TestBed.get(HttpServer);
+    service = TestBed.get(SymbolService);
+    server = getTestServer();
   });
 
-  // it('should be created', inject([SymbolService], (service: SymbolService) => {
+  afterEach(() => {
-  //   expect(service).toBeTruthy();
+    httpTestingController.verify();
-  // }));
+  });
+
+  it('should be created', inject([SymbolService], (service: SymbolService) => {
+    expect(service).toBeTruthy();
+  }));
+
+  it('should list symbols', inject([SymbolService], (service: SymbolService) => {
+    service.list(server).subscribe();
+
+    const req = httpTestingController.expectOne(
+      'http://127.0.0.1:3080/v2/symbols');
+    expect(req.request.method).toEqual("GET");
+  }));
+
+  it('should get raw symbol', inject([SymbolService], (service: SymbolService) => {
+    service.raw(server, ':my/tested.png').subscribe();
+
+    const req = httpTestingController.expectOne(
+      'http://127.0.0.1:3080/v2/symbols/:my/tested.png/raw');
+    expect(req.request.method).toEqual("GET");
+  }));
+
+  it('should load symbols', inject([SymbolService], (service: SymbolService) => {
+    let call = 0;
+    service.load(server).subscribe();
+
+    const req = httpTestingController.expectOne(
+      'http://127.0.0.1:3080/v2/symbols');
+
+    req.flush([{ 'symbol_id': 'myid' }]);
+
+    const raw = httpTestingController.expectOne(
+      'http://127.0.0.1:3080/v2/symbols/myid/raw');
+    raw.flush('myraw');
+
+    service.symbols.subscribe(symbols => {
+      expect(symbols.length).toEqual(1);
+      expect(symbols[0].symbol_id).toEqual('myid');
+      expect(symbols[0].raw).toEqual('myraw');
+    });
+  }));
+
+  it('should get symbols', inject([SymbolService], (service: SymbolService) => {
+    const symbol = new Symbol();
+    symbol.symbol_id = "myid";
+    service.symbols.next([symbol]);
+
+    expect(service.get("myid").symbol_id).toEqual("myid");
+  }));
 });

src/app/shared/services/testing.ts

@@ -0,0 +1,9 @@
+import { Server } from "../models/server";
+
+export function getTestServer(): Server {
+    const server = new Server();
+    server.ip = "127.0.0.1";
+    server.port = 3080;
+    server.authorization = "none";
+    return server;
+}

src/app/shared/services/version.service.spec.ts

@@ -1,15 +1,53 @@
 import { TestBed, inject } from '@angular/core/testing';
 
+import { HttpClient } from '@angular/common/http';
+import { HttpTestingController, HttpClientTestingModule } from '@angular/common/http/testing';
+import { HttpServer } from './http-server.service';
+import { Server } from '../models/server';
+import { Node } from '../../cartography/shared/models/node';
+import { Port } from '../models/port';
+import { getTestServer } from './testing';
 import { VersionService } from './version.service';
 
+
 describe('VersionService', () => {
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+  let httpServer: HttpServer;
+  let service: VersionService;
+  let server: Server;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [VersionService]
+      imports: [
+        HttpClientTestingModule
+      ],
+      providers: [
+        HttpServer,
+        VersionService
+      ]
     });
+
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
+    httpServer = TestBed.get(HttpServer);
+    service = TestBed.get(VersionService);
+    server = getTestServer();
   });
 
-  // it('should be created', inject([VersionService], (service: VersionService) => {
+  afterEach(() => {
-  //   expect(service).toBeTruthy();
+    httpTestingController.verify();
-  // }));
+  });
+
+  it('should be created', inject([VersionService], (service: VersionService) => {
+    expect(service).toBeTruthy();
+  }));
+
+  it('should get version', inject([VersionService], (service: VersionService) => {
+    service.get(server).subscribe();
+
+    const req = httpTestingController.expectOne(
+      'http://127.0.0.1:3080/v2/version');
+    expect(req.request.method).toEqual("GET");
+  }));
 });

yarn.lock

@@ -383,6 +383,10 @@
   dependencies:
     "@types/jasmine" "*"
 
+"@types/mousetrap@^1.5.32":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@types/mousetrap/-/mousetrap-1.6.0.tgz#c3951ab98b88ff6093cd0b1e4f8591af439141b8"
+
 "@types/node@^6.0.46":
   version "6.0.96"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.96.tgz#7bf0bf40d6ce51e93762cc47d010c8cc5ebb2179"
@@ -531,6 +535,13 @@ amqplib@^0.5.2:
     readable-stream "1.x >=1.1.9"
     safe-buffer "^5.0.1"
 
+angular2-hotkeys@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/angular2-hotkeys/-/angular2-hotkeys-2.0.4.tgz#83355f0a65fe484bfdd3d238b6ee96d63526eb91"
+  dependencies:
+    "@types/mousetrap" "^1.5.32"
+    mousetrap "^1.6.0"
+
 angular2-indexeddb@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/angular2-indexeddb/-/angular2-indexeddb-1.2.2.tgz#ec91bd2e94a451013a52060f7df4acb33fcec93b"
@@ -5521,6 +5532,10 @@ module-deps@^4.0.8:
     through2 "^2.0.0"
     xtend "^4.0.0"
 
+mousetrap@^1.6.0:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.1.tgz#2a085f5c751294c75e7e81f6ec2545b29cbf42d9"
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"