Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

2146 lines (1714 sloc) 73.781 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-blah="whatever" 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="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_div"><span>hi</span><span>hi</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>
</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', {
// 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}))
},
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, $(''))
},
testDollarWithNonDOM: function(t){
var zepto = $(['a', 'b', 'c'])
t.assertLength(3, zepto)
t.assertEqualCollection(['a', 'b', 'c'], zepto)
},
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))
},
testDollarWithDocument: function(t){
var z = $(document)
t.assertLength(1, z)
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)
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>hello</div> ")
t.assertLength(1, fragment)
},
testDollarWithTextNode: function(t){
var textNode = $(document.createTextNode('hi there'))
t.assertLength(1, textNode)
t.assertEqual(Node.TEXT_NODE, textNode.get(0).nodeType)
},
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(','))
},
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)
},
testPrev: function(t){
t.assertEqual('H1', $('p').prev().get(0).tagName)
t.assertEqual('DIV', $('ul').prev().get(0).tagName)
},
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) )
},
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){
$('#show_hide_div1').hide()
t.assertEqual('none', $('#show_hide_div1').get(0).style.display)
$('#show_hide_div1').toggle()
t.assertEqual('', $('#show_hide_div1').get(0).style.display)
$('#show_hide_div1').toggle()
t.assertEqual('none', $('#show_hide_div1').get(0).style.display)
$('#show_hide_div1').toggle(true)
t.assertEqual('', $('#show_hide_div1').get(0).style.display)
$('#show_hide_div1').toggle(true)
t.assertEqual('', $('#show_hide_div1').get(0).style.display)
$('#show_hide_div1').toggle(false)
t.assertEqual('none', $('#show_hide_div1').get(0).style.display)
$('#show_hide_div1').toggle(false)
t.assertEqual('none', $('#show_hide_div1').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'))
},
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())
},
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())
},
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) {
t.assert(document.getElementById("wrap_test_div").nodeType)
$('#wrap_test_div span').wrapAll('<div id="wrap_test" />')
t.assert(document.getElementById("wrap_test").nodeType)
t.assertEqual($("#wrap_test").children().length, 2)
$('#wrap_test_div span').wrap('<div class="wrap_test" />')
t.assert(document.getElementsByClassName("wrap_test")[0].nodeType)
t.assertEqual($('#wrap_test_div span').length, $('.wrap_test').length)
},
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)
},
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>')
var innerFragment = fragment.find("#inner")
innerFragment.unwrap()
t.assertEqual(0, fragment.children().length)
t.assertEqual("", innerFragment.parent().attr("id"))
fragment = $('<div id="outer"><div id="inner"></div><div id="uninvolved"></div></div>')
innerFragment = fragment.find("#inner")
var uninvolved = fragment.find("#uninvolved")
innerFragment.unwrap()
t.assertEqual(0, fragment.children().length)
t.assertEqual("", innerFragment.parent().attr("id"))
t.assertEqual("", uninvolved.parent().attr("id"))
t.assertEqual("uninvolved", innerFragment.siblings().attr("id"))
t.assertEqual("inner", uninvolved.siblings().attr("id"))
},
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 withoutParent = $(document.createElement('div'))
t.assert(!withoutParent.is('div'))
},
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'))
},
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'))
},
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"))
t.assertUndefined($('doesnotexist').attr('yo'))
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'))
},
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(', '))
},
testRemoveAttr: function(t) {
var el = $('#attr_remove')
t.assertEqual('boom', el.attr('data-name'))
el.removeAttr('data-name')
t.assertNull(el.attr('data-name'))
},
testData: function(t) {
var els = $('#data_attr')
els.data('fun', 'hello')
t.assertEqual('hello', els.attr('data-fun'))
t.assertEqual('hello', els.data('fun'))
t.assertEqual('whatever', els.data('blah'))
},
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())
},
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'))
},
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) {
try {
window.someGlobalVariable = false
$('<' + 'script>window.someGlobalVariable = true</script' + '>').appendTo('body')
t.assert(window.someGlobalVariable)
window.someGlobalVariable = false
$('<' + 'script>this.someGlobalVariable = true</script' + '>').appendTo('body')
t.assert(window.someGlobalVariable)
} finally {
delete window.someGlobalVariable
}
},
testHtmlEval: function (t) {
try {
window.someGlobalVariable = false
$('<div></div>').appendTo('body')
.html('<' + 'script>window.someGlobalVariable = true</script' + '>')
t.assert(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'))
},
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)
},
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>
Jump to Line
Something went wrong with that request. Please try again.