summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--spec/spec/elements/Dom.js250
-rw-r--r--src/elements/Dom.js28
2 files changed, 261 insertions, 17 deletions
diff --git a/spec/spec/elements/Dom.js b/spec/spec/elements/Dom.js
index 8004317..a1e2a6d 100644
--- a/spec/spec/elements/Dom.js
+++ b/spec/spec/elements/Dom.js
@@ -1,10 +1,254 @@
-/* globals describe, expect, it, beforeEach, jasmine, container */
+/* globals describe, expect, it, beforeEach, spyOn, jasmine, container */
-import { SVG, G, Rect, Svg } from '../../../src/main.js'
+import { SVG, G, Rect, Svg, Dom, List } from '../../../src/main.js'
import { getWindow } from '../../../src/utils/window.js'
-const { any } = jasmine
+const { any, createSpy, objectContaining } = jasmine
describe('Dom.js', function () {
+
+ describe('()', () => {
+ it('creates a new object of type Dom', () => {
+ const rect = new Rect()
+ expect(new Dom(rect.node)).toEqual(any(Dom))
+ })
+
+ it('sets passed attributes on the element', () => {
+ const rect = new Rect()
+ expect(new Dom(rect.node, { id: 'foo' }).id()).toBe('foo')
+ })
+
+ it('references the passed node on the instance', () => {
+ const rect = new Rect()
+ expect(new Dom(rect.node).node).toBe(rect.node)
+ })
+
+ it('sets the type according to the nodename', () => {
+ const rect = new Rect()
+ expect(new Dom(rect.node).type).toBe(rect.node.nodeName)
+ })
+ })
+
+ describe('add()', () => {
+ it('adds an element as child to the end with no second argument given', () => {
+ const g = new G()
+ g.add(new Rect())
+ const rect = new Rect()
+ g.add(rect)
+ expect(g.children().length).toBe(2)
+ expect(g.get(1)).toBe(rect)
+ })
+
+ it('adds an element at the specified position with second argument given', () => {
+ const g = new G()
+ g.add(new Rect())
+ g.add(new Rect())
+ const rect = new Rect()
+ g.add(rect, 1)
+ expect(g.children().length).toBe(3)
+ expect(g.get(1)).toBe(rect)
+ })
+
+ it('handles svg strings', () => {
+ const g = new G()
+ g.add('<rect>')
+ expect(g.children().length).toBe(1)
+ expect(g.get(0)).toEqual(any(Rect))
+ })
+
+ it('handles query selectors', () => {
+ const canvas = SVG().addTo(container)
+ const rect = canvas.rect(100, 100).addClass('test')
+ const g = canvas.group()
+ g.add('.test')
+ expect(g.children().length).toBe(1)
+ expect(g.get(0)).toBe(rect)
+ })
+ })
+
+ describe('addTo()', () => {
+ it('returns the current element', () => {
+ const g = new G()
+ const rect = new Rect()
+ expect(rect.addTo(g)).toBe(rect)
+ })
+
+ it('puts an element innto another element', () => {
+ const g = new G()
+ const rect = new Rect()
+ const spy = spyOn(g, 'put')
+ rect.addTo(g, 0)
+ expect(spy).toHaveBeenCalledWith(rect, 0)
+ })
+
+ it('works with svg strings', () => {
+ const rect = new Rect()
+ rect.addTo('<g>')
+ expect(rect.parent()).toEqual(any(G))
+ })
+
+ it('works with query selector', () => {
+ const canvas = SVG().addTo(container)
+ const rect = canvas.rect(100, 100)
+ const g = canvas.group().addClass('test')
+ rect.addTo('.test')
+ expect(g.children().length).toBe(1)
+ expect(g.get(0)).toBe(rect)
+ })
+ })
+
+ describe('children()', () => {
+ it('returns a List of all children', () => {
+ const g = new G()
+ const rect = g.rect(100, 100)
+ const circle = g.circle(100, 100)
+ const children = g.children()
+ expect(children).toEqual([ rect, circle ])
+ expect(children).toEqual(any(List))
+ })
+ })
+
+ describe('clear()', () => {
+ it('returns the current element', () => {
+ const g = new G()
+ g.rect(100, 100)
+ g.circle(100, 100)
+ expect(g.clear()).toBe(g)
+ })
+
+ it('removes all children from an element', () => {
+ const g = new G()
+ g.rect(100, 100)
+ g.circle(100, 100)
+ g.clear()
+ expect(g.children()).toEqual([])
+ })
+ })
+
+ describe('clone()', () => {
+ it('clones the current element and returns it', () => {
+ const rect = new Rect()
+ const clone = rect.clone()
+ expect(rect).not.toBe(clone)
+ expect(clone).toEqual(any(Rect))
+ expect(clone.type).toBe(rect.type)
+ })
+
+ it('also clones the children by default', () => {
+ const group = new G()
+ const rect = group.rect(100, 100)
+ const clone = group.clone()
+ expect(clone.get(0)).not.toBe(rect)
+ expect(clone.get(0)).toEqual(any(Rect))
+ })
+
+ it('does not clone the children when passing false', () => {
+ const group = new G()
+ group.rect(100, 100)
+ const clone = group.clone(false)
+ expect(clone.children()).toEqual([])
+ })
+
+ it('assigns a new id to the element and to child elements', () => {
+ const group = new G().id('group')
+ const rect = group.rect(100, 100).id('rect')
+ const clone = group.clone()
+ expect(clone.get(0).id()).not.toBe(rect.id())
+ expect(clone.id()).not.toBe(group.id())
+ })
+ })
+
+ describe('each()', () => {
+ it('iterates over all children and executes the passed function on then', () => {
+ const group = new G()
+ const group2 = group.group()
+ const circle = group.circle(100, 100)
+ const spy = createSpy('each')
+ group.each(spy)
+
+ expect(spy.calls.all()).toEqual([
+ objectContaining({ object: group2, args: [ 0, [ group2, circle ] ] }),
+ objectContaining({ object: circle, args: [ 1, [ group2, circle ] ] })
+ ])
+ })
+
+ it('iterates over all children recursively and executes the passed function on then when deep is true', () => {
+ const group = new G()
+ const group2 = group.group()
+ const rect = group2.rect(100, 100)
+ const circle = group.circle(100, 100)
+ const spy = createSpy('each')
+ group.each(spy, true)
+
+ expect(spy.calls.all()).toEqual([
+ objectContaining({ object: group2, args: [ 0, [ group2, circle ] ] }),
+ objectContaining({ object: rect, args: [ 0, [ rect ] ] }),
+ objectContaining({ object: circle, args: [ 1, [ group2, circle ] ] })
+ ])
+ })
+ })
+
+ describe('element()', () => {
+ it('creates an element of given type and appends it to the current element', () => {
+ const g = new G()
+ const el = g.element('title')
+ expect(el).toEqual(any(Dom))
+ expect(el.type).toBe('title')
+ })
+
+ it('sets the specified attributes passed as second argument', () => {
+ const g = new G()
+ const el = g.element('title', { id: 'foo' })
+ expect(el.id()).toBe('foo')
+ })
+ })
+
+ describe('first()', () => {
+ it('returns the first child', () => {
+ const g = new G()
+ const rect = g.rect(100, 100)
+ g.circle(100, 100)
+ expect(g.first()).toBe(rect)
+ })
+ })
+
+ describe('get()', () => {
+ it('returns the child at the given position', () => {
+ const g = new G()
+ const rect = g.rect(100, 100)
+ const circle = g.circle(100, 100)
+ expect(g.get(0)).toBe(rect)
+ expect(g.get(1)).toBe(circle)
+ })
+ })
+
+ describe('getEventHolder()', () => {
+ it('returns the node because it holds all events on the object', () => {
+ const dom = new Dom({})
+ expect(dom.getEventHolder()).toBe(dom.node)
+ })
+ })
+
+ describe('getEventTarget()', () => {
+ it('returns the node because it is the target of the event', () => {
+ const dom = new Dom({})
+ expect(dom.getEventTarget()).toBe(dom.node)
+ })
+ })
+
+ describe('has()', () => {
+ it('returns true if the element has the passed element as child', () => {
+ const g = new G()
+ const rect = g.rect(100, 100)
+ expect(g.has(rect)).toBe(true)
+ })
+
+ it('returns false if the element hasn\'t the passed element as child', () => {
+ const g = new G()
+ const rect = new Rect()
+ expect(g.has(rect)).toBe(false)
+ })
+ })
+
describe('parent()', () => {
var canvas, rect, group1, group2
diff --git a/src/elements/Dom.js b/src/elements/Dom.js
index c523687..0180c78 100644
--- a/src/elements/Dom.js
+++ b/src/elements/Dom.js
@@ -45,8 +45,8 @@ export default class Dom extends EventTarget {
}
// Add element to given container and return self
- addTo (parent) {
- return makeInstance(parent).put(this)
+ addTo (parent, i) {
+ return makeInstance(parent).put(this, i)
}
// Returns all child elements
@@ -67,12 +67,12 @@ export default class Dom extends EventTarget {
}
// Clone element
- clone () {
+ clone (deep = true) {
// write dom data to the dom so the clone can pickup the data
this.writeDataToDom()
// clone element and assign new id
- return assignNewId(this.node.cloneNode(true))
+ return assignNewId(this.node.cloneNode(deep))
}
// Iterates over all children and invokes a given block
@@ -91,8 +91,8 @@ export default class Dom extends EventTarget {
return this
}
- element (nodeName) {
- return this.put(new Dom(create(nodeName)))
+ element (nodeName, attrs) {
+ return this.put(new Dom(create(nodeName), attrs))
}
// Get first child
@@ -125,7 +125,7 @@ export default class Dom extends EventTarget {
this.node.id = eid(this.type)
}
- // dont't set directly width this.node.id to make `null` work correctly
+ // dont't set directly with this.node.id to make `null` work correctly
return this.attr('id', id)
}
@@ -174,8 +174,8 @@ export default class Dom extends EventTarget {
}
// Add element to given container and return container
- putIn (parent) {
- return makeInstance(parent).add(this)
+ putIn (parent, i) {
+ return makeInstance(parent).add(this, i)
}
// Remove element
@@ -213,11 +213,6 @@ export default class Dom extends EventTarget {
return this
}
- // Return id on string conversion
- toString () {
- return this.id()
- }
-
// Import raw svg
svg (svgOrFn, outerHTML) {
var well, len, fragment
@@ -296,6 +291,11 @@ export default class Dom extends EventTarget {
: this.add(fragment)
}
+ // Return id on string conversion
+ toString () {
+ return this.id()
+ }
+
words (text) {
// This is faster than removing all children and adding a new one
this.node.textContent = text
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-20 20:19:12 +0000