added tests for Image

diff --git a/spec/SpecRunnerEs6.html b/spec/SpecRunnerEs6.html
index 0f5ff75f8e2bd3726b815cf99f650ebfc1b3ced3..eb6b17baf035a1eac503f06913dffa5a3c36730c 100644 (file)
--- 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 (file)
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 701b5e19536dc61d37a6914a321eadf8d9d6d3a5..6981b0542f7ebd87e9124d95266e1672d00c0539 100644 (file)
--- 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)