jasmine-jQuery，如何测试表单填写和HTML元素的更改？
[英]jasmine-jQuery, How to test for form fill out and change of HTML element?
问题描述
I am trying to test for the filling out of an HTML form and the subsequent change of an HTML elements Text. 
我正在尝试测试HTML表单的填写以及HTML元素Text的后续更改。 I need to create some form of event using jasmine-jquery... 我需要使用茉莉花jQuery创建某种形式的事件...
HTML HTML
<div class="response" id="text-response">Unknown</div> <div class="form-holder"> <form> <input id="input-text" type="text" name="user-input" placeholder="Test Your Text" value=""> <input id="submit-button" type="submit" value="Submit"> </form> </div>
I am trying to test drive id='text-response' changing to 'Correct' based on some script logic. 我正在尝试基于某些脚本逻辑来测试将驱动器id ='text-response'更改为'Correct'。
describe('Interface logic', function(){
it('Will return correct if logic applies', function(){
expect('#emotion').toContainText('Correct');
});
});
Any help would be much appreciated 任何帮助将非常感激
3 个解决方案
解决方案1
1 2015-04-24 12:46:18
You might just need to trigger an event, for example: 您可能只需要触发一个事件，例如：
$('#submit-button').click();
That should fire the click event. 那应该触发点击事件。 Then you can check for whatever condition this event changes on the page. 然后，您可以在页面上检查此事件更改的任何条件。
解决方案2
0 2015-04-25 12:04:16
If you have your form html in a separate template in a file named for example 如果您的表单html在名为例如的文件的单独模板中
templates/form.tmpl.html
and your jquery in a separate file also named for example 和您的jquery在一个单独的文件中，该文件也以例如
js/validation.js
And containing validation code like 并包含类似的验证代码
$(".form-holder").on("submit", function() {
event.preventDefault();
var userInput = $('#input-text').val();
if (userInput === 'the correct text') {
$('#text-response').text('Correct');
return;
}
$('#text-response').text('Incorrect');
});
Then your test spec can be something similar to this 然后您的测试规格可能与此类似
describe('Interface logic', function() {
jasmine.getFixtures().fixturesPath = '';
beforeEach(function() {
loadFixtures('templates/form.tmpl.html');
appendSetFixtures('<script src="js/validation.js"></script>')
});
it('Will return correct if logic applies', function(){
$('#input-text').val('the correct text');
$('#submit-button').trigger("click");
expect($('#text-response').text()).toBe('Correct');
});
it('Will return incorrect if logic applies', function(){
$('#input-text').val('the incorrect text');
$('#submit-button').trigger("click");
expect($('#text-response').text()).toBe('Incorrect');
});
});
And the spec runner html 和规范运行器html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Spec Runner</title>
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.3/jasmine.css">
<script type="text/javascript" src="lib/jasmine-2.0.3/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.3/jasmine-html.js"></script>
<script src="lib/jasmine-2.2/boot.js"></script>
<script type="text/javascript" src="lib/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="lib/jasmine-jquery.js"></script>
<script type="text/javascript" src="specs/form.spec.js"></script>
</head>
<body>
</body>
</html>
解决方案3
0 已采纳 2015-05-08 19:50:44
$('#submit-button').click();
对我来说是解决方案，但规范运行程序不断刷新是因为您要访问的是http：// localhost：3000 / specs /而不是http：// localhost：3000 / SpecRunner.html
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.