fix defs and reference, tests for Element

2 files changed, 285 insertions, 0 deletions

diff --git a/spec/spec/elements/Element.js b/spec/spec/elements/Element.js
new file mode 100644
index 0000000..0d7fa55
--- /dev/null
+++ b/spec/spec/elements/Element.js
@@ -0,0 +1,276 @@
+/* globals describe, expect, it, beforeEach, spyOn, jasmine, container */
+
+import { Element, create, Rect, G, SVG } from '../../../src/main.js'
+const { any, objectContaining } = jasmine
+
+describe('Element.js', function () {
+  let element
+
+  beforeEach(() => {
+    element = new Element(create('rect'))
+  })
+
+  describe('()', () => {
+    it('creates a new object of type Element', () => {
+      expect(element).toEqual(any(Element))
+    })
+
+    it('sets passed attributes on the element', () => {
+      expect(new Element(create('rect'), { id: 'foo' }).id()).toBe('foo')
+    })
+
+    it('references the instance on the passed node', () => {
+      expect(element.node.instance).toBe(element)
+    })
+
+    it('sets the dom property to an empty object', () => {
+      expect(element.dom).toEqual({})
+    })
+
+    it('hydrates the dom property with data found in the dom', () => {
+      element.dom = { foo: 'bar' }
+      element.writeDataToDom()
+      expect(new Element(element.node).dom).toEqual({ foo: 'bar' })
+    })
+
+    it('falls back to empty object when attribute is null', () => {
+      element.node.setAttribute('svgjs:data', 'null')
+      expect(new Element(element.node).dom).toEqual({})
+    })
+  })
+
+  describe('center()', () => {
+    it('calls cx and cy with passed parameters and returns itself', () => {
+      const spyCx = spyOn(element, 'cx').and.callThrough()
+      const spyCy = spyOn(element, 'cy').and.callThrough()
+      expect(element.center(1, 2)).toBe(element)
+      expect(spyCx).toHaveBeenCalledWith(1)
+      expect(spyCy).toHaveBeenCalledWith(2)
+    })
+  })
+
+  describe('cx()', () => {
+    it('gets the elements center along the x axis', () => {
+      element.attr({ x: 10, width: 100 })
+      expect(element.cx()).toBe(60)
+    })
+
+    it('centers the element along the x axis and returns itself', () => {
+      element.attr({ x: 10, width: 100 })
+      expect(element.cx(100)).toBe(element)
+      expect(element.attr('x')).toBe(50)
+    })
+  })
+
+  describe('cy()', () => {
+    it('gets the elements center along the y axis', () => {
+      element.attr({ y: 10, height: 100 })
+      expect(element.cy()).toBe(60)
+    })
+
+    it('centers the element along the y axis and returns itself', () => {
+      element.attr({ y: 10, height: 100 })
+      expect(element.cy(100)).toBe(element)
+      expect(element.attr('y')).toBe(50)
+    })
+  })
+
+  describe('defs()', () => {
+    it('returns null if detached', () => {
+      expect(new Rect().defs()).toBe(null)
+      expect(new G().put(new Rect()).defs()).toBe(null)
+    })
+
+    it('calls defs on root node', () => {
+      const canvas = SVG()
+      const rect = canvas.rect(100, 100)
+      const spy = spyOn(canvas, 'defs').and.callThrough()
+      expect(rect.defs()).toBe(canvas.defs())
+      expect(spy.calls.count()).toBe(2)
+    })
+  })
+
+  describe('dmove()', () => {
+    it('calls dx and dy with passed parameters and returns itself', () => {
+      const spyDx = spyOn(element, 'dx').and.callThrough()
+      const spyDy = spyOn(element, 'dy').and.callThrough()
+      expect(element.dmove(1, 2)).toBe(element)
+      expect(spyDx).toHaveBeenCalledWith(1)
+      expect(spyDy).toHaveBeenCalledWith(2)
+    })
+  })
+
+  describe('dx()', () => {
+    it('moves by zero by default', () => {
+      element.attr({ x: 10, width: 100 })
+      expect(element.dx().x()).toBe(10)
+    })
+
+    it('moves the element along the x axis relatively and returns itself', () => {
+      element.attr({ x: 10, width: 100 })
+      expect(element.dx(100)).toBe(element)
+      expect(element.attr('x')).toBe(110)
+    })
+  })
+
+  describe('dy()', () => {
+    it('moves by zero by default', () => {
+      element.attr({ y: 10, height: 100 })
+      expect(element.dy().y()).toBe(10)
+    })
+
+    it('moves the element along the x axis relatively and returns itself', () => {
+      element.attr({ y: 10, height: 100 })
+      expect(element.dy(100)).toBe(element)
+      expect(element.attr('y')).toBe(110)
+    })
+  })
+
+  describe('root()', () => {
+    it('returns the root of this element', () => {
+      const canvas = SVG()
+      const rect = canvas.rect()
+      expect(rect.root()).toBe(canvas)
+    })
+
+    it('returns null if element is detached', () => {
+      expect(new G().put(new Rect()).root()).toBe(null)
+    })
+  })
+
+  describe('getEventHolder()', () => {
+    it('returns itself', () => {
+      expect(element.getEventHolder()).toBe(element)
+    })
+  })
+
+  describe('height()', () => {
+    it('calls attr with height', () => {
+      const spy = spyOn(element, 'attr')
+      element.height(123)
+      expect(spy).toHaveBeenCalledWith('height', 123)
+    })
+  })
+
+  describe('move()', () => {
+    it('calls x and y with passed parameters and returns itself', () => {
+      const spyx = spyOn(element, 'x').and.callThrough()
+      const spyy = spyOn(element, 'y').and.callThrough()
+      expect(element.move(1, 2)).toBe(element)
+      expect(spyx).toHaveBeenCalledWith(1)
+      expect(spyy).toHaveBeenCalledWith(2)
+    })
+  })
+
+  describe('parents()', () => {
+    it('returns array of parents until the passed element or root svg', () => {
+      const canvas = SVG().addTo(container)
+      const group1 = canvas.group().addClass('test')
+      const group2 = group1.group()
+      const group3 = group2.group()
+      const rect = group3.rect(100, 100)
+
+      expect(rect.parents('.test')).toEqual([ group3, group2, group1 ])
+      expect(rect.parents(group2)).toEqual([ group3, group2 ])
+      expect(rect.parents(group1).length).toBe(3)
+      expect(rect.parents()).toEqual([ group3, group2, group1, canvas ])
+    })
+  })
+
+  describe('reference()', () => {
+    it('gets a referenced element from a given attribute', () => {
+      const canvas = SVG().addTo(container)
+      const rect = canvas.defs().rect(100, 100)
+      const use = canvas.use(rect)
+      const mark = canvas.marker(10, 10)
+      const path = canvas.path('M0 0 50 50').marker('end', mark)
+
+      expect(use.reference('href')).toBe(rect)
+      expect(path.reference('marker-end')).toBe(mark)
+      expect(rect.reference('width')).toBe(null)
+    })
+  })
+
+  describe('setData()', () => {
+    it('sets the given data to the dom property and returns itself', () => {
+      expect(element.setData({ foo: 'bar' })).toBe(element)
+      expect(element.dom).toEqual({ foo: 'bar' })
+    })
+  })
+
+  describe('size()', () => {
+    it('calls width and height with passed parameters and returns itself', () => {
+      const spyWidth = spyOn(element, 'width').and.callThrough()
+      const spyHeight = spyOn(element, 'height').and.callThrough()
+      expect(element.size(1, 2)).toBe(element)
+      expect(spyWidth).toHaveBeenCalledWith(objectContaining({ value: 1 }))
+      expect(spyHeight).toHaveBeenCalledWith(objectContaining({ value: 2 }))
+    })
+
+    it('changes height proportionally if null', () => {
+      const canvas = SVG().addTo(container)
+      const element = canvas.rect(100, 100)
+      const spyWidth = spyOn(element, 'width').and.callThrough()
+      const spyHeight = spyOn(element, 'height').and.callThrough()
+      expect(element.size(200, null)).toBe(element)
+      expect(spyWidth).toHaveBeenCalledWith(objectContaining({ value: 200 }))
+      expect(spyHeight).toHaveBeenCalledWith(objectContaining({ value: 200 }))
+    })
+
+    it('changes width proportionally if null', () => {
+      const canvas = SVG().addTo(container)
+      const element = canvas.rect(100, 100)
+      const spyWidth = spyOn(element, 'width').and.callThrough()
+      const spyHeight = spyOn(element, 'height').and.callThrough()
+      expect(element.size(null, 200)).toBe(element)
+      expect(spyWidth).toHaveBeenCalledWith(objectContaining({ value: 200 }))
+      expect(spyHeight).toHaveBeenCalledWith(objectContaining({ value: 200 }))
+    })
+  })
+
+  describe('width()', () => {
+    it('calls attr with width', () => {
+      const spy = spyOn(element, 'attr')
+      element.width(123)
+      expect(spy).toHaveBeenCalledWith('width', 123)
+    })
+  })
+
+  describe('writeDataToDom()', () => {
+    it('removes previously set data', () => {
+      element.node.setAttribute('svgjs:data', JSON.stringify({ foo: 'bar' }))
+      element.writeDataToDom()
+      expect(element.node.getAttribute('svgjs:data')).toBe(null)
+    })
+
+    it('writes data from the dom property into the dom', () => {
+      element.dom = { foo: 'bar' }
+      element.writeDataToDom()
+      expect(element.node.getAttribute('svgjs:data')).toBe(JSON.stringify({ foo: 'bar' }))
+    })
+
+    it('recursively calls writeDataToDom on all children', () => {
+      const g = new G()
+      const rect = g.rect(100, 100)
+      const spy = spyOn(rect, 'writeDataToDom')
+      g.writeDataToDom()
+      expect(spy).toHaveBeenCalled()
+    })
+  })
+
+  describe('x()', () => {
+    it('calls attr with x', () => {
+      const spy = spyOn(element, 'attr')
+      element.x(123)
+      expect(spy).toHaveBeenCalledWith('x', 123)
+    })
+  })
+
+  describe('y()', () => {
+    it('calls attr with y', () => {
+      const spy = spyOn(element, 'attr')
+      element.y(123)
+      expect(spy).toHaveBeenCalledWith('y', 123)
+    })
+  })
+})
diff --git a/spec/spec/types/Box.js b/spec/spec/types/Box.js
index 9735304..34b1e20 100644
--- a/spec/spec/types/Box.js
+++ b/spec/spec/types/Box.js
@@ -174,6 +174,15 @@ describe('Box.js', () => {
       })
     })
 
+    describe('inside()', () => {
+      it('checks if a point is in the elements borders', () => {
+        const canvas = SVG().addTo(container)
+        const rect = canvas.rect(100, 100)
+        expect(rect.inside(50, 50)).toBe(true)
+        expect(rect.inside(101, 101)).toBe(false)
+      })
+    })
+
     describe('viewbox()', () => {
       it('sets the viewbox of the element', () => {
         const canvas = viewbox.call(SVG().addTo(container), 10, 10, 200, 200)