Ember 驗收測試

驗收測試

使用ember generate acceptance-test創(chuàng)建一個驗收測試，比如:

ember g acceptance-test login

執(zhí)行完畢命令之后得到如下文件內(nèi)容：

//tests/acceptance/login-test.js
import { test } from 'qunit';
import moduleForAcceptance from 'people/tests/helpers/module-for-acceptance';
moduleForAcceptance('Acceptance | login');
test('visting /login'， function(assert) {
  visit('/login');
  andThen(function() {
  　assert.equal(currentURL()， '/login');
  });
});

moduleForAcceptance用來啟動、終止程序。最后幾行test中包含了一個示例。

幾乎所有的測試都有一個路由請求，用于和頁面交互(通過helper)并檢查DOM是否按照期望值進(jìn)行改變。

舉個例子:

test('should add new post'， function(assert) {
  visit('/posts/new');
  fillIn('input.title'， 'My new post');
  click('button.submit');
  andThen(() => assert.equal(find('ul.posts li:first').text()， 'My new post'));
});

大體意思為: 進(jìn)入路由/posts/new，在輸入框input.title填入My new post，點擊button.submit，期望的結(jié)果是: 在對應(yīng)列表下ul.posts li.first的文本為My new post.

測試助手

在測試web應(yīng)用中的一個主要的問題是，由于代碼都是基于事件驅(qū)動的，因此他們有可能是異步的，會使代碼無序運行。

比如有兩個按鈕，從不同的服務(wù)器載入數(shù)據(jù)，我們先后點擊他們，但可能結(jié)果返回的順序并不是我們點擊的順序。

當(dāng)你在編寫測試的時候，你需要特別注意一個問題，就是你無法確定在發(fā)出一個請求后，是否會立刻得到返回的響應(yīng)。因此，你的斷言需要以同步的狀態(tài)來等待被測試體。例如上面所舉的例子，應(yīng)該等待兩個服務(wù)器均返回數(shù)據(jù)后，這時測試代碼才會執(zhí)行其邏輯來檢測數(shù)據(jù)的正確性。

這就是為什么在做斷言的時候，Ember測試助手都是被包裹在一個確保同步狀態(tài)的代碼中。這樣做避免了對所有這樣的代碼都去做這樣的包裹，并且因為減少了模板代碼，從而提高了代碼的可讀性.

Ember包含多個測試助來輔助進(jìn)行驗收測試。一共有2種類型:異步助手asynchronous和同步助手synchronous

異步測試助手

異步測試助手可以意識到程序中的異步行為，使你可以更方便的編寫確切的測試。

同時，這些測試助手會按注冊的順序執(zhí)行，并且是鏈?zhǔn)竭\行。每個測試助手的調(diào)用都是在前一個調(diào)用結(jié)束之后，才會執(zhí)行下一個。因此，你可以不用當(dāng)心測試助手的執(zhí)行順序。

• click(selector)
  • 點擊一個元素，觸發(fā)該元素所綁定的click事件，返回一個異步執(zhí)行成功的promise。
