added Fragment, completed Dom Tests, fixed `matches()` for document fragments

3 files changed, 383 insertions, 8 deletions

diff --git a/spec/spec/elements/Dom.js b/spec/spec/elements/Dom.js
index a1e2a6d..6689822 100644
--- a/spec/spec/elements/Dom.js
+++ b/spec/spec/elements/Dom.js
@@ -1,6 +1,6 @@
 /* globals describe, expect, it, beforeEach, spyOn, jasmine, container */
 
-import { SVG, G, Rect, Svg, Dom, List } from '../../../src/main.js'
+import { SVG, G, Rect, Svg, Dom, List, Fragment, Circle, Tspan } from '../../../src/main.js'
 import { getWindow } from '../../../src/utils/window.js'
 const { any, createSpy, objectContaining } = jasmine
 
@@ -63,6 +63,16 @@ describe('Dom.js', function () {
       expect(g.children().length).toBe(1)
       expect(g.get(0)).toBe(rect)
     })
+
+    it('handles a node', () => {
+      const g = new G()
+      const rect = new Rect()
+      const node = rect.node
+      delete rect.instance
+      g.add(node)
+      expect(g.children().length).toBe(1)
+      expect(g.get(0)).toEqual(any(Rect))
+    })
   })
 
   describe('addTo()', () => {
@@ -249,6 +259,47 @@ describe('Dom.js', function () {
     })
   })
 
