event.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6. <link rel="stylesheet" href="test.css">
  7. <title>Zepto Event unit tests</title>
  8. <script src="../vendor/evidence.js"></script>
  9. <script src="evidence_runner.js"></script>
  10. <script>
  11. // avoid caching
  12. (function(){
  13. function load(scripts){
  14. scripts.split(' ').forEach(function(script){
  15. document.write('<script src="../src/'+script+'.js?'+(+new Date)+'"></scr'+'ipt>')
  16. })
  17. }
  18. load('zepto event ie')
  19. })()
  20. </script>
  21. </head>
  22. <body>
  23. <h1>Zepto Event unit tests</h1>
  24. <p id="results">
  25. Running… see browser console for results
  26. </p>
  27. <div id="fixtures">
  28. </div><!-- fixtures -->
  29. <script>
  30. (function(){
  31. function click(el){
  32. var event = document.createEvent('MouseEvents')
  33. event.initMouseEvent('click', true, true, document.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null)
  34. $(el).get(0).dispatchEvent(event)
  35. }
  36. Evidence('ProxyTest', {
  37. testProxyFnContext: function(t){
  38. var a = {name: 'A', fn: function(n, o){ return this.name + n + o }},
  39. b = {name: 'B'}
  40. t.assertEqual('A13', a.fn(1, 3))
  41. t.assertEqual('B52', $.proxy(a.fn, b)(5, 2))
  42. },
  43. testProxyInvalidFn: function(t){
  44. try {
  45. $.proxy(null)
  46. t.fail("shouldn't be here")
  47. } catch(e) {
  48. t.assertEqual('TypeError', e.name)
  49. t.assertEqual("expected function", e.message)
  50. }
  51. },
  52. testProxyContextName: function(t){
  53. var b = {name: 'B', fn: function(n, o){ return this.name + n + o }},
  54. oldFn = b.fn
  55. t.assertEqual('B52', $.proxy(b, 'fn')(5, 2))
  56. t.assertIdentical(oldFn, b.fn)
  57. },
  58. testProxyUndefinedProperty: function(t){
  59. try {
  60. $.proxy({}, 'nonexistent')
  61. t.fail("shouldn't be here")
  62. } catch(e) {
  63. t.assertEqual('TypeError', e.name)
  64. t.assertEqual("expected function", e.message)
  65. }
  66. },
  67. testProxyAdditionalArguments: function(t){
  68. var a = {name: 'A', fn: function(){ return this.name + [].slice.call(arguments).join('') }}
  69. t.assertEqual('A123', $.proxy(a.fn, a)(1, 2, 3))
  70. t.assertEqual('A456', $.proxy(a.fn, a, 4, 5, 6)())
  71. t.assertEqual('A456123', $.proxy(a.fn, a, 4, 5, 6)(1, 2, 3))
  72. },
  73. testProxyContextNameAdditionalArguments: function(t){
  74. var a = {name: 'A', fn: function(){ return this.name + [].slice.call(arguments).join('') }}
  75. t.assertEqual('A123', $.proxy(a, 'fn')(1, 2, 3))
  76. t.assertEqual('A456', $.proxy(a, 'fn', 4, 5, 6)())
  77. t.assertEqual('A456123', $.proxy(a, 'fn', 4, 5, 6)(1, 2, 3))
  78. },
  79. testProxyInvalidProperty: function(t){
  80. try {
  81. $.proxy({num:3}, 'num')
  82. t.fail("shouldn't be here")
  83. } catch(e) {
  84. t.assertEqual('TypeError', e.name)
  85. t.assertEqual("expected function", e.message)
  86. }
  87. }
  88. })
  89. Evidence('EventTest', {
  90. setUp: function(){
  91. this.el = $('<div />').appendTo('#fixtures')
  92. },
  93. tearDown: function(){
  94. this.el.off().remove()
  95. $([document, document.body]).off()
  96. },
  97. testProxiedHandlerCanBeUnboundWithOriginal: function(t){
  98. var obj = {times:0, fn: function(){ this.times++ }}
  99. this.el.on('click', $.proxy(obj, 'fn'))
  100. click(this.el)
  101. t.assertEqual(1, obj.times)
  102. this.el.off('click', obj.fn)
  103. click(this.el)
  104. t.assertEqual(1, obj.times)
  105. },
  106. testOneHandlerCanBeUnboundWithOriginal: function(t){
  107. var count = 0, fn = function(){ count++ }
  108. this.el.one('click', fn)
  109. this.el.off('click', fn)
  110. click(this.el)
  111. t.assertEqual(0, count)
  112. },
  113. testOneDelegation: function(t){
  114. var context, count = 0
  115. $(document).one('click', 'div', function(){ context = this; count++ })
  116. click(this.el)
  117. click(this.el)
  118. t.assertEqual(1, count)
  119. t.assertIdentical(this.el.get(0), context)
  120. },
  121. testOneWithData: function(t){
  122. var obj = {}, gotObj, count = 0
  123. $(document).one('click', obj, function(e){ gotObj = e.data; count++ })
  124. click(this.el)
  125. click(this.el)
  126. t.assertEqual(1, count)
  127. t.assertIdentical(obj, gotObj)
  128. },
  129. testHandlerArity: function(t){
  130. var numArgs
  131. this.el.on('click', function(){ numArgs = arguments.length })
  132. click(this.el)
  133. t.assertEqual(1, numArgs)
  134. },
  135. testOnWithObject: function(t){
  136. var log = []
  137. this.el.on({ click: function(){ log.push('a') } }).
  138. on({ click: function(){ log.push('b') } }, null)
  139. click(this.el)
  140. t.assertEqual('a b', log.sort().join(' '))
  141. },
  142. testOnWithBlankData: function(t){
  143. var log = [], fn = function(e){ log.push(e.data) }
  144. this.el
  145. .on('click', null, fn)
  146. .on('click', undefined, fn)
  147. click(this.el)
  148. t.assertEqual(2, log.length)
  149. t.assertIdentical(null, log[0])
  150. t.assertIdentical(undefined, log[1])
  151. },
  152. testOffWithObject: function(t){
  153. var log = [],
  154. fn = function(){ log.push('a') },
  155. fn2 = function(){ log.push('b') },
  156. fn3 = function(){ log.push('c') }
  157. this.el.on('click', fn).on('click', fn2).on('click', fn3)
  158. click(this.el)
  159. t.assertEqual('a b c', log.sort().join(' '))
  160. this.el.off({ click: fn }).off({ click: fn2 }, null)
  161. click(this.el)
  162. t.assertEqual('a b c c', log.sort().join(' '))
  163. },
  164. testDelegateEventProperties: function(t){
  165. var type, target, currentTarget
  166. $(document).on('click', 'div', function(e){
  167. type = e.type
  168. target = e.target
  169. currentTarget = e.currentTarget
  170. })
  171. click($('<span>').appendTo(this.el))
  172. t.assertEqual('click', type)
  173. t.assertIdentical(this.el.find('span').get(0), target)
  174. t.assertIdentical(this.el.get(0), currentTarget)
  175. },
  176. testDelegateEventTimestamp: function(t){
  177. var timestamp
  178. $(document).on('click', 'div', function(e){
  179. timestamp = e.timeStamp
  180. })
  181. click($('<span>').appendTo(this.el))
  182. t.assert(timestamp > 0, 'timestamp was ' + timestamp)
  183. },
  184. testPreventDefaultWithDelegatedEvent: function(t){
  185. var isDefaultPrevented, span = $('<span>').appendTo(this.el)
  186. span.on('click', function(event){
  187. event.preventDefault()
  188. })
  189. $(document).on('click', 'div', function(event){
  190. isDefaultPrevented = event.isDefaultPrevented()
  191. })
  192. click(span)
  193. t.assertTrue(isDefaultPrevented, "isDefaultPrevented() value invalid for delegate proxy")
  194. },
  195. testEventsOnPlainObjects: function (t){
  196. var obj = {},
  197. log = [],
  198. fn1 = function(){ log.push('a') },
  199. fn2 = function(evt, value){ log.push(value) },
  200. fn3 = function(evt, value){ log.push("event2") }
  201. $(obj)
  202. .on('event', fn1)
  203. .on('event', fn2)
  204. .on('event2', fn3)
  205. $(obj).trigger('event', 'b')
  206. t.assertEqual('a b', log.join(' '))
  207. log = []
  208. $(obj).trigger('event', 'c')
  209. t.assertEqual('a c', log.join(' '))
  210. log = []
  211. $(obj).off('event', fn1)
  212. $(obj).trigger('event', 'd')
  213. t.assertEqual('d', log.join(' '))
  214. log = []
  215. $(obj).trigger('event2')
  216. t.assertEqual('event2', log.join(' '))
  217. },
  218. testHandlerWithoutData: function(t){
  219. var gotData
  220. $(document).on('click', function(event){
  221. gotData = event.data
  222. })
  223. t.assertUndefined(gotData)
  224. click(this.el)
  225. t.assertUndefined(gotData)
  226. },
  227. testHandlerWithData: function(t){
  228. var data = {}, gotData, numArgs
  229. $(document).on('click', data, function(event){
  230. gotData = event.data
  231. numArgs = arguments.length
  232. })
  233. t.assertUndefined(gotData)
  234. click(this.el)
  235. t.assertEqual(1, numArgs)
  236. t.assertIdentical(data, gotData)
  237. },
  238. testHandlerWithFunctionAsData: function(t){
  239. var data = function () { console.log('foo') },
  240. gotData, numArgs
  241. $(document).on('click', data, function(event){
  242. gotData = event.data
  243. numArgs = arguments.length
  244. })
  245. t.assertUndefined(gotData)
  246. click(this.el)
  247. t.assertEqual(1, numArgs)
  248. t.assertIdentical(data, gotData)
  249. },
  250. testDelegatedWithData: function(t){
  251. var data = {}, gotData, numArgs
  252. $(document).on('click', 'div', data, function(event){
  253. gotData = event.data
  254. numArgs = arguments.length
  255. })
  256. t.assertUndefined(gotData)
  257. click(this.el)
  258. t.assertEqual(1, numArgs)
  259. t.assertIdentical(data, gotData)
  260. },
  261. testTriggerWithData: function(t){
  262. var data = {}, gotData
  263. $(document).on('myevent', data, function(event){
  264. gotData = event.data
  265. })
  266. t.assertUndefined(gotData)
  267. this.el.trigger('myevent')
  268. t.assertIdentical(data, gotData)
  269. },
  270. testDelegateEventMethods: function(t){
  271. var methodName,
  272. eventMethods = {
  273. preventDefault: 'isDefaultPrevented',
  274. stopImmediatePropagation: 'isImmediatePropagationStopped',
  275. stopPropagation: 'isPropagationStopped'
  276. },
  277. eventMethodResults = {}
  278. $(document).on('click', 'div', function(event){
  279. $.each(eventMethods, function(methodName, predicate){
  280. if (event[methodName]) {
  281. event[methodName]()
  282. eventMethodResults[predicate] = event[predicate]()
  283. } else {
  284. console.warn("method not available: ", methodName)
  285. }
  286. })
  287. })
  288. click($('<span>').appendTo(this.el))
  289. $.each(eventMethodResults, function(predicate, value){
  290. t.assertTrue(value, predicate)
  291. })
  292. },
  293. testIsDefaultPreventedOnAllEvents: function(t){
  294. var isDefaultPrevented
  295. $(this.el).on('click', function(event){
  296. event.preventDefault()
  297. })
  298. $(document).on('click', function(event){
  299. isDefaultPrevented = event.isDefaultPrevented()
  300. })
  301. click(this.el)
  302. t.assertTrue(isDefaultPrevented)
  303. },
  304. testIsDefaultPreventedOnOriginalEventAfterDelegate: function(t){
  305. var isDefaultPrevented
  306. this.el.on('click', 'span', function(event){
  307. event.preventDefault()
  308. })
  309. $(document).on('click', function(event){
  310. isDefaultPrevented = event.isDefaultPrevented()
  311. })
  312. click($('<span>').appendTo(this.el))
  313. t.assertTrue(isDefaultPrevented)
  314. },
  315. testStopImmediatePropagation: function(t){
  316. var log = ''
  317. this.el
  318. .on('click', function(e){ log += 'A' })
  319. .on('click', function(e){ log += 'B'; e.stopImmediatePropagation() })
  320. .on('click', function(e){ log += 'C' })
  321. $(document).on('click', function(e){ log += 'D' })
  322. click(this.el)
  323. t.assertEqual('AB', log)
  324. },
  325. testDelegateSelectorLookupDoesNotIncludeParent: function(t){
  326. var fired = false
  327. this.el
  328. .addClass('offender')
  329. .on('click', '.offender', function(){ fired = true })
  330. click(this.el)
  331. t.assertFalse(fired)
  332. },
  333. testFalseLiteralAsCallback: function(t){
  334. var event = $.Event('click')
  335. this.el.on('click', false)
  336. this.el.trigger(event)
  337. t.assertTrue(event.isDefaultPrevented())
  338. t.assertTrue(event.isPropagationStopped())
  339. },
  340. testFalseLiteralAsCallbackForShorthand: function(t){
  341. var event = $.Event('click')
  342. this.el.click(false)
  343. this.el.trigger(event)
  344. t.assertTrue(event.isDefaultPrevented())
  345. t.assertTrue(event.isPropagationStopped())
  346. },
  347. testUnbindingFalseLiteral: function(t){
  348. var event = $.Event('click'), fired
  349. this.el
  350. .on('click', function() { fired = true })
  351. .on('click', false)
  352. .off('click', false)
  353. this.el.trigger(event)
  354. t.assertTrue(fired)
  355. t.assertFalse(event.isDefaultPrevented())
  356. t.assertFalse(event.isPropagationStopped())
  357. },
  358. testFalseLiteralAsCallbackWithDataArgument: function(t){
  359. var event = $.Event('click')
  360. this.el.on('click', null, false)
  361. this.el.trigger(event)
  362. t.assertTrue(event.isDefaultPrevented())
  363. t.assertTrue(event.isPropagationStopped())
  364. },
  365. testFalseLiteralAsCallbackForDelegation: function(t){
  366. var span = $('<span>').appendTo(this.el),
  367. event = $.Event('click')
  368. this.el.on('click', 'span', false)
  369. span.trigger(event)
  370. t.assertTrue(event.isDefaultPrevented())
  371. t.assertTrue(event.isPropagationStopped())
  372. },
  373. testFalseLiteralAsCallbackForDelegationWithDataArgument: function(t){
  374. var span = $('<span>').appendTo(this.el),
  375. event = $.Event('click')
  376. this.el.on('click', 'span', null, false)
  377. span.trigger(event)
  378. t.assertTrue(event.isDefaultPrevented())
  379. t.assertTrue(event.isPropagationStopped())
  380. }
  381. })
  382. })()
  383. </script>
  384. </body>
  385. </html>