Testing a controller and it's template

1

Hi Guys,

might be a stupid questions, but is it possible to write tests for a controllers template? maybe render it as a component? i’ve seen something similar but for older version of emberJs.

thanks!

2

Like basically a rendering/integration test for a route? There might be some hacky way to do it(you could probably use the soon to be deprecated partial helper in a rendering test for example) but I think the “accepted” solution would be write an application/acceptance test. Do you have objections to acceptance/application tests?

3

well, would be one option, but there are alot of backend interactions, so would be more difficult. we would like only to test the hbs template. any other workaround?

4

I’m not aware of any way to test a template and its backing controller together other than an application test. Obviously you could always encapsulate the controller and template in a component but other than that…

If you’re trying to test literally just the template that might be easier, you could try importing it and trying to render it with the render test helper or maybe even playing with importing the template compiler in your test and using that, but I’m not really sure why you’d want to do that anyway… without a model, controller props, actions, etc what is even being tested? Just the markup? In that case I’d think you’d want a visual regression testing tool like Percy.

But anyway maybe someone else has thoughts, I’m certainly not an authority on this subject. You could also check in Discord.

5

@Pop_Levente, before resorting to using application tests or Percy to capture the user’s workflow (both are legitimate options), I’d first try to see if separating concerns is a possibility. What I mean by separation of concerns is this:

If your route template only uses the usual Ember things, such as {{if}}, {{each}}, and {{action}}, I would write only unit tests for your controller, because these tests are fast. Your unit tests would make sure that your model and other internal variables are always in their right state. Whether {{if}}, {{each}}, and {{action}} will render the right state correctly, you leave that up to Ember.

If your route template also uses components that you have created, you can introduce rendering (integration) tests in addition to the unit tests. Your rendering tests would make sure that the component renders the given input correctly.

For an example of what unit tests for a controller might look like in more modern Ember, let me recommend one of my projects: https://github.com/ijlee2/ember-animated-tutorial/blob/master/tests/unit/controllers/search-test.js . You can also check out the repo to see the app in action, to get a better context of the unit tests.

Cheers,

6

for now, how i did is to import the hbs and register a component

  import layout from 'xxx';

  hooks.beforeEach(function() {
    this.owner.register('component:-test-component', Component);
  });

and then create the component

  let ComponentFactory = this.owner.factoryFor('component:-test-component');
  
  let view = ComponentFactory.create({
    layout,
    model: this.get('model')
  });

of course this only helps testing the hbs template, it’s not hooked with the controller background.