Remove .widget from files and introduce TestSVGCanvas

src/app/cartography/map/map.component.ts

@@ -6,7 +6,7 @@ import {select, Selection} from 'd3-selection';
 
 import { Node } from "../shared/models/node";
 import { Link } from "../shared/models/link";
-import { GraphLayout } from "../shared/widgets/graph.widget";
+import { GraphLayout } from "../shared/widgets/graph";
 import { Context } from "../shared/models/context";
 import { Size } from "../shared/models/size";
 import { Drawing } from "../shared/models/drawing";

src/app/cartography/shared/tools/moving-tool.spec.ts

@@ -1,46 +1,41 @@
-import { select } from "d3-selection";
 import { Context } from "../models/context";
 import { SVGSelection } from "../models/types";
 import { MovingTool } from "./moving-tool";
+import { TestSVGCanvas } from "../../testing";
 
 
 describe('MovingTool', () => {
   let tool: MovingTool;
-  let svg: SVGSelection;
+  let svg: TestSVGCanvas;
   let context: Context;
   let node: SVGSelection;
-  let canvas: SVGSelection;
 
   beforeEach(() => {
     tool = new MovingTool();
+    svg = new TestSVGCanvas();
 
-    svg = select('body')
+    node = svg.canvas
-        .append<SVGSVGElement>('svg')
-        .attr('width', 1000)
-        .attr('height', 1000);
-
-    canvas = svg.append<SVGGElement>('g').attr('class', 'canvas');
-
-    node = canvas
       .append<SVGGElement>('g')
       .attr('class', 'node')
       .attr('x', 10)
       .attr('y', 20);
 
-
     context = new Context();
 
-    tool.connect(svg, context);
+    tool.connect(svg.svg, context);
-    tool.draw(svg, context);
+    tool.draw(svg.svg, context);
     tool.activate();
+  });
 
+  afterEach(() => {
+    svg.destroy();
   });
 
   describe('MovingTool can move canvas', () => {
     beforeEach(() => {
-      svg.node().dispatchEvent(
+      svg.svg.node().dispatchEvent(
         new MouseEvent('mousedown', {
-          clientX: 100, clientY: 100, relatedTarget: svg.node(),
+          clientX: 100, clientY: 100, relatedTarget: svg.svg.node(),
           screenY: 1024, screenX: 1024, view: window
         })
       );
@@ -50,7 +45,7 @@ describe('MovingTool', () => {
     });
 
     it('canvas should transformed', () => {
-      expect(canvas.attr('transform')).toEqual('translate(100, 100) scale(1)');
+      expect(svg.canvas.attr('transform')).toEqual('translate(100, 100) scale(1)');
     });
   });
 
@@ -58,9 +53,9 @@ describe('MovingTool', () => {
     beforeEach(() => {
       tool.deactivate();
 
-      svg.node().dispatchEvent(
+      svg.svg.node().dispatchEvent(
         new MouseEvent('mousedown', {
-          clientX: 100, clientY: 100, relatedTarget: svg.node(),
+          clientX: 100, clientY: 100, relatedTarget: svg.svg.node(),
           screenY: 1024, screenX: 1024, view: window
         })
       );
@@ -69,7 +64,7 @@ describe('MovingTool', () => {
     });
 
     it('canvas cannot be transformed', () => {
-      expect(canvas.attr('transform')).toBeNull();
+      expect(svg.canvas.attr('transform')).toBeNull();
     });
   });
 });

src/app/cartography/shared/tools/selection-tool.spec.ts

@@ -4,11 +4,12 @@ import { SelectionTool } from "./selection-tool";
 import { Context } from "../models/context";
 import { SVGSelection } from "../models/types";
 import { Rectangle } from "../models/rectangle";
+import { TestSVGCanvas } from "../../testing";
 
 
 describe('SelectionTool', () => {
   let tool: SelectionTool;
-  let svg: SVGSelection;
+  let svg: TestSVGCanvas;
   let context: Context;
   let selection_line_tool: SVGSelection;
   let path_selection: SVGSelection;
@@ -16,28 +17,25 @@ describe('SelectionTool', () => {
 
   beforeEach(() => {
     tool = new SelectionTool();
-
     tool.rectangleSelected.subscribe((rectangle: Rectangle) => {
       selected_rectangle = rectangle;
     });
 
-    svg = select('body')
+    svg = new TestSVGCanvas();
-        .append<SVGSVGElement>('svg')
-        .attr('width', 1000)
-        .attr('height', 1000);
-
-    svg.append<SVGGElement>('g').attr('class', 'canvas');
-
     context = new Context();
 
-    tool.connect(svg, context);
+    tool.connect(svg.svg, context);
-    tool.draw(svg, context);
+    tool.draw(svg.svg, context);
     tool.activate();
 
-    selection_line_tool = svg.select('g.selection-line-tool');
+    selection_line_tool = svg.svg.select('g.selection-line-tool');
     path_selection = selection_line_tool.select('path.selection');
   });
 
+  afterEach(() => {
+    svg.destroy();
+  });
+
   it('creates selection-line-tool container with path', () => {
     expect(selection_line_tool.node()).not.toBeNull();
     expect(selection_line_tool.select('path')).not.toBeNull();
@@ -46,7 +44,7 @@ describe('SelectionTool', () => {
 
   describe('SelectionTool can handle start of selection', () => {
     beforeEach(() => {
-      svg.node().dispatchEvent(new MouseEvent('mousedown', {clientX: 100, clientY: 100}));
+      svg.svg.node().dispatchEvent(new MouseEvent('mousedown', {clientX: 100, clientY: 100}));
     });
 
     it('path should be visible and have parameters', () => {
@@ -57,7 +55,7 @@ describe('SelectionTool', () => {
 
   describe('SelectionTool can handle move of selection', () => {
     beforeEach(() => {
-      svg.node().dispatchEvent(new MouseEvent('mousedown', {clientX: 100, clientY: 100}));
+      svg.svg.node().dispatchEvent(new MouseEvent('mousedown', {clientX: 100, clientY: 100}));
       window.dispatchEvent(new MouseEvent('mousemove', {clientX: 300, clientY: 300}));
     });
 
@@ -68,7 +66,7 @@ describe('SelectionTool', () => {
 
   describe('SelectionTool can handle end of selection', () => {
     beforeEach(() => {
-      svg.node().dispatchEvent(new MouseEvent('mousedown', {clientX: 100, clientY: 100}));
+      svg.svg.node().dispatchEvent(new MouseEvent('mousedown', {clientX: 100, clientY: 100}));
       window.dispatchEvent(new MouseEvent('mousemove', {clientX: 200, clientY: 200}));
       window.dispatchEvent(new MouseEvent('mouseup', {clientX: 200, clientY: 200}));
     });
@@ -83,7 +81,7 @@ describe('SelectionTool', () => {
 
     describe('SelectionTool can deselect after click outside', () => {
       beforeEach(() => {
-        svg.node().dispatchEvent(new MouseEvent('mousedown', {clientX: 300, clientY: 300}));
+        svg.svg.node().dispatchEvent(new MouseEvent('mousedown', {clientX: 300, clientY: 300}));
         window.dispatchEvent(new MouseEvent('mouseup', {clientX: 300, clientY: 300}));
       });
 
@@ -95,7 +93,7 @@ describe('SelectionTool', () => {
 
   describe('SelectionTool can handle end of selection in reverse direction', () => {
     beforeEach(() => {
-      svg.node().dispatchEvent(new MouseEvent('mousedown', {clientX: 200, clientY: 200}));
+      svg.svg.node().dispatchEvent(new MouseEvent('mousedown', {clientX: 200, clientY: 200}));
       window.dispatchEvent(new MouseEvent('mousemove', {clientX: 100, clientY: 100}));
       window.dispatchEvent(new MouseEvent('mouseup', {clientX: 100, clientY: 100}));
     });
@@ -108,13 +106,11 @@ describe('SelectionTool', () => {
   describe('SelectionTool can be deactivated', () => {
     beforeEach(() => {
       tool.deactivate();
-      svg.node().dispatchEvent(new MouseEvent('mousedown', {clientX: 100, clientY: 100}));
+      svg.svg.node().dispatchEvent(new MouseEvent('mousedown', {clientX: 100, clientY: 100}));
     });
 
     it('path should be still hiden', () => {
         expect(path_selection.attr('visibility')).toEqual('hidden');
     });
   });
-
-
 });

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

@@ -1,16 +1,16 @@
 import { Context } from "../models/context";
 import { Node } from "../models/node";
 import { Link } from "../models/link";
-import { NodesWidget } from "./nodes.widget";
+import { NodesWidget } from "./nodes";
 import { Widget } from "./widget";
 import { SVGSelection } from "../models/types";
-import { LinksWidget } from "./links.widget";
+import { LinksWidget } from "./links";
 import { Drawing } from "../models/drawing";
-import { DrawingsWidget } from "./drawings.widget";
+import { DrawingsWidget } from "./drawings";
-import { DrawingLineWidget } from "./drawing-line.widget";
+import { DrawingLineWidget } from "./drawing-line";
 import { SelectionTool } from "../tools/selection-tool";
 import { MovingTool } from "../tools/moving-tool";
-import { LayersWidget } from "./layers.widget";
+import { LayersWidget } from "./layers";
 import { Layer } from "../models/layer";
 
 

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

@@ -0,0 +1,19 @@
+import { TestSVGCanvas } from "../../testing";
+
+
+describe('LayersWidget', () => {
+  let svg: TestSVGCanvas;
+
+  beforeEach(() => {
+    svg = new TestSVGCanvas();
+  });
+
+  afterEach(() => {
+    svg.destroy();
+  });
+
+  it('canvas should transformed', () => {
+    // expect(canvas.attr('transform')).toEqual('translate(100, 100) scale(1)');
+  });
+
+});

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

@@ -1,6 +1,6 @@
 import { Widget } from "./widget";
 import { SVGSelection } from "../models/types";
-import { GraphLayout } from "./graph.widget";
+import { GraphLayout } from "./graph";
 import { Layer } from "../models/layer";
 
 

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

@@ -5,8 +5,8 @@ import { SVGSelection } from "../models/types";
 import { Link } from "../models/link";
 import { LinkStatus } from "../models/link-status";
 import { MultiLinkCalculatorHelper } from "../../map/helpers/multi-link-calculator-helper";
-import { SerialLinkWidget } from "./serial-link.widget";
+import { SerialLinkWidget } from "./serial-link";
-import { EthernetLinkWidget } from "./ethernet-link.widget";
+import { EthernetLinkWidget } from "./ethernet-link";
 import { Layer } from "../models/layer";
 
 

src/app/cartography/testing.ts

@@ -0,0 +1,26 @@
+import { select, Selection } from "d3-selection";
+
+
+export class TestSVGCanvas {
+  public svg: Selection<SVGSVGElement, any, HTMLElement, any>;
+  public canvas: Selection<SVGGElement, any, HTMLElement, any>;
+
+  constructor() {
+    this.create();
+  }
+
+  public create() {
+    this.svg = select('body')
+        .append<SVGSVGElement>('svg')
+        .attr('width', 1000)
+        .attr('height', 1000);
+
+    this.canvas = this.svg
+        .append<SVGGElement>('g')
+        .attr('class', 'canvas');
+  }
+
+  public destroy() {
+    select('body').selectAll('svg').remove();
+  }
+}