Ember 통합 테스트 중에 렌더링 된 HTML 및 코드 디버그

Question

일부 메소드 내에서 삽입하는 디버깅을 볼 수 있도록 구성 요소 테스트를 한 페이지에서 렌더링하려고합니다.

내 테스트에서 데이터를 올바르게로드하지 못하는 것 같아서 무엇이로드되는지보고 싶습니다.

불행하게도, QUnit 단지 내가이 asserts에 넣고 나는 콘솔 로그를 볼 수 있도록 내 테스트 한 페이지에 절연 볼 수있는 방법이 있다면 궁금 해서요 걸 보여줍니다.

import { moduleForComponent, test } from 'ember-qunit'; 
import hbs from 'htmlbars-inline-precompile'; 
import { clickTrigger } from 'frontend/tests/helpers/ember-power-select'; 

moduleForComponent('dynamic-input-field', 'Integration | Component | dynamic input field', { 
    integration: true 
}); 

test('it renders', function(assert) { 
    // Set any properties with this.set('myProperty', 'value'); 
    this.set(...); 

    // render the component 
    this.render(hbs`{{my-component myProperty}}`); 

    // actions of user here 
    clickTrigger(); //this opens the ember-power-select 
    assert.equal($('.ember-power-select-dropdown').length, 1, 'Dropdown is rendered'); 
    // check if it is rendering the elements and if it is excluding one element 
    assert.equal('Field Four',$($('.ember-power-select-option')[2]).text().trim()); 
}); 

편집 :

이

시험의 골격이다 나는 단지 assert.equal() 사용하여 어떤 문제를 알아 냈어.(jQuery 함수) 중 하나가 누락되었습니다. 예 : 그것은 여전히 ​​렌더링 요소를 참조하는 큰 수, 그리고 다음과 같이 구성 요소의 didRender lifecycle hook 내부의 debugger; statement를 사용해보십시오 assert.equal()

Answer 1

놀 것

assert.equal('Field Four',$($('.ember-power-select-option')[2]).text().trim()); 

:

export default Ember.Component.extend({ 
    didRender() { 
    /* jshint ignore:start */ 
    debugger; 
    /* jshint ignore:end */ 
    }, 

    // the rest of your code... 
}); 

그것은 것 통합 테스트에서 코드 실행을 일시 중지하고 콘솔에서 코드로 작업 할 수 있습니다. 브라우저에서 QUnit Runner를 사용하는 경우 러너의 표시 영역에서 HTML 렌더링이 일시 중지되고 해당 부분을 검사 할 수 있습니다.

이 솔루션을 시연하기 위해 Ember Twiddle example을 만들었습니다.