ember-cli unit test - 컨트롤러가 부트 스트랩 모달을 엽니 다.

Question

내 ember 컨트롤러에 대한 단위 테스트를 쓰려고합니다. 단지 속성을 변경 한 다음 부트 스트랩 모달을 엽니 다. 모달이 실제로 열리는 지 테스트하는 방법을 알아내는 데 어려움이 있습니다. 이것이 단위 테스트 또는 통합 테스트에 속하는 지 확실하지 않습니다. 그것이 내 단위 테스트에 없다면 나중에 코드 적용 범위를 결정하기가 어려울 것 같습니다. 부트 스트랩 버전 : 3.3.1, ember-cli 버전 0.1.5, 노드 0.10.33.

1.

test('loginClick() opens modal', function(){ 
    var controller = this.subject(); 
    $('#login-modal').on('show.bs.modal', function(){ 
    equal(true, true, "the show.bs.modal event fired"); 
    }); 

    controller.send('loginClick', 'anything'); 
}); 

없는 주장 오류

test('loginClick() opens modal', function(){ 
    var controller = this.subject(); 
    andThen(function(){ 
    controller.send('loginClick', 'anything'); 
    stop(); 

    Ember.run.later(function(){ 
     start(); 
     equal($('#login-modal').hasClass('in'), true, "has the 'in' class"); 
    }, 500); 
    }); 
}); 

andThen 여기

정의되어 있지 않으며

2 : 여기 아무 소용이 시도했습니다 것입니다 컨트롤러 :

loginClick: function(param){ 
    this.set('provider', param);//facebook or google 

    $('#login-modal') 
    .modal(); 
} 

이런 종류의 테스트 방법에 대한 다른 제안이나 모범 사례는 높이 평가됩니다.

p.s. 또한 클릭하기 전에 추가해 보았습니다.

$.support.transition = false; 

누군가의 제안에 따라 추가했지만 모달 전환을 사용할 수 없습니다.

Answer 1

동일한 문제가있었습니다. 나는이 최선의 해결책이다 모르겠지만, App.injectTestHelpers()를 호출하기 전에 비동기 테스트 도우미를 등록하여 그것을 해결 :

Ember.Test.registerAsyncHelper 'waitForModalOpen', (app, modal) -> 
    # If using QUnit < 1.16, you need to add stop(). 
    #stop() 
    Ember.Test.promise (resolve, reject) -> 
    modal.on 'shown.bs.modal', -> 
     resolve() 
     # If using QUnit < 1.16, you need to add start(). 
     #start() 

내가 다음 버튼을 클릭 한 후 그것을 호출하고 주장하기 전에를 :

modal = find '#testModal' 
click '#openModal' 
waitForModalOpen modal 
andThen -> 
    strictEqual modal.attr('aria-hidden'), 'false', 'modal should be visible' 
    strictEqual modal.hasClass('in'), true, 'modal should have .in class' 

여기는 JS Bin testcase입니다. QUnit 1.16은 테스트에서 반환하는 약속을 지원하므로이 버전에서는 stop() 및 start() 호출이 더 이상 필요하지 않습니다. QUnit은 andThen() 약속이 해결 될 때까지 기다립니다.

편집 : 엠버 - CLI

엠버 - CLI 문서의 사용이 섹션에 대한 writing your own test helpers 있습니다.

는 /tests/helpers/wait-for-modal-open.js로 도우미를 만듭니다

다음

import Ember from "ember"; 

export default Ember.Test.registerAsyncHelper('waitForModalOpen', function(app, modal) { 
    return Ember.Test.promise(function(resolve, reject) { 
    return modal.on('shown.bs.modal', function() { 
     return resolve(); 
    }); 
    }); 
}); 

는 /tests/helpers/start-app.js이 줄을 추가 :

import waitForModalOpen from './wait-for-modal-open'; 

는 또한 JSHint 오류를 방지하기 위해 /tests/.jshintrc에 "predef" 배열에 "waitForModalOpen"을 추가해야합니다.

마지막으로, /tests/integration에 파일로 테스트를 만듭니다

import Ember from "ember"; 
import { test } from 'ember-qunit'; 
import startApp from '../helpers/start-app'; 
var App; 

module('Bootstrap Modal Open', { 
    setup: function() { 
    App = startApp(); 
    return visit('/'); 
    }, 
    teardown: function() { 
    Ember.run(App, App.destroy); 
    } 
}); 

test('clicking the button should open a modal', function() { 
    var modal; 
    modal = find('#testModal'); 
    click('#openModal'); 
    waitForModalOpen(modal); 
    return andThen(function() { 
    strictEqual(modal.attr('aria-hidden'), 'false', 'modal should be visible'); 
    return strictEqual(modal.hasClass('in'), true, 'modal should have .in class'); 
    }); 
}); 

Answer 2

또 다른 일반적인 솔루션은 HTML 선택이 나타날 때까지 기다립니다 비동기 도우미 waitUntil를 만드는 것입니다.

waitUntil('#my-button'); 
click('#my-button'); 

또는 어떤 동기 헬퍼 전에 :

Ember.Test.registerAsyncHelper('waitUntil', function(app, selector, callback) { 

    var waiter = function() { 
    return $(selector).length > 0; 
    }; 

    Ember.Test.registerWaiter(waiter); 
    var promise = app.testHelpers.wait(); 

    promise.then(function() { 
    Ember.Test.unregisterWaiter(waiter); 
    }); 

    // it will be resolved when the pending events have been processed 
    // (routing loads, ajax requests, run loops and waiters) 
    return promise; 
}); 

이어서, waitUntil는 다른 비동기 헬퍼 함께 사용할 수있는 예는 registerWaiter 나타내고 registerAsyncHelper 사용할 수있다

waitUntil('#my-modal.modal').then(function() { 
    var el = find('#my-modal.modal'); 
    assert.ok(el.length > 0, 'modal was open'); 

    .... 
}); 

같이 유사한 유스 케이스를 해결하기 위해 함께.