[QUESTION]: can we update this test to show what ember 2.x tests would do?

[toranb]

I found this line in a test today after looking over some code in ember-qunit

this.registry.register('template:components/zap-zap', Ember.Handlebars.compile('<span>zap zap</span>');

I realized you need a compiler to run this now but ... with a little modification it seems to work like this in ember 2.3. Is it possible to change this so future readers see how easy this is?

this.registry.register('template:components/zap-zap', hbs`<span>zap zap</span>`);

https://github.com/rwjblue/ember-qunit/blob/master/tests/module-for-component-test.js#L17

[danielchappell]

Also interested in the idiomatic way to handle this case.

how does this piece of code work?

hbs`<span>zap zap</span>`

Is hbs a function? how can it be called with out parens?

[toranb]

@josephchappell great question ... come to think of it I never asked how this actually worked myself :)

[pangratz]

Alright, so `hbs`hello is a so called tagged template string and the short form for hbs("hello"), where hbs is just a normal function.

hbs is imported via import hbs from "htmlbars-inline-precompile". This is where the ember-cli-htmlbars-inline-precompile addon comes in place: it adds a babel transform to the pipeline, which replaces all occurrences of `hbs`template string with the precompiled HTMLBars template (which is just a JavaScript function).

So

import hbs from "htmlbars-inline-precompile";
import { module, test } from "ember-qunit";

module("my-test");

test("test all the templates", function(assert) {
  var template = hbs`
    <span>hello world</span>
  `;
});

is transformed via ember-cli-htmlbars-inline-precompile to something like

import hbs from "htmlbars-inline-precompile";
import { module, test } from "ember-qunit";

module("my-test");

test("test all the templates", function(assert) {
  var template = Ember.HTMLBars.template((function () {
        return {
          isHTMLBars: true,
          revision: 'Ember@1.11.1',
          blockParams: 0,
          cachedFragment: null,
          hasRendered: false,
          build: function build(dom) {
            var el0 = dom.createDocumentFragment();
            var el1 = dom.createElement('div');
            dom.setAttribute(el1, 'class', 'custom-content');
            var el2 = dom.createComment('');
            dom.appendChild(el1, el2);
            dom.appendChild(el0, el1);
            return el0;
          },
          render: function render(context, env, contextualElement) {
            var dom = env.dom;
            var hooks = env.hooks,
                content = hooks.content;
            dom.detectNamespace(contextualElement);
            var fragment;

            if (env.useFragmentCache && dom.canClone) {
              if (this.cachedFragment === null) {
                fragment = this.build(dom);

                if (this.hasRendered) {
                  this.cachedFragment = fragment;
                } else {
                  this.hasRendered = true;
                }
              }

              if (this.cachedFragment) {
                fragment = dom.cloneNode(this.cachedFragment, true);
              }
            } else {
              fragment = this.build(dom);
            }

            var morph0 = dom.createMorphAt(dom.childAt(fragment, [0]), 0, 0);
            content(env, morph0, context, 'formField.value');
            return fragment;
          }
        };
      })())
});

[toranb]

@pangratz dude you rawk - hands down the single best reply I've ever seen to a question like this on github. Keep on improving => the ember community is great because of people like you who take the time to help n00bs like me :)

[pangratz]

Thanks for the nice words @toranb! Replies like yours make it worth to take the time and add an explanation. I am very glad that I could help!

[danielchappell]

yes thank you very much @pangratz for taking the time to explain that!

[Turbo87]

seems like the "issue" here is solved? I'll close this one for now