123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- <link rel="stylesheet" href="test.css">
- <title>Zepto Event unit tests</title>
- <script src="../vendor/evidence.js"></script>
- <script src="evidence_runner.js"></script>
- <script>
- // avoid caching
- (function(){
- function load(scripts){
- scripts.split(' ').forEach(function(script){
- document.write('<script src="../src/'+script+'.js?'+(+new Date)+'"></scr'+'ipt>')
- })
- }
- load('zepto event ie')
- })()
- </script>
- </head>
- <body>
- <h1>Zepto Event unit tests</h1>
- <p id="results">
- Running… see browser console for results
- </p>
- <div id="fixtures">
- </div><!-- fixtures -->
- <script>
- (function(){
- function click(el){
- var event = document.createEvent('MouseEvents')
- event.initMouseEvent('click', true, true, document.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null)
- $(el).get(0).dispatchEvent(event)
- }
- Evidence('ProxyTest', {
- testProxyFnContext: function(t){
- var a = {name: 'A', fn: function(n, o){ return this.name + n + o }},
- b = {name: 'B'}
- t.assertEqual('A13', a.fn(1, 3))
- t.assertEqual('B52', $.proxy(a.fn, b)(5, 2))
- },
- testProxyInvalidFn: function(t){
- try {
- $.proxy(null)
- t.fail("shouldn't be here")
- } catch(e) {
- t.assertEqual('TypeError', e.name)
- t.assertEqual("expected function", e.message)
- }
- },
- testProxyContextName: function(t){
- var b = {name: 'B', fn: function(n, o){ return this.name + n + o }},
- oldFn = b.fn
- t.assertEqual('B52', $.proxy(b, 'fn')(5, 2))
- t.assertIdentical(oldFn, b.fn)
- },
- testProxyUndefinedProperty: function(t){
- try {
- $.proxy({}, 'nonexistent')
- t.fail("shouldn't be here")
- } catch(e) {
- t.assertEqual('TypeError', e.name)
- t.assertEqual("expected function", e.message)
- }
- },
- testProxyAdditionalArguments: function(t){
- var a = {name: 'A', fn: function(){ return this.name + [].slice.call(arguments).join('') }}
- t.assertEqual('A123', $.proxy(a.fn, a)(1, 2, 3))
- t.assertEqual('A456', $.proxy(a.fn, a, 4, 5, 6)())
- t.assertEqual('A456123', $.proxy(a.fn, a, 4, 5, 6)(1, 2, 3))
- },
- testProxyContextNameAdditionalArguments: function(t){
- var a = {name: 'A', fn: function(){ return this.name + [].slice.call(arguments).join('') }}
- t.assertEqual('A123', $.proxy(a, 'fn')(1, 2, 3))
- t.assertEqual('A456', $.proxy(a, 'fn', 4, 5, 6)())
- t.assertEqual('A456123', $.proxy(a, 'fn', 4, 5, 6)(1, 2, 3))
- },
- testProxyInvalidProperty: function(t){
- try {
- $.proxy({num:3}, 'num')
- t.fail("shouldn't be here")
- } catch(e) {
- t.assertEqual('TypeError', e.name)
- t.assertEqual("expected function", e.message)
- }
- }
- })
- Evidence('EventTest', {
- setUp: function(){
- this.el = $('<div />').appendTo('#fixtures')
- },
- tearDown: function(){
- this.el.off().remove()
- $([document, document.body]).off()
- },
- testProxiedHandlerCanBeUnboundWithOriginal: function(t){
- var obj = {times:0, fn: function(){ this.times++ }}
- this.el.on('click', $.proxy(obj, 'fn'))
- click(this.el)
- t.assertEqual(1, obj.times)
- this.el.off('click', obj.fn)
- click(this.el)
- t.assertEqual(1, obj.times)
- },
- testOneHandlerCanBeUnboundWithOriginal: function(t){
- var count = 0, fn = function(){ count++ }
- this.el.one('click', fn)
- this.el.off('click', fn)
- click(this.el)
- t.assertEqual(0, count)
- },
- testOneDelegation: function(t){
- var context, count = 0
- $(document).one('click', 'div', function(){ context = this; count++ })
- click(this.el)
- click(this.el)
- t.assertEqual(1, count)
- t.assertIdentical(this.el.get(0), context)
- },
- testOneWithData: function(t){
- var obj = {}, gotObj, count = 0
- $(document).one('click', obj, function(e){ gotObj = e.data; count++ })
- click(this.el)
- click(this.el)
- t.assertEqual(1, count)
- t.assertIdentical(obj, gotObj)
- },
- testHandlerArity: function(t){
- var numArgs
- this.el.on('click', function(){ numArgs = arguments.length })
- click(this.el)
- t.assertEqual(1, numArgs)
- },
- testOnWithObject: function(t){
- var log = []
- this.el.on({ click: function(){ log.push('a') } }).
- on({ click: function(){ log.push('b') } }, null)
- click(this.el)
- t.assertEqual('a b', log.sort().join(' '))
- },
- testOnWithBlankData: function(t){
- var log = [], fn = function(e){ log.push(e.data) }
- this.el
- .on('click', null, fn)
- .on('click', undefined, fn)
- click(this.el)
- t.assertEqual(2, log.length)
- t.assertIdentical(null, log[0])
- t.assertIdentical(undefined, log[1])
- },
- testOffWithObject: function(t){
- var log = [],
- fn = function(){ log.push('a') },
- fn2 = function(){ log.push('b') },
- fn3 = function(){ log.push('c') }
- this.el.on('click', fn).on('click', fn2).on('click', fn3)
- click(this.el)
- t.assertEqual('a b c', log.sort().join(' '))
- this.el.off({ click: fn }).off({ click: fn2 }, null)
- click(this.el)
- t.assertEqual('a b c c', log.sort().join(' '))
- },
- testDelegateEventProperties: function(t){
- var type, target, currentTarget
- $(document).on('click', 'div', function(e){
- type = e.type
- target = e.target
- currentTarget = e.currentTarget
- })
- click($('<span>').appendTo(this.el))
- t.assertEqual('click', type)
- t.assertIdentical(this.el.find('span').get(0), target)
- t.assertIdentical(this.el.get(0), currentTarget)
- },
- testDelegateEventTimestamp: function(t){
- var timestamp
- $(document).on('click', 'div', function(e){
- timestamp = e.timeStamp
- })
- click($('<span>').appendTo(this.el))
- t.assert(timestamp > 0, 'timestamp was ' + timestamp)
- },
- testPreventDefaultWithDelegatedEvent: function(t){
- var isDefaultPrevented, span = $('<span>').appendTo(this.el)
- span.on('click', function(event){
- event.preventDefault()
- })
- $(document).on('click', 'div', function(event){
- isDefaultPrevented = event.isDefaultPrevented()
- })
- click(span)
- t.assertTrue(isDefaultPrevented, "isDefaultPrevented() value invalid for delegate proxy")
- },
- testEventsOnPlainObjects: function (t){
- var obj = {},
- log = [],
- fn1 = function(){ log.push('a') },
- fn2 = function(evt, value){ log.push(value) },
- fn3 = function(evt, value){ log.push("event2") }
- $(obj)
- .on('event', fn1)
- .on('event', fn2)
- .on('event2', fn3)
- $(obj).trigger('event', 'b')
- t.assertEqual('a b', log.join(' '))
- log = []
- $(obj).trigger('event', 'c')
- t.assertEqual('a c', log.join(' '))
- log = []
- $(obj).off('event', fn1)
- $(obj).trigger('event', 'd')
- t.assertEqual('d', log.join(' '))
- log = []
- $(obj).trigger('event2')
- t.assertEqual('event2', log.join(' '))
- },
- testHandlerWithoutData: function(t){
- var gotData
- $(document).on('click', function(event){
- gotData = event.data
- })
- t.assertUndefined(gotData)
- click(this.el)
- t.assertUndefined(gotData)
- },
- testHandlerWithData: function(t){
- var data = {}, gotData, numArgs
- $(document).on('click', data, function(event){
- gotData = event.data
- numArgs = arguments.length
- })
- t.assertUndefined(gotData)
- click(this.el)
- t.assertEqual(1, numArgs)
- t.assertIdentical(data, gotData)
- },
-
- testHandlerWithFunctionAsData: function(t){
- var data = function () { console.log('foo') },
- gotData, numArgs
-
- $(document).on('click', data, function(event){
- gotData = event.data
- numArgs = arguments.length
- })
- t.assertUndefined(gotData)
- click(this.el)
- t.assertEqual(1, numArgs)
- t.assertIdentical(data, gotData)
- },
- testDelegatedWithData: function(t){
- var data = {}, gotData, numArgs
- $(document).on('click', 'div', data, function(event){
- gotData = event.data
- numArgs = arguments.length
- })
- t.assertUndefined(gotData)
- click(this.el)
- t.assertEqual(1, numArgs)
- t.assertIdentical(data, gotData)
- },
- testTriggerWithData: function(t){
- var data = {}, gotData
- $(document).on('myevent', data, function(event){
- gotData = event.data
- })
- t.assertUndefined(gotData)
- this.el.trigger('myevent')
- t.assertIdentical(data, gotData)
- },
- testDelegateEventMethods: function(t){
- var methodName,
- eventMethods = {
- preventDefault: 'isDefaultPrevented',
- stopImmediatePropagation: 'isImmediatePropagationStopped',
- stopPropagation: 'isPropagationStopped'
- },
- eventMethodResults = {}
- $(document).on('click', 'div', function(event){
- $.each(eventMethods, function(methodName, predicate){
- if (event[methodName]) {
- event[methodName]()
- eventMethodResults[predicate] = event[predicate]()
- } else {
- console.warn("method not available: ", methodName)
- }
- })
- })
- click($('<span>').appendTo(this.el))
- $.each(eventMethodResults, function(predicate, value){
- t.assertTrue(value, predicate)
- })
- },
- testIsDefaultPreventedOnAllEvents: function(t){
- var isDefaultPrevented
- $(this.el).on('click', function(event){
- event.preventDefault()
- })
- $(document).on('click', function(event){
- isDefaultPrevented = event.isDefaultPrevented()
- })
- click(this.el)
- t.assertTrue(isDefaultPrevented)
- },
- testIsDefaultPreventedOnOriginalEventAfterDelegate: function(t){
- var isDefaultPrevented
- this.el.on('click', 'span', function(event){
- event.preventDefault()
- })
- $(document).on('click', function(event){
- isDefaultPrevented = event.isDefaultPrevented()
- })
- click($('<span>').appendTo(this.el))
- t.assertTrue(isDefaultPrevented)
- },
- testStopImmediatePropagation: function(t){
- var log = ''
- this.el
- .on('click', function(e){ log += 'A' })
- .on('click', function(e){ log += 'B'; e.stopImmediatePropagation() })
- .on('click', function(e){ log += 'C' })
- $(document).on('click', function(e){ log += 'D' })
- click(this.el)
- t.assertEqual('AB', log)
- },
- testDelegateSelectorLookupDoesNotIncludeParent: function(t){
- var fired = false
- this.el
- .addClass('offender')
- .on('click', '.offender', function(){ fired = true })
- click(this.el)
- t.assertFalse(fired)
- },
- testFalseLiteralAsCallback: function(t){
- var event = $.Event('click')
- this.el.on('click', false)
- this.el.trigger(event)
- t.assertTrue(event.isDefaultPrevented())
- t.assertTrue(event.isPropagationStopped())
- },
- testFalseLiteralAsCallbackForShorthand: function(t){
- var event = $.Event('click')
- this.el.click(false)
- this.el.trigger(event)
- t.assertTrue(event.isDefaultPrevented())
- t.assertTrue(event.isPropagationStopped())
- },
- testUnbindingFalseLiteral: function(t){
- var event = $.Event('click'), fired
- this.el
- .on('click', function() { fired = true })
- .on('click', false)
- .off('click', false)
- this.el.trigger(event)
- t.assertTrue(fired)
- t.assertFalse(event.isDefaultPrevented())
- t.assertFalse(event.isPropagationStopped())
- },
- testFalseLiteralAsCallbackWithDataArgument: function(t){
- var event = $.Event('click')
- this.el.on('click', null, false)
- this.el.trigger(event)
- t.assertTrue(event.isDefaultPrevented())
- t.assertTrue(event.isPropagationStopped())
- },
- testFalseLiteralAsCallbackForDelegation: function(t){
- var span = $('<span>').appendTo(this.el),
- event = $.Event('click')
- this.el.on('click', 'span', false)
- span.trigger(event)
- t.assertTrue(event.isDefaultPrevented())
- t.assertTrue(event.isPropagationStopped())
- },
- testFalseLiteralAsCallbackForDelegationWithDataArgument: function(t){
- var span = $('<span>').appendTo(this.el),
- event = $.Event('click')
- this.el.on('click', 'span', null, false)
- span.trigger(event)
- t.assertTrue(event.isDefaultPrevented())
- t.assertTrue(event.isPropagationStopped())
- }
- })
- })()
- </script>
- </body>
- </html>
|