Get popup modal inner HTML in Ember Qunit test

Question

I'm doing integration component testing with ember-qunit. So how to get popup modal body text once its open from an action.

text-bar-test

test('it renders with title', function(assert) {
    assert.expect(1);

    this.render(hbs`{{text-bar}}`);
    this.$('.open-app').click();  // opening from text-bar hbs template
    assert.equal(this.$('.body-text').html(), 'its modal-body text', 'Modal body text test once opens');

});

Answer 1

You'll need to use one of ember's asynchronous test helpers to help manage this. The click event happens, then there are some additional tasks running (like animations and whatnot).

There is a package called ember test helpers and you'll want to use the wait or waitFor helper: https://github.com/emberjs/ember-test-helpers/blob/master/API.md#waitfor.

The ember guides show this example here: https://guides.emberjs.com/v2.18.0/testing/testing-components/#toc_waiting-on-asynchronous-behavior

If you're using a 3.x version, you can use the async/await syntax, which makes things a lot nicer: https://guides.emberjs.com/v3.1.0/testing/testing-components/#toc_waiting-on-asynchronous-behavior