Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
176 lines (152 sloc) 5.23 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 Form 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 form ie')
})()
</script>
</head>
<body>
<h1>Zepto Form unit tests</h1>
<p id="results">
Running… see browser console for results
</p>
<div id="fixtures">
<form id="login_form" target="formtarget" action="./idontexist.html">
<input name="email" value="koss@nocorp.me">
<input name="password" value="123456">
<input name="unchecked_hasValue" value="myValue" type="checkbox">
<input name="unchecked_noValue" type="checkbox">
<input name="checked_hasValue" checked value="myValue" type="checkbox">
<input name="checked_disabled" checked value="ImDisabled" type="checkbox" disabled>
<input name="checked_noValue" checked type="checkbox">
<input type="text" id="no_name">
<input type="file" name="file_upload">
<fieldset>
<input type="radio" name="radio1" value="r1">
<input type="radio" name="radio1" checked value="r2">
<input type="radio" name="radio1" value="r3">
</fieldset>
<select name="selectbox">
<option value="selectopt1">select1</option>
<option value="selectopt2">select2</option>
<option value="selectopt3">select3</option>
</select>
<select name="users[id][]" multiple>
<option value="1">a</option>
<option value="2" selected>b</option>
<option value="3" selected>c</option>
<option value="4">d</option>
</select>
<div class="actions">
<!--
The name of the following element can't be "submit",
as this breaks on IE 10 (the form's "submit" method
is overwritten by an accessor to the input field
with the "submit" name). Yes, that's a dumb bug.
-->
<input type="submit" name="submit_button" value="Save">
<input type="button" name="preview" value="Preview">
<input type="reset" name="clear" value="Clear form">
<button name="button">I'm a button</button>
</div>
</form>
<iframe name="formtarget"></iframe>
</div>
<script>
(function(){
// TODO: do we really need this function? This should be refactored.
var isObjectEquals = function(obj1, obj2){
for (var key in obj1)
switch(typeof(obj1[key])) {
case 'object':
if (!isObjectEquals(obj1[key], obj2[key]))
return false
break
case 'function':
if (typeof(obj2[key]) == 'undefined' ||
(obj1[key].toString() != obj2[key].toString()))
return false
break
default:
if (obj1[key] != obj2[key])
return false
}
for (key in obj2)
if (typeof(obj1[key]) == 'undefined')
return false
return true
}
Evidence.Assertions.assertEqualObject = function(expected, actual, message) {
this._assertExpression(
isObjectEquals(expected, actual),
message || 'Failed assertion.',
'Expected %o, got %o.', expected, actual
)
}
Evidence('FormTest', {
testSerializeArray: function(t){
var loginForm = $('#login_form')
t.assertEqualObject(
[
{ name: 'email', value: 'koss@nocorp.me' },
{ name: 'password', value: '123456' },
{ name: 'checked_hasValue', value: 'myValue' },
{ name: 'checked_noValue', value: 'on' },
{ name: 'radio1', value: 'r2' },
{ name: 'selectbox', value: 'selectopt1' },
{ name: 'users[id][]', value: '2' },
{ name: 'users[id][]', value: '3' }
],
loginForm.serializeArray()
)
},
testSerialize: function(t){
var loginForm = $('#login_form')
t.assertEqual('email=koss%40nocorp.me&password=123456&checked_hasValue=myValue&checked_noValue=on&radio1=r2&selectbox=selectopt1&users%5Bid%5D%5B%5D=2&users%5Bid%5D%5B%5D=3', loginForm.serialize())
},
testFormSubmit: function(t){
var eventTriggered = false
$('#login_form').submit(function(event){
eventTriggered = true
event.preventDefault()
})
$('#login_form').submit()
t.assert(eventTriggered)
},
testFormSubmitBindFalse: function(t){
var eventPropagated = false
$(document).on('submit', function(){
eventPropagated = true
})
try {
var form = $('#login_form')
form.submit(false)
form.submit()
t.assertFalse(eventPropagated)
} finally {
$(document).off('submit')
}
},
testSerializeEmptyCollection: function(t){
t.assertIdentical(0, $().serializeArray().length)
t.assertIdentical("", $().serialize())
}
})
})()
</script>
</body>
</html>
Something went wrong with that request. Please try again.