jasmine-jQuery，如何测试表单填写和更改HTML元素？

我正在尝试填充HTML表单以及HTML元素文本的后续更改。我需要建立某种形式的使用茉莉花jQuery的事件......jasmine-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>

我想试驾ID =“文本响应”改为“更正'基于一些脚本逻辑。

describe('Interface logic', function(){ 

     it('Will return correct if logic applies', function(){ 
     expect('#emotion').toContainText('Correct'); 
     }); 

    });

任何帮助，将不胜感激

来源

2015-04-24 Kieran Goodacre

$('#submit-button').click();

当时对我，而且规范选手不断刷新的解决方案是因为你打http://localhost:3000/specs/而不是http://localhost:3000/SpecRunner.html

来源

2015-05-08 19:50:44

你可能只需要触发一个事件，例如：

$('#submit-button').click();

这应该触发click事件。然后，您可以检查该事件在页面上发生变化的任何情况。

来源

2015-04-24 12:46:18 beautifulcoder

这是有道理的，尽管由于某种原因，当我使用'''.click（）'''而不是''.trigger（）'''它会导致我的SpecRunner不断刷新，我已经使用chrome和firefox进行了测试，有什么想法？ –

我敢打赌，它发射了一个页面发布/重新加载。你可以尝试做一个'e.preventDefault（）'。这将保持在没有服务器发布的同一页面上。 – beautifulcoder

如果你在一个文件中单独的模板命名例如

templates/form.tmpl.html

你的HTML表单，并在一个单独的文件也被命名例如

js/validation.js

你的jQuery和含验证码一样

$(".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'); 
});

然后你的测试规范可以是类似于这个

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'); 
    }); 

});

，并用spec亚军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>

来源

2015-04-25 12:04:16

谢谢，但这仍然无法正常工作，我想知道是否这是服务器的问题，我有一个Node/Express服务器像这样运行...''''''VAR表达式= require（'express'）; var app = express（）; var server = require（'http'）。createServer（app）; VAR根= __dirname + '/' app.use（express.static（根）） app.get（ '/索引'，函数（REQ，RES）{ res.sendFile（根+“索引。 html'）; }）; app.get（'/ spec'，function（req，res）{res.sendFile（root +'SpecRunner.html'）; }）; server.listen（3000，function（）{ console。日志（“监听端口3000的服务器”）; }）; module.exports = server;''' –

jasmine-jQuery，如何测试表单填写和更改HTML元素？

回答

相关问题