Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
2635 lines (2116 sloc) 88.6 KB
<!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 DOM unit tests</title>
<script src="../vendor/evidence.js"></script>
<script src="evidence_runner.js"></script>
<script src="../src/polyfill.js"></script>
<script src="../src/zepto.js"></script>
<script src="../src/event.js"></script>
<!--<script src="../dist/zepto.min.js"></script>-->
<style>
#get_style_element {
font-size: 48px;
color: black;
}
</style>
</head>
<body>
<h1>Zepto DOM unit tests</h1>
<p id="results">
Running… see browser console for results
</p>
<div id="fixtures">
<div id="some_element"></div>
<p>
<span class="yay">yay</span>
<span></span>
<span class="nay" id="nay">nay</span>
</p>
<div id="toggle_element"></div>
<div id="get_style_wrapper" style="font-size: 16px;">
<div id="get_style_element">Derp</div>
</div>
<div class="replacewith">
<div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
</div>
<div id="attr_1" data-id="someId1" data-name="someName1"></div>
<div id="attr_2" data-id="someId2" data-name="someName2"></div>
<div id="attr_remove" data-name="boom"></div>
<form><input id="attr_val" value="Hello World"></form>
<div id="data_attr" data-foo="bar" data-foo-bar="baz" data-empty></div>
<form id="attr_with_text_input">
<input value="Default input">
<input type="text" value="Text input">
<input type="email" value="Email input">
<input type="search" value="Search input">
</form>
<div class="htmltest" id="htmltest1"></div>
<div class="htmltest" id="htmltest2"></div>
<div id="htmltest3"></div>
<table id="htmltest4"></table>
<div id="texttest1" class="texttest"><span>Here <strong>is</strong> some text</span></div>
<div id="texttest2" class="texttest">And <em>some more</em></div>
<div id="beforeafter_container"><div id="beforeafter"></div></div>
<div id="appendtoprependto_container"><div id="appendtoprependto"></div></div>
<div id="insertbeforeinsertafter_container"><div id="insertbeforeinsertafter"></div></div>
<div id="empty_test">
<div id="empty_1"></div>
<div id="empty_2"></div>
<div id="empty_3"></div>
<span id="empty_4">test</span>
</div>
<p id="find1">
<span class="findme">1</span>
<span class="findme">2</span>
<b>3<span class="findme">4</span></b>
<span class="findme">5<span>6</span></span>
</p>
<p id="find2">
<span>1</span>
<span>2</span>
<span>3<span>4</span></span>
<span>5<span>6</span></span>
</p>
<div id="eachtest">
<span></span><b></b><br>
</div>
<div style="position:absolute;width:100px;height:50px" id="offset">test</div>
<ul id="parents">
<li id="li1">
<ul id="nested">
<li id="li2">one</li>
<li>two</li>
<li>three</li>
</ul>
<ul>
<li></li>
</ul>
</li>
</ul>
<ul id="childrenTest">
<li class="child one"><a class="childOfOne" href="#">gchild1</a></li>
<li class="child two"><a class="childOfTwo" href="#">gchild2</a></li>
<li class="child three"><a class="childOfThree" href="#">gchild3</a></li>
<li class="child four"><a class="childOfFour" href="#">gchild4</a></li>
</ul>
<ul id="contentsTest">1<span>2</span><span id="contentsEmptyTest"></span></ul>
<ul id="siblingsTest">
<li class="child one"><span class="b"></span><em></em><b></b></li>
<li class="child two"><span class="c"></span><em></em><b></b></li>
<li class="child three"><span class="d"></span><em></em><b></b></li>
<li class="child four"><span class="e"></span></li>
</ul>
<ul id="notTest">
<li class="child one"><span class="b"></span></li>
<li class="child two"><span class="c"></span></li>
<li class="child three"><span class="d" id="notTestExclude"></span></li>
<li class="child four"><span class="e"></span></li>
</ul>
<div id="addTest">
<span class="add_span"></span>
<span class="add_span"></span>
<span class="add_span"></span>
<span class="add_span_exclude"></span>
<div id="addTestDiv"></div>
</div>
<style>
.hidden { display: none; }
#show_hide_span1,
#show_hide_span2 {
display:block
}
#show_hide_div1 {
display:inline-block
}
</style>
<div id="show_hide_div1" style="display:none"></div>
<div id="show_hide_div2" class="hidden"></div>
<div id="show_hide_div3"></div>
<span id="show_hide_span1" style="display:none"></span>
<span id="show_hide_span2" class="hidden"></span>
<span id="show_hide_span3"></span>
<div class="filtertest" id="filtertest1"></div>
<div class="filtertest" id="filtertest2"></div>
<div id="delegate_test"><span class="first-level"><span class="second-level">hi</span></span></div>
<div id="undelegate_test"><span class="first-level"><span class="second-level">hi</span></span></div>
<div id="delegate_blur_test"><input type="text"></div>
<div id="delegate_focus_test"><input type="text"></div>
<div id="another_element"></div>
<div id="namespace_test"></div>
<input type="text" id="BooleanInput" required />
<form id="some_form"></form>
<div class="replace_test_div">test</div>
<div id="wrap_test"><span>hi</span><a></a><span>hello</span></div>
<div id="wrapall_test"><b></b><span>hi</span><span>hello</span><i></i></div>
<div id="wrapinner_test">1<span>2</span><span id="wrapinner_empty_test"></span></div>
<div id="unwrap_test">
<div class="unwrap_one"><b><span></span></b></div>
<div class="unwrap_two"><b><span>1</span><span>2</span></b></div>
</div>
<div id="slice_test">
<div class="slice1"></div>
<div class="slice2"></div>
<div class="slice3"></div>
</div>
<div id="eq_test">
<div class="eq0"></div>
<div class="eq1"></div>
<div class="eq2"></div>
</div>
<div id="end_test">
<div class="end_one"><b><span></span></b></div>
<div class="end_two"><b><span>1</span><span>2</span></b></div>
</div>
<div id="andself_test">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
<div id="index_test">
<div class="index0"></div>
<div class="index1"></div>
</div>
<div id="trigger_handler">
<form method="get">
</form>
</div>
<svg></svg>
</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.dispatchEvent(event)
}
function mousedown(el){
var event = document.createEvent('MouseEvents')
event.initMouseEvent('mousedown', true, true, document.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null)
el.dispatchEvent(event)
}
function outerHTML(node) {
return node.outerHTML || (function(n) {
var div = document.createElement('div')
div.appendChild(n.cloneNode(true))
var html = div.innerHTML
div = null
return html
})(node)
}
var globalVarSetFromReady = ""
$(document).ready(function(){ globalVarSetFromReady = 'hi!' })
var globalVarSetFromReady2 = ""
$(function(){ globalVarSetFromReady2 = 'hi!' })
Evidence.Assertions.assertSame = function(expected, actual, message) {
var expectedKeyCount = 0, actualKeyCount = 0, key, passed = true
for (key in expected) expectedKeyCount++
for (key in actual) actualKeyCount++
if (expectedKeyCount == actualKeyCount)
for (key in expected)
passed &= expected[key] == actual[key]
else
passed = false
this._assertExpression(passed, message || 'Failed assertion.',
'Expected %o to be the same as %o.', actual, expected)
}
Evidence.Assertions.assertLength = function(expected, object, message) {
var actual = object.length
this._assertExpression(expected === actual, message || 'Failed assertion.',
'Expected length %d, got %d.', expected, actual)
}
Evidence.Assertions.assertEqualCollection = function(expectedCollection, actualCollection, message) {
var expected = expectedCollection, actual = actualCollection,
passed = expected.length == actual.length
if (typeof expected.get == 'function') expected = expected.get()
if (typeof actual.get == 'function') actual = actual.get()
if (passed) for (var i=0; i<expected.length; i++) passed &= expected[i] == actual[i];
this._assertExpression(passed, message || 'Failed assertion.',
'Expected %o, got %o.', expected, actual)
}
Evidence('ZeptoTest', {
testIsFunction: function(t) {
t.assertTrue($.isFunction(function(){}))
t.assertTrue($.isFunction(new Function()))
var f1 = function(){}
function f2(){}
t.assertTrue($.isFunction(f1))
t.assertTrue($.isFunction(f2))
t.assertFalse($.isFunction())
t.assertFalse($.isFunction(undefined))
t.assertFalse($.isFunction({}))
t.assertFalse($.isFunction(new Object()))
t.assertFalse($.isFunction(null))
t.assertFalse($.isFunction([]))
t.assertFalse($.isFunction(1))
t.assertFalse($.isFunction('a'))
t.assertFalse($.isFunction(new Date()))
t.assertFalse($.isFunction(window))
t.assertFalse($.isFunction($('body')))
},
testIsPlainObject: function(t) {
t.assertTrue($.isPlainObject(new Object()), 'Object is plain object')
t.assertTrue($.isPlainObject({}), '{} is plain object')
t.assertTrue($.isPlainObject({one : 1}), '{one : 1} is plain object')
t.assertTrue($.isPlainObject({one : 1, two: [1,2]}), '{one : 1, two: [1,2]} is plain object')
t.assertFalse($.isPlainObject(new Array()), 'Array object is not plain object')
t.assertFalse($.isPlainObject([]), '[] is not plain object')
t.assertFalse($.isPlainObject(null), 'null is not plain object')
t.assertFalse($.isPlainObject(), 'undefined is not plain object')
t.assertFalse($.isPlainObject(new String()), 'empty String object is not plain object')
t.assertFalse($.isPlainObject(new String('moe')), 'String object is not plain object')
t.assertFalse($.isPlainObject(''), 'the empty string is not plain object')
t.assertFalse($.isPlainObject('moe'), 'a string is not plain object')
t.assertFalse($.isPlainObject(new RegExp('test')), 'RegExp object is not plain object')
t.assertFalse($.isPlainObject(/test/), 'regex is not plain object')
t.assertFalse($.isPlainObject(new Boolean(true)), 'Boolean object is not plain object')
t.assertFalse($.isPlainObject(true), 'a boolean is not plain object')
t.assertFalse($.isPlainObject(new Number(2)), 'Number object is not plain object')
t.assertFalse($.isPlainObject(2), 'a number is not plain object')
t.assertFalse($.isPlainObject(new Function()), 'Function object is not plain object')
t.assertFalse($.isPlainObject(function() {}), 'a function is not plain object')
t.assertFalse($.isPlainObject(new Date()), 'Date object is not plain object')
t.assertFalse($.isPlainObject(window), 'window is not a plain object')
t.assertFalse($.isPlainObject($("html")[0]), 'html node is not a plain object')
var F = function(){}, obj
F.prototype = {'a':1}
obj = new F()
t.assertFalse($.isPlainObject(obj), 'function with prototype is not a plain object')
},
// test to see if we augment iOS 3.2 with String#trim()
testTrim: function(t){
t.assertEqual("blah", " blah ".trim())
},
testExtend: function(t){
t.assertSame({}, $.extend({}))
t.assertSame(
{a: "b", c: "d", e: "f"},
$.extend({a: "1", e: "f"}, {a: "b", c: "d"})
)
var obj = {}
t.assertIdentical(obj, $.extend(obj, {a: 1}))
t.assertEqual(1, obj.a)
obj = {}
t.assertIdentical(obj, $.extend(obj, {a: 1}, {b: 2}))
t.assertEqual(2, obj.b)
// undefined values are not copied over
t.assertSame({a:1}, $.extend({a:1}, {b:undefined}))
// shallow by default
obj = $.extend({ a:{b:"c"} }, { a:{d:"e"} })
t.assertSame({d:"e"}, obj.a)
},
testExtendDeep: function(t){
var obj = { a:{b:"c", x:{y:"z"}} }
$.extend(true, obj, { a:{d:"e"} }, { a:{b:"B", f:"g", x:{q:"x"}} })
t.assertEqual('a', Object.keys(obj).join(','))
t.assertEqual('b,d,f,x', Object.keys(obj.a).sort().join(','))
t.assertEqual('B', obj.a.b)
t.assertEqual('e', obj.a.d)
t.assertEqual('g', obj.a.f)
t.assertEqual('z', obj.a.x.y)
t.assertEqual('x', obj.a.x.q)
// creates non-existing keys on target object
obj = {}
$.extend(true, obj, { a:{b:"c"} })
t.assertEqual('a', Object.keys(obj).join(','))
t.assertEqual('c', obj.a.b)
// skips iterating over DOM elements
obj = {}
var dom = $('#some_element').get(0)
$.extend(true, obj, { element: dom })
t.assertIdentical(dom, obj.element)
// can override DOM element
$.extend(true, obj, { element:{a:'b'} })
t.assertEqual('b', obj.element.a)
},
testExtensionAPI: function(t) {
t.assert('init' in $.zepto)
t.assert('fragment' in $.zepto)
t.assert('Z' in $.zepto)
t.assert('isZ' in $.zepto)
// redefine Z and log some debug information
var oldZ = $.zepto.Z, calls = []
$.zepto.Z = function Z(dom, selector) {
var value = oldZ(dom, selector)
calls.push(dom)
return value
}
// now select some stuff
var Z1 = $(''), Z2 = $('#find1 .findme')
// check if $.fn methods are still there
t.assert('pluck' in Z1)
t.assert('width' in Z2)
// two calls should be logged
t.assertLength(2, calls)
// restore old Z
$.zepto.Z = oldZ
var Z3 = $('')
t.assertLength(2, calls)
},
testDollar: function(t){
var expectedElement = document.getElementById('some_element')
t.assertLength(1, $('#some_element'))
t.assertEqual(expectedElement, $('#some_element').get(0))
t.assertEqual(expectedElement, $(expectedElement).get(0))
t.assertLength(4, $('p'))
t.assertLength(1, $('p > span.yay'))
},
testDollarWithNil: function(t){
t.assertLength(0, $(null))
t.assertLength(0, $(undefined))
t.assertLength(0, $(false))
t.assertLength(0, $(''))
var Z1 = $(null), Z2 = $(null)
t.assert(Z1 !== Z2)
},
testDollarWithNonDOM: function(t){
var zepto = $(['a', 'b', 'c'])
t.assertLength(3, zepto)
t.assertEqualCollection(['a', 'b', 'c'], zepto)
t.assert($({}))
t.assertTrue($({ a:true })[0].a)
},
testGetWithoutIndex: function(t){
var zepto = $('#find1 .findme')
var array = zepto.get()
t.assertFalse(zepto === array)
t.assertTrue($.isArray(array))
t.assertTrue(array.pop === ([]).pop)
},
testGetWithIndex: function(t){
var zepto = $('#find1 .findme')
var outofbounds = zepto.get(zepto.size())
t.assertEqual(zepto.get(0), zepto[0])
t.assertUndefined(outofbounds)
},
testSize: function(t){
t.assertEqual(4, $('#find1 .findme').size())
},
testDollarWithMultipleInstances: function(t){
var instance1 = $('#some_element'),
instance2 = $('p')
t.assertLength(1, instance1)
t.assertLength(4, instance2)
t.refuteIdentical(instance1.get(0), instance2.get(0))
},
testDollarWithArrays: function(t){
var element = document.getElementById('some_element')
var z1 = $([element])
t.assertLength(1, z1)
t.assertEqual(element, z1.get(0))
var z2 = $([element, null, undefined])
t.assertLength(1, z2)
t.assertEqual(element, z2.get(0))
var z3 = $([null, element, null])
t.assertLength(1, z3)
t.assertEqual(element, z3.get(0))
},
testDollarWithContext: function(t){
// Zepto object
var zepto = $('p#find1, #find2')
t.assertLength(11, $('span', zepto))
// DOM Element
var domElement = document.getElementById('find1')
t.assertLength(4, $('span.findme', domElement))
// Selector with DOM Element Context
var domElement = document.getElementById('find1');
t.assertLength(4, $('span.findme', domElement));
// DOM Element with DOM Element Context
t.assertLength(1, $(domElement, domElement));
},
testDollarWithDocument: function(t){
var z = $(document)
t.assertLength(1, z)
t.assertEqual('', z.selector)
},
testDollarWithAppcache: function(t){
if ('applicationCache' in window) {
var z = $(window.applicationCache)
t.assertLength(1, z)
t.assertIdentical(window.applicationCache, z.get(0))
t.assertEqual('', z.selector)
}
},
testDollarWithDocumentFragment: function(t){
var documentFragment = $(document.createDocumentFragment())
t.assertLength(1, documentFragment)
t.assertEqual(Node.DOCUMENT_FRAGMENT_NODE, documentFragment.get(0).nodeType)
},
testDollarWithFragment: function(t){
var fragment = $("<div>")
t.assertLength(1, fragment)
t.assertEqual("<div></div>", outerHTML(fragment.get(0)))
t.assertEqual('', fragment.selector)
t.assertNull(fragment.get(0).parentNode)
fragment = $("<div>hello world</div>")
t.assertLength(1, fragment)
t.assertEqual("<div>hello world</div>", outerHTML(fragment.get(0)))
t.assertEqual('', fragment.selector)
fragment = $("<div>hello</div> <span>world</span>")
t.assertLength(3, fragment)
t.assertEqual("<div>hello</div>", outerHTML(fragment.get(0)))
t.assertEqual(Node.TEXT_NODE, fragment.get(1).nodeType)
t.assertEqual("<span>world</span>", outerHTML(fragment.get(2)))
t.assertEqual('', fragment.selector)
fragment = $("<div>\nhello</div> \n<span>world</span>")
t.assertLength(3, fragment)
t.assertEqual("<div>\nhello</div>", outerHTML(fragment.get(0)))
t.assertEqual(Node.TEXT_NODE, fragment.get(1).nodeType)
t.assertEqual("<span>world</span>", outerHTML(fragment.get(2)))
t.assertEqual('', fragment.selector)
fragment = $("<div /><div />")
t.assertLength(2, fragment)
fragment = $("<div>hello</div> ")
t.assertLength(1, fragment)
},
testDollarFragmentAndProperties: function(t){
var el = $('<p id=hi />', {
id: 'hello', 'class': 'one two',
text: 'world', css: {color: 'red'}
})
t.assertEqual('hello', el.attr('id'))
t.assert(el.hasClass('one'))
t.assert(el.hasClass('two'))
t.assertEqual('world', el.text())
t.assertEqual('red', el.css('color'))
},
testDollarWithTextNode: function(t){
var textNode = $(document.createTextNode('hi there'))
t.assertLength(1, textNode)
t.assertEqual(Node.TEXT_NODE, textNode.get(0).nodeType)
},
testDollarWithCommentInFragment: function(t){
var comment = $('<!-- -->')
t.assertLength(1, comment)
t.assertEqual(Node.COMMENT_NODE, comment.get(0).nodeType)
},
testDollarWithDoctypeInFragment: function(t){
t.assertLength(0, $('<!DOCTYPE html>'))
},
testNodeCreationViaDollar: function (t) {
t.assertEqual('<div></div>', outerHTML($('<div></div>').get(0)))
t.assertEqual('<div></div>', outerHTML($('<div/>').get(0)))
t.assertEqual('<div><div></div></div>', outerHTML($('<div><div></div></div>').get(0)))
t.assertEqual('<div><div></div></div>', outerHTML($('<div><div/></div>').get(0)))
t.assertEqual('<div><div></div><div></div></div>', outerHTML($('<div><div></div><div></div></div>').get(0)))
},
testCreateTableCell: function(t) {
t.assertEqual('TD', $('<td></td>').pluck('nodeName').join(','))
},
testCreateTableHeaderCell: function(t) {
t.assertEqual('TH', $('<th></th>').pluck('nodeName').join(','))
},
testCreateTableRow: function(t) {
t.assertEqual('TR', $('<tr></tr>').pluck('nodeName').join(','))
},
testCreateTableHeader: function(t) {
t.assertEqual('THEAD', $('<thead></thead>').pluck('nodeName').join(','))
},
testCreateTableBody: function(t) {
t.assertEqual('TBODY', $('<tbody></tbody>').pluck('nodeName').join(','))
},
testCreateTableFooter: function(t) {
t.assertEqual('TFOOT', $('<tfoot></tfoot>').pluck('nodeName').join(','))
},
testCreateSelectOptgroup: function(t) {
t.assertEqual('OPTGROUP', $('<optgroup></optgroup>').pluck('nodeName').join(','))
},
testCreateSelectOption: function(t) {
t.assertEqual('OPTION', $('<option></option>').pluck('nodeName').join(','))
},
testReady: function(t){
t.assertEqual('hi!', globalVarSetFromReady)
t.assertEqual('hi!', globalVarSetFromReady2)
},
testNext: function(t){
t.assertEqual('P', $('#some_element').next().get(0).tagName)
t.assertEqual('DIV', $('p').next().get(0).tagName)
t.assertEqual(0, $('span.yay').next('.nay').size())
t.assertEqual(1, $('span.yay').next().size())
t.assertEqual(1, $('span.yay').next().next('.nay').size())
},
testPrev: function(t){
t.assertEqual('H1', $('p').prev().get(0).tagName)
t.assertEqual('DIV', $('ul').prev().get(0).tagName)
t.assertEqual(0, $('span.nay').prev('.yay').size())
t.assertEqual(1, $('span.nay').prev().size())
t.assertEqual(1, $('span.nay').prev().prev('.yay').size())
},
testEach: function(t){
var index, tagnames = []
$('#eachtest > *').each(function(idx, el){
index = idx
t.assertIdentical(el, this)
tagnames.push(el.tagName.toUpperCase())
})
t.assertEqual('SPAN, B, BR', tagnames.join(', '))
t.assertEqual(2, index)
},
testMap: function(t){
var results = $('#eachtest > *').map(function(idx, el) {
t.assertIdentical(el, this)
return idx + ':' + this.nodeName.toUpperCase()
})
t.assertEqual('0:SPAN, 1:B, 2:BR', results.join(', '))
},
testDollarMap: function(t){
var fruits = ['apples', 'oranges', 'pineapple', 'peach', ['grape', 'melon']]
var results = $.map(fruits, function(item, i) {
if (item instanceof Array) return item
else if (!/apple/.test(item)) return i + ':' + item
})
t.assertEqual('1:oranges,3:peach,grape,melon', results.join(','))
},
testDollarMapObject: function(t){
var fruit = { name: 'banana', taste: 'sweet' }
var results = $.map(fruit, function(value, key) {
return key + '=' + value
})
t.assertEqual('name=banana,taste=sweet', results.sort().join(','))
},
testDollarEach: function(t){
var array = ['a','b','c'], object = { a: 1, b: 2, c: 3 }, result
result = []
$.each(array, function(idx, val){
result.push(idx)
result.push(val)
})
t.assertEqual('0a1b2c', result.join(''))
result = []
$.each(object, function(key, val){
result.push(key)
result.push(val)
})
t.assertEqual('a1b2c3', result.join(''))
result = []
$.each(array, function(idx, val){
result.push(idx)
result.push(val)
return idx<1
})
t.assertEqual('0a1b', result.join(''))
t.assertEqual('abc', $.each(array, function(){}).join(''))
},
testDollarEachContext: function(t){
$.each(['a'], function(key, val) {
t.assertEqual(this, val)
})
$.each({a:'b'}, function(key, val) {
t.assertEqual(this, val)
})
},
testDollarInArray: function(t) {
t.assertIdentical( 0, $.inArray(1, [1,2,3]) )
t.assertIdentical( 1, $.inArray(2, [1,2,3]) )
t.assertIdentical( -1, $.inArray(4, [1,2,3]) )
t.assertIdentical( 3, $.inArray(1, [1,2,3,1], 1) )
},
testDollarParseJSON: function(t) {
t.assertSame({a:'b'}, $.parseJSON('{"a":"b"}'))
},
testEq: function(t){
var $els = $('#eq_test div')
t.assertLength(1, $els.eq(0))
t.assertLength(1, $els.eq(-1))
t.assertEqual($els.eq(-1)[0].className, 'eq2')
t.assertUndefined($els.eq(-1).tagName)
t.assertLength(0, $('nonexistent').eq(0))
},
testFirst: function(t){
var zepto = $('h1,p')
t.assertLength(5, zepto)
var zepto2 = zepto.first()
t.refuteIdentical(zepto, zepto2)
t.assertLength(5, zepto)
t.assertLength(1, zepto2)
t.assertEqual('H1', zepto2.get(0).tagName)
t.assertLength(0, $('nonexistent').first())
},
testFirstNonDOM: function(t){
t.assertEqual('a', $(['a', 'b', 'c']).first())
},
testLast: function(t){
var zepto = $('h1,p')
t.assertLength(5, zepto)
var zepto2 = zepto.last()
t.refuteIdentical(zepto, zepto2)
t.assertLength(5, zepto)
t.assertLength(1, zepto2)
t.assertEqual('P', zepto2.get(0).tagName)
t.assertLength(0, $('nonexistent').last())
},
testLastNonDOM: function(t){
t.assertEqual('c', $(['a', 'b', 'c']).last())
},
testPluck: function(t){
t.assertEqual('H1DIVDIV', $('h1,div.htmltest').pluck('tagName').join(''))
},
// for now, we brute-force "display:block" for show/hide
// need to change that to work better with inline elements in the future
testShow: function(t){
$('#show_hide_div1').show()
t.assertEqual('inline-block', getComputedStyle($('#show_hide_div1').get(0)).display)
$('#show_hide_div2').show()
t.assertEqual('block', getComputedStyle($('#show_hide_div2').get(0)).display)
$('#show_hide_div3').show()
t.assertEqual('block', getComputedStyle($('#show_hide_div3').get(0)).display)
$('#show_hide_span1').show()
t.assertEqual('block', getComputedStyle($('#show_hide_span1').get(0)).display)
$('#show_hide_span2').show()
t.assertEqual('block', getComputedStyle($('#show_hide_span2').get(0)).display)
$('#show_hide_span3').show()
t.assertEqual('inline', getComputedStyle($('#show_hide_span3').get(0)).display)
},
testHide: function(t){
$('#show_hide_div1').hide()
t.assertEqual('none', $('#show_hide_div1').get(0).style.display)
$('#show_hide_div2').hide()
t.assertEqual('none', $('#show_hide_div2').get(0).style.display)
$('#show_hide_div3').hide()
t.assertEqual('none', $('#show_hide_div3').get(0).style.display)
$('#show_hide_span1').hide()
t.assertEqual('none', $('#show_hide_span1').get(0).style.display)
$('#show_hide_span2').hide()
t.assertEqual('none', $('#show_hide_span2').get(0).style.display)
$('#show_hide_span3').hide()
t.assertEqual('none', $('#show_hide_span3').get(0).style.display)
},
testToggle: function(t){
var el = $('#show_hide_div1').hide(),
domStyle = el.get(0).style
t.assertEqual('none', domStyle.display)
var result = el.toggle()
t.assertIdentical(el, result, 'expected toggle() to return self')
t.assertIdentical('', domStyle.display)
el.toggle()
t.assertEqual('none', domStyle.display)
el.toggle(true)
t.assertIdentical('', domStyle.display)
el.toggle(true)
t.assertIdentical('', domStyle.display)
el.toggle(false)
t.assertEqual('none', domStyle.display)
el.toggle(false)
t.assertEqual('none', domStyle.display)
},
testToggleMultiple: function(t){
var el1 = $('#show_hide_div1').hide(),
el2 = $('#show_hide_div2').show(),
both = $('#show_hide_div1, #show_hide_div2')
both.toggle()
t.assertIdentical('', el1.get(0).style.display)
t.assertEqual('none', el2.get(0).style.display)
both.toggle()
t.assertEqual('none', el1.get(0).style.display)
t.assertEqual('block', el2.get(0).style.display)
},
testOffset: function(t){
// TODO
t.assertNull($('#doesnotexist').offset())
},
testWidth: function(t){
t.assertNull($('#doesnotexist').width())
// can't check values here, but make sure it doesn't error out
var viewportWidth = $(window).width()
t.assert(viewportWidth > 0 || viewportWidth === 0)
t.assert($(document).width())
t.assertIdentical(100, $('#offset').width())
$('#offset').width('90px')
t.assertIdentical(90, $('#offset').width())
$('#offset').width(110)
t.assertIdentical(110, $('#offset').width())
$('#offset').width(function(i, oldWidth) { return oldWidth + 5 })
t.assertIdentical(115, $('#offset').width())
},
testHeight: function(t){
t.assertNull($('#doesnotexist').height())
// can't check values here, but make sure it doesn't error out
var viewportHeight = $(window).height()
t.assert(viewportHeight > 0 || viewportHeight === 0)
t.assert($(document).height())
t.assertIdentical(50, $('#offset').height())
$('#offset').height('60px')
t.assertIdentical(60, $('#offset').height())
$('#offset').height(70)
t.assertIdentical(70, $('#offset').height())
$('#offset').height(function(i, oldHeight) { return oldHeight + 5 })
t.assertIdentical(75, $('#offset').height())
},
testClosest: function(t){
var el = $('#li2')
t.assertEqualCollection(el, el.closest('li'))
t.assertEqualCollection($('#nested'), el.closest('ul'))
// with context
t.assertEqualCollection($('#nested'), el.closest('ul', $('#li1').get(0)))
t.assertLength(0, el.closest('#parents', $('#li1').get(0)))
// no ancestor matched
t.assertLength(0, el.closest('form'))
},
testClosestOnDetached: function(t){
var el = $('<div><p><a></a></p></div>'),
para = el.children(),
link = para.children()
t.assertEqualCollection(para, link.closest('p'))
t.assertEqualCollection(el, link.closest('div'))
t.assertEqualCollection(el, el.closest('div'))
},
testParents: function(t){
var body = document.body, html = body.parentNode, container = $('#parents'),
wrapper = $('#fixtures').get(0)
t.assertEqualCollection($([wrapper, body, html]), container.parents())
var expected = $('#li1 > ul').get()
expected.push($('#li1').get(0))
expected.push(container.get(0))
expected = expected.concat([wrapper, body, html])
t.assertEqualCollection($(expected), $('#li1').find('li').parents())
expected = [$('#nested').get(0), $('#parents').get(0)]
t.assertEqualCollection($(expected), $('#li2').parents('ul'))
},
testParent: function(t){
var el = $('#li1')
t.assertEqualCollection($('#parents'), el.parent())
t.assertEqualCollection($('#li1 > ul'), el.find('li').parent())
t.assertLength(0, $(document.createElement('div')).parent())
},
testParentOnDetached: function(t){
t.assertLength(0, $('<ul />').parent())
},
testChildren: function(t){
var el=$("#childrenTest"), lis=$("li.child",el)
//basic form
t.assertEqualCollection(lis, el.children())
//filtered by selector
t.assertEqualCollection(lis.filter(".two"), el.children(".two"))
//across multiple parents
t.assertEqualCollection(el.find("li a"), lis.children("a"))
//chainabilty
t.assertEqual(el.find("li a.childOfTwo").text(), lis.children(".childOfTwo").text())
//non-existent children
t.assertLength(0,lis.children(".childOfTwo").children())
},
testContents: function(t){
var $contents = $("#contentsTest").contents()
t.assertLength(3, $contents)
t.assertLength(2, $contents.filter('span'))
t.assertLength(0, $("#contentsEmptyTest").contents())
},
testSiblings: function(t){
var el=$("#siblingsTest")
//basic form
t.assertEqualCollection($("li.one,li.three,li.four",el), $("li.two",el).siblings())
//filtered by selector
t.assertEqualCollection($("li.three",el), $("li.two",el).siblings(".three"))
//across multiple parents
t.assertEqualCollection(el.find("li b"), $("li em",el).siblings("b"))
t.assertLength(6,$("li span",el).siblings())
//non-existent siblings
t.assertLength(0,$("li span.e",el).siblings())
},
testNot: function(t){
var el=$("#notTest")
//selector form
t.assertEqualCollection($("li.one,li.three,li.four",el), $("li",el).not(".two"))
//element or NodeList form
t.assertEqualCollection($("span.b,span.c,span.e",el), $("span",el).not(document.getElementById("notTestExclude")))
t.assertEqualCollection($("li",el), $("li, span",el).not(document.getElementsByTagName("span")))
//function form
t.assertEqualCollection($("span.b,span.c",el),$("span",el).not(function(i){
var $this=$(this)
$this.html(i)
return ($this.hasClass("d") || $this.hasClass("e")) ? true : false
}))
//test the index was passed in properly in previous test
t.assertEqual("0",$("span.b",el).text())
t.assertEqual("1",$("span.c",el).text())
},
testReplaceWith: function(t) {
$('div.first').replaceWith('<h2 id="replace_test">New heading</h2>')
t.assertUndefined($('div.first').get(0))
t.assert(document.getElementById("replace_test").nodeType)
t.assertEqual($('.replacewith h2#replace_test').get(0), document.getElementById("replace_test"))
$('#replace_test').replaceWith($('.replace_test_div'))
t.assertUndefined($('#replace_test').get(0))
t.assert(document.getElementsByClassName("replace_test_div")[0].nodeType)
t.assertEqual($('.replacewith h2#replace_test').get(0), document.getElementsByClassName("replace_test")[0])
//Multiple elements
$('.replacewith .replace_test_div').replaceWith('<div class="inner first">hi</div><div class="inner fourth">hello</div>')
t.assertLength(4,$('.replacewith div'))
t.assertEqual("inner first", $('.replacewith div')[0].className)
t.assertEqual("inner fourth", $('.replacewith div')[1].className)
},
testReplaceWithFragment: function(t) {
var orphanDiv = $("<div />")
orphanDiv.replaceWith($("<div class='different' />"))
t.assert(!orphanDiv.hasClass('different'))
},
testWrap: function(t) {
var el = $('#wrap_test')
el.find('span').wrap('<p><i/></p>')
t.assertEqual(
'<p><i><span>hi</span></i></p><a></a><p><i><span>hello</span></i></p>',
el.html()
)
// avoids unnecessary cloning of dom structure for wrapping
el = $('<div><a/></div>')
var structure = $('<span/>')
el.find('a').wrap(structure)
t.assertIdentical(structure.get(0), el.find('span').get(0))
t.assert(el.find('a').parent().is('span'))
},
testWrapFunction: function(t) {
var el = $('<div><b>A</b><b>B</b></div>')
el.find('b').wrap(function(index){
return '<a class=link' + index + $(this).text() + ' />'
})
t.assertEqual(
'<a class="link0A"><b>A</b></a><a class="link1B"><b>B</b></a>',
el.html()
)
},
testWrapAll: function(t) {
var el = $('#wrapall_test')
el.find('span').wrapAll('<p><a/></p>')
t.assertEqual(
'<b></b><p><a><span>hi</span><span>hello</span></a></p><i></i>',
el.html()
)
},
testWrapFragment: function(t) {
var fragment = $('<div id="fragment" />')
fragment.wrapAll('<div id="wrap_test" />')
t.assertEqual('wrap_test', fragment.parent().attr('id'))
t.assertEqual(0, fragment.children().length)
fragment = $('<div id="fragment" />')
fragment.wrap('<div id="wrap_test" />')
t.assertEqual('wrap_test', fragment.parent().attr('id'))
t.assertEqual(0, fragment.children().length)
},
testWrapInner: function(t) {
var $el = $('#wrapinner_test')
$el.wrapInner('<div>')
t.assertLength(1, $el.children())
t.assertLength(1, $el.children('div'))
t.assertLength(3, $el.find('div').contents())
$el = $('#wrapinner_empty_test')
$el.wrapInner('<div>')
t.assertLength(1, $el.children())
t.assertLength(1, $el.children('div'))
t.assertLength(0, $el.find('div').contents())
},
testWrapInnerFunction: function(t) {
var el = $('<div><b>A</b><b>B</b></div>')
el.find('b').wrapInner(function(index){
return '<a class=link' + index + $(this).text() + ' />'
})
t.assertEqual(
'<b><a class="link0A">A</a></b><b><a class="link1B">B</a></b>',
el.html()
)
},
testUnwrap: function(t){
var context=$("#unwrap_test")
//Element With no siblings
$(".unwrap_one span",context).unwrap()
t.assertLength(1,$("b",context))
//Element with siblings
$(".unwrap_two span",context).unwrap()
t.assertLength(0,$("b",context))
//make sure siblings are unaffected
t.assertLength(3,$("span",context))
//make sure parents are what they should be
t.assertEqual($("span",context).parent().get(0), document.getElementsByClassName("unwrap_one")[0])
},
testUnwrapFragment: function(t){
var fragment = $('<div id=outer><div id=inner></div><div id=uninvolved></div></div>'),
innerFragment = fragment.find("#inner"),
uninvolved = fragment.find("#uninvolved")
innerFragment.unwrap()
t.assertLength(0, innerFragment.parent(), '#inner should be orphan')
t.assertLength(0, uninvolved.parent(), '#uninvolved should be orphan')
t.assertLength(0, fragment.children(), 'fragment should be empty')
},
testClone: function(t){
var el = $('<div class=sheep><span></span></div>'),
el2 = el.clone()
t.assert(el2.hasClass('sheep'))
el2.addClass('black')
t.refute(el.hasClass('black'))
el2.find('span').text('baa')
t.assertIdentical('', el.find('span').text())
},
testFind: function(t){
var found = $('p#find1').find('span.findme')
t.assertLength(4, found)
t.assertEqual('1', found.get(0).innerHTML)
t.assertEqual('2', found.get(1).innerHTML)
t.assertEqual('4', found.get(2).innerHTML)
t.assertEqual('5<span>6</span>', found.get(3).innerHTML)
var found = $('p#find1, #find2').find('span')
t.assertLength(11, found)
},
testFindWithInvalidNode: function(t) {
var found = $('<div><a>1</a></div>\n<div></div>').find('a')
t.assertLength(1, found)
t.assertEqual('1', found.get(0).innerHTML)
},
testFilter: function(t){
var found = $('div')
t.assertLength(2, found.filter('.filtertest'))
t.assertLength(0, found.filter('.doesnotexist'))
t.assertLength(1, found.filter('.filtertest').filter(':nth-child(2n)'))
var nodes = $('<select><option value=1>test1</option><option value=2>test2</option><option value=1>test1</option></select>')
t.assertLength(2, nodes.find('option').filter(function(){ return this.value == '1' }))
var indexes = []
nodes.find('option').filter(function(index){ if (this.value=='1') indexes.push(index) })
t.assertEqualCollection([0,2], indexes)
},
testFilterWithNonNativeArrayFilter: function(t){
var nativeFilter = Array.prototype.filter
try {
// apply broken filter
Array.prototype.filter = function(){ return [] }
t.assertLength(2, $('div').filter('.filtertest'))
} finally {
Array.prototype.filter = nativeFilter
}
},
testAdd: function(t){
var lis=$("li"),spans=$("span"),
together=lis.add("span"),
duplicates=spans.add("span"),
disconnected=$("<div></div>").add("<span></span>"),
mainContext=$("#addTest")
//uniquness of collection
t.assertLength(spans.length, duplicates)
//selector only
t.assertLength((lis.length + spans.length), together)
//selector with context
t.assertEqualCollection($("span",mainContext), $(".add_span").add(".add_span_exclude",mainContext))
//DOM Element + Chaining test
t.assertEqualCollection(mainContext.children(), $(".add_span").add(".add_span_exclude").add(document.getElementById("addTestDiv")))
//Disconnected
t.assert(!disconnected.get(0).parentNode)
$("#addTestDiv").append(disconnected)
t.assertEqual('<div></div><span></span>', document.getElementById("addTestDiv").innerHTML)
},
testIs: function(t){
t.assert($('#find1').is('p'))
t.assert($('#li2').is(':first-child'))
t.assert(!$('#find1').is('doesnotexist'))
t.assert(!$('#find1').is())
t.assert($('#fixtures div').is('#some_element'))
t.assert(!$('#doesnotexist').is('p'))
t.assert(!$(window).is('p'))
},
testIsWithoutParent: function(t){
var elem = $('<div id=outOfDOM />')
t.assert(elem.is('div'))
t.assert(elem.is('#outOfDOM'))
t.assert(!elem.is('p'))
t.assert(!elem.is())
},
testCSS: function(t){
var el = $('#some_element').get(0)
$('#some_element').css('color', '#f00')
$('#some_element').css('margin-top', '10px')
$('#some_element').css('marginBottom', '5px')
$('#some_element').css('left', 42)
$('#some_element').css('z-index', 10)
$('#some_element').css('fontWeight', 300)
$('#some_element').css('border', '1px solid rgba(255,0,0,1)')
t.assertEqual('rgb(255, 0, 0)', el.style.color)
t.assertEqual('rgb(255, 0, 0)', el.style.borderLeftColor)
t.assertEqual('1px', el.style.borderLeftWidth)
t.assertEqual('10px', el.style.marginTop)
t.assertEqual('5px', el.style.marginBottom)
t.assertEqual('42px', el.style.left)
t.assertEqual(300, el.style.fontWeight)
t.assertEqual(10, el.style.zIndex)
var style1 = $('#some_element').css('color')
var style2 = $('#some_element').css('border')
t.assertEqual('rgb(255, 0, 0)', style1)
t.assertEqual('1px solid rgb(255, 0, 0)', style2)
$('#some_element').css({
'border': '2px solid #000',
'color': 'rgb(0,255,0)',
'padding-left': '2px'
})
t.assertEqual('2px', $('#some_element').css('borderLeftWidth'))
t.assertEqual('solid', $('#some_element').css('borderLeftStyle'))
t.assertEqual('rgb(0, 0, 0)', $('#some_element').css('borderLeftColor'))
t.assertEqual('rgb(0, 255, 0)', $('#some_element').css('color'))
t.assertEqual('2px', $('#some_element').css('paddingLeft'))
t.assertEqual('2px', $('#some_element').css('border-left-width'))
t.assertEqual('solid', $('#some_element').css('border-left-style'))
t.assertEqual('rgb(0, 0, 0)', $('#some_element').css('border-left-color'))
t.assertEqual('rgb(0, 255, 0)', $('#some_element').css('color'))
t.assertEqual('2px', $('#some_element').css('padding-left'))
var div = $('#get_style_element')
t.assertEqual('48px', div.css('font-size'))
t.assertEqual('rgb(0, 0, 0)', div.css('color'))
},
testCSSUnset: function (t) {
var el = $('#some_element').css({ 'margin-top': '1px', 'margin-bottom': '1px' }),
dom = el.get(0)
el.css('color', '#000')
el.css('color', '')
t.assertIdentical('', dom.style.color)
el.css('color', '#000')
el.css('color', undefined)
t.assertIdentical('', dom.style.color)
el.css('color', '#000')
el.css('color', null)
t.assertIdentical('', dom.style.color)
el.css('color', '#000')
el.css({ color: '', 'margin-top': undefined, 'marginBottom': null })
t.assertIdentical('', dom.style.color)
t.assertIdentical('', dom.style.marginTop)
t.assertIdentical('', dom.style.marginBottom)
},
testCSSZeroValue: function (t) {
var el = $('#some_element'), dom = el.get(0)
el.css('opacity', 0)
t.assertIdentical('0', dom.style.opacity)
el.css('opacity', 1)
el.css({ opacity: 0 })
t.assertIdentical('0', dom.style.opacity)
},
testCSSOnNonExistElm: function (t) {
var errorWasRaised = false
try {
var color = $('.some-non-exist-elm').css('color')
} catch (e) {
errorWasRaised = true
}
t.assert(!errorWasRaised)
},
testHtml: function(t){
var div = $('div.htmltest')
div.html('yowza')
t.assertEqual('yowza', document.getElementById('htmltest1').innerHTML)
t.assertEqual('yowza', document.getElementById('htmltest2').innerHTML)
t.assertEqual('yowza', $('div.htmltest').html())
div.html('')
t.assertEqual('', document.getElementById('htmltest2').innerHTML)
t.assertEqual("", $('#htmltest3').html())
t.assertNull($('doesnotexist').html())
div.html('yowza')
div.html(function(idx, html){
return html.toUpperCase()
})
t.assertEqual('YOWZA', div.html())
div.html('<u>a</u><u>b</u><u>c</u>')
$('u').html(function(idx,html){
return idx+html
})
t.assertEqual('<u>0a</u><u>1b</u><u>2c</u>', div.html())
var table = $('#htmltest4'),
html = '<tbody><tr><td>ok</td></tr></tbody>'
table.html('<tbody><tr><td>ok</td></tr></tbody>')
t.assertEqual(html, table.html())
},
testText: function(t){
t.assertEqual('Here is some text', $('div.texttest').text())
t.assertEqual('And some more', $('#texttest2').text())
$('div.texttest').text("Let's set it")
t.assertEqual("Let's set it", $('#texttest1').text())
t.assertEqual("Let's set it", $('#texttest2').text())
$('#texttest2').text('')
t.assertEqual("Let's set it", $('div.texttest').text())
t.assertEqual('', $('#texttest2').text())
},
testEmpty: function(t) {
$('#empty_test').empty()
t.assertEqual(document.getElementById('empty_1'), null)
t.assertEqual(document.getElementById('empty_2'), null)
t.assertEqual(document.getElementById('empty_3'), null)
t.assertEqual(document.getElementById('empty_4'), null)
},
testAttr: function(t){
var els = $('#attr_1, #attr_2')
t.assertEqual('someId1', els.attr("data-id"))
t.assertEqual('someName1', els.attr("data-name"))
els.attr("data-id","someOtherId")
els.attr("data-name","someOtherName")
t.assertEqual('someOtherId', els.attr("data-id"))
t.assertEqual('someOtherName', els.attr("data-name"))
t.assertEqual('someOtherId', $('#attr_2').attr('data-id'))
t.assertNull(els.attr("nonExistentAttribute"))
els.attr("data-id", false)
t.assertEqual("false", els.attr("data-id"))
els.attr("data-id", 0)
t.assertEqual("0", els.attr("data-id"))
els.attr({ 'data-id': 'id', 'data-name': 'name' })
t.assertEqual('id', els.attr("data-id"))
t.assertEqual('name', els.attr("data-name"))
t.assertEqual('id', $('#attr_2').attr('data-id'))
els.attr('data-id', function(idx,oldvalue){
return idx+oldvalue
})
t.assertEqual('0id', els.attr('data-id'))
t.assertEqual('1id', $('#attr_2').attr('data-id'))
},
testAttrNoElement: function(t){
t.assertUndefined($().attr('yo'))
t.assertUndefined($(document.createTextNode('')).attr('yo'))
t.assertUndefined($(document.createComment('')).attr('yo'))
var els = $('<b></b> <i></i>').attr('id', function(i){ return this.nodeName + i })
t.assertEqual('B0', els.eq(0).attr('id'))
t.assertEqual('I2', els.eq(2).attr('id'))
t.assertUndefined(els.eq(1).attr('id'))
},
testAttrEmpty: function(t){
var el = $('#data_attr')
t.assertIdentical('', el.attr('data-empty'))
},
testAttrOnTextInputField: function(t) {
var inputs = $('#attr_with_text_input input'), values
values = inputs.map(function(){ return $(this).attr('value') })
t.assertEqual('Default input, Text input, Email input, Search input', values.join(', '))
inputs.val(function(i, value){ return value.replace('input', 'changed') })
values = inputs.map(function(){ return $(this).attr('value') })
t.assertEqual('Default changed, Text changed, Email changed, Search changed', values.join(', '))
},
testAttrNullUnset: function(t){
var el = $('<div id=hi>')
el.attr('id', null)
t.assertIdentical('', el.attr('id'))
el.attr('id', 'hello')
el.attr({ id:null })
t.assertIdentical('', el.attr('id'))
},
testRemoveAttr: function(t) {
var el = $('#attr_remove')
t.assertEqual('boom', el.attr('data-name'))
el.removeAttr('data-name')
t.assertNull(el.attr('data-name'))
},
testRemoveAttrNoElement: function(t){
t.assert($().removeAttr('rel'))
t.assert($(document.createTextNode('')).removeAttr('rel'))
var els = $('<b rel=up></b> <i rel=next></i>')
t.assertIdentical(els, els.removeAttr('rel'))
t.assertNull(els.eq(0).attr('rel'))
t.assertUndefined(els.eq(1).attr('rel'))
t.assertNull(els.eq(2).attr('rel'))
},
testData: function(t) {
var el = $('#data_attr')
// existing attribute
t.assertEqual('bar', el.data('foo'))
t.assertEqual('baz', el.data('foo-bar'))
t.assertEqual('baz', el.data('fooBar'))
// camelCase
el.data('fooBar', 'bam')
t.assertEqual('bam', el.data('fooBar'))
t.assertEqual('bam', el.data('foo-bar'))
// new attribute
el.data('fun', 'hello')
t.assertEqual('hello', el.attr('data-fun'))
t.assertEqual('hello', el.data('fun'))
// blank values
t.assertIdentical('', el.data('empty'))
t.assertUndefined(el.data('does-not-exist'))
},
testVal: function(t) {
var input = $('#attr_val')
t.assertEqual('Hello World', input.val())
input.val('')
t.assertEqual('', input.val())
input.get(0).value = 'Hello again'
t.assertEqual('Hello again', input.val())
input.val(function(i, val){ return val.replace('Hello', 'Bye') })
t.assertEqual('Bye again', input.val())
t.assertUndefined($('non-existent').val())
var multiple =
$('<select multiple><option selected>1</option><option value=2 selected="selected">a</option><option>3</option></select>')
t.assertEqualCollection(['1','2'], multiple.val())
multiple.find('option')[0].selected = false
t.assertEqualCollection(['2'], multiple.val())
},
testChaining: function(t){
t.assert(document.getElementById('nay').innerHTML == "nay")
$('span.nay').css('color', 'red').html('test')
t.assert(document.getElementById('nay').innerHTML == "test")
},
testCachingForLater: function(t){
var one = $('div')
var two = $('span')
t.assert(one.get(0) !== two.get(0))
},
testPlugins: function(t){
var el = $('#some_element').get(0)
$.fn.plugin = function(){
return this.each(function(){ this.innerHTML = 'plugin!' })
}
$('#some_element').plugin()
t.assertEqual('plugin!', el.innerHTML)
// test if existing Zepto objects receive new plugins
$.fn.anotherplugin = function(){
return this.each(function(){ this.innerHTML = 'anotherplugin!' })
}
t.assert(typeof $('#some_element').anotherplugin == 'function')
$('#some_element').anotherplugin()
t.assertEqual('anotherplugin!', el.innerHTML)
},
testAppendPrependBeforeAfter: function(t){
$('#beforeafter').append('append')
$('#beforeafter').prepend('prepend')
$('#beforeafter').before('before')
$('#beforeafter').after('after')
t.assertEqual('before<div id="beforeafter">prependappend</div>after', $('#beforeafter_container').html())
//testing with TextNode as parameter
$('#beforeafter_container').html('<div id="beforeafter"></div>')
function text(contents){
return document.createTextNode(contents)
}
$('#beforeafter').append(text('append'))
$('#beforeafter').prepend(text('prepend'))
$('#beforeafter').before(text('before'))
$('#beforeafter').after(text('after'))
t.assertEqual('before<div id="beforeafter">prependappend</div>after', $('#beforeafter_container').html())
$('#beforeafter_container').html('<div id="beforeafter"></div>')
function div(contents){
var el = document.createElement('div')
el.innerHTML = contents
return el
}
$('#beforeafter').append(div('append'))
$('#beforeafter').prepend(div('prepend'))
$('#beforeafter').before(div('before'))
$('#beforeafter').after(div('after'))
t.assertEqual(
'<div>before</div><div id="beforeafter"><div>prepend</div>'+
'<div>append</div></div><div>after</div>',
$('#beforeafter_container').html()
)
//testing with Zepto object as parameter
$('#beforeafter_container').html('<div id="beforeafter"></div>')
$('#beforeafter').append($(div('append')))
$('#beforeafter').prepend($(div('prepend')))
$('#beforeafter').before($(div('before')))
$('#beforeafter').after($(div('after')))
t.assertEqual(
'<div>before</div><div id="beforeafter"><div>prepend</div>'+
'<div>append</div></div><div>after</div>',
$('#beforeafter_container').html()
)
//testing with a zepto object of more than one element as parameter
$(document.body).append('<div class="append">append1</div><div class="append">append2</div>')
$(document.body).append('<div class="prepend">prepend1</div><div class="prepend">prepend2</div>')
$(document.body).append('<div class="before">before1</div><div class="before">before2</div>')
$(document.body).append('<div class="after">after1</div><div class="after">after2</div>')
$('#beforeafter_container').html('<div id="beforeafter"></div>')
$('#beforeafter').append($('.append'))
$('#beforeafter').prepend($('.prepend'))
$('#beforeafter').before($('.before'))
$('#beforeafter').after($('.after'))
t.assertEqual(
'<div class="before">before1</div><div class="before">before2</div><div id="beforeafter"><div class="prepend">prepend1</div><div class="prepend">prepend2</div>'+
'<div class="append">append1</div><div class="append">append2</div></div><div class="after">after1</div><div class="after">after2</div>',
$('#beforeafter_container').html()
)
//
var helloWorlds = [], appendContainer1 = $('<div> <div>Hello</div> <div>Hello</div> </div>'),
helloDivs = appendContainer1.find('div')
helloDivs.append(' world!')
helloDivs.each(function() { helloWorlds.push($(this).text()) })
t.assertEqual('Hello world!,Hello world!', helloWorlds.join(','))
//
var spans = [], appendContainer2 = $('<div> <div></div> <div></div> </div>'),
appendDivs = appendContainer2.find('div')
appendDivs.append($('<span>Test</span>'))
appendDivs.each(function() { spans.push($(this).html()) })
t.assertEqual('<span>Test</span>,<span>Test</span>', spans.join(','))
},
testBeforeAfterFragment: function(t){
var fragment = $('<div class=fragment />')
fragment.before('before').after('after')
t.assertLength(1, fragment)
t.assert(fragment.hasClass('fragment'))
},
testAppendMultipleArguments: function(t){
var el = $('<div><span>original</span></div>')
el.append(
$('<b>one</b>').get(0),
$('<b>two</b><b>three</b>').get(),
$('<b>four</b><b>five</b>'),
'<b>six</b>'
)
t.assertEqual('original one two three four five six',
el.children().map(function(){ return $(this).text() }).join(' '))
},
testAppendToPrependTo: function(t){
//testing with Zepto object
function div(contents){
var el = document.createElement('div')
el.innerHTML = contents
return el
}
var ap = $(div('appendto'))
var pr = $(div('prependto'))
var ap2 = ap.appendTo($('#appendtoprependto'))
var pr2 = pr.prependTo($('#appendtoprependto'))
// Test the object returned is correct for method chaining
t.assertSame(ap, ap2)
t.assertSame(pr, pr2)
t.assertEqual(
'<div id="appendtoprependto"><div>prependto</div>'+
'<div>appendto</div></div>',
$('#appendtoprependto_container').html()
)
//testing with a zepto object of more than one element as parameter
$(document.body).append('<div class="appendto">appendto1</div><div class="appendto">appendto2</div>')
$(document.body).append('<div class="prependto">prependto1</div><div class="prependto">prependto2</div>')
$('#appendtoprependto_container').html('<div id="appendtoprependto"></div>')
$('.appendto').appendTo($('#appendtoprependto'))
$('.prependto').prependTo($('#appendtoprependto'))
t.assertEqual(
'<div id="appendtoprependto"><div class="prependto">prependto1</div><div class="prependto">prependto2</div><div class="appendto">appendto1</div><div class="appendto">appendto2</div></div>',
$('#appendtoprependto_container').html()
)
//testing with a selector as parameter
$('#appendtoprependto_container').html('<div id="appendtoprependto"></div>')
ap.appendTo('#appendtoprependto')
pr.prependTo('#appendtoprependto')
t.assertEqual(
'<div id="appendtoprependto"><div>prependto</div>'+
'<div>appendto</div></div>',
$('#appendtoprependto_container').html()
)
},
testInsertBeforeInsertAfter: function(t){
//testing with Zepto object
function div(contents){
var el = document.createElement('div')
el.innerHTML = contents
return el
}
var ib = $(div('insertbefore'))
var ia = $(div('insertafter'))
var ibia = $('#insertbeforeinsertafter')
var ib2 = ib.insertBefore(ibia)
var ia2 = ia.insertAfter(ibia)
// Test the object returned is correct for method chaining
t.assertEqual(
'<div>insertbefore</div><div id="insertbeforeinsertafter">'+
'</div><div>insertafter</div>',
$('#insertbeforeinsertafter_container').html()
)
//testing with a zepto object of more than one element as parameter
$(document.body).append('<div class="insertbefore">insertbefore1</div><div class="insertbefore">insertbefore2</div>')
$(document.body).append('<div class="insertafter">insertafter1</div><div class="insertafter">insertafter2</div>')
$('#insertbeforeinsertafter_container').html('<div id="insertbeforeinsertafter"></div>')
$('.insertbefore').insertBefore($('#insertbeforeinsertafter'))
$('.insertafter').insertAfter($('#insertbeforeinsertafter'))
t.assertEqual(
'<div class="insertbefore">insertbefore1</div><div class="insertbefore">insertbefore2</div>'+
'<div id="insertbeforeinsertafter"></div><div class="insertafter">insertafter1</div>'+
'<div class="insertafter">insertafter2</div>',
$('#insertbeforeinsertafter_container').html()
)
//testing with a selector as parameter
$('#insertbeforeinsertafter_container').html('<div id="insertbeforeinsertafter"></div>')
ib.insertBefore('#insertbeforeinsertafter')
ia.insertAfter('#insertbeforeinsertafter')
t.assertEqual(
'<div>insertbefore</div><div id="insertbeforeinsertafter">'+
'</div><div>insertafter</div>',
$('#insertbeforeinsertafter_container').html()
)
},
testAppendEval: function (t) {
window.someGlobalVariable = 0
try {
$('#fixtures').append(
'<div><b id="newByAppend">Hi</b>' +
'<\script>this.someGlobalVariable += $("#newByAppend").size()<\/script></div>'
)
t.assertIdentical(1, window.someGlobalVariable)
} finally {
delete window.someGlobalVariable
}
},
testNoEvalWithSrc: function (t) {
try {
window.someGlobalVariable = false
$('<\script src="remote.js">window.someGlobalVariable = true<\/script>').appendTo('body')
t.assert(!window.someGlobalVariable, 'expected SCRIPT with src not to be evaled')
} finally {
delete window.someGlobalVariable
}
},
testHtmlEval: function (t) {
window.someGlobalVariable = 0
try {
$('<div>').appendTo('#fixtures').html(
'<div><b id="newByHtml">Hi</b>' +
'<\script>this.someGlobalVariable += $("#newByHtml").size()<\/script></div>'
)
t.assertIdentical(1, window.someGlobalVariable)
} finally {
delete window.someGlobalVariable
}
},
testPrependEval: function (t) {
window.someGlobalVariable = 0
try {
$('<div>').appendTo('#fixtures').prepend(
'<b id="newByPrepend">Hi</b>' +
'<\script>this.someGlobalVariable += $("#newByPrepend").size()<\/script>'
)
t.assertIdentical(1, window.someGlobalVariable)
} finally {
delete window.someGlobalVariable
}
},
testAppendTemplateNonEval: function (t) {
try {
window.someGlobalVariable = true
$('<' + 'script type="text/template">window.someGlobalVariable = false</script' + '>').appendTo('body')
t.assert(window.someGlobalVariable)
window.someGlobalVariable = true
$('<' + 'script type="text/template">this.someGlobalVariable = false</script' + '>').appendTo('body')
t.assert(window.someGlobalVariable)
} finally {
delete window.someGlobalVariable
}
},
testHtmlTemplateNonEval: function (t) {
try {
window.someGlobalVariable = true
$('<div></div>').appendTo('body')
.html('<' + 'script type="text/template">window.someGlobalVariable = false</script' + '>')
t.assert(window.someGlobalVariable)
} finally {
delete window.someGlobalVariable
}
},
testRemove: function (t) {
var newElement1 = $('<div id="some_new_element_1" />')
newElement1
.appendTo('body')
.remove()
t.assertEqual( $('#some_new_element_1').length, 0 )
//
var newElement2 = $('<div id="some_new_element_2" />'),
errorRaised = false
newElement2.appendTo('body')
$('#some_new_element_2').remove()
try {
newElement2.remove()
} catch (e) {
errorRaised = true
}
t.assert(!errorRaised)
},
testAddRemoveClass: function(t){
var el = $('#some_element').get(0)
$('#some_element').addClass('green')
t.assertEqual('green', el.className)
$('#some_element').addClass('green')
t.assertEqual('green', el.className)
$('#some_element').addClass('red')
t.assertEqual('green red', el.className)
$('#some_element').addClass('blue red')
t.assertEqual('green red blue', el.className)
$('#some_element').removeClass('green blue')
t.assertEqual('red', el.className)
$('#some_element').attr('class', ' red green blue ')
t.assertEqual(' red green blue ', el.className) // sanity check that WebKit doesn't change original input
$('#some_element').removeClass('green')
t.assertEqual('red blue', el.className)
//addClass with function argument
$('#some_element').addClass(function(idx,classes){
//test the value of "this"
t.assertEqualCollection($('#some_element'), $(this))
//test original classes are being passed
t.assertEqual('red blue', this.className)
return "green"
})
t.assertEqual('red blue green', el.className)
//removeClass with function argument
$('#some_element').removeClass(function(idx,classes){
//test the value of "this"
t.assertEqualCollection($('#some_element'), $(this))
//test original classes are being passed
t.assertEqual('red blue green', this.className)
return "blue"
})
t.assertEqual('red green', el.className)
$('#some_element').removeClass()
t.assertEqual('', el.className)
},
testHasClass: function(t){
var el = $('#some_element').get(0)
$('#some_element').addClass('green')
t.assert($('#some_element').hasClass('green'))
t.assert(!$('#some_element').hasClass('orange'))
$('#some_element').addClass('orange')
t.assert($('#some_element').hasClass('green'))
t.assert($('#some_element').hasClass('orange'))
},
testHasClassEmpty: function(t){
var z = $('#doesnotexist')
t.assertEqual(0, z.size())
t.assertFalse(z.hasClass('a'))
},
testToggleClass: function(t){
var el = $('#toggle_element').get(0)
$('#toggle_element').toggleClass('green')
t.assert($('#toggle_element').hasClass('green'))
t.assert(!$('#toggle_element').hasClass('orange'))
$('#toggle_element').toggleClass('orange')
t.assert($('#toggle_element').hasClass('green'))
t.assert($('#toggle_element').hasClass('orange'))
$('#toggle_element').toggleClass('green')
t.assert(!$('#toggle_element').hasClass('green'))
t.assert($('#toggle_element').hasClass('orange'))
$('#toggle_element').toggleClass('orange')
t.assert(!$('#toggle_element').hasClass('green'))
t.assert(!$('#toggle_element').hasClass('orange'))
$('#toggle_element').toggleClass('orange', false)
t.assert(!$('#toggle_element').hasClass('orange'))
$('#toggle_element').toggleClass('orange', false)
t.assert(!$('#toggle_element').hasClass('orange'))
$('#toggle_element').toggleClass('orange', true)
t.assert($('#toggle_element').hasClass('orange'))
$('#toggle_element').toggleClass('orange', true)
t.assert($('#toggle_element').hasClass('orange'))
//function argument
$('#toggle_element').toggleClass(function(idx,classes){
//test the value of "this"
t.assertEqualCollection($('#toggle_element'), $(this))
//test original classes are being passed
t.assertEqual('orange', this.className)
return "brown"
})
t.assert($('#toggle_element').hasClass('brown'))
$('#toggle_element').toggleClass(function(idx,classes){
return "yellow"
},false)
t.assert(!$('#toggle_element').hasClass('yellow'))
$('#toggle_element').toggleClass(function(idx,classes){
return "yellow"
},true)
t.assert($('#toggle_element').hasClass('yellow'))
},
testClassSVG: function(t){
var svg = $('svg')
t.assert(!svg.hasClass('foo'))
svg.addClass('foo bar')
t.assert(svg.hasClass('foo'))
t.assert(svg.hasClass('bar'))
svg.removeClass('foo')
t.assert(!svg.hasClass('foo'))
t.assert(svg.hasClass('bar'))
svg.toggleClass('bar')
t.assert(!svg.hasClass('foo'))
t.assert(!svg.hasClass('bar'))
},
testIndex: function(t){
t.assertEqual($("p > span").index("#nay"), 2)
t.assertEqual($("p > span").index(".yay"), 0)
t.assertEqual($("span").index("span"), 0)
t.assertEqual($("span").index("boo"), -1)
t.assertEqual($('#index_test > *').eq(-1).index(), 1)
},
testBoolAttr: function (t) {
t.assertEqual($('#BooleanInput').attr('required'), true)
t.assertEqual($('#BooleanInput').attr('non_existant_attr'), undefined)
},
testDocumentReady: function (t) {
// Check that if document is already loaded, ready() immediately executes callback
var arg1, arg2, fired = false
$(function (Z1) {
arg1 = Z1
$(document).ready(function (Z2) {
arg2 = Z2
fired = true
})
})
t.assertTrue(fired)
t.assertIdentical(Zepto, arg1)
t.assertIdentical(Zepto, arg2)
},
testSlice: function (t) {
var $els = $("#slice_test div")
t.assertEqual($els.slice().length, 3)
t.assertEqual(typeof $els.slice().ready, 'function')
t.assertEqual($els.slice(-1)[0].className, 'slice3')
}
})
Evidence('EventTest', {
tearDown: function(){
$('*').unbind()
},
testBind: function(t){
var counter = 0
$(document.body).bind('click', function(){ counter++ })
click($('#some_element').get(0))
t.assertEqual(1, counter)
counter = 0
$('#some_element').bind('click mousedown', function(){ counter++ })
click($('#some_element').get(0))
mousedown($('#some_element').get(0))
t.assertEqual(3, counter) // 1 = body click, 2 = element click, 3 = element mousedown
},
testBindWithObject: function(t){
var counter = 0, keyCounter = 0, el = $('#some_element'),
eventData = {
click: function(){ counter++ },
keypress: function(){ keyCounter++ }
}
$(document.body).bind(eventData)
el.trigger('click')
el.trigger('click')
t.assertEqual(2, counter)
el.trigger('keypress')
t.assertEqual(1, keyCounter)
$(document.body).unbind({ keypress: eventData.keypress })
el.trigger('click')
t.assertEqual(3, counter)
el.trigger('keypress')
t.assertEqual(1, keyCounter)
},
testBindContext: function(t){
var context, handler = function(){
context = $(this)
}
$('#empty_test').bind("click",handler)
$('#empty_test').bind("mousedown",handler)
click($('#empty_test').get(0))
t.assertEqualCollection($('#empty_test'), context)
context = null
mousedown($('#empty_test').get(0))
t.assertEqualCollection($('#empty_test'), context)
},
testBindWithCustomData: function(t) {
var counter = 0
var handler = function(ev,customData) { counter = customData.counter }
$('#some_element').bind('custom', handler)
$('#some_element').trigger('custom', { counter: 10 })
t.assertEqual(10, counter)
},
testBindPreventDefault: function (t) {
var link = $('<a href="#"></a>'),
prevented = false
link
.appendTo('body')
.bind('click', function () {
return false
})
.bind('click', function (e) {
prevented = e.defaultPrevented
})
.trigger('click')
t.assert(prevented)
},
testCreateEventObject: function(t){
var e = $.Event('custom')
t.assertEqual('custom', e.type)
var e2 = new $.Event('custom')
t.assertEqual('custom', e2.type)
var e3 = $.Event('custom', {customKey: 'customValue'})
t.assertEqual('custom', e3.type)
t.assertEqual('customValue', e3.customKey)
var e4 = $.Event('custom', {bubbles: false})
t.assertFalse(e4.bubbles)
},
testTriggerEventObject: function(t){
var counter = 0,
customEventKey = 0
var handler = function(ev,customData) {
counter = customData.counter
customEventKey = ev.customKey
}
var customEventObject = $.Event('custom', { customKey: 20 })
$('#some_element').bind('custom', handler)
$('#some_element').trigger(customEventObject, { counter: 10 })
t.assertEqual(10, counter)
t.assertEqual(20, customEventKey)
},
testTriggerEventCancelled: function(t){
$('#some_element').bind('custom', function(e){
e.preventDefault()
})
var event = $.Event('custom')
t.assert(!event.defaultPrevented)
$('#some_element').trigger(event)
t.assert(event.defaultPrevented)
},
testTriggerHandler: function(t){
t.assertUndefined($('doesnotexist').triggerHandler('submit'))
var form = $('#trigger_handler form').get(0)
$('#trigger_handler').bind('submit', function(e) {
t.fail("triggerHandler shouldn't bubble")
})
var executed = []
$(form).bind('submit', function(e) {
executed.push("1")
t.assertEqual(form, e.target)
return 1
})
$(form).bind('submit', function(e) {
executed.push("2")
t.assertEqual(form, e.target)
e.stopImmediatePropagation()
return 2
})
$(form).bind('submit', function(e) {
t.fail("triggerHandler shouldn't continue after stopImmediatePropagation")
})
t.assertIdentical(2, $(form).triggerHandler('submit'))
t.assertEqual('1 2', executed.join(' '))
},
testUnbind: function(t){
var counter = 0, el = $('#another_element').get(0)
var handler = function(){ counter++ }
$('#another_element').bind('click mousedown', handler)
click(el)
mousedown(el)
t.assertEqual(2, counter)
$('#another_element').unbind('click', handler)
click(el)
t.assertEqual(2, counter)
mousedown(el)
t.assertEqual(3, counter)
$('#another_element').unbind('mousedown')
mousedown(el)
t.assertEqual(3, counter)
$('#another_element').bind('click mousedown', handler)
click(el)
mousedown(el)
t.assertEqual(5, counter)
$('#another_element').unbind()
click(el)
mousedown(el)
t.assertEqual(5, counter)
},
testUnbindWithNamespace: function(t){
var count = 0
$("#namespace_test").bind("click.bar", function() { count++ })
$("#namespace_test").bind("click.foo", function() { count++ })
$("#namespace_test").bind("mousedown.foo.bar", function() { count++ })
$("#namespace_test").trigger("click")
t.assertEqual(2, count)
$("#namespace_test").unbind("click.baz")
$("#namespace_test").trigger("click")
t.assertEqual(4, count)
$("#namespace_test").unbind("click.foo")
$("#namespace_test").trigger("click")
t.assertEqual(5, count)
$("#namespace_test").trigger("mousedown")
t.assertEqual(6, count)
$("#namespace_test").unbind(".bar")
$("#namespace_test").trigger("click").trigger("mousedown")
t.assertEqual(6, count)
},
testDelegate: function(t){
var counter = 0, pcounter = 0
$(document.body).delegate('#some_element', 'click', function(){ counter++ })
$('p').delegate('span.yay', 'click', function(){ counter++ })
$(document.body).delegate('p', 'click', function(){ pcounter++ })
click($('#some_element').get(0))
t.assertEqual(1, counter)
click($('span.yay').get(0))
t.assertEqual(2, counter)
click($('span.nay').get(0))
t.assertEqual(2, counter)
click($('p').get(0))
t.assertEqual(3, pcounter)
},
testDelegateBlurFocus: function(t) {
var counter = 0
$('#delegate_blur_test').delegate('input', 'blur', function(){ counter++ })
$('#delegate_blur_test').find('input').focus()
$('#delegate_blur_test').find('input').blur()
t.assertEqual(1, counter)
$('#delegate_blur_test').find('input').focus()
$('#delegate_blur_test').find('input').blur()
t.assertEqual(2, counter)
$('#delegate_focus_test').delegate('input', 'focus', function(){ counter++ })
$('#delegate_focus_test').find('input').focus()
$('#delegate_focus_test').find('input').blur()
t.assertEqual(3, counter)
$('#delegate_focus_test').find('input').focus()
$('#delegate_focus_test').find('input').blur()
t.assertEqual(4, counter)
},
testDelegateNamespacedBlurFocus: function(t) {
var counter = 0
$('#delegate_blur_test').delegate('input', 'blur.namespace_test', function(){ counter++ })
$('#delegate_blur_test').find('input').focus()
$('#delegate_blur_test').find('input').blur()
t.assertEqual(1, counter)
$('#delegate_blur_test').find('input').focus()
$('#delegate_blur_test').find('input').blur()
t.assertEqual(2, counter)
$('#delegate_focus_test').delegate('input', 'focus.namespace_test', function(){ counter++ })
$('#delegate_focus_test').find('input').focus()
$('#delegate_focus_test').find('input').blur()
t.assertEqual(3, counter)
$('#delegate_focus_test').find('input').focus()
$('#delegate_focus_test').find('input').blur()
t.assertEqual(4, counter)
},
testUndelegateNamespacedBlurFocus: function(t) {
var el, counter = 0
el = $('#delegate_blur_test')
el.delegate('input', 'blur.test', function(){ counter++ })
el.find('input').focus().blur()
t.assertEqual(1, counter, 'expected handler to be triggered')
el.undelegate('input', '.test')
el.find('input').focus().blur()
t.assertEqual(1, counter, 'expected handler to unbind')
el = $('#delegate_focus_test')
el.delegate('input', 'focus.test', function(){ counter++ })
el.find('input').focus().blur()
t.assertEqual(2, counter, 'expected handler to be triggered')
el.undelegate('input', '.test')
el.find('input').focus().blur()
t.assertEqual(2, counter, 'expected handler to unbind')
},
testDelegateReturnFalse: function(t){
$(document.body).delegate('#some_element', 'click', function(){ return false })
var event = $.Event('click')
$('#some_element').trigger(event)
t.assertTrue(event.defaultPrevented)
},
testDelegateWithObject: function(t){
var counter = 0, received, el = $('p').first(),
eventData = {
click: function(){ counter++ },
custom: function(e, data){ received = data }
}
$(document.body).delegate('p', eventData)
el.trigger('click')
t.assertEqual(1, counter)
el.trigger('click')
t.assertEqual(2, counter)
el.trigger('custom', 'boo')
t.assertEqual('boo', received)
$(document.body).undelegate('p', {custom: eventData.custom})
el.trigger('click')
t.assertEqual(3, counter)
el.trigger('custom', 'bam')
t.assertEqual('boo', received)
},
testDelegateWithCustomData: function(t) {
var received
$(document).delegate('#some_element', 'custom', function(e, data, more){ received = data + more })
$('p').delegate('span.yay', 'custom', function(e, data){ received = data })
$(document).delegate('p', 'custom', function(e, data){ received = data })
$('#some_element').trigger('custom', 'one')
t.assertEqual('oneundefined', received)
$('#some_element').trigger('custom', ['one', 'two'])
t.assertEqual('onetwo', received)
$('span.yay').trigger('custom', 'boom')
t.assertEqual('boom', received)
$('span.yay').trigger('custom', ['bam', 'boom'])
t.assertEqual('bam', received)
$('span.nay').trigger('custom', 'noes')
t.assertEqual('noes', received)
$('p').first().trigger('custom', 'para')
t.assertEqual('para', received)
},
testDelegateEventProxy: function(t){
var content
$('div#delegate_test').delegate('span.second-level', 'click', function(e){
t.assertEqual($('span.second-level').get(0), this)
t.assertEqual($('span.second-level').get(0), e.currentTarget)
t.refuteEqual($('span.second-level').get(0), e.originalEvent.currentTarget)
t.assertEqual($('div#delegate_test').get(0), e.liveFired)
content = $(this).html()
})
click($('span.second-level').get(0))
t.assertEqual('hi', content)
var fired = false
if (window.location.hash.length) window.location.hash = ''
$('div#delegate_test').html('<a href="#foo"></a>')
$('div#delegate_test').delegate('a', 'click', function(e){
e.preventDefault()
fired = true
})
click($('div#delegate_test a').get(0))
t.assert(fired)
t.refuteEqual('#foo', window.location.hash)
fired = false
if (window.location.hash.length) window.location.hash = ''
$('div#delegate_test').html('<a href="#bar"></a>')
$('div#delegate_test a').trigger('click')
t.assert(fired)
t.refuteEqual('#bar', window.location.hash)
},
testUndelegate: function(t){
var count = 0, handler = function() { count++ }
$("#undelegate_test").bind("click mousedown", handler)
$("#undelegate_test").delegate("span.first-level", "click mousedown", handler)
$("#undelegate_test").delegate("span.second-level", "click mousedown", handler)
$("#undelegate_test span.second-level").trigger("click")
t.assertEqual(3, count)
$("#undelegate_test").undelegate("span.second-level", "click", handler)
$("#undelegate_test span.second-level").trigger("click")
t.assertEqual(5, count)
$("#undelegate_test").undelegate("span.first-level")
$("#undelegate_test span.second-level").trigger("click")
t.assertEqual(6, count)
$("#undelegate_test").unbind("click")
$("#undelegate_test span.second-level").trigger("click")
t.assertEqual(6, count)
$("#undelegate_test span.second-level").trigger("mousedown")
t.assertEqual(8, count)
$("#undelegate_test").undelegate()
$("#undelegate_test span.second-level").trigger("mousedown")
t.assertEqual(8, count)
},
testLive: function(t){
var counter = 0
$('p.live').live('click', function(){ counter++ })
$(document.body).append('<p class="live" id="live_1"></p>')
$(document.body).append('<p class="live" id="live_2"></p>')
click($('#live_1').get(0))
click($('#live_2').get(0))
$('p.live').remove()
$(document.body).append('<p class="live" id="live_this_test"></p>')
$('p.live').live('click', function(){
t.assertEqual(document.getElementById('live_this_test'), this)
})
click($('#live_this_test').get(0))
t.assertEqual(3, counter)
},
testDie: function(t){
var count = 0, handler = function() { count++ }
$("#another_element").live("click mousedown", handler)
$("#another_element").trigger("click")
t.assertEqual(1, count)
$("#another_element").die("click", handler)
$("#another_element").trigger("click")
t.assertEqual(1, count)
$("#another_element").trigger("mousedown")
t.assertEqual(2, count)
$("#another_element").die()
$("#another_element").trigger("mousedown")
t.assertEqual(2, count)
},
testOn: function(t){
var el = $('#some_element'), node = el.get(0), ret,
bindTriggered = 0, delegateTriggered = 0
ret = el.on('click', function(e){
bindTriggered++
t.assertIdentical(node, this)
})
.on({ click: function(){bindTriggered++} })
t.assertIdentical(el, ret)
ret = $(document.body).on('click', 'div', function(e){
delegateTriggered++
t.assertIdentical(node, this)
})
.on({ click: function(){delegateTriggered++} }, '*[id^=some]')
t.assertIdentical(document.body, ret.get(0))
click(node)
t.assertEqual(2, bindTriggered, "bind handlers")
t.assertEqual(2, delegateTriggered, "delegate handlers")
},
testOff: function(t){
var el = $('#some_element'), bindTriggered = 0, delegateTriggered = 0,
handler = function(){ bindTriggered++ }
el.bind('click', handler).bind('click', function(){ bindTriggered++ })
el.live('click', function(){ delegateTriggered++ })
click(el.get(0))
t.assertEqual(2, bindTriggered, "bind handlers before unbind")
t.assertEqual(1, delegateTriggered, "delegate handlers before unbind")
el.off('click', handler)
$(document.body).off('click', '#some_element')
click(el.get(0))
t.assertEqual(3, bindTriggered, "bind handlers")
t.assertEqual(1, delegateTriggered, "delegate handlers")
},
testOne: function(t){
var counter = 0, context, received, el = $('#some_element')
$(document.body).one('click', function(e, data, more){
context = this
counter++
received = data + more
t.assertIn('preventDefault', e)
return false
})
var evt = $.Event('click')
el.trigger(evt, ['one', 'two'])
t.assertEqual(1, counter)
t.assertEqual('onetwo', received)
t.assertIdentical(document.body, context)
t.assertTrue(evt.defaultPrevented)
el.trigger('click')
t.assertEqual(1, counter, "the event handler didn't unbind itself")
},
testOneWithObject: function(t){
var counter = 0, el = $('#some_element')
$(document.body).one({
click: function() { counter++ },
custom: function() { counter-- }
})
el.trigger('click')
t.assertEqual(1, counter)
el.trigger('click')
t.assertEqual(1, counter)
el.trigger('custom')
t.assertEqual(0, counter)
el.trigger('custom')
t.assertEqual(0, counter)
},
testDOMEventWrappers: function(t){
var events = ('blur focus focusin focusout load resize scroll unload click dblclick '+
'mousedown mouseup mousemove mouseover mouseout '+
'change select keydown keypress keyup error').split(' ')
var el = $('#another_element'), count = 0
events.forEach(function(event){
t.assertTrue($.isFunction(el[event]), 'event type: ' + event)
})
el.click(function(){ count++ })
click(el.get(0))
t.assertEqual(1, count)
},
testCustomEvents: function (t) {
var el = $(document.body)
el.bind('custom', function(evt, a, b) {
t.assertEqual(a, 1)
t.assertEqual(b, 2)
el.unbind()
})
el.trigger('custom', [1, 2])
el.bind('custom', function(evt, a) {
t.assertEqual(a, 1)
el.unbind()
})
el.trigger('custom', 1)
var eventData = {z: 1}
el.bind('custom', function(evt, a) {
t.assertEqual(a, eventData)
el.unbind()
})
el.trigger('custom', eventData)
},
testSpecialEvent: function (t) {
var clickEvent = $.Event('click'),
mouseDownEvent = $.Event('mousedown'),
mouseUpEvent = $.Event('mouseup'),
mouseMoveEvent = $.Event('mousemove'),
submitEvent = $.Event('submit')
t.assertEqual(MouseEvent, clickEvent.constructor)
t.assertEqual(MouseEvent, mouseDownEvent.constructor)
t.assertEqual(MouseEvent, mouseUpEvent.constructor)
t.assertEqual(MouseEvent, mouseMoveEvent.constructor)
t.assertEqual(Event, submitEvent.constructor)
}
})
})()
</script>
</body>
</html>
Something went wrong with that request. Please try again.