From: Ulrich-Matthias Schäfer Date: Fri, 10 Apr 2020 05:41:57 +0000 (+1000) Subject: added tests for Path X-Git-Tag: 3.1.0~57 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=87a94412aaeb1a54005c7f793af7b20113ad0637;p=svg.js.git added tests for Path --- diff --git a/spec/spec/elements/Line.js b/spec/spec/elements/Line.js index 9fe1871..ebb2406 100644 --- a/spec/spec/elements/Line.js +++ b/spec/spec/elements/Line.js @@ -29,6 +29,21 @@ describe('Line.js', () => { }) }) + describe('move()', () => { + it('returns itself', () => { + expect(line.move(0, 0)).toBe(line) + }) + + it('moves the line along x and y axis', () => { + const canvas = SVG().addTo(container) + const line = canvas.line(1, 2, 3, 4) + line.move(50, 50) + expect(line.bbox()).toEqual(objectContaining({ + x: 50, y: 50, width: 2, height: 2 + })) + }) + }) + describe('plot()', () => { it('relays to array() as getter', () => { const spy = spyOn(line, 'array') @@ -42,6 +57,12 @@ describe('Line.js', () => { expect(spy).toHaveBeenCalledWith({ x1: 1, y1: 2, x2: 3, y2: 4 }) }) + it('calls attr with line attributes when string given', () => { + const spy = spyOn(line, 'attr') + line.plot('1, 2, 3, 4') + expect(spy).toHaveBeenCalledWith({ x1: 1, y1: 2, x2: 3, y2: 4 }) + }) + it('calls attr with line attributes when array given', () => { const spy = spyOn(line, 'attr') line.plot([ 1, 2, 3, 4 ]) @@ -61,30 +82,33 @@ describe('Line.js', () => { }) }) - describe('move()', () => { + describe('size()', () => { it('returns itself', () => { - expect(line.move(0, 0)).toBe(line) + expect(line.size(50, 50)).toBe(line) }) - it('moves the line along x and y axis', () => { + it('sets the size of the line', () => { const canvas = SVG().addTo(container) const line = canvas.line(1, 2, 3, 4) - line.move(50, 50) + line.size(50, 50) expect(line.bbox()).toEqual(objectContaining({ - x: 50, y: 50, width: 2, height: 2 + width: 50, height: 50, x: 1, y: 2 })) }) - }) - describe('size()', () => { - it('returns itself', () => { - expect(line.size(50, 50)).toBe(line) + it('changes height proportionally', () => { + const canvas = SVG().addTo(container) + const line = canvas.line(1, 2, 3, 4) + line.size(50, null) + expect(line.bbox()).toEqual(objectContaining({ + width: 50, height: 50, x: 1, y: 2 + })) }) - it('sets the size of the line', () => { + it('changes width proportionally', () => { const canvas = SVG().addTo(container) const line = canvas.line(1, 2, 3, 4) - line.size(50, 50) + line.size(null, 50) expect(line.bbox()).toEqual(objectContaining({ width: 50, height: 50, x: 1, y: 2 })) diff --git a/spec/spec/elements/Path.js b/spec/spec/elements/Path.js new file mode 100644 index 0000000..e388fdb --- /dev/null +++ b/spec/spec/elements/Path.js @@ -0,0 +1,188 @@ +/* globals describe, expect, beforeEach, it, spyOn, jasmine, container */ + +import { Path, SVG, PathArray } from '../../../src/main.js' + +const { any, objectContaining } = jasmine + +describe('Path.js', () => { + let path + + beforeEach(() => { + path = new Path() + }) + + describe('()', () => { + it('creates a new object of type Path', () => { + expect(new Path()).toEqual(any(Path)) + }) + + it('sets passed attributes on the element', () => { + expect(new Path({ id: 'foo' }).id()).toBe('foo') + }) + }) + + describe('array()', () => { + it('returns the underlying PathArray', () => { + const array = path.plot('M1 2 3 4').array() + expect(array).toEqual(any(PathArray)) + expect(array).toEqual([ [ 'M', 1, 2 ], [ 'L', 3, 4 ] ]) + }) + }) + + describe('clear()', () => { + it('clears the array cache and returns itself', () => { + const array = path.plot('M1 2 3 4').array() + expect(path.clear()).toBe(path) + expect(array).not.toBe(path._array) + }) + }) + + describe('height()', () => { + it('gets the height of the path', () => { + const canvas = SVG().addTo(container) + const path = canvas.path('M0 0 50, 50') + expect(path.height()).toBe(50) + }) + + it('sets the height of the path and returns itself', () => { + const canvas = SVG().addTo(container) + const path = canvas.path('M0 0 50, 50') + expect(path.height(100)).toBe(path) + expect(path.height()).toBe(100) + }) + }) + + describe('move()', () => { + it('returns itself', () => { + expect(path.move(0, 0)).toBe(path) + }) + + it('moves the path along x and y axis', () => { + const canvas = SVG().addTo(container) + const path = canvas.path('M0 0 50, 50') + path.move(50, 50) + expect(path.bbox()).toEqual(objectContaining({ + x: 50, y: 50, width: 50, height: 50 + })) + }) + }) + + describe('plot()', () => { + it('relays to array() as getter', () => { + const spy = spyOn(path, 'array') + path.plot() + expect(spy).toHaveBeenCalled() + }) + + it('works by passing a string', () => { + const spy = spyOn(path, 'attr') + path.plot('M0 0 50 50') + expect(spy).toHaveBeenCalledWith('d', 'M0 0 50 50') + }) + + it('works with flat array', () => { + const spy = spyOn(path, 'attr') + path.plot([ 'M', 0, 0, 'L', 50, 50 ]) + expect(spy).toHaveBeenCalledWith('d', [ [ 'M', 0, 0 ], [ 'L', 50, 50 ] ]) + }) + + it('works with multi array', () => { + const spy = spyOn(path, 'attr') + path.plot([ [ 'M', 0, 0 ], [ 'L', 50, 50 ] ]) + expect(spy).toHaveBeenCalledWith('d', [ [ 'M', 0, 0 ], [ 'L', 50, 50 ] ]) + }) + + it('works with PathArray', () => { + const spy = spyOn(path, 'attr') + path.plot(new PathArray([ [ 'M', 0, 0 ], [ 'L', 50, 50 ] ])) + expect(spy).toHaveBeenCalledWith('d', [ [ 'M', 0, 0 ], [ 'L', 50, 50 ] ]) + }) + }) + + describe('size()', () => { + it('returns itself', () => { + expect(path.size(50, 50)).toBe(path) + }) + + it('sets the size of the path', () => { + const canvas = SVG().addTo(container) + const path = canvas.path('M0 0 50, 50') + path.size(100, 100) + expect(path.bbox()).toEqual(objectContaining({ + width: 100, height: 100, x: 0, y: 0 + })) + }) + + it('changes height proportionally', () => { + const canvas = SVG().addTo(container) + const path = canvas.path('M0 0 50, 50') + path.size(100, null) + expect(path.bbox()).toEqual(objectContaining({ + width: 100, height: 100, x: 0, y: 0 + })) + }) + + it('changes width proportionally', () => { + const canvas = SVG().addTo(container) + const path = canvas.path('M0 0 50, 50') + path.size(null, 100) + expect(path.bbox()).toEqual(objectContaining({ + width: 100, height: 100, x: 0, y: 0 + })) + }) + }) + + describe('targets()', () => { + it('gets all targets of this path', () => { + const canvas = SVG().addTo(container) + const path = canvas.path('M0 0 50, 50') + const textPath = canvas.text('Hello World').path(path) + expect(path.targets()).toEqual([ textPath ]) + }) + }) + + describe('width()', () => { + it('gets the width of the path', () => { + const canvas = SVG().addTo(container) + const path = canvas.path('M0 0 50, 50') + expect(path.width()).toBe(50) + }) + + it('sets the width of the path and returns itself', () => { + const canvas = SVG().addTo(container) + const path = canvas.path('M0 0 50, 50') + expect(path.width(100)).toBe(path) + expect(path.width()).toBe(100) + }) + }) + + describe('x()', () => { + it('gets the x position of the path', () => { + const canvas = SVG().addTo(container) + const path = canvas.path('M10 10 50, 50') + expect(path.x()).toBe(10) + }) + + it('sets the x position of the path and returns itself', () => { + const canvas = SVG().addTo(container) + const path = canvas.path('M0 0 50, 50') + expect(path.x(100)).toBe(path) + expect(path.x()).toBe(100) + }) + }) + + describe('y()', () => { + it('gets the y position of the path', () => { + const canvas = SVG().addTo(container) + const path = canvas.path('M10 10 50, 50') + expect(path.y()).toBe(10) + }) + + it('sets the y position of the path and returns itself', () => { + const canvas = SVG().addTo(container) + const path = canvas.path('M0 0 50, 50') + expect(path.y(100)).toBe(path) + expect(path.y()).toBe(100) + }) + }) +}) diff --git a/src/elements/Line.js b/src/elements/Line.js index b9982f4..1b72a7d 100644 --- a/src/elements/Line.js +++ b/src/elements/Line.js @@ -24,6 +24,11 @@ export default class Line extends Shape { ]) } + // Move by left top corner + move (x, y) { + return this.attr(this.array().move(x, y).toLine()) + } + // Overwrite native plot() method plot (x1, y1, x2, y2) { if (x1 == null) { @@ -37,11 +42,6 @@ export default class Line extends Shape { return this.attr(x1) } - // Move by left top corner - move (x, y) { - return this.attr(this.array().move(x, y).toLine()) - } - // Set element size to given width and height size (width, height) { var p = proportionalSize(this, width, height) diff --git a/src/elements/Path.js b/src/elements/Path.js index 8f37319..018a8c6 100644 --- a/src/elements/Path.js +++ b/src/elements/Path.js @@ -16,31 +16,26 @@ export default class Path extends Shape { return this._array || (this._array = new PathArray(this.attr('d'))) } - // Plot new path - plot (d) { - return (d == null) ? this.array() - : this.clear().attr('d', typeof d === 'string' ? d : (this._array = new PathArray(d))) - } - // Clear array cache clear () { delete this._array return this } + // Set height of element + height (height) { + return height == null ? this.bbox().height : this.size(this.bbox().width, height) + } + // Move by left top corner move (x, y) { return this.attr('d', this.array().move(x, y)) } - // Move by left top corner over x-axis - x (x) { - return x == null ? this.bbox().x : this.move(x, this.bbox().y) - } - - // Move by left top corner over y-axis - y (y) { - return y == null ? this.bbox().y : this.move(this.bbox().x, y) + // Plot new path + plot (d) { + return (d == null) ? this.array() + : this.clear().attr('d', typeof d === 'string' ? d : (this._array = new PathArray(d))) } // Set element size to given width and height @@ -49,19 +44,25 @@ export default class Path extends Shape { return this.attr('d', this.array().size(p.width, p.height)) } + targets () { + return baseFind('svg textpath [href*="' + this.id() + '"]') + } + // Set width of element width (width) { return width == null ? this.bbox().width : this.size(width, this.bbox().height) } - // Set height of element - height (height) { - return height == null ? this.bbox().height : this.size(this.bbox().width, height) + // Move by left top corner over x-axis + x (x) { + return x == null ? this.bbox().x : this.move(x, this.bbox().y) } - targets () { - return baseFind('svg textpath [href*="' + this.id() + '"]') + // Move by left top corner over y-axis + y (y) { + return y == null ? this.bbox().y : this.move(this.bbox().x, y) } + } // Define morphable array