From 02cbd2998c3c36b88701ce83089df8947be1de9f Mon Sep 17 00:00:00 2001 From: =?utf8?q?Ulrich-Matthias=20Sch=C3=A4fer?= Date: Thu, 9 Apr 2020 21:19:14 +1000 Subject: [PATCH] added test for Gradient --- spec/spec/elements/ClipPath.js | 2 +- spec/spec/elements/Gradient.js | 83 ++++++++++++++++++++++++++++++++ spec/spec/gradient.js | 86 +++++++++++++++++----------------- src/elements/Gradient.js | 42 +++++++---------- src/elements/Stop.js | 10 ++++ src/main.js | 1 + 6 files changed, 156 insertions(+), 68 deletions(-) create mode 100644 spec/spec/elements/Gradient.js diff --git a/spec/spec/elements/ClipPath.js b/spec/spec/elements/ClipPath.js index 6ed6bfe..a476884 100644 --- a/spec/spec/elements/ClipPath.js +++ b/spec/spec/elements/ClipPath.js @@ -32,7 +32,7 @@ describe('ClipPath.js', () => { }) }) - describe('target()', () => { + describe('targets()', () => { it('gets all targets of this clipPath', () => { const canvas = SVG().addTo(container) const clip = canvas.clip() diff --git a/spec/spec/elements/Gradient.js b/spec/spec/elements/Gradient.js new file mode 100644 index 0000000..13e58a7 --- /dev/null +++ b/spec/spec/elements/Gradient.js @@ -0,0 +1,83 @@ +/* globals describe, expect, it, spyOn, jasmine, container */ + +import { Gradient, SVG, Container } from '../../../src/main.js' + +const { any, objectContaining, createSpy } = jasmine + +describe('Gradient.js', () => { + describe('()', () => { + it('creates a new object of type LinearGradient', () => { + const gradient = new Gradient('linear') + expect(gradient).toEqual(any(Gradient)) + expect(gradient.type).toBe('linearGradient') + }) + + it('creates a new object of type RadialGradient', () => { + const gradient = new Gradient('radial') + expect(gradient).toEqual(any(Gradient)) + expect(gradient.type).toBe('radialGradient') + }) + + it('sets passed attributes on the element', () => { + expect(new Gradient('linear', { id: 'foo' }).id()).toBe('foo') + }) + }) + + describe('attr()', () => { + it('relays to parents attr method for any call except transformation', () => { + const gradient = new Gradient('linear') + const spy = spyOn(Container.prototype, 'attr') + gradient.attr(1, 2, 3) + gradient.attr('transform', 2, 3) + + expect(spy).toHaveBeenCalledWith(1, 2, 3) + expect(spy).toHaveBeenCalledWith('gradientTransform', 2, 3) + }) + }) + + describe('bbox()', () => { + it('returns an empty box', () => { + expect(new Gradient('linear').bbox().isNulled()).toBe(true) + }) + }) + + describe('targets()', () => { + it('gets all targets of this gradient', () => { + const canvas = SVG().addTo(container) + const gradient = canvas.gradient('linear') + const rect = canvas.rect(100, 100).fill(gradient) + expect(gradient.targets()).toEqual([ rect ]) + }) + }) + + describe('toString()', () => { + it('calls url() and returns the result', () => { + const gradient = new Gradient('linear') + expect(gradient.toString()).toBe(gradient.url()) + }) + }) + + describe('update()', () => { + it('clears the element', () => { + const gradient = new Gradient('linear') + gradient.stop(0.1, '#fff') + expect(gradient.update().children()).toEqual([]) + }) + + it('executes a function in the context of the gradient', () => { + const gradient = new Gradient('linear') + const spy = createSpy('gradient') + gradient.update(spy) + expect(spy.calls.all()).toEqual([ + objectContaining({ object: gradient, args: [ gradient ] }) + ]) + }) + }) + + describe('url()', () => { + it('returns url(#id)', () => { + const gradient = new Gradient('linear').id('foo') + expect(gradient.url()).toBe('url("#foo")') + }) + }) +}) diff --git a/spec/spec/gradient.js b/spec/spec/gradient.js index cab9142..7280a98 100644 --- a/spec/spec/gradient.js +++ b/spec/spec/gradient.js @@ -1,101 +1,101 @@ -describe('Gradient', function() { +describe('Gradient', function () { var rect, gradient - beforeEach(function() { - rect = draw.rect(100,100) - gradient = draw.gradient('linear', function(add) { + beforeEach(function () { + rect = draw.rect(100, 100) + gradient = draw.gradient('linear', function (add) { add.stop({ offset: 0, color: '#333', opacity: 1 }) add.stop({ offset: 1, color: '#fff', opacity: 1 }) }) - radial = draw.gradient('radial', function(add) { + radial = draw.gradient('radial', function (add) { add.stop({ offset: 0, color: '#333', opacity: 1 }) add.stop({ offset: 1, color: '#fff', opacity: 1 }) }) }) - afterEach(function() { + afterEach(function () { rect.remove() gradient.remove() }) - it('is an instance of SVG.Gradient', function() { + it('is an instance of SVG.Gradient', function () { expect(gradient instanceof SVG.Gradient).toBe(true) }) - it('allows creation of a new gradient without block', function() { + it('allows creation of a new gradient without block', function () { gradient = draw.gradient('linear') expect(gradient.children().length).toBe(0) }) - describe('url()', function() { - it('returns the id of the gradient wrapped in url()', function() { - expect(gradient.url()).toBe('url(#' + gradient.id() + ')') + describe('url()', function () { + it('returns the id of the gradient wrapped in url()', function () { + expect(gradient.url()).toBe('url("#' + gradient.id() + '")') }) }) - - describe('from()', function() { - it('sets fx and fy attribute for radial gradients', function() { + + describe('from()', function () { + it('sets fx and fy attribute for radial gradients', function () { radial.from(7, 10) expect(radial.attr('fx')).toBe(7) expect(radial.attr('fy')).toBe(10) }) - it('sets x1 and y1 attribute for linear gradients', function() { + it('sets x1 and y1 attribute for linear gradients', function () { gradient.from(7, 10) expect(gradient.attr('x1')).toBe(7) expect(gradient.attr('y1')).toBe(10) }) }) - - describe('to()', function() { - it('sets cx and cy attribute for radial gradients', function() { + + describe('to()', function () { + it('sets cx and cy attribute for radial gradients', function () { radial.to(75, 105) expect(radial.attr('cx')).toBe(75) expect(radial.attr('cy')).toBe(105) }) - it('sets x2 and y2 attribute for linear gradients', function() { + it('sets x2 and y2 attribute for linear gradients', function () { gradient.to(75, 105) expect(gradient.attr('x2')).toBe(75) expect(gradient.attr('y2')).toBe(105) }) }) - describe('attr()', function() { - it('will catch transform attribues and convert them to gradientTransform', function() { - expect(gradient.translate(100,100).attr('gradientTransform')).toBe('matrix(1,0,0,1,100,100)') + describe('attr()', function () { + it('will catch transform attribues and convert them to gradientTransform', function () { + expect(gradient.translate(100, 100).attr('gradientTransform')).toBe('matrix(1,0,0,1,100,100)') }) }) - describe('toString()', function() { - it('returns the id of the gradient wrapped in url()', function() { - expect(gradient + '').toBe('url(#' + gradient.id() + ')') + describe('toString()', function () { + it('returns the id of the gradient wrapped in url()', function () { + expect(gradient + '').toBe('url("#' + gradient.id() + '")') }) - it('is called when instance is passed as an attribute value', function() { + it('is called when instance is passed as an attribute value', function () { rect.attr('fill', gradient) - expect(rect.attr('fill')).toBe('url(#' + gradient.id() + ')') + expect(rect.attr('fill')).toBe('url("#' + gradient.id() + '")') }) }) - describe('input values', function() { + describe('input values', function () { var s1, s2 - it('accepts floats', function() { - gradient = draw.gradient('linear', function(add) { + it('accepts floats', function () { + gradient = draw.gradient('linear', function (add) { s1 = add.stop({ offset: 0.12, color: '#333', opacity: 1 }) s2 = add.stop({ offset: 0.93, color: '#fff', opacity: 1 }) }) expect(s1.attr('offset')).toBe(0.12) expect(s2.attr('offset')).toBe(0.93) }) - it('accepts string floats', function() { - gradient = draw.gradient('linear', function(add) { + it('accepts string floats', function () { + gradient = draw.gradient('linear', function (add) { s1 = add.stop({ offset: '0.13', color: '#333', opacity: 1 }) s2 = add.stop({ offset: '0.92', color: '#fff', opacity: 1 }) }) expect(s1.attr('offset')).toBe(0.13) expect(s2.attr('offset')).toBe(0.92) }) - it('accept percentages', function() { - gradient = draw.gradient('linear', function(add) { + it('accept percentages', function () { + gradient = draw.gradient('linear', function (add) { s1 = add.stop({ offset: '14%', color: '#333', opacity: 1 }) s2 = add.stop({ offset: '91%', color: '#fff', opacity: 1 }) }) @@ -104,23 +104,23 @@ describe('Gradient', function() { }) }) - describe('update()', function() { + describe('update()', function () { - it('removes all existing children first', function() { - gradient = draw.gradient('linear', function(add) { + it('removes all existing children first', function () { + gradient = draw.gradient('linear', function (add) { s1 = add.stop({ offset: 0.12, color: '#333', opacity: 1 }) s2 = add.stop({ offset: 0.93, color: '#fff', opacity: 1 }) }) expect(gradient.children().length).toBe(2) - gradient.update(function(add) { + gradient.update(function (add) { s1 = add.stop({ offset: 0.33, color: '#666', opacity: 1 }) s2 = add.stop({ offset: 1, color: '#000', opacity: 1 }) }) expect(gradient.children().length).toBe(2) }) - it('accepts multiple aruments on fixed positions', function() { - gradient = draw.gradient('linear', function(add) { + it('accepts multiple aruments on fixed positions', function () { + gradient = draw.gradient('linear', function (add) { s1 = add.stop(0.11, '#333') s2 = add.stop(0.94, '#fff', 0.5) }) @@ -134,10 +134,10 @@ describe('Gradient', function() { }) - describe('get()', function() { + describe('get()', function () { - it('returns the stop at a given index', function() { - gradient = draw.gradient('linear', function(add) { + it('returns the stop at a given index', function () { + gradient = draw.gradient('linear', function (add) { s1 = add.stop({ offset: 0.12, color: '#333', opacity: 1 }) s2 = add.stop({ offset: 0.93, color: '#fff', opacity: 1 }) }) diff --git a/src/elements/Gradient.js b/src/elements/Gradient.js index d5ae8b7..4e09cbd 100644 --- a/src/elements/Gradient.js +++ b/src/elements/Gradient.js @@ -7,7 +7,6 @@ import { import { registerMethods } from '../utils/methods.js' import Box from '../types/Box.js' import Container from './Container.js' -import Stop from './Stop.js' import baseFind from '../modules/core/selector.js' import * as gradiented from '../modules/core/gradiented.js' @@ -19,9 +18,23 @@ export default class Gradient extends Container { ) } - // Add a color stop - stop (offset, color, opacity) { - return this.put(new Stop()).update(offset, color, opacity) + // custom attr to handle transform + attr (a, b, c) { + if (a === 'transform') a = 'gradientTransform' + return super.attr(a, b, c) + } + + bbox () { + return new Box() + } + + targets () { + return baseFind('svg [fill*="' + this.id() + '"]') + } + + // Alias string conversion to fill + toString () { + return this.url() } // Update gradient @@ -39,26 +52,7 @@ export default class Gradient extends Container { // Return the fill id url () { - return 'url(#' + this.id() + ')' - } - - // Alias string convertion to fill - toString () { - return this.url() - } - - // custom attr to handle transform - attr (a, b, c) { - if (a === 'transform') a = 'gradientTransform' - return super.attr(a, b, c) - } - - targets () { - return baseFind('svg [fill*="' + this.id() + '"]') - } - - bbox () { - return new Box() + return 'url("#' + this.id() + '")' } } diff --git a/src/elements/Stop.js b/src/elements/Stop.js index d258b86..d29090c 100644 --- a/src/elements/Stop.js +++ b/src/elements/Stop.js @@ -1,6 +1,7 @@ import { nodeOrNew, register } from '../utils/adopter.js' import Element from './Element.js' import SVGNumber from '../types/SVGNumber.js' +import { registerMethods } from '../utils/methods.js' export default class Stop extends Element { constructor (node, attrs = node) { @@ -26,4 +27,13 @@ export default class Stop extends Element { } } +registerMethods({ + Gradient: { + // Add a color stop + stop: function (offset, color, opacity) { + return this.put(new Stop()).update(offset, color, opacity) + } + } +}) + register(Stop, 'Stop') diff --git a/src/main.js b/src/main.js index a8da19f..f95ccf5 100644 --- a/src/main.js +++ b/src/main.js @@ -156,6 +156,7 @@ extend(Dom, getMethodsFor('Dom')) extend(Element, getMethodsFor('Element')) extend(Shape, getMethodsFor('Shape')) extend([ Container, Fragment ], getMethodsFor('Container')) +extend(Gradient, getMethodsFor('Gradient')) extend(Runner, getMethodsFor('Runner')) -- 2.39.5