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元素？

回答

相關問題