Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
176 lines (152 sloc) 5.23 KB
<!DOCTYPE html>
<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>
// avoid caching
function load(scripts){
scripts.split(' ').forEach(function(script){
document.write('<script src="../src/'+script+'.js?'+(+new Date)+'"></scr'+'ipt>')
load('zepto event form ie')
<h1>Zepto Form unit tests</h1>
<p id="results">
Running… see browser console for results
<div id="fixtures">
<form id="login_form" target="formtarget" action="./idontexist.html">
<input name="email" value="">
<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">
<input type="radio" name="radio1" value="r1">
<input type="radio" name="radio1" checked value="r2">
<input type="radio" name="radio1" value="r3">
<select name="selectbox">
<option value="selectopt1">select1</option>
<option value="selectopt2">select2</option>
<option value="selectopt3">select3</option>
<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>
<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>
<iframe name="formtarget"></iframe>
// 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
case 'function':
if (typeof(obj2[key]) == 'undefined' ||
(obj1[key].toString() != obj2[key].toString()))
return false
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) {
isObjectEquals(expected, actual),
message || 'Failed assertion.',
'Expected %o, got %o.', expected, actual
Evidence('FormTest', {
testSerializeArray: function(t){
var loginForm = $('#login_form')
{ name: 'email', value: '' },
{ 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' }
testSerialize: function(t){
var loginForm = $('#login_form')
t.assertEqual('', loginForm.serialize())
testFormSubmit: function(t){
var eventTriggered = false
eventTriggered = true
testFormSubmitBindFalse: function(t){
var eventPropagated = false
$(document).on('submit', function(){
eventPropagated = true
try {
var form = $('#login_form')
} finally {
testSerializeEmptyCollection: function(t){
t.assertIdentical(0, $().serializeArray().length)
t.assertIdentical("", $().serialize())
Something went wrong with that request. Please try again.