Debug rendered HTML and code during an Ember integration test

Question

I want to render my component's test in one page so I can see the debugging I'm inserting within some methods.

For some reason, my test seems to not load the data correctly and I want to see what it is loading.

Unfortunately, QUnit only shows me what I put in the asserts and I was wondering if there was a way to see my test isolated in one page so I can see the console log.

This is the skeleton of test:

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: I figured out what the problem using only assert.equal(). It was missing one $() (jQuery function). Example:

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

It would still be great to see the rendered component, and not play with assert.equal()

jacefarm jacefarm · Accepted Answer · 2016-12-02T18:34:38

Try using the debugger; statement inside your component's didRender lifecycle hook, like this:

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

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

It will pause code execution in your integration test, and you can work with your code in the console. If you are using the QUnit Runner in your browser, the HTML rendering will be paused in runner's display area, and you can inspect that as well.

I've created an Ember Twiddle example to demonstrate this solution.

Debug rendered HTML and code during an Ember integration test

1 Answers