jquery-form
Version:
The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX.
236 lines (215 loc) • 7.59 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example Mocha Test</title>
<link href="../node_modules/mocha/mocha.css" rel="stylesheet">
</head>
<body>
<!-- Required for browser reporter -->
<div id="mocha"></div>
<!-- Test HTML -->
<div id="main" style="display: none;">
<!-- form1 -->
<form id="form1" action="ajax/text.html" method="get">
<div>
<input type="hidden" name="Hidden" value="hiddenValue">
<input name="Name" type="text" value="MyName1">
<input name="Password" type="password">
<select name="Multiple" multiple="multiple">
<optgroup label="block 1">
<option value="one" selected="selected">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</optgroup>
<optgroup label="block 2">
<option value="four" selected="selected">Four</option>
<option value="five">Five</option>
<option value="six" selected="selected">Six</option>
</optgroup>
</select>
<select name="Single">
<option value="one" selected="selected">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<select name="Single2">
<optgroup label="block 3">
<option value="A" selected="selected">A</option>
<option value="B">B</option>
<option value="C">C</option>
</optgroup>
<optgroup label="block 3">
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</optgroup>
</select>
<input type="checkbox" name="Check" value="1">
<input type="checkbox" name="Check" value="2" checked="checked">
<input type="checkbox" name="Check" value="3">
<input type="radio" name="Radio" value="1">
<input type="radio" name="Radio" value="2" checked="checked">
<input type="radio" name="Radio" value="3">
<input type="text" name="action" value="1">
<input type="text" name="method" value="2">
<textarea name="Text" rows="2" cols="20">This is Form1</textarea>
<input type="submit" name="submitButton" value="Submit1">
<input type="submit" name="submitButton" value="Submit2">
<input type="submit" name="submitButton" value="Submit3">
<input type="image" name="submitButton" value="Submit4" src="img/submit.gif">
<input type="reset" name="resetButton" value="Reset">
</div>
</form>
<!-- form2 -->
<form id="form2" action="ajax/text.html" method="get">
<div>
<input name="a" type="text">
<textarea name="b" rows="1" cols="1"></textarea>
<input name="c" type="text">
<select name="d"><option value="x">x</option></select>
<textarea name="e" rows="1" cols="1"></textarea>
<input name="f" type="text">
<input type="reset" name="resetButton" value="Reset">
</div>
</form>
<!-- form3 -->
<form id="form3" action="ajax/text.html" method="post">
<div>
<input name="a" type="text">
</div>
</form>
<!-- form4 -->
<form id="form4" action="ajax/text.html" method="get">
<div>
<input name="a" type="text">
<input type="submit" id="submitForm4">
<input type="submit" id="submitForm4withName" name="form4inputName">
<input type="image" id="form4imageSubmit" name="myImage" src="img/submit.gif">
</div>
</form>
<!-- form5 -->
<form id="form5" action="ajax/text.html?test=form" method="get">
<div>
<input name="a" type="text">
<input type="submit">
<input type="submit" name="form5inputName">
<input type="image" id="form5imageSubmit" name="myImage" src="img/submit.gif">
</div>
</form>
<!-- form6, 'option' testing -->
<form id="form6" action="ajax/text.html" method="get">
<div>
<select name="A">
<option value="" selected="selected">EMPTY_STRING</option> <!-- TEST A: value === empty string -->
</select>
<select name="B">
<option selected="selected">MISSING_ATTR</option> <!-- TEST B: no value attr -->
</select>
<select name="C" multiple="multiple">
<option value="" selected="selected">EMPTY_STRING</option>
<option selected="selected">MISSING_ATTR</option>
</select>
</div>
</form>
<!-- form7, 'enctype' testing -->
<form id="form7" action="ajax/text.html" method="post" enctype="text/css">
<div>
<textarea name="doc">body { padding: 0}</textarea>
</div>
</form>
<form id="form8" action="ajax/text.html" method="post">
<div>
<textarea name="ta">blah</textarea>
<input type="submit" id="submitForm8">
</div>
</form>
<form id="form9" action="ajax/text.html" method="post">
<div>
<textarea name="ta">blah</textarea>
<input type="submit" id="submitForm9">
</div>
</form>
<!-- form10, outside fields -->
<form id="form10">
<input type="text" name="insideForm">
</form>
<input type="text" name="outsideForm" form="form10">
<!-- pseudo-form -->
<div id="pseudo">
<input name="a" type="text">
<input type="checkbox" name="Check" value="1">
<input type="checkbox" name="Check" value="2" checked="checked">
<select name="Select">
<option value="opt1">
<option value="opt2" selected="selected">
</select>
<input type="submit" value="button">
</div>
<form style="display:none" id="fieldTest" action="ajax/text.html" method="post">
<div>
<select name="A">
<option value="1" selected="selected">ONE</option>
<option value="2">TWO</option>
</select>
<select name="B" multiple="multiple">
<option value="3" selected="selected">ONE</option>
<option value="4" selected="selected">TWO</option>
<option value="4b">THREE</option>
</select>
<input name="C" type="hidden" value="5">
<input name="D" type="text" value="6">
<textarea name="E">7</textarea>
<input name="F" type="checkbox" value="8" checked="checked">
<input name="F" type="checkbox" value="9">
<input name="F" type="checkbox" value="10" checked="checked">
<input name="G" type="radio" value="11">
<input name="G" type="radio" value="12" checked="checked">
<input name="G" type="radio" value="13">
<input name="H" type="password" value="14">
<input name="I" type="submit" value="15">
<input name="J" type="reset" value="16">
</div>
</form>
<form style="display:none" id="actionTest1" action="#" method="post">
<div>
<input name="A" type="hidden" value="1">
</div>
</form>
<form style="display:none" id="actionTest2" action="#blah" method="post">
<div>
<input name="A" type="hidden" value="1">
</div>
</form>
<form style="display:none" id="actionTest3" action="" method="post">
<div>
<input name="A" type="hidden" value="1">
</div>
</form>
<form style="display:none" id="actionTest4" method="post">
<div>
<input name="A" type="hidden" value="1">
</div>
</form>
<div id="targetDiv"></div>
</div>
<!-- mocha -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="../src/jquery.form.js"></script>
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script>
// This will be overridden by mocha-helper if you run with grunt
mocha.setup('bdd');
mocha.reporter('html');
</script>
<script src="test.js"></script>
<!-- run mocha -->
<script>
// Only tests run in real browser, injected script run if options.run == true
if (navigator.userAgent.indexOf('PhantomJS') < 0) {
mocha.run();
}
</script>
</body>
</html>