Richtiger Weg zum Komponententest einer Komponente in EmberJS

Question

Ich versuche, eine Komponente in meinen Ember-Anwendungseinheitstests zu testen, und bis jetzt ist alles gut, außer dass ich an einem Punkt bin, an dem die Assertionen ihre Vorlage wiedergeben müssen.

Dazu normalerweise würde man

var comp = App.SomeNamedComponent.create(); 
var comp.appendTo(App.rootElement); 

nennen Aber während diese das Basiselement des Bauteils schafft, ist es nicht seine Vorlage machen. Nach ein paar Nachforschungen fand ich heraus, dass auf der Komponente weder templateName noch template Eigenschaften festgelegt sind. Also habe ich mich entschieden, die templateName selbst einzustellen, aber dann klagt das A Component must have a parent view in order to yield..

entschied ich mich dann mit einer Vorlage eines andere benutzerdefinierte Ansicht im Test zu schaffen, dass die Komponente verwenden, aber dann kann ich nicht die Instanz der Komponente zugreifen ...

Ich brauche die Instanz zugreifen das machen Assertions, und ich muss es Vorlage gerendert haben, da einige Eigenschaften abhängig von der CSS einiger Elemente in der Vorlage berechnet werden.

Answer 1

Dies ist, wie typischerweise teste ich eine Komponente, wenn ein Behälter nicht benötigt wird (insbesondere, wenn die Vorlage und das Layout an die Komponente programmatisch zur Verfügung gestellt werden):

Ember.testing = true; 

MyAwesomeComponent = Ember.Component.extend(); 

function createComponent(componentName, factory, options) { 
    if (typeof options.template === 'string') { 
    options.template = Ember.Handlebars.compile(options.template); 
    } 

    if (typeof options.layout === 'string') { 
    options.layout = Ember.Handlebars.compile(options.layout); 
    } 

    if (options.template && !options.layout) { 
    options.layout = options.template; 
    delete options.template; 
    } 

    var component = factory.create(options); 

    Ember.run(function(){ 
    component.appendTo('#qunit-fixture'); 
    }); 

    return component; 
} 

module('component testing sample'); 

test('a component with template', function(){ 
    var options = {layout: 'woot woot{{fullName}}'}; 

    var component = createComponent('my-awesome', MyAwesomeComponent, options); 

    equal(component.$().text(), 'woot woot'); 
}); 

test('a component with custom options and a template', function(){ 
    var options = { 
    fullName: 'Robert Jackson', 
    layout: '{{fullName}}' 
    }; 

    var component = createComponent('my-awesome', MyAwesomeComponent, options); 

    equal(component.$().text(), 'Robert Jackson'); 
}); 

JSBin ein Beispiel.

---

Wenn Sie brauchen/wollen die Vorlage zum Nachschlagen der Lage sein, Sie so etwas wie die folgenden (das schafft einen isolierten Container) verwenden können:

Ember.testing = true; 

MyAwesomeComponent = Ember.Component.extend(); 

function isolatedContainer() { 
    var container = new Ember.Container(); 

    container.optionsForType('component', { singleton: false }); 
    container.optionsForType('view', { singleton: false }); 
    container.optionsForType('template', { instantiate: false }); 
    container.optionsForType('helper', { instantiate: false }); 

    return container; 
} 

function createComponent(componentName, factory, options) { 
    var fullName = 'component:' + componentName, 
     templateFullName = 'template:components/' + componentName; 

    container.register(fullName, factory); 

    if (container.has(templateFullName)) { 
    container.injection(fullName, 'layout', templateFullName); 
    } 

    var Component = container.lookupFactory(fullName), 
     component = Component.create(options); 

    Ember.run(function(){ 
    component.appendTo('#qunit-fixture'); 
    }); 

    return component; 
} 

function registerTemplate(name, template){ 
    if (typeof template !== 'function') { 
    template = Ember.Handlebars.compile(template); 
    } 

    container.register('template:' + name, template); 
} 

var container; 

module('component testing sample', { 
    setup: function(){ 
    container = isolatedContainer(); 
    }, 
    teardown: function(){ 
    Ember.run(container, 'destroy'); 
    } 
}); 

test('a component with template', function(){ 
    registerTemplate('components/my-awesome', 'woot woot{{fullName}}'); 

    var component = createComponent('my-awesome', MyAwesomeComponent); 

    equal(component.$().text(), 'woot woot'); 
}); 

test('a component with custom options and a template', function(){ 
    registerTemplate('components/my-awesome', '{{fullName}}'); 

    var component = createComponent('my-awesome', MyAwesomeComponent, {fullName: 'Robert Jackson'}); 

    equal(component.$().text(), 'Robert Jackson'); 
}); 

JSBin der Containerversion.