2

コンポーネントのテストを 1 つのページに表示して、一部のメソッド内に挿入しているデバッグを確認できるようにしたいと考えています。

何らかの理由で、テストでデータが正しくロードされていないようで、何がロードされているかを確認したいと考えています。

残念ながら、QUnit は私が入れたものしか表示しません。コンソール ログassertsを表示できるように、テストを 1 つのページに分離して表示する方法があるかどうか疑問に思っていました。

これはテストのスケルトンです:

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

EDIT：のみを使用して問題が何であるかを理解しましたassert.equal()。1 つ欠けていました$()(jQuery 関数)。例：

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

レンダリングされたコンポーネントを見て、遊んでいないのは素晴らしいことですassert.equal()

4

1 に答える 1

3

次のように、コンポーネントのライフサイクル フック内でdebugger;ステートメントを使用してみてください。didRender

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

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

統合テストでコードの実行を一時停止し、コンソールでコードを操作できます。ブラウザで QUnit ランナーを使用している場合、ランナーの表示領域で HTML レンダリングが一時停止され、それも調べることができます。

このソリューションを示すために、 Ember Twiddle の例を作成しました。

于 2016-12-02T18:34:38.653 に答える