SelectionTool tests

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

@@ -78,14 +78,12 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
 
     let rootElement: Selection<HTMLElement, any, null, undefined>;
 
-    const self = this;
-
     if (this.parentNativeElement !== null) {
       rootElement = d3.select(this.parentNativeElement);
 
       this.svg = rootElement.select<SVGSVGElement>('svg');
 
-      this.graphContext = new Context(this.svg);
+      this.graphContext = new Context();
 
       if (this.windowFullSize) {
         this.graphContext.setSize(this.getSize());

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

@@ -0,0 +1,75 @@
+import {SelectionTool} from "./selection-tool";
+import {select} from "d3-selection";
+import {Context} from "../../../map/models/context";
+import {SVGSelection} from "../../../map/models/types";
+import {beforeEach} from "selenium-webdriver/testing";
+
+
+describe('SelectionTool', () => {
+  let tool: SelectionTool;
+  let svg: SVGSelection;
+  let context: Context;
+  let selection_line_tool: SVGSelection;
+  let path_selection: SVGSelection;
+
+  beforeEach(() => {
+    tool = new SelectionTool();
+
+    svg = select('body')
+        .append<SVGSVGElement>('svg')
+        .attr('width', 1000)
+        .attr('height', 1000);
+
+    svg.append<SVGGElement>('g').attr('class', 'canvas');
+
+    context = new Context();
+
+    tool.connect(svg, context);
+    tool.draw(svg, context);
+    tool.activate();
+
+    selection_line_tool = svg.select('g.selection-line-tool');
+    path_selection = selection_line_tool.select('path.selection');
+  });
+
+  it('creates selection-line-tool container with path', () => {
+    expect(selection_line_tool.node()).not.toBeNull();
+    expect(selection_line_tool.select('path')).not.toBeNull();
+    expect(path_selection.attr('visibility')).toEqual('hidden');
+  });
+
+  describe('SelectionTool can handle start of selection', () => {
+    beforeEach(() => {
+      svg.node().dispatchEvent(new MouseEvent('mousedown', {clientX: 100, clientY: 100}));
+    });
+
+    it('path should be visible and have parameters', () => {
+        expect(path_selection.attr('visibility')).toEqual('visible');
+        expect(path_selection.attr('d')).toEqual('M95,86 l0,0 l0,0 l0,0z');
+    });
+  });
+
+  describe('SelectionTool can handle move of selection', () => {
+    beforeEach(() => {
+      svg.node().dispatchEvent(new MouseEvent('mousedown', {clientX: 100, clientY: 100}));
+      window.dispatchEvent(new MouseEvent('mousemove', {clientX: 300, clientY: 300}));
+    });
+
+    it('path should have got changed parameters', () => {
+        expect(path_selection.attr('d')).toEqual('M95,86 l200,0 l0,200 l-200,0z');
+    });
+  });
+
+  describe('SelectionTool can handle end of selection', () => {
+    beforeEach(() => {
+      svg.node().dispatchEvent(new MouseEvent('mousedown', {clientX: 100, clientY: 100}));
+      window.dispatchEvent(new MouseEvent('mousemove', {clientX: 300, clientY: 300}));
+      window.dispatchEvent(new MouseEvent('mouseup', {clientX: 300, clientY: 300}));
+    });
+
+    it('path should be hidden', () => {
+        expect(path_selection.attr('visibility')).toEqual('hidden');
+    });
+  });
+
+});

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

@@ -33,7 +33,9 @@ export class SelectionTool {
           self.moveSelection(start, transformation(mouse(parent)));
         }).on("mouseup.selection", function() {
           self.endSelection(start, transformation(mouse(parent)));
-          subject.on("mousemove.selection", null).on("mouseup.selection", null);
+          subject
+            .on("mousemove.selection", null)
+            .on("mouseup.selection", null);
         });
     });
   }

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

@@ -78,8 +78,6 @@ export class GraphLayout implements Widget {
   }
 
   draw(view: SVGSelection, context: Context) {
-    const self = this;
-
     const canvas = view
       .selectAll<SVGGElement, Context>('g.canvas')
       .data([context]);

src/app/map/models/context.ts

@@ -4,11 +4,9 @@ import {Point} from "../../cartography/shared/models/point.model";
 
 export class Context {
   private size: Size;
-  private root: Selection<SVGSVGElement, any, null, undefined>;
-  private centerZeroZeroPoint = true;
 
-  constructor(root: Selection<SVGSVGElement, any, null, undefined>) {
-    this.root = root;
+  constructor(private centerZeroZeroPoint = false) {
+    this.size = new Size(0, 0);
   }
 
   public getSize(): Size {
@@ -20,6 +18,9 @@ export class Context {
   }
 
   public getZeroZeroTransformationPoint() {
-    return new Point(this.getSize().width / 2., this.getSize().height / 2.);
+    if (this.centerZeroZeroPoint) {
+      return new Point(this.getSize().width / 2., this.getSize().height / 2.);
+    }
+    return new Point(0, 0);
   }
 }