diff options
Diffstat (limited to 'spec')
| -rwxr-xr-x | spec/index.html | 1 | ||||
| -rwxr-xr-x | spec/spec/doc.js | 14 | ||||
| -rw-r--r-- | spec/spec/event.js | 147 | ||||
| -rw-r--r-- | spec/spec/fx.js | 88 |
4 files changed, 215 insertions, 35 deletions
diff --git a/spec/index.html b/spec/index.html index 8896dd0..a40e8d2 100755 --- a/spec/index.html +++ b/spec/index.html @@ -61,6 +61,7 @@ <script type="text/javascript" src="spec/number.js"></script> <script type="text/javascript" src="spec/array.js"></script> <script type="text/javascript" src="spec/hyperlink.js"></script> +<script type="text/javascript" src="spec/fx.js"></script> <script type="text/javascript"> (function() { diff --git a/spec/spec/doc.js b/spec/spec/doc.js index 4312678..beedff7 100755 --- a/spec/spec/doc.js +++ b/spec/spec/doc.js @@ -7,6 +7,10 @@ describe('Doc', function() { it('has a defs element', function() { expect(draw._defs instanceof SVG.Defs).toBe(true) }) + + it('has itself as doc', function() { + expect(draw.doc()).toBe(draw); + }) describe('defs()', function() { it('returns defs element', function(){ @@ -17,4 +21,14 @@ describe('Doc', function() { }) }) + describe('remove()', function() { + it('removes the doc from the dom', function() { + draw.remove() + expect(draw.parent).toBeNull() + expect(document.getElementsByTagName('body')[0].querySelectorAll('svg').length).toBe(1) + draw = SVG(drawing).size(100,100); + expect(document.getElementsByTagName('body')[0].querySelectorAll('svg').length).toBe(2) + }) + }) + })
\ No newline at end of file diff --git a/spec/spec/event.js b/spec/spec/event.js index 45db382..eb167d5 100644 --- a/spec/spec/event.js +++ b/spec/spec/event.js @@ -1,9 +1,11 @@ describe('Event', function() { var rect, context , toast = null - , action = function() { + , fruitsInDetail = null, + action = function(e) { toast = 'ready' context = this + fruitsInDetail = e.detail || null } beforeEach(function() { @@ -287,35 +289,65 @@ describe('Event', function() { }) } - +/* This function is no longer needed and only exists for compatibility issues */ +/* describe('registerEvent()', function() { it('creates a new custom event and stores it in the events object', function() { - expect(SVG.events['my:event']).toBeUndefined() - SVG.registerEvent('my:event') - expect(SVG.events['my:event'] instanceof CustomEvent).toBeTruthy() + expect(SVG.events['event']).toBeUndefined() + SVG.registerEvent('event') + expect(SVG.events['event'] instanceof CustomEvent).toBeTruthy() }) }) - +*/ describe('on()', function() { - beforeEach(function() { - SVG.registerEvent('my:event') - }) - it('attaches and event to the element', function() { - dispatchEvent(rect.on('my:event', action), 'my:event') + dispatchEvent(rect.on('event', action), 'event') expect(toast).toBe('ready') }) + it('attaches multiple handlers on different element', function() { + var listenerCnt = SVG.listeners.length + + var rect2 = draw.rect(100,100); + var rect3 = draw.rect(100,100); + + rect.on('event', action) + rect2.on('event', action) + rect3.on('event', function(){ butter = 'melting' }) + rect3.on('event', action) + + expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['*']).length).toBe(1) // 1 listener on rect + expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect3.node)]['event']['*']).length).toBe(2) // 2 listener on rect3 + expect(SVG.listeners.length).toBe(listenerCnt + 3) // added listeners on 3 different elements + }) + if('attaches a handler to a namespaced event', function(){ + var listenerCnt = SVG.listeners.length + + var rect2 = draw.rect(100,100); + var rect3 = draw.rect(100,100); + + rect.on('event.namespace1', action) + rect2.on('event.namespace2', action) + rect3.on('event.namespace3', function(){ butter = 'melting' }) + rect3.on('event', action) + + expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['*'])).toBeUndefined() // no global listener on rect + expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['namespace1']).length).toBe( 1) // 1 namespaced listener on rect + expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect2.node)]['event']['namespace2']).length).toBe(1) // 1 namespaced listener on rect + expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect3.node)]['event']['*']).length).toBe(1) // 1 gobal listener on rect3 + expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect3.node)]['event']['namespace3']).length).toBe(1) // 1 namespaced listener on rect3 + expect(SVG.listeners.length).toBe(listenerCnt + 3) // added listeners on 3 different elements + }) it('applies the element as context', function() { - dispatchEvent(rect.on('my:event', action), 'my:event') + dispatchEvent(rect.on('event', action), 'event') expect(context).toBe(rect) }) it('stores the listener for future reference', function() { - rect.on('my:event', action) - expect(SVG.listeners[rect.node]['my:event'][action]).not.toBeUndefined() + rect.on('event', action) + expect(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['*'][action]).not.toBeUndefined() }) it('returns the called element', function() { - expect(rect.on('my:event', action)).toBe(rect) + expect(rect.on('event', action)).toBe(rect) }) }) @@ -324,57 +356,102 @@ describe('Event', function() { beforeEach(function() { butter = null - SVG.registerEvent('my:event') }) - it('detaches a specific event listener', function() { - rect.on('my:event', action) - rect.off('my:event', action) - dispatchEvent(rect, 'my:event') + it('detaches a specific event listener, all other still working', function() { + rect2 = draw.rect(100,100); + rect3 = draw.rect(100,100); + + rect.on('event', action) + rect2.on('event', action) + rect3.on('event', function(){ butter = 'melting' }) + + rect.off('event', action) + + expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['*']).length).toBe(0) + + dispatchEvent(rect, 'event') expect(toast).toBeNull() - expect(SVG.listeners[rect.node]['my:event'][action]).toBeUndefined() + + dispatchEvent(rect2, 'event') + expect(toast).toBe('ready') + + dispatchEvent(rect3, 'event') + expect(butter).toBe('melting') + + expect(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['*'][action]).toBeUndefined() + }) + it('detaches a specific namespaced event listener, all other still working', function() { + rect2 = draw.rect(100,100); + rect3 = draw.rect(100,100); + + rect.on('event.namespace', action) + rect2.on('event.namespace', action) + rect3.on('event.namespace', function(){ butter = 'melting' }) + + rect.off('event.namespace', action) + + expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['namespace']).length).toBe(0) + + dispatchEvent(rect, 'event') + expect(toast).toBeNull() + + dispatchEvent(rect2, 'event') + expect(toast).toBe('ready') + + dispatchEvent(rect3, 'event') + expect(butter).toBe('melting') + + expect(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['namespace'][action]).toBeUndefined() }) it('detaches all listeners for an event without a listener given', function() { - rect.on('my:event', action) - rect.on('my:event', function() { butter = 'melting' }) - rect.off('my:event') - dispatchEvent(rect, 'my:event') + rect.on('event', action) + rect.on('event.namespace', function() { butter = 'melting'; console.log('called'); }) + rect.off('event') + + dispatchEvent(rect, 'event') expect(toast).toBeNull() expect(butter).toBeNull() - expect(SVG.listeners[rect.node]['my:event']).toBeUndefined() + expect(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']).toBeUndefined() }) it('detaches all listeners without an argument', function() { - rect.on('my:event', action) + rect.on('event', action) rect.on('click', function() { butter = 'melting' }) rect.off() - dispatchEvent(rect, 'my:event') + dispatchEvent(rect, 'event') dispatchEvent(rect, 'click') expect(toast).toBeNull() expect(butter).toBeNull() - expect(SVG.listeners[rect.node]).toBeUndefined() + expect(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]).toBeUndefined() }) it('returns the called element', function() { - expect(rect.off('my:event', action)).toBe(rect) + expect(rect.off('event', action)).toBe(rect) }) }) describe('fire()', function() { beforeEach(function() { - SVG.registerEvent('my:event') - rect.on('my:event', action) + rect.on('event', action) }) it('fires an event for the element', function() { expect(toast).toBeNull() - rect.fire('my:event') + rect.fire('event') expect(toast).toBe('ready') + expect(fruitsInDetail).toBe(null) }) it('returns the called element', function() { - expect(rect.fire('my:event')).toBe(rect) + expect(rect.fire('event')).toBe(rect) + }) + it('fires event with additional data', function() { + expect(fruitsInDetail).toBeNull() + rect.fire('event', {apple:1}) + expect(fruitsInDetail).not.toBe(null) + expect(fruitsInDetail.apple).toBe(1) }) - }) + }) diff --git a/spec/spec/fx.js b/spec/spec/fx.js new file mode 100644 index 0000000..e1b15a2 --- /dev/null +++ b/spec/spec/fx.js @@ -0,0 +1,88 @@ +describe('FX', function() { + var rect, fx, flag1 = flag2 = false + + beforeEach(function() { + rect = draw.rect(100,100).move(100,100) + fx = rect.animate(500) + flag1 = flag2 = false + }) + + it('creates an instance of SVG.FX', function() { + expect(fx instanceof SVG.FX).toBe(true) + }) + + it('animates the x/y-attr', function() { + + runs(function(){ + fx.move(200,200) + + setTimeout(function(){ + expect(rect.x()).toBeGreaterThan(100) + expect(rect.y()).toBeGreaterThan(100) + flag1 = true + }, 250) + + setTimeout(function(){ + expect(rect.x()).toBe(200) + expect(rect.y()).toBe(200) + flag2 = true + }, 600) + }) + + waitsFor(function() { + return flag1; + }, "x/y should be animated", 300); + + waitsFor(function() { + return flag2; + }, "x/y should be animated", 700); + + }) + + it('animates transformations / sets rotation-center', function() { + + runs(function(){ + + fx.transform({ + rotation: 30, + cx: 10, + cy: 10, + x: 100, + scaleX: 0.8, + skewX: 1.2 + }) + + setTimeout(function(){ + var trans = rect.transform() + expect(trans.rotation).toBeGreaterThan(0) + expect(trans.cx).toBe(10) + expect(trans.cy).toBe(10) + expect(trans.x).toBeGreaterThan(0) + expect(trans.scaleX).toBeLessThan(1) + expect(trans.skewX).toBeGreaterThan(0) + flag1 = true + }, 250) + + setTimeout(function(){ + var trans = rect.transform() + expect(trans.rotation).toBe(30) + expect(trans.cx).toBe(10) + expect(trans.cy).toBe(10) + expect(trans.x).toBe(100) + expect(trans.scaleX).toBe(0.8) + expect(trans.skewX).toBe(1.2) + flag2 = true + }, 600) + }) + + waitsFor(function() { + return flag1; + }, "transformation should be animated", 300); + + waitsFor(function() { + return flag2; + }, "transformation should be animated", 700); + + }) + +})
\ No newline at end of file |