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是否按照期望值進行改變。

舉個例子:

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

大體意思為: 進入路由/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包含多個測試助來輔助進行驗收測試。一共有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)上下文沒有指定的時候，會按照默認方式完成。

    等待助手

    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得到的測試例子:

    //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前進行注冊，但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');

    最后， 別忘了將你的測試助手添加進tests/.jshintrc和tests/helpers/start-app.js中、在tests/.jshintrc中，你需要將其添加進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)容錯誤
  • 更新不及時
  • 鏈接錯誤
  • 缺少代碼/圖片示列
  • 太簡單/步驟待完善
  • 其他

  更多建議：

  提交建議