Wie erhält man beim Testen Komponenten aus der Komponente?

Question

Wie kann ich den Eigenschaftswert der Komponente überprüfen, wenn die Komponente keine Vorlage hat? In der Anwendung wird die Komponente erweitert und die Vorlage wird auf diese Weise bereitgestellt.

//my-component.js 
export default Ember.Component.extend({ 
    foo: 'bar' 
}); 

//my-component-test.hbs 
integration: true; 
test('it renders', function(assert) { 
    this.set('foo2', 'foo2'); 
    this.render(hbs`{{my-component foo=foo2}}`); 
    assert.equal(/* ??? */, 'foo2'); 
}); 

Ich bin nicht in der Lage this.render(hbs'{{#my-component foo=foo2}}{{foo}}{{/my-component}}'); zu verwenden, da foo nicht nachgegeben wird. Der direkte Zugriff auf Komponenten ist ebenfalls nicht möglich.

Answer 1

Und die Lösung ist stattdessen Unit Test zu verwenden.

import { moduleForComponent, test } from 'ember-qunit'; 

moduleForComponent('forms/base-form', 'Unit | Component | forms/base-form field', { 
    unit: true 
}); 

test('it renders', function(assert) { 
    const foo2 = 'foo2'; 
    const component = this.subject({foo: foo2}); 
    assert.equal(component.get('foo'), 'foo2'); 
}); 

Answer 2

In einem Integrationstest, denken Sie an eine Komponente als eine Box. Weisen Sie ihm Werte zu und rufen Sie Benachrichtigungen/Ereignisse von dieser Komponente ab. Binden Sie beispielsweise einen Wert an eine Komponente und verwenden Sie sie (drücken Sie eine Taste/geben Sie einen Wert usw. ein) und überprüfen Sie den Wert.

Auch in einem Integrationstest können Sie das Rendern von Komponenten mit jquery überprüfen. Wie zum Beispiel:

assert.equal(this.$("td").length, 6); 

In Ihrem Fall vielleicht für Sie einen Unit-Test geeignet. Ember Unit Testing