diff options
| -rw-r--r-- | spec/SpecRunnerEs6.html | 3 | ||||
| -rw-r--r-- | spec/spec/elements/Image.js | 116 | ||||
| -rw-r--r-- | src/elements/Circle.js | 2 |
3 files changed, 119 insertions, 2 deletions
diff --git a/spec/SpecRunnerEs6.html b/spec/SpecRunnerEs6.html index 0f5ff75..eb6b17b 100644 --- a/spec/SpecRunnerEs6.html +++ b/spec/SpecRunnerEs6.html @@ -28,10 +28,11 @@ <script type="module" src="spec/elements/Element.js"></script> <script type="module" src="spec/elements/ForeignObject.js"></script> <script type="module" src="spec/elements/G.js"></script> + <script type="module" src="spec/elements/Image.js"></script> <script type="module" src="spec/elements/Marker.js"></script> <script type="module" src="spec/elements/Svg.js"></script> <script type="module" src="spec/elements/Text.js"></script> - <script type="module" src="spec/elememts/TextPath.js"></script> + <script type="module" src="spec/elements/TextPath.js"></script> <script type="module" src="spec/elements/Tspan.js"></script> <script type="module" src="spec/modules/core/event.js"></script> <script type="module" src="spec/modules/core/textable.js"></script> diff --git a/spec/spec/elements/Image.js b/spec/spec/elements/Image.js new file mode 100644 index 0000000..5f9b5f5 --- /dev/null +++ b/spec/spec/elements/Image.js @@ -0,0 +1,116 @@ +/* globals describe, expect, it, jasmine */ + +import { Image, Pattern, SVG } from '../../../src/main.js' +import { getWindow } from '../../../src/utils/window.js' + +const { any, objectContaining, createSpy } = jasmine + +const url = 'fixtures/pixel.png' +describe('Image.js', () => { + + describe('()', () => { + it('creates a new object of type Image', () => { + expect(new Image()).toEqual(any(Image)) + }) + + it('sets passed attributes on the element', () => { + expect(new Image({ id: 'foo' }).id()).toBe('foo') + }) + }) + + describe('load()', () => { + it('is a noop when url is falsy and returns itself', () => { + const image = Object.freeze(new Image()) + expect(image.load()).toBe(image) + }) + + it('executes a callback when the image is loaded', (done) => { + const spy = createSpy('image', (e) => { + expect(e.target.complete).toBe(true) + expect(spy.calls.all()).toEqual([ + objectContaining({ object: image, args: [ any(getWindow().Event) ] }) + ]) + done() + }).and.callThrough() + + const image = new Image().load(url, spy) + }) + + it('errors when image cant be loaded', () => { + // cant test this because of jasmine timeouts and browser disconnects + }) + + // it('sets the width and height of the image automatically', () => { + // const image = new Image('spec/fixtures/pixel.png') + // }) + + it('should set width and height automatically if no size is given', (done) => { + const image = new Image().load(url, () => { + expect(image.attr('height')).toBe(1) + expect(image.attr('width')).toBe(1) + done() + }) + }) + + it('should not change with and height when size already set', (done) => { + const image = new Image().load(url, () => { + expect(image.attr('height')).toBe(100) + expect(image.attr('width')).toBe(100) + done() + }).size(100, 100) + }) + + it('changes size of pattern to image size if parent is pattern and size is 0', (done) => { + const pattern = new Pattern().size(0, 0) + new Image().load(url, () => { + expect(pattern.attr('height')).toBe(100) + expect(pattern.attr('width')).toBe(100) + done() + }).size(100, 100).addTo(pattern) + }) + + it('does not change size of pattern if pattern has a size set', (done) => { + const pattern = new Pattern().size(50, 50) + new Image().load(url, () => { + expect(pattern.attr('height')).toBe(50) + expect(pattern.attr('width')).toBe(50) + done() + }).size(100, 100).addTo(pattern) + }) + }) + + describe('Container', () => { + describe('image()', () => { + it('creates image in the container', () => { + const canvas = SVG() + const image = canvas.image(url) + expect(image).toBe(image) + expect(canvas.children()).toEqual([ image ]) + }) + }) + }) + + describe('attribute hook', () => { + it('creates a pattern in defs when value is an image and puts image there', () => { + const canvas = SVG() + const image = new Image() + canvas.rect(100, 100).attr('something', image) + expect(canvas.defs().children()).toEqual([ any(Pattern) ]) + expect(canvas.defs().findOne('image')).toBe(image) + }) + + it('creates an image from image path in defs with pattern when attr is fill', () => { + const canvas = SVG() + canvas.rect(100, 100).attr('fill', url) + expect(canvas.defs().children()).toEqual([ any(Pattern) ]) + expect(canvas.defs().findOne('image').attr('href')).toBe(url) + }) + + it('creates an image from image path in defs with pattern when attr is stroke', () => { + const canvas = SVG() + canvas.rect(100, 100).attr('stroke', url) + expect(canvas.defs().children()).toEqual([ any(Pattern) ]) + expect(canvas.defs().findOne('image').attr('href')).toBe(url) + }) + }) +}) diff --git a/src/elements/Circle.js b/src/elements/Circle.js index 701b5e1..6981b05 100644 --- a/src/elements/Circle.js +++ b/src/elements/Circle.js @@ -38,7 +38,7 @@ extend(Circle, { x, y, cx, cy, width, height }) registerMethods({ Container: { // Create circle element - circle: wrapWithAttrCheck(function (size) { + circle: wrapWithAttrCheck(function (size = 0) { return this.put(new Circle()) .size(size) .move(0, 0) |