Permalink
Fetching contributors…
Cannot retrieve contributors at this time
3377 lines (2736 sloc) 115 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 Core unit tests</title>
<script src="../vendor/evidence.js"></script>
<script src="evidence_runner.js"></script>
<script>
// avoid caching
(function(){
function load(scripts){
scripts.split(' ').forEach(function(script){
document.write('<script src="../src/'+script+'.js?'+(+new Date)+'"></scr'+'ipt>')
})
}
load('zepto event ie')
})()
</script>
<style>
#get_style_element {
font-size: 48px;
color: black;
}
</style>
</head>
<body>
<h1>Zepto Core 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>
<div id="attr_remove_multi" data-id="someId1" data-name="someName1"></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">
</form>
<label for="prop_test2" id="prop_test1"></label>
<input id="prop_test2" type="text" tabindex="-1" maxlength="10" readonly class="propTest" />
<table id="prop_test3" cellspacing="10" cellpadding="5">
<tr>
<td id="prop_test4" rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td id="prop_test5" colspan="2"></td>
</tr>
</table>
<img id="prop_test6" usemap="#imgMap" />
<map name="imgMap">
</map>
<div id="prop_test7" contenteditable="true"></div>
<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="texttest3" class="texttest"></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>
<iframe id="contentsIframeTest" src="fixtures/iframe_document.html"></iframe>
<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>
<iframe src="fixtures/iframe_document.html"></iframe>
<iframe id="link_target_iframe" name="link_target_iframe" width="10" height="10"></iframe>
<a id="link_that_will_be_prevented" href="fixtures/iframe_document.html" target="link_target_iframe"></a>
<div id="test_dollar_with_shadow_root" style="display:none;"></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)
}
function testDocumentFragmentOrShadowRootContext($fragment, t) {
t.assertLength(1, $fragment)
t.assertEqual(Node.DOCUMENT_FRAGMENT_NODE, $fragment.get(0).nodeType)
var fragment = $fragment[0]
var $div = $('<div id="child"><div class="inner"></div></div>')
t.assertLength(0, $('#child', fragment))
fragment.appendChild($div[0])
var expectedElement = fragment.querySelector('#child')
t.assertLength(1, $('#child', fragment))
t.assertEqual($div[0], $('#child', fragment).get(0))
t.assertEqual(expectedElement, $('#child', fragment).get(0))
expectedElement = fragment.querySelector('.inner')
t.assertLength(1, $('.inner', fragment))
t.assertEqual(expectedElement, $('.inner', fragment).get(0))
var expectedElements = fragment.querySelectorAll('div')
t.assertLength(2, $('div', fragment))
t.assertEqual(expectedElements[0], $('div', fragment).get(0))
t.assertEqual(expectedElements[1], $('div', fragment).get(1))
}
var globalVarSetFromReady = ""
$(document).ready(function(){ globalVarSetFromReady = 'hi!' })
var globalVarSetFromReady2 = ""
$(function(){ globalVarSetFromReady2 = 'hi!' })
var globalVarSetFromReady3 = ""
$(document).on('ready', function(){ globalVarSetFromReady3 = 'hi!' })
var globalVarSetFromReady4 = ""
$(document).on('foo ready bar', function(){ globalVarSetFromReady4 = '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.assertZeptoCollection = function(expectedLength, object, message) {
if (!$.zepto.isZ(object))
this._assertExpression(false, message || 'Failed assertion.',
'Expected %o to be a Zepto collection.', object)
else
this.assertLength(expectedLength, object, message)
}
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')
},
testIsWindow: function(t){
t.assertFalse($.isWindow())
t.assertFalse($.isWindow({}))
t.assertFalse($.isWindow(document.body))
t.assertTrue($.isWindow(window))
t.assertTrue($.isWindow($('iframe').get(0).contentWindow))
},
testDollarIsNumeric: function(t){
t.assertTrue($.isNumeric( '-10' ))
t.assertTrue($.isNumeric( '0' ))
t.assertTrue($.isNumeric( 0xFF ))
t.assertTrue($.isNumeric( '0xFF' ))
t.assertTrue($.isNumeric( '8e5' ))
t.assertTrue($.isNumeric( '3.1415' ))
t.assertTrue($.isNumeric( +10 ))
t.assertTrue($.isNumeric( 0144 ))
t.assertFalse($.isNumeric( '-0x42' ), '-0x42')
t.assertFalse($.isNumeric( '7.2acdgs' ), '7.2acdgs')
t.assertFalse($.isNumeric( '' ), 'empty string')
t.assertFalse($.isNumeric( {} ), 'empty hash')
t.assertFalse($.isNumeric( NaN ), 'NaN')
t.assertFalse($.isNumeric( null ), 'null')
t.assertFalse($.isNumeric( true ), 'true')
t.assertFalse($.isNumeric( Infinity ), 'Infinity')
t.assertFalse($.isNumeric( undefined ), 'undefined')
},
// test to see if we augment iOS 3.2 with String#trim()
testTrim: function(t){
t.assertEqual("blah", " blah ".trim())
t.assertIdentical("", $.trim(undefined))
t.assertIdentical("", $.trim(null))
t.assertIdentical("", $.trim(""))
t.assertIdentical("0", $.trim(0))
},
testCamelCase: function(t){
t.assertEqual("hello", $.camelCase("hello"))
t.assertEqual("HELLO", $.camelCase("HELLO"))
t.assertEqual("helloNiceWorld", $.camelCase("hello-nice-world"))
t.assertEqual("helloWorld", $.camelCase("helloWorld"))
},
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)
// deep copy with array
obj = {}
var initial = { array: [1,2,3,4], object:{a:{b:["c","d"]}} }
$.extend(true, obj, initial)
t.assertTrue($.isArray(obj.array))
t.assertEqual(JSON.stringify(obj), JSON.stringify(initial))
t.refuteIdentical(obj, initial)
t.refuteIdentical(obj.array, initial.array)
t.refuteIdentical(obj.object, initial.object)
t.refuteIdentical(obj.object.a, initial.object.a)
t.refuteIdentical(obj.object.a.b, initial.object.a.b)
},
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)
t.assertFalse($.zepto.isZ())
t.assertFalse($.zepto.isZ([]))
t.assertTrue($.zepto.isZ($('body')))
},
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'))
},
testDollarUnique: function(t){
t.refuteIdentical($('#some_element'), $('#some_element'))
t.refuteIdentical($('#nonexistent'), $('#nonexistent'))
},
testDollarWithNil: function(t){
t.assertZeptoCollection(0, $(null))
t.assertZeptoCollection(0, $(undefined))
t.assertZeptoCollection(0, $(false))
t.assertZeptoCollection(0, $(''))
t.assertZeptoCollection(0, $('#'))
var Z1 = $(null), Z2 = $(null)
t.assert(Z1 !== Z2)
},
testDollarWithNonDOM: function(t){
var zepto = $(['a', 'b', 'c'])
t.assertZeptoCollection(3, zepto)
t.assertEqualCollection(['a', 'b', 'c'], zepto)
t.assert($({}))
t.assertTrue($({ a: true })[0].a)
// Plain objects wrapped by a Zepto collection
// should still refer to the original object
// This is required for events on plain objects
var plainObject = { a: 1 }
$(plainObject).get(0).a = 2
t.assertEqual(2, plainObject.a)
t.assertEqual(2, $(plainObject).get(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')
t.assertEqual(zepto[0], zepto.get(0))
t.assertEqual(zepto[zepto.length - 1], zepto.get(-1))
t.assertUndefined(zepto.get(zepto.length))
},
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)
},
testDollarWithElementInIframe: function(t){
var iframe = $('#fixtures iframe').get(0),
iframeWin = iframe.contentWindow,
iframeDoc = iframe.contentDocument,
iframeBody = iframeDoc.body,
iframeEl = $(iframeBody).find('b')
t.assertIdentical(iframeWin, $(iframeWin).get(0))
t.assertIdentical(iframeDoc, $(iframeDoc).get(0))
t.assertIdentical(iframeBody, $(iframeBody).get(0))
t.assertEqual('B', iframeEl.pluck('tagName').join(','))
t.assertEqual('Hello from iframe!', iframeEl.text())
},
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'))
},
testDollarNonemptyFragmentAndProperties: function(t){
var zepto = $('<a>Goodbye</a>', { text: "Hello", href: "http://zeptojs.com" })
t.assertLength(1, zepto)
t.assertEqual('Hello', zepto.text())
t.assertEqual('http://zeptojs.com', zepto.attr("href"))
},
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.assertZeptoCollection(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)
t.assertEqual('hi!', globalVarSetFromReady3)
t.assertEqual('hi!', globalVarSetFromReady4)
},
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)
},
testEachBreak: function(t){
var index, tagnames = []
$('#eachtest > *').each(function(idx, el){
index = idx
t.assertIdentical(el, this)
tagnames.push(el.tagName.toUpperCase())
if (idx == 1) return false
})
t.assertEqual('SPAN, B', tagnames.join(', '))
t.assertEqual(1, index)
},
testNoop: function(t){
t.assertUndefined($.noop())
},
testConcat: function(t){
var $collection1 = $('#eachtest > *')
var $collection2 = $('#find1 .findme')
var $collection3 = $('#some_element, #another_element')
var result, array = $collection1.toArray().concat($collection2.toArray(), $collection3.toArray())
result = $collection1.concat($collection2, $collection3.toArray())
t.assertEqualCollection(array, result)
result = $.fn.concat.apply($collection1.toArray(), [$collection2, $collection3.toArray()])
t.assertEqualCollection(array, result)
},
testMap: function(t){
var results = $('#eachtest > *').map(function(idx, el) {
t.assertIdentical(el, this)
return idx + ':' + this.nodeName.toUpperCase()
})
t.assertEqual(3, results.size())
t.assertEqual('0:SPAN, 1:B, 2:BR', results.get().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(','))
},
testDollarMapArrayLike: function(t){
var results
results = $.map({ length: 1, a: 'b' }, function(value, key) {
return key + '=' + value
})
t.assertEqual('a=b,length=1', results.sort().join(','))
results = $.map({ length: 0, a: 'b' }, function(value, key) {
return key + '=' + value
})
t.assertEqual(0, results.length)
results = $.map(function(){}, function(value, key) {
return key + '=' + value
})
t.assertEqual(0, results.length)
},
testDollarGrep: function(t){
var fruits = ['apples', 'oranges', 'pineapple', 'peach']
var result = $.grep(fruits, function(name){ return /apple/.test(name) })
t.assertEqualCollection(['apples', 'pineapple'], result)
},
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"}'))
},
testDollarWithDocumentFragmentContext: function(t){
testDocumentFragmentOrShadowRootContext($(document.createDocumentFragment()), t)
},
testDollarWithShadowRootContext: function(t){
if ('createShadowRoot' in document.body) {
var $subject = $('#test_dollar_with_shadow_root')
t.assertLength(1, $subject)
testDocumentFragmentOrShadowRootContext($($subject[0].createShadowRoot()), t)
}
},
testEq: function(t){
var $els = $('#eq_test div')
t.assertZeptoCollection(1, $els.eq(0))
t.assertZeptoCollection(1, $els.eq(-1))
t.assertEqual($els.eq(-1)[0].className, 'eq2')
t.assertUndefined($els.eq(-1).tagName)
t.assertZeptoCollection(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(''))
},
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())
var el = $('#some_element')
t.assertIdentical(el, el.offset({}))
t.assertSame($('<div>').offset(), {left: 0, top: 0})
},
testOffsetOnHTML: function(t){
var offset = $('html').offset()
t.assertEqual(offset.left, 0)
t.assertEqual(offset.top, 0)
t.assert('width' in offset)
t.assert('height' in 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())
// with a tall element on the page,
// the window (viewport) should be shorter than the total
// document height
$('<div style="height:9999px" id="very_high"></div>').appendTo('body')
t.assert(
$(window).height() < $(document).height(),
"'window' height was not smaller than 'document' height?")
$('#very_high').remove()
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'))
},
testClosestMultiple: function(t){
var els = $('#parents ul li')
var uls = els.closest('ul')
t.assertEqualCollection($('#parents ul'), uls)
t.assertEqualCollection($('#parents'), uls.closest('#parents'))
},
testClosestWithCollection: function(t){
var targets = $('#parents > li')
var result = $('#li2').closest(targets)
t.assertLength(1, result)
t.assertEqual('li1', result.get(0).id)
t.assertLength(0, $('#li1').closest('#li2'))
},
testClosestWithElement: function(t){
var target = $('#li1').get(0)
var result = $('#li2').closest(target)
t.assertLength(1, result)
t.assertIdentical(target, result.get(0))
t.assertLength(0, $('#li1').closest($('#li2').get(0)))
},
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'))
},
testContains: function(t){
var el1 = $('#li1'), el2 = $('#li2')
t.assertTrue($.contains(el1.get(0), el2.get(0)))
t.assertFalse($.contains(el1.get(0), $('#parents').get(0)))
},
testContainsOnDetached: function(t){
var el = $('<div><p><a></a></p></div>'),
para = el.children(),
link = para.children()
t.assertTrue($.contains(para.get(0), link.get(0)))
t.assertFalse($.contains(document.body, el.get(0)))
},
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'))
},
testParentsIframe: function(t){
var iframeBody = $('iframe').get(0).contentDocument.body
t.assertEqualCollection(
[iframeBody, iframeBody.parentNode],
$(iframeBody).find('b').first().parents()
)
},
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"))
//children == null
t.assertLength(4,lis.children(null))
//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())
},
testIframeContents: function(t){
var el = $("#contentsIframeTest")
t.assertEqual("Hello from iframe!", el.contents().find("b").first().text())
},
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)
},
testFindWithCollection: function(t){
var targets = $('#find1 span span, #find1 b, #find2 span')
var found = $('p#find1').find(targets)
t.assertLength(2, found)
t.assertEqual('B', found.get(0).tagName)
t.assertEqual('6', found.get(1).innerHTML)
},
testFindWithElement: function(t){
var target = $('#find1 span span').get(0)
var found = $('p#find1').find(target)
t.assertLength(1, found)
t.assertEqual('6', found.get(0).innerHTML)
found = $('p#find1').find(document.body)
t.assertLength(0, found, "no elements should have matched")
},
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)
},
testFindWithFalsyValue: function(t){
var element = '<div><a>1</a></div>'
t.assertZeptoCollection(0, $(element).find(undefined))
t.assertZeptoCollection(0, $(element).find(false))
t.assertZeptoCollection(0, $(element).find(0))
t.assertZeptoCollection(0, $(element).find(''))
},
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
}
},
testHas: function(t){
var result, el = $('<b id=one><a></a></b><b id=two><i></i></b><b id=three><i></i></b>')
result = el.has('a')
t.assertEqual('one', result.pluck('id').join(' '))
result = el.has('i')
t.assertEqual('two three', result.pluck('id').join(' '))
result = el.has(el.find('i').get(0))
t.assertEqual('two', result.pluck('id').join(' '))
},
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)
// single assignments
$('#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,0)')
t.assertEqual('rgb(255, 0, 0)', el.style.color)
t.assertEqual('rgba(255, 0, 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)
// read single values, including shorthands
t.assertEqual('rgb(255, 0, 0)',
$('#some_element').css('color'))
t.assertEqual('1px solid rgba(255, 0, 0, 0)',
$('#some_element').css('border'))
// multiple assignments
$('#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'))
// read multiple values, camelCased CSS
var arrCamelCss = $('#some_element').css(['borderLeftWidth', 'borderLeftStyle', 'borderLeftColor', 'color'])
t.assertEqual('2px', arrCamelCss['borderLeftWidth'])
t.assertEqual('solid', arrCamelCss['borderLeftStyle'])
t.assertEqual('rgb(0, 0, 0)', arrCamelCss['borderLeftColor'])
t.assertEqual('rgb(0, 255, 0)', arrCamelCss['color'])
t.assertUndefined(arrCamelCss['paddingLeft'])
// read multiple values, dashed CSS property names
var arrDashedCss = $('#some_element').css(['border-left-width', 'border-left-style', 'border-left-color', 'color'])
t.assertEqual('2px', arrDashedCss['border-left-width'])
t.assertEqual('solid', arrDashedCss['border-left-style'])
t.assertEqual('rgb(0, 0, 0)', arrDashedCss['border-left-color'])
t.assertEqual('rgb(0, 255, 0)', arrDashedCss['color'])
t.assertUndefined(arrDashedCss['padding-left'])
// make sure reads from empty Zepto collections just return undefined
t.assertUndefined($().css(['border-left-width']))
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)
},
testCSSOnNonExistingElement: function (t) {
var el = $('.some-non-exist-elm')
t.assertUndefined(el.css('color'))
},
testCSSBatchSetOnNonExistingElementReturnsSelf: function (t) {
var el = $('.some-non-exist-elm')
var ret = el.css({
'border': '2px solid #000',
'color': 'rgb(0,255,0)'
})
t.assertIdentical(ret, el)
},
testHtml: function(t){
var div = $('div.htmltest')
div.text(undefined)
t.assertEqual('', div.html())
t.assertIdentical(div, 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){
// test basics with Zepto-created DOM elements
t.assertEqual('', $('<h1/>').text())
t.assertEqual('', $('<h1/>').text('').text())
t.assertEqual('', $('<h1/>').text(undefined).text())
t.assertEqual('', $('<h1/>').text(null).text())
t.assertEqual('false', $('<h1/>').text(false).text())
t.assertEqual('1', $('<h1/>').text(1).text())
t.assertEqual('<b>a</b>', $('<h1/>').text('<b>a</b>').text())
t.assertEqual('&lt;b&gt;a&lt;/b&gt;',
$('<h1/>').text('<b>a</b>').html())
// now test with some existing DOM elements
$('#texttest3').text(undefined)
t.assertEqual('', $('#texttest3').text())
t.assertEqual('Here is some text', $('#texttest1').text())
t.assertEqual('And some more', $('#texttest2').text())
// gets all text of selectors matching
t.assertEqual('Here is some textAnd some more', $('div.texttest').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", $('#texttest1').text())
t.assertEqual('', $('#texttest2').text())
},
testTextWithFunction: function(t) {
var el = $('<div><span>hello</span> <span></span> <span>world</span> <span>again</span></div>'),
els = el.find('span')
els.text(function(idx, oldText){
if (idx > 2) return null
if (oldText) return oldText.toUpperCase() + ' ' + idx
})
t.assertEqual('HELLO 0', els[0].textContent)
t.assertEqual('', els[1].textContent)
t.assertEqual('WORLD 2', els[2].textContent)
t.assertEqual('', els[3].textContent)
},
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.assertUndefined(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'))
},
testAttrSetterErase: function(t){
var el = $('<div data-name="foo">')
t.assertIdentical(el, el.attr('data-name', undefined), 'setter should return self')
t.assertNull(el.get(0).getAttribute('data-name'), 'attribute should be erased')
t.assertUndefined(el.attr('data-name'), 'attr should reflect erased attribute')
},
testProp: function(t){
var label = $('#prop_test1')
var input = $('#prop_test2')
var table = $('#prop_test3')
var td1 = $('#prop_test4')
var td2 = $('#prop_test5')
var img = $('#prop_test6')
var div = $('#prop_test7')
t.assertEqual(input.prop('tabindex'), -1)
t.assertEqual(input.prop('readonly'), true)
t.assertEqual(label.prop('for'), 'prop_test2')
t.assertEqual(input.prop('class'), 'propTest')
t.assertEqual(input.prop('maxlength'), 10)
t.assertEqual(table.prop('cellspacing'), 10)
t.assertEqual(table.prop('cellpadding'), 5)
t.assertEqual(td1.prop('rowspan'), 2)
t.assertEqual(td2.prop('colspan'), 2)
t.assertEqual(img.prop('usemap'), '#imgMap')
t.assertEqual(div.prop('contenteditable'), 'true')
},
testRemoveProp: function(t){
var el = $('<span>')
el.prop('hello', 'world')
t.assertEqual('world', el[0].hello)
el.removeProp('hello')
t.assertUndefined(el[0].hello)
},
testPropSetterErase: function(t){
var input = $('<input readonly>')
t.assertIdentical(input, input.prop('readonly', false))
t.assertFalse(input.prop('readonly'))
input.get(0)._foo = 'bar'
t.assertIdentical(input, input.prop('_foo', undefined))
t.assertUndefined(input.get(0)._foo, 'custom property should be cleared')
t.assertUndefined(input.prop('_foo'), 'prop should reflect cleared property')
},
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, values
// HTML is set here because IE does not reset
// values of input fields on page reload
document.getElementById('attr_with_text_input').innerHTML =
'<input value="Default input">'+
'<input type="text" value="Text input">'+
'<input type="email" value="Email input">'+
'<input type="search" value="Search input">'
inputs = $('#attr_with_text_input input')
values = $.map(inputs, function(i){ return $(i).attr('value') })
t.assertEqual('Default input, Text input, Email input, Search input', values.join(', '))
// Only .attr('value', v) changes .attr('value')
// rather than .val(v)
inputs.attr('value', function(i, value){ return value.replace('input', 'changed') })
values = $.map(inputs, function(i){ return $(i).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.assertUndefined(el.attr('id'))
el.attr('id', 'hello')
el.attr({ id:null })
t.assertUndefined(el.attr('id'))
},
testRemoveAttr: function(t) {
var el = $('#attr_remove')
t.assertEqual('boom', el.attr('data-name'))
el.removeAttr('data-name')
t.assertUndefined(el.attr('data-name'))
},
testRemoveMultipleAttr: function(t) {
var el = $('#attr_remove_multi')
t.assertEqual('someId1', el.attr('data-id'))
t.assertEqual('someName1', el.attr('data-name'))
el.removeAttr('data-id data-name')
t.assertUndefined(el.attr('data-id'))
t.assertUndefined(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.assertUndefined(els.eq(0).attr('rel'))
t.assertUndefined(els.eq(1).attr('rel'))
t.assertUndefined(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'))
},
testDataSetterErase: function(t) {
var el = $('<div data-name="foo">')
t.assertIdentical(el, el.data('name', undefined))
t.assertUndefined(el.data('name'))
},
testDataNumberType: function(t){
var el = $('<div data-num=42 />')
t.assertIdentical(42, el.data('num'))
t.assertIdentical(42.5,
$('<div data-float=42.5 />').data('float'))
t.assertIdentical("08",
$('<div data-notnum=08 />').data('notnum'))
t.assertIdentical("5903509451651483504",
$('<div data-bignum="5903509451651483504" />').data('bignum'))
},
testDataBooleanType: function(t){
var el = $('<div data-true=true data-false=false />')
t.assertTrue(el.data('true'))
t.assertFalse(el.data('false'))
},
testDataNullType: function(t){
var el = $('<div data-nil=null />')
t.assertNull(el.data('nil'))
},
testDataJsonType: function(t){
var el = $('<div data-json=\'["one", "two"]\' data-invalid=\'[boom]\' />')
var json = el.data('json')
t.assertEqual(2, json.length)
t.assertEqual("one", json[0])
t.assertEqual("two", json[1])
t.assertEqual('[boom]', el.data('invalid'))
},
testVal: function(t) {
var input = $('#attr_val')
// some browsers like IE don't reset input values on reload
// which messes up repeated test runs, so set the start value
// directly via the DOM API
document.getElementById('attr_val').value = 'Hello World'
t.assertEqual('Hello World', input.val())
input.val(undefined)
t.assertEqual('', input.val())
input.val(null)
t.assertEqual('', 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())
// FIXME
// This is the "approved" way of de-selecting an option
// Unfortunately, this fails on Chrome 29 for Android
multiple.find('option')[0].selected = false
t.assertEqualCollection(['2'], multiple.val(),
"Expected val() to reflect changes to selected options in a <select multiple> element")
},
testValVsValueAttr: function(t) {
var input
input = $('<input type="text" value="Original">')
input.val('By .val(v)')
t.assertEqual('Original', input.attr('value'))
t.assertEqual('By .val(v)', input.val())
input.attr('value', 'By .attr("value", v)')
t.assertEqual('By .attr("value", v)', input.attr('value'))
t.assertEqual('By .val(v)', input.val())
// .attr('value', v) will change both
// without applying .val(v) first
input = $('<input type="text" value="Original">')
input.attr('value', 'By .attr("value", v)')
t.assertEqual('By .attr("value", v)', input.attr('value'))
t.assertEqual('By .attr("value", v)', input.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
if ('__proto__' in {}) {
var $some_element = $('#some_element')
$.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)
} else
window.console && console.warn &&
console.warn("Browser doesn't support __proto__, skipping test of live extension of existing Zepto objects with plugins")
},
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(','))
},
testAppendNull: function(t){
var el = $(document.body)
t.assertIdentical(el, el.append(null))
},
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',
$.map(el.children(), function(c){ return $(c).text() }).join(' '))
},
testAppendWithArrayParams: function(t){
var zpElement = $('<b>five</b>')
var multElements = $('<b>six</b><b>seven</b>')
var node = document.createElement('b')
node.appendChild(document.createTextNode('four'))
// append elements on this array
var arrElements = ['<b>one</b><b>two</b>', '<b>three</b>', node, zpElement, multElements ]
var el = $('<div></div>')
el.append(arrElements)
t.assertEqual('<b>one</b><b>two</b><b>three</b><b>four</b><b>five</b><b>six</b><b>seven</b>', el.html())
},
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'))
// the object returned is the correct one 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()
)
// zepto object with more than one element
$(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>')
// selector
// Note that on IE resetting the parent element to be empty will
// cause inserted elements to be emptied out, so we have to re-create
// them. This is the same behavior as on jQuery.
// (Other browsers don't exhibit this problem.)
ap = $(div('appendto'))
pr = $(div('prependto'))
$('#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()
)
// reset test elements
ap = $(div('appendto'))
pr = $(div('prependto'))
$('#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()
)
},
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>')
// reset test elements
ib = $(div('insertbefore'))
ia = $(div('insertafter'))
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 el = $('<div>').appendTo(document.body)
t.assertLength(1, el.parent())
t.assertIdentical(el, el.remove())
t.assertLength(0, el.parent())
t.assertIdentical(el, el.remove()) //=> ensure an error isn't raised
},
testNotInDocumentNonEval: function (t) {
try {
window.someGlobalVariable = 0
$('<div></div>')
.html('<\script>window.someGlobalVariable += 1<\/script>')
.appendTo('body')
t.assertIdentical(1, window.someGlobalVariable)
} finally {
delete window.someGlobalVariable
}
},
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)
// addClass with no argument
t.assertEqualCollection($('#some_element'), $('#some_element').addClass())
t.assertEqual('red blue green', el.className)
t.assertEqualCollection($('#some_element'), $('#some_element').addClass(''))
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)
},
testWindowClasses: function(t){
// check that window is agnostic to class related functions
$(window).removeClass('non-existing-class')
t.refute('className' in window)
$(window).addClass('some-class')
t.refute('className' in window)
t.refute($(window).hasClass('some-class'))
$(window).toggleClass('some-class')
t.refute('className' in window)
},
testHasClass: function(t){
var el = $('#some_element')
el.addClass('green')
t.assert(el.hasClass('green'))
t.assert(!el.hasClass('orange'))
el.addClass('orange')
t.assert(el.hasClass('green'))
t.assert(el.hasClass('orange'))
el = $(document.body)
t.assert(!el.hasClass('orange'), "body shouldn't have the class")
el = el.add('#some_element')
t.assert(el.hasClass('orange'), "an element in collection has the class")
t.assertFalse(el.hasClass())
t.assertFalse(el.hasClass(''))
},
testHasClassEmpty: function(t){
var z = $('#doesnotexist')
t.assertEqual(0, z.size())
t.assertFalse(z.hasClass('a'))
},
testToggleClass: function(t){
var el = $('#toggle_element').removeClass()
t.assertIdentical(el, el.toggleClass('green'))
t.assertTrue(el.hasClass('green'))
t.assertFalse(el.hasClass('orange'))
el.toggleClass('orange')
t.assertTrue(el.hasClass('green'))
t.assertTrue(el.hasClass('orange'))
el.toggleClass('green')
t.assertFalse(el.hasClass('green'))
t.assertTrue(el.hasClass('orange'))
el.toggleClass('orange')
t.assertFalse(el.hasClass('green'))
t.assertFalse(el.hasClass('orange'))
el.toggleClass('orange green')
t.assertTrue(el.hasClass('orange'))
t.assertTrue(el.hasClass('green'))
el.toggleClass('orange green blue')
t.assertFalse(el.hasClass('orange'))
t.assertFalse(el.hasClass('green'))
t.assertTrue(el.hasClass('blue'))
el.removeClass()
el.toggleClass('orange', false)
t.assertFalse(el.hasClass('orange'))
el.toggleClass('orange', false)
t.assertFalse(el.hasClass('orange'))
el.toggleClass('orange', true)
t.assertTrue(el.hasClass('orange'))
el.toggleClass('orange', true)
t.assertTrue(el.hasClass('orange'))
//function argument
el.toggleClass(function(idx,classes){
t.assertIdentical(el.get(0), this)
//test original classes are being passed
t.assertEqual('orange', this.className)
return "brown"
})
t.assertTrue(el.hasClass('brown'))
el.toggleClass(function(idx,classes){
return "yellow"
}, false)
t.assertFalse(el.hasClass('yellow'))
el.toggleClass(function(idx,classes){
return "yellow"
}, true)
t.assert(el.hasClass('yellow'))
// no/empty argument
t.assertIdentical(el, el.toggleClass())
t.assertEqual('orange brown yellow', el.get(0).className)
t.assertIdentical(el, el.toggleClass(''))
t.assertEqual('orange brown yellow', el.get(0).className)
},
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) {
var el = $('#BooleanInput')
t.assertEqual('', el.attr('required'))
t.assertUndefined(el.attr('non_existant_attr'))
},
testDocumentReady: function (t) {
// Check that ready() callback fired and get Zepto as an argument
var arg1, arg2, arg3, arg4
t.pause()
$(function (Z1) {
arg1 = Z1
$(document).ready(function (Z2) {
arg2 = Z2
$(document).on('ready', function (Z3) {
arg3 = Z3
$(document).on('foo ready bar', function (Z4) {
arg4 = Z4
t.resume(function(){
t.assertIdentical(Zepto, arg1)
t.assertIdentical(Zepto, arg2)
t.assertIdentical(Zepto, arg3)
t.assertIdentical(Zepto, arg4)
})
})
})
})
})
},
testSlice: function (t) {
var $els = $("#slice_test div")
t.<