From 477ed3008f5a5ff6051551b9bd7106986af96653 Mon Sep 17 00:00:00 2001 From: ziajka Date: Wed, 14 Mar 2018 14:01:10 +0100 Subject: [PATCH] SelectionTool tests --- src/app/cartography/map/map.component.ts | 4 +- .../shared/tools/selection-tool.spec.ts | 75 +++++++++++++++++++ .../shared/tools/selection-tool.ts | 4 +- .../shared/widgets/graph.widget.ts | 2 - src/app/map/models/context.ts | 11 +-- 5 files changed, 85 insertions(+), 11 deletions(-) create mode 100644 src/app/cartography/shared/tools/selection-tool.spec.ts diff --git a/src/app/cartography/map/map.component.ts b/src/app/cartography/map/map.component.ts index d1ed77f3..852cfbd8 100644 --- a/src/app/cartography/map/map.component.ts +++ b/src/app/cartography/map/map.component.ts @@ -78,14 +78,12 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { let rootElement: Selection; - const self = this; - if (this.parentNativeElement !== null) { rootElement = d3.select(this.parentNativeElement); this.svg = rootElement.select('svg'); - this.graphContext = new Context(this.svg); + this.graphContext = new Context(); if (this.windowFullSize) { this.graphContext.setSize(this.getSize()); diff --git a/src/app/cartography/shared/tools/selection-tool.spec.ts b/src/app/cartography/shared/tools/selection-tool.spec.ts new file mode 100644 index 00000000..03922a96 --- /dev/null +++ b/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('svg') + .attr('width', 1000) + .attr('height', 1000); + + svg.append('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'); + }); + }); + +}); diff --git a/src/app/cartography/shared/tools/selection-tool.ts b/src/app/cartography/shared/tools/selection-tool.ts index 26a9aef4..fb343908 100644 --- a/src/app/cartography/shared/tools/selection-tool.ts +++ b/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); }); }); } diff --git a/src/app/cartography/shared/widgets/graph.widget.ts b/src/app/cartography/shared/widgets/graph.widget.ts index 710cd07a..717f35cf 100644 --- a/src/app/cartography/shared/widgets/graph.widget.ts +++ b/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('g.canvas') .data([context]); diff --git a/src/app/map/models/context.ts b/src/app/map/models/context.ts index ee82f333..e8053d7e 100644 --- a/src/app/map/models/context.ts +++ b/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; - private centerZeroZeroPoint = true; - constructor(root: Selection) { - 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); } }