Can we have a "renderSync()" in ember-test-helpers?

Probably a dumb question: Can we have a “renderSync()” in ember-test-helpers? (Or, can we make one?) But thanks in advance, everyone!

OK. I worked around that. QUnit has assert.async(); and render() returns Promise.

_qunit.module('Integration | Component | the-component', function (hooks) {
    _emberQunit.setupRenderingTest(hooks);

    _qunit.test('Display correct content', async function (assert) {
        var done = assert.async();
        var _self = this;

        _testHelpers.render(hbs('{{the-component}}')).then(function () {
            assert.equal(_self.element.querySelector('div').innerText, ('actions'), 'Display correct content');
            done();
        });
    });
});

Hope this helps anyone still “love” working with IE like us.

What version of ember are you on?

You’re testing on IE?
you have my sympathies

do the transpile targets not work with IE in testing?

in my version, (3.4/canary), I’d write it like this:

module('Integration | Component | the-component', function(hooks) {
  setupRenderingTest(hooks);

  test('Display correct content', async function(assert) {
    assert.expect(1);

    await render(hbs`{{the-component}}`);
     
    const text = this.element.querySelector('div').innerText;

    assert.equal(text, 'actions', 'Display correct content');
  });
});

The transpiled async/await version works in IE.

Thanks, guys.

We have been doing EmberJS without Ember CLI for a few years. Sorry I didn’t mention that in the question. We basically code Ember 1.1 with ember.js 3.x runtime.

So, the assessment is: Write unit tests that can run on IE11, without Ember CLI transpiling. But I am allowed to copy \dist\assets\test-support.js from a working Ember project.

In that case you can write out the promises longhand.

module('Integration | Component | the-component', function(hooks) {
  setupRenderingTest(hooks);

  test('Display correct content', function(assert) {
    assert.expect(1);
    return render(hbs`{{the-component}}`).then(function() {
      var text = this.element.querySelector('div').innerText;
      assert.equal(text, 'actions', 'Display correct content');
    });
  });
});

async functions are just a nice shorthand for promises.

Nevermind, I see above that you already figured that part out. :stuck_out_tongue:

What I’m wondering is how you got the hbs inline template compiler working without a any preprocessing.

Hi Edward

Here is my hbs() function We have to include ember-template-compiler.js on the test page.

function hbs(templateSrc) {
    return Ember.HTMLBars.template(JSON.parse(Ember.Handlebars.precompile(templateSrc)));
}

In the production environment, we use MSIE Script engine to execute Ember.Handlebars.precompile() to obtain the compiled template JSON. Other script engines like V8 or Jurassic also work.

1 Like