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

Testing
1

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

2

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.

3

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');
  });
});
4

The transpiled async/await version works in IE.

5

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.

6

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.

7

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.

8

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