• fillIn(selector， value)
  • 用執(zhí)行成功的promise值填充到選中的input元素上。使用作為時，記得元素的value是標(biāo)簽所指定的值，并不是標(biāo)簽顯示的內(nèi)容。 keyEvent(selector， type， keyCode) 模擬鍵盤操作。比如選中的元素檢測按鍵keypress，按鍵按下keydown，按鍵彈起keyup事件的keyCode。 triggerEvent(selector，type，keyCode) 在指定元素上觸發(fā)給定事件，比如blur、ddlclick等事件... visit(url) 訪問路由并返回promise執(zhí)行成功的結(jié)果。 同步測試助手 同步測試助手，當(dāng)觸發(fā)時會立即執(zhí)行并返回結(jié)果. currentPath() 返回當(dāng)前路徑 currentRouteName() 返回當(dāng)前激活的路由名稱 currentURL() 返回當(dāng)前URL find(selector， context) 尋找應(yīng)用根元素中的指定下上文(可選)的元素。將其域定義到根元素可以有效的避免與測試框架的沖突。當(dāng)上下文沒有指定的時候，會按照默認(rèn)方式完成。 等待助手 andThen測試助手將會等待所有異步測試助手完成之后再執(zhí)行.舉個例子: // tests/acceptance/new-post-appears-first-test.js tese('should add new post'， function(assert) { visit('/posts/new'); fillIn('input.title'， 'My new post'); click('button.submit'); andThen(() => assert.equal(find('ul.posts li:first').text()， 'My new post')); }); 首先，我們訪問/posts/new地址，在有titlecss類的input輸入框內(nèi)內(nèi)填入內(nèi)容“My new post”，然后點擊有CSS類submit的按鈕。 等待簽名的異步測試助手執(zhí)行完（具體說，andThen會在路由/posts/new訪問完畢，input表單填充完畢，按鈕被點擊之后）畢后會執(zhí)行andThen助手。注意andThen助手只有一個參數(shù)，這個參數(shù)是一個函數(shù)，函數(shù)的代碼是其實測試助手執(zhí)行完畢之后才執(zhí)行的代碼。 在andThen助手中，我們最后會調(diào)用assert.equal斷言來判定對應(yīng)位置的值是否為My new post。 自定義測試助手 使用命令ember generate test-helper來創(chuàng)建自定義測試助手。 下面的代碼是執(zhí)行命令ember g test-helper shouldHaveElementWithCount得到的測試?yán)? //tests/helpers/should-have-element-with-count.js export default Ember.Test.registerAsyncHelper( 'shouldHaveElementWithCount'， function(app){} ); Ember.Test.registerAsyncHelper和Ember.Test.registerHelper'是當(dāng)startApp被調(diào)用時，會將自定義測試助手注冊。兩者的區(qū)別在于，前者Ember.Test.registerHelper`會在之前任何的異步測試助手運行完成之后運行，并且后續(xù)的異步測試助手在運行前都會等待他完成. 測試助手方法一般都會以當(dāng)前程序的第一個參數(shù)被調(diào)用，其他參數(shù)，比如assert，在測試助手被調(diào)用的時候提供。測試助手需要在調(diào)用startApp前進(jìn)行注冊，但ember-cli會幫你處理，你不需要擔(dān)心這個問題。 下面是一個非異步的測試助手: //tests/helpers/should-have-element-with-count.js export default Ember.Test.registerHelper('shouldHaveElementWithCount'， function(app， assert， selector， n， context){ const el = findWithAssert(selector， context); const count = el.length; assert.equal(n， count， 'found ${count} times'); } ); //shouldHaveElementWithCount(assert， 'ul li'， 3); 下面是一個異步的測試助手: export default Ember.Test.registerAsynHelper('dblclick'， function(app， assert， selector， context){ let $el = findWithAssert(selector， context); Ember.run(() => $el.dblclick()); } ); //dblclick(assert， '#persion-1') 異步測試助手也可以讓你將多個測試助手合并為一個.舉個例子: //tests/helpers/add-contact.js export default Ember.Test.registerAsyncHelper('addContact', function(app，name) { fillIn('#name', name); click('button.create'); } ); //addContact('Bob'); //addContact('Dan'); 最后， 別忘了將你的測試助手添加進(jìn)tests/.jshintrc和tests/helpers/start-app.js中、在tests/.jshintrc中，你需要將其添加進(jìn)predef塊中，不然就會得到j(luò)shint測試失敗的消息. { "predef": [ "document", "window", "locaiton", ... "shouldHaveElementWithCount", "dblclick", "addContact" ], ... }* 你需要在tests/helpers/start-app.js引入測試助手，這些助手將會被注冊到應(yīng)用中。 import Ember from 'ember'; import Application from '../../app'; import Router from '../../router'; import config from '../../config/environmnet'; import './should-have-element-with-count'; import './dblclick'; import './add-contact'; 以上內(nèi)容是否對您有幫助： 在文檔使用的過程中是否遇到以下問題： 內(nèi)容錯誤
  • 更新不及時
  • 鏈接錯誤
  • 缺少代碼/圖片示列
  • 太簡單/步驟待完善
  • 其他

  更多建議：

  提交建議