I have changed the unit test case according to Angular API

src/app/app-routing.module.ts

@@ -56,7 +56,7 @@ import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.
 import { ServerResolve } from './resolvers/server-resolve';
 import { UserManagementComponent } from './components/user-management/user-management.component';
 import { LoggedUserComponent } from './components/users/logged-user/logged-user.component';
-import { ImageManagerComponent } from '@components/image-manager/image-manager.component';
+import { ImageManagerComponent } from './components/image-manager/image-manager.component';
 
 const routes: Routes = [
   {

src/app/cartography/components/experimental-map/drawing/drawing.component.html

@@ -5,13 +5,13 @@
   (dragging)="OnDragging($event)"
   (dragged)="OnDragged($event)"
 >
-  <svg:g *ngIf="is(drawing.element, 'ellipse')" [app-ellipse]="drawing.element" />
+  <svg:g *ngIf="is(drawing?.element, 'ellipse')" [app-ellipse]="drawing?.element" />
 
-  <svg:g *ngIf="is(drawing.element, 'image')" [app-image]="drawing.element" />
+  <svg:g *ngIf="is(drawing?.element, 'image')" [app-image]="drawing?.element" />
 
-  <svg:g *ngIf="is(drawing.element, 'line')" [app-line]="drawing.element" />
+  <svg:g *ngIf="is(drawing?.element, 'line')" [app-line]="drawing?.element" />
 
-  <svg:g *ngIf="is(drawing.element, 'rect')" [app-rect]="drawing.element" />
+  <svg:g *ngIf="is(drawing?.element, 'rect')" [app-rect]="drawing?.element" />
 
-  <svg:g *ngIf="is(drawing.element, 'text')" [app-text]="drawing.element" />
+  <svg:g *ngIf="is(drawing?.element, 'text')" [app-text]="drawing?.element" />
 </svg:g>

src/app/cartography/components/experimental-map/drawing/drawing.component.spec.ts

@@ -1,4 +1,6 @@
 import {ComponentFixture, TestBed } from '@angular/core/testing';
+import { DrawingsEventSource } from 'app/cartography/events/drawings-event-source';
+import { SvgToDrawingConverter } from 'app/cartography/helpers/svg-to-drawing-converter';
 import { DrawingComponent } from './drawing.component';
 
 describe('DrawingComponent', () => {
@@ -8,6 +10,7 @@ describe('DrawingComponent', () => {
   beforeEach(async() => {
     await TestBed.configureTestingModule({
       declarations: [DrawingComponent],
+      providers:[SvgToDrawingConverter,DrawingsEventSource]
     }).compileComponents();
   });
 

src/app/cartography/components/experimental-map/drawing/drawing.component.ts

@@ -21,17 +21,17 @@ export class DrawingComponent implements OnInit {
     private svgToDrawingConverter: SvgToDrawingConverter,
     private drawingsEventSource: DrawingsEventSource,
     private cd: ChangeDetectorRef
-  ) {}
+  ) { }
 
   ngOnInit() {
     try {
       this.drawing.element = this.svgToDrawingConverter.convert(this.drawing.svg);
-    } catch (error) {}
+    } catch (error) { }
   }
 
   OnDragging(evt) {
-    this.drawing.x = evt.x;
+    this.drawing.x = evt ? evt.x : '';
-    this.drawing.y = evt.y;
+    this.drawing.y = evt ? evt.y : '';
     this.cd.detectChanges();
   }
 
@@ -64,6 +64,8 @@ export class DrawingComponent implements OnInit {
   }
 
   get transformation() {
-    return `translate(${this.drawing.x},${this.drawing.y}) rotate(${this.drawing.rotation})`;
+    if (this.drawing) {
+      return `translate(${this.drawing.x},${this.drawing.y}) rotate(${this.drawing.rotation})`;
+    }
   }
 }

src/app/cartography/components/experimental-map/drawing/drawings/ellipse/ellipse.component.html

@@ -1,12 +1,12 @@
 <svg:ellipse
   class="ellipse_element noselect"
-  [attr.fill]="ellipse.fill"
+  [attr.fill]="ellipse?.fill"
   [attr.fill-opacity]="fill_opacity"
-  [attr.stroke]="ellipse.stroke"
+  [attr.stroke]="ellipse?.stroke"
   [attr.stroke-width]="stroke_width"
   [attr.stroke-dasharray]="stroke_dasharray"
-  [attr.cx]="ellipse.cx"
+  [attr.cx]="ellipse?.cx"
-  [attr.cy]="ellipse.cy"
+  [attr.cy]="ellipse?.cy"
-  [attr.rx]="ellipse.rx"
+  [attr.rx]="ellipse?.rx"
-  [attr.ry]="ellipse.ry"
+  [attr.ry]="ellipse?.ry"
 />

src/app/cartography/components/experimental-map/drawing/drawings/ellipse/ellipse.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { QtDasharrayFixer } from 'app/cartography/helpers/qt-dasharray-fixer';
 import { EllipseComponent } from './ellipse.component';
 
 describe('EllipseComponent', () => {
@@ -8,6 +9,7 @@ describe('EllipseComponent', () => {
   beforeEach(async() => {
    await TestBed.configureTestingModule({
       declarations: [EllipseComponent],
+      providers:[QtDasharrayFixer]
     }).compileComponents();
   });
 

src/app/cartography/components/experimental-map/drawing/drawings/ellipse/ellipse.component.ts

@@ -15,21 +15,21 @@ export class EllipseComponent implements OnInit {
   ngOnInit() {}
 
   get fill_opacity() {
-    if (isFinite(this.ellipse.fill_opacity)) {
+    if (this.ellipse && isFinite(this.ellipse.fill_opacity)) {
       return this.ellipse.fill_opacity;
     }
     return null;
   }
 
   get stroke_width() {
-    if (isFinite(this.ellipse.stroke_width)) {
+    if (this.ellipse && isFinite(this.ellipse.stroke_width)) {
       return this.ellipse.stroke_width;
     }
     return null;
   }
 
   get stroke_dasharray() {
-    if (this.ellipse.stroke_dasharray) {
+    if (this.ellipse &&  this.ellipse.stroke_dasharray) {
       return this.qtDasharrayFixer.fix(this.ellipse.stroke_dasharray);
     }
     return null;

src/app/cartography/components/experimental-map/drawing/drawings/image/image.component.html

@@ -1,6 +1,6 @@
 <svg:image
   class="image_element noselect"
-  [attr.xlink:href]="image.data"
+  [attr.xlink:href]="image?.data"
-  [attr.width]="image.width"
+  [attr.width]="image?.width"
-  [attr.height]="image.height"
+  [attr.height]="image?.height"
 />

src/app/cartography/components/experimental-map/drawing/drawings/image/image.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ImageComponent } from './image.component';
 
 describe('ImageComponent', () => {

src/app/cartography/components/experimental-map/drawing/drawings/image/image.component.ts

@@ -8,6 +8,7 @@ import { ImageElement } from '../../../../../models/drawings/image-element';
 })
 export class ImageComponent implements OnInit {
   @Input('app-image') image: ImageElement;
+  data:any
 
   constructor() {}
 

src/app/cartography/components/experimental-map/drawing/drawings/line/line.component.html

@@ -1,10 +1,10 @@
 <svg:line
   class="line_element noselect"
-  [attr.stroke]="line.stroke"
+  [attr.stroke]="line?.stroke"
-  [attr.stroke-width]="stroke_width"
+  [attr.stroke-width]="stroke_width ?? ''"
   [attr.stroke-dasharray]="stroke_dasharray"
-  [attr.x1]="line.x1"
+  [attr.x1]="line?.x1"
-  [attr.x2]="line.x2"
+  [attr.x2]="line?.x2"
-  [attr.y1]="line.y1"
+  [attr.y1]="line?.y1"
-  [attr.y2]="line.y2"
+  [attr.y2]="line?.y2"
 />

src/app/cartography/components/experimental-map/drawing/drawings/line/line.component.spec.ts

@@ -1,4 +1,5 @@
 import {ComponentFixture, TestBed } from '@angular/core/testing';
+import { QtDasharrayFixer } from 'app/cartography/helpers/qt-dasharray-fixer';
 import { LineComponent } from './line.component';
 
 describe('LineComponent', () => {
@@ -8,6 +9,7 @@ describe('LineComponent', () => {
   beforeEach(async() => {
     TestBed.configureTestingModule({
       declarations: [LineComponent],
+      providers:[QtDasharrayFixer]
     }).compileComponents();
   });
 

src/app/cartography/components/experimental-map/drawing/drawings/line/line.component.ts

@@ -15,14 +15,14 @@ export class LineComponent implements OnInit {
   ngOnInit() {}
 
   get stroke_width() {
-    if (isFinite(this.line.stroke_width)) {
+    if (this.line && isFinite(this.line.stroke_width)) {
       return this.line.stroke_width;
     }
     return null;
   }
 
   get stroke_dasharray() {
-    if (this.line.stroke_dasharray) {
+    if ( this.line && this.line.stroke_dasharray) {
       return this.qtDasharrayFixer.fix(this.line.stroke_dasharray);
     }
     return null;

src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.html

@@ -1,10 +1,10 @@
 <svg:rect
   class="rect_element noselect"
-  [attr.fill]="rect.fill"
+  [attr.fill]="rect?.fill"
-  [attr.fill-opacity]="fill_opacity"
+  [attr.fill-opacity]="fill_opacity ? fill_opacity : '' "
-  [attr.stroke]="rect.stroke"
+  [attr.stroke]="rect?.stroke"
   [attr.stroke-width]="stroke_width"
   [attr.stroke-dasharray]="stroke_dasharray"
-  [attr.width]="rect.width"
+  [attr.width]="rect?.width"
-  [attr.height]="rect.height"
+  [attr.height]="rect?.height"
 />

src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.spec.ts

@@ -1,4 +1,5 @@
 import {ComponentFixture, TestBed } from '@angular/core/testing';
+import { QtDasharrayFixer } from 'app/cartography/helpers/qt-dasharray-fixer';
 import { RectComponent } from './rect.component';
 
 describe('RectComponent', () => {
@@ -8,6 +9,7 @@ describe('RectComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [RectComponent],
+      providers:[QtDasharrayFixer]
     }).compileComponents();
   });
 

src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.ts

@@ -15,21 +15,21 @@ export class RectComponent implements OnInit {
   ngOnInit() {}
 
   get fill_opacity() {
-    if (isFinite(this.rect.fill_opacity)) {
+    if (this.rect && isFinite(this.rect.fill_opacity)) {
-      return this.rect.fill_opacity;
+      return this.rect.fill_opacity ? this.rect.fill_opacity : null;
     }
     return null;
   }
 
   get stroke_width() {
-    if (isFinite(this.rect.stroke_width)) {
+    if (this.rect && isFinite(this.rect.stroke_width)) {
-      return this.rect.stroke_width;
+      return this.rect.stroke_width ? this.rect.stroke_width : null;
     }
     return null;
   }
 
   get stroke_dasharray() {
-    if (this.rect.stroke_dasharray) {
+    if (this.rect && this.rect.stroke_dasharray) {
       return this.qtDasharrayFixer.fix(this.rect.stroke_dasharray);
     }
     return null;

src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.html

@@ -3,7 +3,7 @@
   class="text_element noselect"
   [attr.style]="style"
   [attr.text-decoration]="textDecoration"
-  [attr.fill]="text.fill"
+  [attr.fill]="text?.fill"
   [attr.transform]="transformation"
 >
   <svg:tspan *ngFor="let line of lines; index as i" xml:space="preserve" x="0" [attr.dy]="i == 0 ? '0em' : '1.4em'">

src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.spec.ts

@@ -1,4 +1,5 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FontFixer } from 'app/cartography/helpers/font-fixer';
 import { TextComponent } from './text.component';
 
 describe('TextComponent', () => {
@@ -8,6 +9,7 @@ describe('TextComponent', () => {
   beforeEach(async() => {
    await TestBed.configureTestingModule({
       declarations: [TextComponent],
+      providers:[FontFixer]
     }).compileComponents();
   });
 

src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.ts

@@ -19,10 +19,12 @@ export class TextComponent implements OnInit, DoCheck {
 
   transformation = '';
 
-  constructor(private fontFixer: FontFixer, private sanitizer: DomSanitizer) {}
+  constructor(private fontFixer: FontFixer, private sanitizer: DomSanitizer) { }
 
   ngOnInit() {
-    this.lines = this.getLines(this.text.text);
+    if (this.text) {
+      this.lines = this.getLines(this.text.text);
+    }
   }
 
   ngDoCheck() {
@@ -50,12 +52,12 @@ export class TextComponent implements OnInit, DoCheck {
   }
 
   calculateTransformation() {
-    const tspans = this.textRef.nativeElement.getElementsByTagName('tspan');
+   if(this.textRef !=undefined){ const tspans = this.textRef.nativeElement.getElementsByTagName('tspan');
     if (tspans.length > 0) {
       const height = this.textRef.nativeElement.getBBox().height / tspans.length;
       return `translate(${TextComponent.MARGIN}, ${height - TextComponent.MARGIN})`;
     }
-    return '';
+    return '';}
   }
 
   getLines(text: string) {

src/app/cartography/components/experimental-map/interface-label/interface-label.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CssFixer } from 'app/cartography/helpers/css-fixer';
 import { InterfaceLabelComponent } from './interface-label.component';
 
 describe('InterfaceLabelComponent', () => {
@@ -8,6 +9,7 @@ describe('InterfaceLabelComponent', () => {
   beforeEach(async() => {
     await TestBed.configureTestingModule({
       declarations: [InterfaceLabelComponent],
+      providers:[CssFixer]
     }).compileComponents();
   });
 
@@ -18,6 +20,6 @@ describe('InterfaceLabelComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    expect(component)
   });
 });

src/app/cartography/components/experimental-map/interface-label/interface-label.component.ts

@@ -30,9 +30,9 @@ export class InterfaceLabelComponent implements OnInit {
     private ref: ChangeDetectorRef,
     private sanitizer: DomSanitizer,
     private cssFixer: CssFixer
-  ) {}
+  ) { }
 
-  ngOnInit() {}
+  ngOnInit() { }
 
   @Input('x')
   set x(value) {
@@ -89,9 +89,11 @@ export class InterfaceLabelComponent implements OnInit {
   }
 
   get transform() {
-    const bbox = this.elementRef.nativeElement.getBBox();
+    if (this.elementRef != undefined && this.elementRef != null) {
-    const x = this.label.x;
+      const bbox = this.elementRef.nativeElement.getBBox();
-    const y = this.label.y + bbox.height;
+      const x = this.label.x;
-    return `translate(${x}, ${y}) rotate(${this.label.rotation}, ${x}, ${y})`;
+      const y = this.label.y + bbox.height;
+      return `translate(${x}, ${y}) rotate(${this.label.rotation}, ${x}, ${y})`;
+    }
   }
 }

src/app/cartography/components/experimental-map/link/link.component.html

@@ -1,13 +1,13 @@
 <svg:g
   class="link"
-  [attr.link_id]="link.id"
+  [attr.link_id]="link?.id"
-  [attr.map-source]="link.source.id"
+  [attr.map-source]="link?.source?.id"
-  [attr.map-target]="link.target.id"
+  [attr.map-target]="link?.target?.id"
   [attr.transform]="transform"
 >
   <svg:path
     #path
-    *ngIf="link.linkType == 'ethernet'"
+    *ngIf="link?.linkType == 'ethernet'"
     class="ethernet_link"
     stroke="#000"
     stroke-width="2"
@@ -16,7 +16,7 @@
 
   <svg:path
     #path
-    *ngIf="link.linkType == 'serial'"
+    *ngIf="link?.linkType == 'serial'"
     class="serial_link"
     stroke="#B22222"
     fill="none"
@@ -24,27 +24,27 @@
     [attr.d]="d"
   />
 
-  <svg:g [app-status]="link.source.status" [direction]="'source'" [path]="path" [d]="d" />
+  <svg:g [app-status]="link?.source?.status" [direction]="'source'" [path]="path" [d]="d" />
 
-  <svg:g [app-status]="link.target.status" [direction]="'target'" [path]="path" [d]="d" />
+  <svg:g [app-status]="link?.target?.status" [direction]="'target'" [path]="path" [d]="d" />
 
   <svg:g
     *ngIf="showInterfaceLabels"
     [app-interface-label]
-    [x]="link.source.x + link.nodes[0].label.x"
+    [x]="link?.source?.x + link?.nodes[0]?.label?.x"
-    [y]="link.source.y + link.nodes[0].label.y"
+    [y]="link?.source?.y + link?.nodes[0]?.label?.y"
-    [text]="link.nodes[0].label.text"
+    [text]="link?.nodes[0]?.label?.text"
-    [style]="link.nodes[0].label.style"
+    [style]="link?.nodes[0]?.label?.style"
-    [rotation]="link.nodes[0].label.rotation"
+    [rotation]="link?.nodes[0]?.label?.rotation"
   />
 
   <svg:g
     *ngIf="showInterfaceLabels"
     [app-interface-label]
-    [x]="link.target.x + link.nodes[1].label.x"
+    [x]="link?.target?.x + link?.nodes[1]?.label?.x"
-    [y]="link.target.y + link.nodes[1].label.y"
+    [y]="link?.target?.y + link?.nodes[1]?.label?.y"
-    [text]="link.nodes[1].label.text"
+    [text]="link?.nodes[1]?.label?.text"
-    [style]="link.nodes[1].label.style"
+    [style]="link?.nodes[1]?.label?.style"
-    [rotation]="link.nodes[1].label.rotation"
+    [rotation]="link?.nodes[1]?.label?.rotation"
   />
 </svg:g>

src/app/cartography/components/experimental-map/link/link.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MultiLinkCalculatorHelper } from 'app/cartography/helpers/multi-link-calculator-helper';
 import { LinkComponent } from './link.component';
 
 describe('LinkComponent', () => {
@@ -8,6 +9,7 @@ describe('LinkComponent', () => {
   beforeEach(async() => {
     await TestBed.configureTestingModule({
       declarations: [LinkComponent],
+      providers:[MultiLinkCalculatorHelper]
     }).compileComponents();
   });
 

src/app/cartography/components/experimental-map/link/link.component.ts

@@ -33,7 +33,7 @@ export class LinkComponent implements OnInit, OnDestroy {
 
   private nodeChangedSubscription: Subscription;
 
-  constructor(private multiLinkCalculatorHelper: MultiLinkCalculatorHelper, private ref: ChangeDetectorRef) {}
+  constructor(private multiLinkCalculatorHelper: MultiLinkCalculatorHelper, private ref: ChangeDetectorRef) { }
 
   ngOnInit() {
     this.ref.detectChanges();
@@ -49,19 +49,21 @@ export class LinkComponent implements OnInit, OnDestroy {
   }
 
   get strategy(): LinkStrategy {
-    if (this.link.linkType === 'serial') {
+    if (this.link && this.link != undefined && this.link.linkType === 'serial') {
       return this.serialLinkStrategy;
     }
     return this.ethernetLinkStrategy;
   }
 
   get transform() {
-    const translation = this.multiLinkCalculatorHelper.linkTranslation(
+    if (this.link != undefined && this.link != null && this.link.source) {
-      this.link.distance,
+      const translation = this.multiLinkCalculatorHelper.linkTranslation(
-      this.link.source,
+        this.link.distance,
-      this.link.target
+        this.link.source,
-    );
+        this.link.target
-    return `translate (${translation.dx}, ${translation.dy})`;
+      );
+      return `translate (${translation.dx}, ${translation.dy})`;
+    }
   }
 
   get d() {

src/app/cartography/components/experimental-map/node/node.component.html

@@ -1,8 +1,8 @@
-<svg:g class="node" [attr.transform]="'translate(' + node.x + ',' + node.y + ')'">
+<svg:g class="node" [attr.transform]="'translate(' + node?.x + ',' + node?.y + ')'">
   <svg:image
     #image
-    [attr.width]="node.width"
+    [attr.width]="node?.width"
-    [attr.height]="node.height"
+    [attr.height]="node?.height"
     [attr.x]="0"
     [attr.y]="0"
     [attr.xlink:href]="symbol"
@@ -11,6 +11,6 @@
     (dragged)="OnDragged($event)"
   />
   <svg:text #label class="label" [attr.style]="label_style" [attr.x]="label_x" [attr.y]="label_y">
-    {{ node.label.text }}
+    {{ node?.label?.text }}
   </svg:text>
 </svg:g>

src/app/cartography/components/experimental-map/node/node.component.spec.ts

@@ -1,15 +1,23 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NodesEventSource } from 'app/cartography/events/nodes-event-source';
+import { CssFixer } from 'app/cartography/helpers/css-fixer';
+import { FontFixer } from 'app/cartography/helpers/font-fixer';
 import { NodeComponent } from './node.component';
 
 describe('NodeComponent', () => {
   let component: NodeComponent;
   let fixture: ComponentFixture<NodeComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(async() => {
-    TestBed.configureTestingModule({
+   await TestBed.configureTestingModule({
       declarations: [NodeComponent],
+      providers:[ 
+        CssFixer,
+        FontFixer,
+        NodesEventSource,
+      ]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(NodeComponent);
@@ -17,7 +25,7 @@ describe('NodeComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
+  it('should create', () => {
-  //   expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
-  // });
+  });
 });

src/app/cartography/components/experimental-map/node/node.component.ts

@@ -49,7 +49,7 @@ export class NodeComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni
     protected element: ElementRef,
     private cd: ChangeDetectorRef,
     private nodesEventSource: NodesEventSource
-  ) {}
+  ) { }
 
   ngOnInit() {
     // this.nodeChangedSubscription = this.nodeChanged.subscribe((node: Node) => {
@@ -85,42 +85,52 @@ export class NodeComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni
   }
 
   get symbol(): string {
-    const symbol = this.symbols.find((s: Symbol) => s.symbol_id === this.node.symbol);
+    if (this.symbols) {
-    if (symbol) {
+      const symbol = this.symbols.find((s: Symbol) => s.symbol_id === this.node.symbol);
-      return 'data:image/svg+xml;base64,' + btoa(symbol.raw);
+      if (symbol) {
+        return 'data:image/svg+xml;base64,' + btoa(symbol.raw);
+      }
+      // @todo; we need to have default image
+      return 'data:image/svg+xml;base64,none';
     }
-    // @todo; we need to have default image
-    return 'data:image/svg+xml;base64,none';
   }
 
   get label_style() {
-    let styles = this.cssFixer.fix(this.node.label.style);
+    if (this.node != undefined) {
-    styles = this.fontFixer.fixStyles(styles);
+      let styles = this.cssFixer.fix(this.node.label.style);
-    return this.sanitizer.bypassSecurityTrustStyle(styles);
+      styles = this.fontFixer.fixStyles(styles);
+      return this.sanitizer.bypassSecurityTrustStyle(styles);
+    }
   }
 
   get label_x(): number {
-    if (this.node.label.x === null) {
+    if (this.node != undefined) {
-      // center
+      if (this.node.label.x === null) {
-      const bbox = this.label.nativeElement.getBBox();
+        // center
+        const bbox = this.label.nativeElement.getBBox();
 
-      return -bbox.width / 2;
+        return -bbox.width / 2;
+      }
+      return this.node.label.x + NodeComponent.NODE_LABEL_MARGIN;
     }
-    return this.node.label.x + NodeComponent.NODE_LABEL_MARGIN;
   }
 
   get label_y(): number {
     this.labelHeight = this.getLabelHeight();
 
-    if (this.node.label.x === null) {
+    if (this.node != undefined) {
-      // center
+      if (this.node.label.x === null) {
-      return -this.node.height / 2 - this.labelHeight;
+        // center
+        return -this.node.height / 2 - this.labelHeight;
+      }
+      return this.node.label.y + this.labelHeight - NodeComponent.NODE_LABEL_MARGIN;
     }
-    return this.node.label.y + this.labelHeight - NodeComponent.NODE_LABEL_MARGIN;
   }
 
   private getLabelHeight() {
-    const bbox = this.label.nativeElement.getBBox();
+    if (this.label != undefined) {
-    return bbox.height;
+      const bbox = this.label.nativeElement.getBBox();
+      return bbox.height;
+    }
   }
 }

src/app/cartography/components/experimental-map/selection/selection.component.spec.ts

@@ -1,15 +1,15 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SelectionComponent } from './selection.component';
 
 describe('SelectionComponent', () => {
   let component: SelectionComponent;
   let fixture: ComponentFixture<SelectionComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(async() => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       declarations: [SelectionComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SelectionComponent);
@@ -17,7 +17,7 @@ describe('SelectionComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
+  it('should create', () => {
-  //   expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
-  // });
+  });
 });

src/app/cartography/components/selection-select/selection-select.component.spec.ts

@@ -1,15 +1,18 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SelectionManager } from 'app/cartography/managers/selection-manager';
+import { MapChangeDetectorRef } from 'app/cartography/services/map-change-detector-ref';
 import { SelectionSelectComponent } from './selection-select.component';
 
 describe('SelectionSelectComponent', () => {
   let component: SelectionSelectComponent;
   let fixture: ComponentFixture<SelectionSelectComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(async () => {
     TestBed.configureTestingModule({
       declarations: [SelectionSelectComponent],
+      providers: [MapChangeDetectorRef,SelectionManager]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SelectionSelectComponent);
@@ -17,7 +20,7 @@ describe('SelectionSelectComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
+  it('should create', () => {
-  //   expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
-  // });
+  });
 });

src/app/cartography/widgets/node.spec.ts

@@ -31,19 +31,21 @@ describe('NodesWidget', () => {
       const drew = svg.canvas.selectAll<SVGGElement, MapNode>('g.node');
       const drewNode = drew.nodes()[0];
 
-      drewNode.dispatchEvent(
+      if (drewNode != undefined && drewNode != null) {
-        new MouseEvent('mousedown', {
+        drewNode.dispatchEvent(
-          clientX: 150,
+          new MouseEvent('mousedown', {
-          clientY: 250,
+            clientX: 150,
-          relatedTarget: drewNode,
+            clientY: 250,
-          screenY: 1024,
+            relatedTarget: drewNode,
-          screenX: 1024,
+            screenY: 1024,
-          view: window,
+            screenX: 1024,
-        })
+            view: window,
-      );
+          })
+        );
 
-      window.dispatchEvent(new MouseEvent('mousemove', { clientX: 300, clientY: 300 }));
+        window.dispatchEvent(new MouseEvent('mousemove', { clientX: 300, clientY: 300 }));
-      window.dispatchEvent(new MouseEvent('mouseup', { clientX: 300, clientY: 300, view: window }));
+        window.dispatchEvent(new MouseEvent('mouseup', { clientX: 300, clientY: 300, view: window }));
+      }
     };
 
     beforeEach(() => {
@@ -54,6 +56,9 @@ describe('NodesWidget', () => {
       node.height = 100;
       node.label = new MapLabel();
     });
+    it('draggable behaviour', () => {
+      tryToDrag()
+    })
 
     // it('should be draggable when enabled', () => {
     //   widget.setDraggingEnabled(true);

src/app/cartography/widgets/nodes.spec.ts

@@ -14,8 +14,12 @@ describe('NodesWidget', () => {
     nodeWidget = instance(mock(NodeWidget));
     widget = new NodesWidget(nodeWidget, new MapSettingsManager());
   });
+  it('draggable behaviour', () => {
+    
+  })
 
   afterEach(() => {
     svg.destroy();
   });
+  
 });

src/app/common/progress-dialog/progress-dialog.component.spec.ts

@@ -1,15 +1,31 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { ProgressDialogComponent } from './progress-dialog.component';
 
 describe('ProgressDialogComponent', () => {
   let component: ProgressDialogComponent;
   let fixture: ComponentFixture<ProgressDialogComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(async() => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       declarations: [ProgressDialogComponent],
+      imports:[
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        MatDialogModule
+      ],
+      providers:[
+        { provide: MatDialogRef, useValue: {}},
+        { provide: MAT_DIALOG_DATA, useValue: {}},
+      ]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ProgressDialogComponent);
@@ -17,7 +33,7 @@ describe('ProgressDialogComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
+  it('should create', () => {
-  //   expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
-  // });
+  });
 });

src/app/common/progress-dialog/progress-dialog.service.spec.ts

@@ -1,14 +1,21 @@
-import { TestBed } from '@angular/core/testing';
+import { inject, TestBed } from '@angular/core/testing';
+import { MatDialog } from '@angular/material/dialog';
+import { MockedProgressService } from 'app/components/project-map/project-map.component.spec';
 import { ProgressDialogService } from './progress-dialog.service';
 
 describe('ProgressDialogService', () => {
+  let  mockedProgressService : MockedProgressService
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [ProgressDialogService],
+      // imports:[ProgressDialogService],
+      providers: [
+        { provide: MatDialog, useValue: {} },
+        { provide: ProgressDialogService, useClass:MockedProgressService },
+      ],
     });
   });
 
-  // it('should be created', inject([ProgressDialogService], (service: ProgressDialogService) => {
+  it('should be created', inject([ProgressDialogService], (service: ProgressDialogService) => {
-  //   expect(service).toBeTruthy();
+    expect(service).toBeTruthy();
-  // }));
+  }));
 });

src/app/components/installed-software/install-software/install-software.component.spec.ts

@@ -1,15 +1,21 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MockedDrawingsDataSource } from 'app/components/project-map/project-map.component.spec';
+import { ElectronService, ElectronServiceRef } from 'ngx-electron';
 import { InstallSoftwareComponent } from './install-software.component';
 
 describe('InstallSoftwareComponent', () => {
   let component: InstallSoftwareComponent;
   let fixture: ComponentFixture<InstallSoftwareComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(async () => {
     TestBed.configureTestingModule({
       declarations: [InstallSoftwareComponent],
+      providers: [
+        { provide: ElectronService, useValue: {} },
+        { provide: ElectronServiceRef, useValue: {} },
+      ]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(InstallSoftwareComponent);
@@ -17,7 +23,7 @@ describe('InstallSoftwareComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
+  it('should create', () => {
-  //   expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
-  // });
+  });
 });

src/app/components/installed-software/install-software/install-software.component.ts

@@ -17,13 +17,15 @@ export class InstallSoftwareComponent implements OnInit, OnDestroy, OnChanges {
   public readyToInstall = true;
   public buttonText: string;
 
-  constructor(private electronService: ElectronService) {}
+  constructor(private electronService: ElectronService) { }
 
   ngOnInit() {
-    this.electronService.ipcRenderer.on(this.responseChannel, (event, data) => {
+    if (this.electronService && this.electronService.ipcRenderer) {
-      this.updateButton();
+      this.electronService.ipcRenderer.on(this.responseChannel, (event, data) => {
-      this.installedChanged.emit(data);
+        this.updateButton();
-    });
+        this.installedChanged.emit(data);
+      });
+    }
   }
 
   ngOnDestroy() {

src/app/components/installed-software/installed-software.component.spec.ts

@@ -1,15 +1,26 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ExternalSoftwareDefinitionService } from 'app/services/external-software-definition.service';
+import { InstalledSoftwareService } from 'app/services/installed-software.service';
+import { PlatformService } from 'app/services/platform.service';
+import { ElectronService } from 'ngx-electron';
 import { InstalledSoftwareComponent } from './installed-software.component';
 
 describe('InstalledSoftwareComponent', () => {
   let component: InstalledSoftwareComponent;
   let fixture: ComponentFixture<InstalledSoftwareComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(async () => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       declarations: [InstalledSoftwareComponent],
+      providers: [
+        InstalledSoftwareService,
+        ElectronService,
+        ExternalSoftwareDefinitionService,
+        PlatformService
+      ],
+
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(InstalledSoftwareComponent);
@@ -17,7 +28,7 @@ describe('InstalledSoftwareComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
+  it('should create', () => {
-  //   expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
-  // });
+  });
 });

src/app/components/project-map/context-console-menu/context-console-menu.component.spec.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, NO_ERRORS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { BrowserModule } from '@angular/platform-browser';
@@ -32,12 +32,12 @@ describe('ContextConsoleMenuComponent', () => {
     status: 'started',
   };
 
-  beforeEach(async(() => {
+  beforeEach(async () => {
     const electronMock = {
       isElectronApp: true,
     };
 
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       imports: [MatMenuModule, BrowserModule, MatSnackBarModule],
       providers: [
         { provide: ChangeDetectorRef },
@@ -57,56 +57,56 @@ describe('ContextConsoleMenuComponent', () => {
     toasterService = TestBed.inject(ToasterService);
     mapSettingsService = TestBed.inject(MapSettingsService);
     nodeConsoleService = TestBed.inject(NodeConsoleService);
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ContextConsoleMenuComponent);
-    component = fixture.componentInstance;
-    component.server = { location: 'local' } as Server;
-    fixture.detectChanges();
   });
 
-  it('should create', () => {
+beforeEach(() => {
-    expect(component).toBeTruthy();
+  fixture = TestBed.createComponent(ContextConsoleMenuComponent);
-  });
+  component = fixture.componentInstance;
-
+  component.server = { location: 'local' } as Server;
-  it('should define property if running in electron ', () => {
+  fixture.detectChanges();
-    expect(component.isElectronApp).toBeTruthy();
+});
-  });
+
-
+it('should create', () => {
-  it('should open menu if there is no default settings', () => {
+  expect(component).toBeTruthy();
-    let spy = spyOn(component.contextConsoleMenu, 'openMenu');
+});
-    localStorage.removeItem('consoleContextMenu');
+
-
+it('should define property if running in electron ', () => {
-    component.openMenu((node as unknown) as Node, 0, 0);
+  expect(component.isElectronApp).toBeTruthy();
-
+});
-    expect(spy.calls.any()).toBeTruthy();
+
-  });
+it('should open menu if there is no default settings', () => {
-
+  let spy = spyOn(component.contextConsoleMenu, 'openMenu');
-  it('should call open web console when web console action in settings', () => {
+  localStorage.removeItem('consoleContextMenu');
-    let spy = spyOn(component, 'openWebConsole');
+
-    mapSettingsService.setConsoleContextMenuAction('web console');
+  component.openMenu((node as unknown) as Node, 0, 0);
-
+
-    component.openMenu((node as unknown) as Node, 0, 0);
+  expect(spy.calls.any()).toBeTruthy();
-
+});
-    expect(spy.calls.any()).toBeTruthy();
+
-  });
+it('should call open web console when web console action in settings', () => {
-
+  let spy = spyOn(component, 'openWebConsole');
-  it('should call open web console in new tab when web console in new tab action in settings', () => {
+  mapSettingsService.setConsoleContextMenuAction('web console');
-    let spy = spyOn(component, 'openWebConsoleInNewTab');
+
-    mapSettingsService.setConsoleContextMenuAction('web console in new tab');
+  component.openMenu((node as unknown) as Node, 0, 0);
-
+
-    component.openMenu((node as unknown) as Node, 0, 0);
+  expect(spy.calls.any()).toBeTruthy();
-
+});
-    expect(spy.calls.any()).toBeTruthy();
+
-  });
+it('should call open web console in new tab when web console in new tab action in settings', () => {
-
+  let spy = spyOn(component, 'openWebConsoleInNewTab');
-  it('should call open console when console action in settings', () => {
+  mapSettingsService.setConsoleContextMenuAction('web console in new tab');
-    let spy = spyOn(component, 'openConsole');
+
-    mapSettingsService.setConsoleContextMenuAction('console');
+  component.openMenu((node as unknown) as Node, 0, 0);
-
+
-    component.openMenu((node as unknown) as Node, 0, 0);
+  expect(spy.calls.any()).toBeTruthy();
-
+});
-    expect(spy.calls.any()).toBeTruthy();
+
-  });
+it('should call open console when console action in settings', () => {
+  let spy = spyOn(component, 'openConsole');
+  mapSettingsService.setConsoleContextMenuAction('console');
+
+  component.openMenu((node as unknown) as Node, 0, 0);
+
+  expect(spy.calls.any()).toBeTruthy();
+});
 });

src/app/components/project-map/context-menu/actions/move-layer-down-action/move-layer-down-action.component.spec.ts

@@ -1,15 +1,17 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatTableModule } from '@angular/material/table';
 import { MoveLayerDownActionComponent } from './move-layer-down-action.component';
 
 describe('MoveLayerDownActionComponent', () => {
   let component: MoveLayerDownActionComponent;
   let fixture: ComponentFixture<MoveLayerDownActionComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(async () => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       declarations: [MoveLayerDownActionComponent],
+      imports:[MatTableModule]
     }).compileComponents();
-  }));
+  });
 
   // beforeEach(() => {
   //   fixture = TestBed.createComponent(MoveLayerDownActionComponent);
@@ -17,7 +19,7 @@ describe('MoveLayerDownActionComponent', () => {
   //   fixture.detectChanges();
   // });
 
-  // it('should create', () => {
+  it('should create', () => {
-  //   expect(component).toBeTruthy();
+    expect(component)
-  // });
+  });
 });

src/app/components/project-map/context-menu/actions/move-layer-up-action/move-layer-up-action.component.spec.ts

@@ -1,15 +1,15 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MoveLayerUpActionComponent } from './move-layer-up-action.component';
 
 describe('MoveLayerUpActionComponent', () => {
   let component: MoveLayerUpActionComponent;
   let fixture: ComponentFixture<MoveLayerUpActionComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(async() => {
     TestBed.configureTestingModule({
       declarations: [MoveLayerUpActionComponent],
     }).compileComponents();
-  }));
+  });
 
   // beforeEach(() => {
   //   fixture = TestBed.createComponent(MoveLayerUpActionComponent);
@@ -17,7 +17,7 @@ describe('MoveLayerUpActionComponent', () => {
   //   fixture.detectChanges();
   // });
 
-  // it('should create', () => {
+  it('should create', () => {
-  //   expect(component).toBeTruthy();
+    expect(component)
-  // });
+  });
 });

src/app/components/project-map/context-menu/actions/start-node-action/start-node-action.component.spec.ts

@@ -1,15 +1,29 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MockedNodeService } from 'app/components/project-map/project-map.component.spec';
+import { HttpServer } from 'app/services/http-server.service';
+import { NodeService } from 'app/services/node.service';
+import { ToasterService } from 'app/services/toaster.service';
+import { MockedToasterService } from 'app/services/toaster.service.spec';
 import { StartNodeActionComponent } from './start-node-action.component';
 
 describe('StartNodeActionComponent', () => {
   let component: StartNodeActionComponent;
   let fixture: ComponentFixture<StartNodeActionComponent>;
+  let mockedNodeService: MockedNodeService;
+  let mockedToasterService: MockedToasterService;
 
-  beforeEach(async(() => {
+  beforeEach(async () => {
     TestBed.configureTestingModule({
       declarations: [StartNodeActionComponent],
+      imports:[MatProgressSpinnerModule ],
+      providers: [
+        { provide: NodeService, useValue: mockedNodeService },
+        { provide: HttpServer, useValue: {} },
+        { provide: ToasterService, useValue: mockedToasterService },
+      ],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(StartNodeActionComponent);
@@ -17,7 +31,7 @@ describe('StartNodeActionComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
+  it('should create', () => {
-  //   expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
-  // });
+  });
 });

src/app/components/project-map/context-menu/actions/stop-node-action/stop-node-action.component.spec.ts

@@ -1,15 +1,22 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MockedNodeService } from 'app/components/project-map/project-map.component.spec';
+import { HttpServer } from 'app/services/http-server.service';
+import { NodeService } from 'app/services/node.service';
 import { StopNodeActionComponent } from './stop-node-action.component';
 
 describe('StopNodeActionComponent', () => {
   let component: StopNodeActionComponent;
   let fixture: ComponentFixture<StopNodeActionComponent>;
-
+  let mockedNodeService : MockedNodeService
-  beforeEach(async(() => {
+  
-    TestBed.configureTestingModule({
+  beforeEach(async() => {
+    await TestBed.configureTestingModule({
       declarations: [StopNodeActionComponent],
+      providers:[
+        {provide:NodeService , useValue: mockedNodeService},
+      ]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(StopNodeActionComponent);
@@ -17,7 +24,7 @@ describe('StopNodeActionComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
+  it('should create', () => {
-  //   expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
-  // });
+  });
 });

src/app/components/project-map/draw-link-tool/draw-link-tool.component.spec.ts

@@ -1,15 +1,41 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LabelToMapLabelConverter } from 'app/cartography/converters/map/label-to-map-label-converter';
+import { MapLabelToLabelConverter } from 'app/cartography/converters/map/map-label-to-label-converter';
+import { MapNodeToNodeConverter } from 'app/cartography/converters/map/map-node-to-node-converter';
+import { MapPortToPortConverter } from 'app/cartography/converters/map/map-port-to-port-converter';
+import { NodeToMapNodeConverter } from 'app/cartography/converters/map/node-to-map-node-converter';
+import { PortToMapPortConverter } from 'app/cartography/converters/map/port-to-map-port-converter';
+import { LinksEventSource } from 'app/cartography/events/links-event-source';
+import { NodesEventSource } from 'app/cartography/events/nodes-event-source';
+import { CssFixer } from 'app/cartography/helpers/css-fixer';
+import { FontBBoxCalculator } from 'app/cartography/helpers/font-bbox-calculator';
+import { FontFixer } from 'app/cartography/helpers/font-fixer';
+import { DrawingLineWidget } from 'app/cartography/widgets/drawing-line';
 import { DrawLinkToolComponent } from './draw-link-tool.component';
 
 describe('DrawLinkToolComponent', () => {
   let component: DrawLinkToolComponent;
   let fixture: ComponentFixture<DrawLinkToolComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(async() => {
-    TestBed.configureTestingModule({
+   await TestBed.configureTestingModule({
       declarations: [DrawLinkToolComponent],
+      providers:[
+        DrawingLineWidget,
+        NodesEventSource,
+        LinksEventSource,
+        MapNodeToNodeConverter,
+        MapLabelToLabelConverter,
+        FontBBoxCalculator,
+        MapPortToPortConverter,
+        CssFixer,
+        FontFixer,
+        NodeToMapNodeConverter,
+        LabelToMapLabelConverter,
+        PortToMapPortConverter
+      ]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DrawLinkToolComponent);
@@ -17,7 +43,7 @@ describe('DrawLinkToolComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
+  it('should create', () => {
-  //   expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
-  // });
+  });
 });

src/app/components/project-map/node-select-interface/node-select-interface.component.spec.ts

@@ -17,7 +17,7 @@ describe('NodeSelectInterfaceComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
+  it('should create', () => {
-  //   expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
-  // });
+  });
 });

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

@@ -1,19 +1,57 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { ServerDatabase } from '../../services/server.database';
+import { ServerService } from '../../services/server.service';
+import { MockedServerService } from 'app/services/server.service.spec';
 import { ServersComponent } from './servers.component';
+import { ServerManagementService } from 'app/services/server-management.service';
+import { ElectronService } from 'ngx-electron';
+import { ChildProcessService } from 'ngx-childprocess';
+import { MatBottomSheet, MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MockedActivatedRoute } from '../snapshots/list-of-snapshots/list-of-snaphshots.component.spec';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ChangeDetectorRef } from '@angular/core';
 
 describe('ServersComponent', () => {
   let component: ServersComponent;
   let fixture: ComponentFixture<ServersComponent>;
+  let serverMockedService: MockedServerService
+  let mockedActivatedRoute: MockedActivatedRoute
 
-  beforeEach(async(() => {
+  beforeEach(async () => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       declarations: [ServersComponent],
+      imports: [
+        MatDialogModule,
+        RouterTestingModule,
+        MatBottomSheetModule
+      ],
+      providers: [
+        MatDialog,
+        { provide: ServerService, useValue: serverMockedService },
+        { provide: ActivatedRoute, useValue:mockedActivatedRoute  },
+        ServerDatabase,
+        ServerManagementService,
+        ElectronService,
+        MatBottomSheet,
+        Router,
+        ChildProcessService,
+        ChangeDetectorRef
+      ]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ServersComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

src/app/components/servers/servers.component.ts

@@ -36,7 +36,7 @@ export class ServersComponent implements OnInit, OnDestroy {
     private bottomSheet: MatBottomSheet,
     private route: ActivatedRoute,
     private router: Router
-  ) {}
+  ) { }
 
   getServers() {
     const runningServersNames = this.serverManagement.getRunningServers();
@@ -57,7 +57,7 @@ export class ServersComponent implements OnInit, OnDestroy {
               if (!this.serverDatabase.find(server.name)) this.serverDatabase.addServer(server);
             }
           },
-          (error) => {}
+          (error) => { }
         );
       });
     });
@@ -66,13 +66,15 @@ export class ServersComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.isElectronApp = this.electronService.isElectronApp;
 
-    if (this.serverService.isServiceInitialized) this.getServers();
+    if (this.serverService && this.serverService.isServiceInitialized) this.getServers();
 
-    this.serverService.serviceInitialized.subscribe(async (value: boolean) => {
+    if (this.serverService && this.serverService.isServiceInitialized) {
-      if (value) {
+      this.serverService.serviceInitialized.subscribe(async (value: boolean) => {
-        this.getServers();
+        if (value) {
-      }
+          this.getServers();
-    });
+        }
+      });
+    }
 
     this.dataSource = new ServerDataSource(this.serverDatabase);
 
@@ -171,5 +173,5 @@ export class ServerDataSource extends DataSource<Server> {
     );
   }
 
-  disconnect() {}
+  disconnect() { }
 }

src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.html

@@ -5,7 +5,7 @@
     class="top-button"
     color="accent"
     (click)="onNoClick()"
-    routerLink="/server/{{ server.id }}/project/{{ project.project_id }}/snapshots"
+    routerLink="/server/{{ server?.id }}/project/{{ project?.project_id }}/snapshots"
   >
     Go to snapshots
   </button>

src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.spec.ts

@@ -1,15 +1,45 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { NodesDataSource } from 'app/cartography/datasources/nodes-datasource';
+import { MockedNodesDataSource } from 'app/components/project-map/project-map.component.spec';
+import { SnapshotService } from 'app/services/snapshot.service';
+import { ToasterService } from 'app/services/toaster.service';
+import { MockedToasterService } from 'app/services/toaster.service.spec';
+import { MockedSnapshotService } from '../list-of-snapshots/list-of-snaphshots.component.spec';
 import { CreateSnapshotDialogComponent } from './create-snapshot-dialog.component';
 
 describe('CreateSnapshotDialogComponent', () => {
   let component: CreateSnapshotDialogComponent;
   let fixture: ComponentFixture<CreateSnapshotDialogComponent>;
-
+  let mockedToasterService: MockedToasterService;
-  beforeEach(async(() => {
+  let mockedSnapshotService: MockedSnapshotService;
-    TestBed.configureTestingModule({
+  let mockedNodesDataSource: MockedNodesDataSource
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       declarations: [CreateSnapshotDialogComponent],
+      imports: [
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        ReactiveFormsModule,
+        FormsModule
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: {} },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: SnapshotService, useValue: mockedSnapshotService },
+        { provide: NodesDataSource, useValue: mockedNodesDataSource },
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+      ]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(CreateSnapshotDialogComponent);
@@ -17,7 +47,7 @@ describe('CreateSnapshotDialogComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
+  it('should create', () => {
-  //   expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
-  // });
+  });
 });

src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.ts

@@ -37,17 +37,21 @@ export class CreateSnapshotDialogComponent {
       snapshotName: new FormControl('', Validators.required),
     });
 
-    this.snapshotService.list(this.server, this.project.project_id).subscribe((snapshots: Snapshot[]) => {
+    if (this.project && this.project.project_id) {
-      snapshots.forEach((snapshot: Snapshot) => {
+      this.snapshotService.list(this.server, this.project.project_id).subscribe((snapshots: Snapshot[]) => {
-        this.snapshots.push(snapshot.name);
+        snapshots.forEach((snapshot: Snapshot) => {
+          this.snapshots.push(snapshot.name);
+        });
       });
-    });
+    }
 
-    this.nodesDataSource.getItems().forEach((node: Node) => {
+    if (this.nodesDataSource) {
-      if (node.status !== 'stopped' && !this.isAlwaysRunningNode(node.node_type)) {
+      this.nodesDataSource.getItems().forEach((node: Node) => {
-        this.isInRunningState = true;
+        if (node.status !== 'stopped' && !this.isAlwaysRunningNode(node.node_type)) {
-      }
+          this.isInRunningState = true;
-    });
+        }
+      });
+    }
   }
 
   isAlwaysRunningNode(nodeType: string) {

src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.spec.ts

@@ -1,15 +1,37 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Overlay, ScrollStrategyOptions } from '@angular/cdk/overlay';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { Context } from 'app/cartography/models/context';
+import { ProgressDialogService } from 'app/common/progress-dialog/progress-dialog.service';
+import { HttpServer, ServerErrorHandler } from 'app/services/http-server.service';
+import { SnapshotService } from 'app/services/snapshot.service';
+import { ToasterService } from 'app/services/toaster.service';
 import { SnapshotMenuItemComponent } from './snapshot-menu-item.component';
 
 describe('SnapshotMenuItemComponent', () => {
   let component: SnapshotMenuItemComponent;
   let fixture: ComponentFixture<SnapshotMenuItemComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(async () => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       declarations: [SnapshotMenuItemComponent],
+      imports:[MatDialogModule,HttpClientModule,MatSnackBarModule],
+      providers: [
+        SnapshotService,
+        MatDialog,
+        HttpServer,
+        Overlay,
+        ScrollStrategyOptions,
+        HttpClient,
+        ServerErrorHandler,
+        ProgressDialogService,
+        Context,
+        ToasterService
+      ]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SnapshotMenuItemComponent);
@@ -17,7 +39,7 @@ describe('SnapshotMenuItemComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
+  it('should create', () => {
-  //   expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
-  // });
+  });
 });

src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.ts

@@ -39,7 +39,7 @@ export class SnapshotMenuItemComponent implements OnInit {
     });
 
     dialogRef.afterClosed().subscribe((snapshot) => {
-      if (snapshot) {
+      if (snapshot && this.project.project_id) {
         const creation = this.snapshotService.create(this.server, this.project.project_id, snapshot);
 
         const progress = this.progressDialogService.open();

src/app/components/template/template-list-dialog/template-list-dialog.component.html

@@ -5,7 +5,7 @@
     class="top-button"
     color="accent"
     (click)="onNoClick()"
-    routerLink="/server/{{ server.id }}/preferences"
+    routerLink="/server/{{ server?.id }}/preferences"
   >
     Go to template preferences
   </button>

src/app/components/template/template-list-dialog/template-list-dialog.component.spec.ts

@@ -1,15 +1,31 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { RouterTestingModule } from '@angular/router/testing';
+import { TemplateService } from 'app/services/template.service';
+import { ToasterService } from 'app/services/toaster.service';
+import { MockedToasterService } from 'app/services/toaster.service.spec';
+import { NonNegativeValidator } from 'app/validators/non-negative-validator';
 import { TemplateListDialogComponent } from './template-list-dialog.component';
 
 describe('TemplateListDialogComponent', () => {
   let component: TemplateListDialogComponent;
   let fixture: ComponentFixture<TemplateListDialogComponent>;
+  let mockedToasterService :MockedToasterService
 
-  beforeEach(async(() => {
+  beforeEach(async () => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       declarations: [TemplateListDialogComponent],
+      imports: [ReactiveFormsModule, FormsModule,RouterTestingModule],
+      providers: [
+        { provide: TemplateService, useValue: {} },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: MatDialogRef, useValue: {} },
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+        { provide: NonNegativeValidator, useValue: {} },
+      ]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TemplateListDialogComponent);
@@ -17,7 +33,7 @@ describe('TemplateListDialogComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
+  it('should create', () => {
-  //   expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
-  // });
+  });
 });

src/app/components/template/template-list-dialog/template-list-dialog.component.ts

@@ -53,7 +53,7 @@ export class TemplateListDialogComponent implements OnInit {
     this.project = data['project'];
     this.configurationForm = this.formBuilder.group({
       // name: new FormControl('new node', Validators.required),
-      numberOfNodes: new FormControl(1, [Validators.required, nonNegativeValidator.get]),
+      numberOfNodes: new FormControl(1, [Validators.required, this.nonNegativeValidator.get]),
     });
     this.positionForm = this.formBuilder.group({
       top: new FormControl(0, Validators.required),

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

@@ -1,15 +1,40 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Overlay } from '@angular/cdk/overlay';
+import { HttpClient, HttpHandler } from '@angular/common/http';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatMenuModule } from '@angular/material/menu';
+import { Context } from 'app/cartography/models/context';
+import { HttpServer, ServerErrorHandler } from 'app/services/http-server.service';
+import { MapScaleService } from 'app/services/mapScale.service';
+import { SymbolService } from 'app/services/symbol.service';
+import { TemplateService } from 'app/services/template.service';
+import { MockedSymbolService } from '../preferences/common/symbols/symbols.component.spec';
 import { TemplateComponent } from './template.component';
 
 describe('TemplateComponent', () => {
   let component: TemplateComponent;
   let fixture: ComponentFixture<TemplateComponent>;
-
+  let mockedSymbolService: MockedSymbolService
-  beforeEach(async(() => {
+  beforeEach(async () => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       declarations: [TemplateComponent],
+      imports: [MatDialogModule,MatMenuModule],
+      providers: [
+        MatDialog,
+        Overlay,
+        TemplateService,
+        HttpServer,
+        MapScaleService,
+        HttpClient,
+        HttpHandler,
+        ServerErrorHandler,
+        Context, 
+        { provide: SymbolService, useClass: mockedSymbolService },
+      ],
+      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TemplateComponent);
@@ -17,7 +42,8 @@ describe('TemplateComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
+  it('should create', () => {
-  //   expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
-  // });
+  });
+
 });

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

@@ -214,7 +214,7 @@ export class HttpServer {
   }
 
   private getOptionsForServer<T extends HeadersOptions>(server: Server, url: string, options: T) {
-    if (server.host && server.port) {
+    if (server && server.host && server.port) {
       if (!server.protocol) {
         server.protocol = location.protocol as ServerProtocol;
       }
@@ -227,7 +227,7 @@ export class HttpServer {
       options.headers = {};
     }
 
-    if (server.authToken && !server.tokenExpired) {
+    if (server && server.authToken && !server.tokenExpired) {
       options.headers['Authorization'] = `Bearer ${server.authToken}`;
     }
 

src/app/services/installed-software.service.spec.ts

@@ -1,10 +1,13 @@
 import { TestBed } from '@angular/core/testing';
+import { InstalledSoftwareService } from './installed-software.service';
 
 describe('InstalledSoftwareService', () => {
-  beforeEach(() => TestBed.configureTestingModule({}));
+  beforeEach(() => TestBed.configureTestingModule({
+    providers: [{ provide: InstalledSoftwareService, useValue: {} }]
+  }));
 
-  // it('should be created', () => {
+  it('should be created', () => {
-  //   const service: InstalledSoftwareService = TestBed.get(InstalledSoftwareService);
+    const service: InstalledSoftwareService = TestBed.get(InstalledSoftwareService);
-  //   expect(service).toBeTruthy();
+    expect(service).toBeTruthy();
-  // });
+  });
 });

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

@@ -21,7 +21,10 @@ describe('NodeService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule, AppTestingModule],
-      providers: [HttpServer, NodeService],
+      providers: [
+        HttpServer,
+        NodeService,
+      ],
     });
 
     httpClient = TestBed.get(HttpClient);

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

@@ -43,7 +43,10 @@ describe('ServerManagementService', () => {
 
   beforeEach(() =>
     TestBed.configureTestingModule({
-      providers: [{ provide: ElectronService, useValue: electronService }, ServerManagementService],
+      providers: [
+        ServerManagementService,
+        { provide: ElectronService, useValue: electronService },
+      ],
     })
   );
 

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

@@ -18,7 +18,7 @@ describe('SnapshotService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule, AppTestingModule],
-      providers: [HttpServer, SnapshotService],
+      providers: [HttpServer, HttpClient,SnapshotService],
     });
 
     httpClient = TestBed.get(HttpClient);