+  describe('id()', () => {
+    it('returns current element when called as setter', () => {
+      const g = new G()
+      expect(g.id('asd')).toBe(g)
+    })
+
+    it('sets the id with argument given', () => {
+      expect(new G().id('foo').node.id).toBe('foo')
+    })
+
+    it('gets the id when no argument given', () => {
+      const g = new G({ id: 'foo' })
+      expect(g.id()).toBe('foo')
+    })
+
+    it('generates an id on getting if none is set', () => {
+      const g = new G()
+      expect(g.node.id).toBe('')
+      g.id()
+      expect(g.node.id).not.toBe('')
+    })
+  })
+
+  describe('index()', () => {
+    it('gets the position of the passed child', () => {
+      const g = new G()
+      g.rect(100, 100)
+      const rect = g.rect(100, 100)
+      expect(g.index(rect)).toBe(1)
+    })
+  })
+
+  describe('last()', () => {
+    it('gets the last child of the element', () => {
+      const g = new G()
+      g.rect(100, 100)
+      const rect = g.rect(100, 100)
+      expect(g.last()).toBe(rect)
+    })
+  })
+
   describe('parent()', () => {
     var canvas, rect, group1, group2
 
@@ -282,14 +333,10 @@ describe('Dom.js', function () {
       expect(rect.parent('.not-there')).toBe(null)
     })
 
-    it('returns null if parent is #document', () => {
-      // cant test that here
-    })
-
-    it('returns null if parent is #document-fragment', () => {
+    it('returns Dom if parent is #document-fragment', () => {
       const fragment = getWindow().document.createDocumentFragment()
       const svg = new Svg().addTo(fragment)
-      expect(svg.parent()).toBe(null)
+      expect(svg.parent()).toEqual(any(Dom))
     })
 
     it('returns html parents, too', () => {
@@ -297,6 +344,263 @@ describe('Dom.js', function () {
     })
   })
 
+  describe('put()', () => {
+    it('calls add() but returns the added element instead', () => {
+      const g = new G()
+      const rect = new Rect()
+      const spy = spyOn(g, 'add').and.callThrough()
+      expect(g.put(rect, 0)).toBe(rect)
+      expect(spy).toHaveBeenCalledWith(rect, 0)
+    })
+
+    it('creates object from svg string', () => {
+      const g = new G()
+      const rect = '<rect>'
+      const spy = spyOn(g, 'add').and.callThrough()
+      const ret = g.put(rect, 0)
+      expect(ret).toEqual(any(Rect))
+      expect(spy).toHaveBeenCalledWith(ret, 0)
+    })
+
+    it('works with a query selector', () => {
+      const canvas = SVG().addTo(container)
+      const rect = canvas.rect().addClass('test')
+      const g = canvas.group()
+      const spy = spyOn(g, 'add').and.callThrough()
+      const ret = g.put('.test', 0)
+      expect(ret).toEqual(rect)
+      expect(spy).toHaveBeenCalledWith(rect, 0)
+    })
+  })
+
+  describe('putIn()', () => {
+    it('calls add on the given parent', () => {
+      const g = new G()
+      const rect = new Rect()
+      const spy = spyOn(g, 'add')
+      rect.putIn(g, 0)
+      expect(spy).toHaveBeenCalledWith(rect, 0)
+    })
+
+    it('returns the passed element', () => {
+      const g = new G()
+      const rect = new Rect()
+      expect(rect.putIn(g, 0)).toBe(g)
+    })
+
+    it('returns an instance when svg string given', () => {
+      const g = '<g>'
+      const rect = new Rect()
+      const ret = rect.putIn(g)
+      expect(ret).toEqual(any(G))
+      expect(ret.children()).toEqual([ rect ])
+    })
+
+    it('works with a query selector', () => {
+      const canvas = SVG().addTo(container)
+      const g = canvas.group().addClass('test')
+      const rect = canvas.rect(100, 100)
+      const ret = rect.putIn('.test')
+      expect(ret).toBe(g)
+      expect(g.children()).toEqual([ rect ])
+    })
+  })
+
+  describe('remove()', () => {
+    it('returns the removed element', () => {
+      const canvas = SVG().addTo(container)
+      const rect = canvas.rect(100, 100)
+      expect(rect.remove()).toBe(rect)
+    })
+
+    it('removes the element from the parent', () => {
+      const canvas = SVG().addTo(container)
+      const rect = canvas.rect(100, 100)
+      expect(canvas.children()).toEqual([ rect ])
+      rect.remove()
+      expect(canvas.children()).toEqual([])
+    })
+
+    it('is a noop when element is not attached to the dom', () => {
+      const rect = new Rect()
+      expect(rect.remove()).toBe(rect)
+    })
+
+    it('also works when direct child of document-fragment', () => {
+      const fragment = new Fragment()
+      const rect = fragment.rect(100, 100)
+      expect(fragment.children()).toEqual([ rect ])
+      expect(rect.remove()).toBe(rect)
+      expect(fragment.children()).toEqual([])
+    })
+  })
+
+  describe('removeElement()', () => {
+    it('returns itself', () => {
+      const g = new G()
+      const rect = g.rect(100, 100)
+      expect(g.removeElement(rect)).toBe(g)
+    })
+
+    it('removes the given child', () => {
+      const g = new G()
+      const rect = g.rect(100, 100)
+      expect(g.removeElement(rect).children()).toEqual([])
+    })
+
+    it('throws if the given element is not a child', () => {
+      const g = new G()
+      const rect = new Rect()
+      try {
+        g.removeElement(rect)
+      } catch (e) {
+        expect(e).toEqual(objectContaining({ code: 8 }))
+      }
+    })
+  })
+
+  describe('replace()', () => {
+    it('returns the new element', () => {
+      const g = new G()
+      const rect = g.rect(100, 100)
+      const circle = new Circle()
+      expect(rect.replace(circle)).toBe(circle)
+    })
+
+    it('replaces the child at the correct position', () => {
+      const g = new G()
+      const rect1 = g.rect(100, 100)
+      const rect2 = g.rect(100, 100)
+      const rect3 = g.rect(100, 100)
+      const circle = new Circle()
+      rect2.replace(circle)
+      expect(g.children()).toEqual([ rect1, circle, rect3 ])
+    })
+
+    it('also works without a parent', () => {
+      const rect = new Rect()
+      const circle = new Circle()
+      expect(rect.replace(circle)).toBe(circle)
+    })
+  })
+
+  describe('round()', () => {
+    it('rounds all attributes whose values are numbers to two decimals by default', () => {
+      const rect = new Rect({ id: 'foo', x: 10.678, y: 3, width: 123.456 })
+      expect(rect.round().attr()).toEqual({ id: 'foo', x: 10.68, y: 3, width: 123.46 })
+    })
+
+    it('rounds all attributes whose values are numbers to the passed precision', () => {
+      const rect = new Rect({ id: 'foo', x: 10.678, y: 3, width: 123.456 })
+      expect(rect.round(1).attr()).toEqual({ id: 'foo', x: 10.7, y: 3, width: 123.5 })
+    })
+
+    it('rounds the given attribues whose values are numbers to the passed precision', () => {
+      const rect = new Rect({ id: 'foo', x: 10.678, y: 3, width: 123.456 })
+      expect(rect.round(1, [ 'id', 'x' ]).attr()).toEqual({ id: 'foo', x: 10.7, y: 3, width: 123.456 })
+    })
+  })
+
+  describe('svg()', () => {
+    describe('as setter', () => {
+      it('returns itself', () => {
+        const g = new G()
+        expect(g.svg('<rect>')).toBe(g)
+      })
+
+      it('imports a single element', () => {
+        const g = new G().svg('<rect>')
+        expect(g.children()).toEqual([ any(Rect) ])
+      })
+
+      it('imports multiple elements', () => {
+        const g = new G().svg('<rect /><circle />')
+        expect(g.children()).toEqual([ any(Rect), any(Circle) ])
+      })
+
+      it('replaces the current element with the imported elements with outerHtml = true', () => {
+        const canvas = new Svg()
+        const g = canvas.group()
+        g.svg('<rect /><circle />', true)
+        expect(canvas.children()).toEqual([ any(Rect), any(Circle) ])
+      })
+
+      it('returns the parent when outerHtml = true', () => {
+        const canvas = new Svg()
+        const g = canvas.group()
+        expect(g.svg('<rect><circle>', true)).toBe(canvas)
+      })
+    })
+
+    describe('as getter', () => {
+      let canvas, group, rect
+
+      beforeEach(() => {
+        canvas = new Svg().removeNamespace()
+        group = canvas.group()
+        rect = group.rect(123.456, 234.567)
+      })
+
+      it('returns the svg string of the element by default', () => {
+        expect(rect.svg()).toBe('<rect width="123.456" height="234.567"></rect>')
+        expect(canvas.svg()).toBe('<svg><g><rect width="123.456" height="234.567"></rect></g></svg>')
+      })
+
+      it('returns the innerHtml when outerHtml = false', () => {
+        expect(rect.svg(false)).toBe('')
+        expect(canvas.svg(false)).toBe('<g><rect width="123.456" height="234.567"></rect></g>')
+      })
+
+      it('runs a function on every exported node', () => {
+        expect(rect.svg((el) => el.round(1))).toBe('<rect width="123.5" height="234.6"></rect>')
+      })
+
+      it('runs a function on every exported node and replaces node with returned node if return value is not falsy', () => {
+        expect(rect.svg((el) => new Circle())).toBe('<circle></circle>')
+        expect(canvas.svg((el) => new G())).toBe('<g></g>') // outer <svg> was replaced by an empty g
+        expect(canvas.svg((el) => {
+          if (el instanceof Rect) return new Circle()
+          if (el instanceof Svg) el.removeNamespace()
+        })).toBe('<svg><g><circle></circle></g></svg>')
+      })
+
+      it('runs a function on every exported node and removes node if return value is false', () => {
+        expect(group.svg(() => false)).toBe('')
+        expect(canvas.svg(() => false)).toBe('')
+        expect(canvas.svg((el) => {
+          if (el instanceof Svg) {
+            el.removeNamespace()
+          } else {
+            return false
+          }
+        })).toBe('<svg></svg>')
+      })
+
+      it('runs a function on every inner node and exports it when outerHtml = false', () => {
+        expect(canvas.svg(() => false), false).toBe('')
+        expect(canvas.svg(() => undefined, false)).toBe('<g><rect width="123.456" height="234.567"></rect></g>')
+      })
+
+    })
+
+  })
+
+  describe('toString()', () => {
+    it('calls id() and returns its result', () => {
+      const rect = new Rect({ id: 'foo' })
+      const spy = spyOn(rect, 'id').and.callThrough()
+      expect(rect.toString()).toBe('foo')
+      expect(spy).toHaveBeenCalled()
+    })
+  })
+
+  describe('words', () => {
+    it('sets the nodes textContent to the given value', () => {
+      const tspan = new Tspan().words('Hello World')
+      expect(tspan.text()).toBe('Hello World')
+    })
+  })
+
   describe('wrap()', function () {
     var canvas
     var rect
@@ -361,4 +665,8 @@ describe('Dom.js', function () {
       expect(rect.parent().parent()).toBe(canvas)
     })
   })
+
+  describe('writeDataToDom()', () => {
+    // not really testable
+  })
 })
diff --git a/spec/spec/elements/Fragment.js b/spec/spec/elements/Fragment.js
new file mode 100644
index 0000000..c0f5f0f
--- /dev/null
+++ b/spec/spec/elements/Fragment.js
@@ -0,0 +1,61 @@
+/* globals describe, expect, it, spyOn, jasmine */
+
+import { Fragment, Dom } from '../../../src/main.js'
+import { getWindow } from '../../../src/utils/window.js'
+
+const { any } = jasmine
+
+describe('Fragment.js', () => {
+
+  describe('()', () => {
+    it('creates a new object of type Fragment', () => {
+      expect(new Fragment()).toEqual(any(Fragment))
+    })
+
+    it('uses passed node instead of creating', () => {
+      const fragment = getWindow().document.createDocumentFragment()
+      expect(new Fragment(fragment).node).toBe(fragment)
+    })
+
+    it('has all Container methods available', () => {
+      const frag = new Fragment()
+      const rect = frag.rect(100, 100)
+
+      expect(frag.children()).toEqual([ rect ])
+    })
+  })
+
+  describe('svg()', () => {
+    describe('as setter', () => {
+      it('calls parent method with outerHtml = false', () => {
+        const frag = new Fragment()
+        const spy = spyOn(Dom.prototype, 'svg').and.callThrough()
+        frag.svg('<rect>', true)
+        expect(spy).toHaveBeenCalledWith('<rect>', false)
+      })
+    })
+
+    describe('as getter', () => {
+      it('calls parent method with outerHtml = false - 1', () => {
+        const frag = new Fragment()
+        const group = frag.group()
+        group.rect(123.456, 234.567)
+        const spy = spyOn(Dom.prototype, 'svg').and.callThrough()
+
+        expect(frag.svg(false)).toBe('<g><rect width="123.456" height="234.567"></rect></g>')
+        expect(spy).toHaveBeenCalledWith(null, false)
+      })
+
+      it('calls parent method with outerHtml = false - 2', () => {
+        const frag = new Fragment()
+        const group = frag.group()
+        group.rect(123.456, 234.567)
+        const spy = spyOn(Dom.prototype, 'svg').and.callThrough()
+
+        expect(frag.svg(null, true)).toBe('<g><rect width="123.456" height="234.567"></rect></g>')
+        expect(spy).toHaveBeenCalledWith(null, false)
+      })
+    })
+
+  })
+})
diff --git a/spec/spec/utils/adopter.js b/spec/spec/utils/adopter.js
index c209980..e544752 100644
--- a/spec/spec/utils/adopter.js
+++ b/spec/spec/utils/adopter.js
@@ -15,7 +15,8 @@ import {
   G,
   Gradient,
   Dom,
-  Path
+  Path,
+  Fragment
 } from '../../../src/main.js'
 
 import { mockAdopt, assignNewId, adopt } from '../../../src/utils/adopter.js'
@@ -120,6 +121,11 @@ describe('adopter.js', () => {
       expect(adopt(rect.node)).toBe(rect)
     })
 
+    it('creates Fragment when document fragment is passed', () => {
+      const frag = getWindow().document.createDocumentFragment()
+      expect(adopt(frag)).toEqual(any(Fragment))
+    })
+
     it('creates instance when node without instance is passed', () => {
       const rect = new Rect()
       const node = rect.node