Mocking Komponente Funktion für die Zwecke der Komponentenintegrationstest in EmberJS

Question

Let'a eine einfache EmberJS Komponente annehmen:

//my-app/components/my-component.js 
export default Ember.Component.extend({ 

    classNames: ['cursor-pointer'], 

    doSth(){ 
     // whatever, state of the component does not change 
    }, 

    clickListener: Ember.on('click', function(){ 
     this.doSth(); 
    }) 
}); 

Nun möchte Ich mag Integrationstests verwenden, um herauszufinden, ob Anklicken der Komponente erreicht (Delegierten finden) die doSth() Methode.

moduleForComponent('my-component', 'Integration | Component | stores parser previewer', { 
    integration: true 
}); 
test('should call doSth() on click', function (assert) { 

    /* Line 3 - the place I tried to set mocked doSth() up */  

    this.render(hbs`{{my-component}}`); 
    this.$('.cursor-pointer').click(); // triggers clickListener() correctly 
}); 

Das Problem ist, dass ich nicht Methode doSth() mit meiner mock ersetzen. So stoße ich nie auf assert.ok() Aussage.

habe ich versucht, folgende Aussagen auf die Linie 3 im Test einzufügen:

// idea 1 
this.set('doSth', function(){ 
    assert.ok(true); 
    }); 

// idea 2 
this.doSth = function(){ 
    assert.ok(true); 
}; 

Keine der 2 Ansätze (idea 1, Idee 2) gearbeitet. this.subject() ist ebenfalls nicht verfügbar, da es sich um einen Integrationstest und nicht um einen Komponententest handelt.

Update: Stellen doSth() sein, eine Funktion wie die openUrlInANewTab() unter dem entspricht nicht den Zustand der Komponente beeinflussen, noch die zugehörigen Controller noch Route des Staates. Beispiel:

//my-app/components/my-component.js 
... 
import openUrlInANewTab from 'my-app/utils/new-tab-opener'; 
... 
export default Ember.Component.extend({ 
    ... 
    doSth(url){ 
    openUrlInANewTab(url); 
    } 

während

// my-app/utils/new-tab-opener.js 
export default function openUrlInANewTab(){ 
     anchor = document.createElement("a"); 
     ... 
     anchor.click(); 
     ... 
} 

Answer 1

Sie doSth bewegen kann custom-service Service, dass Sie Ihre my-component injizieren. Dann im Test können Sie dies leicht testen, indem Sie gefälschten Service injizieren.

Tests/Integration/components/my-Komponenten-test.js:

test('should call doSth() on click', function(assert) { 
    const customStub = Ember.Service.extend({ 
    doSth() { 
     // whatever, state of the component does not change 
     console.log('Stubbed doSth fired'); 
     assert.ok(true, 'Stubbed doSth fired'); 
    } 
    }); 
    this.register('service:custom-service', customStub); 
    this.inject.service('custom-service', { as: 'customService' }); 
    this.render(hbs`{{my-component}}`); 
    this.$('.cursor-pointer').click(); // triggers clickListener() correctly 
}); 

Komponenten/my-component.js:

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    customService: Ember.inject.service('custom-service'), 
    classNames: ['cursor-pointer'], 

    clickListener: Ember.on('click', function(){ 
    this.get('customService').doSth(); 
    console.log('Click listener'); 
    }) 
}); 

• Working demo.
• Ember Guides.

Answer 2

Als Alternative zu dem, was Daniel vorgeschlagen hat, könnten Sie in Erwägung ziehen, eine Schließaktion zu verwenden, wenn Sie in Ihrer Komponente auf klicken. Was ich damit meine, ist, anstatt auf eine Ihrer Methoden zu delegieren (was Sie getan haben und nicht testen konnten) oder auf einen Service (was Daniel vorgeschlagen hat), einfach eine Aktion auszulösen, die an Ihre Komponente weitergegeben wird. Auf diese Weise haben Sie auch die Möglichkeit, in Ihrem Test zu verhöhnen. Darüber hinaus führt dieser Ansatz zu einer reaktiveren Komponente; da Sie das Verhalten Ihrer Komponente vom Eigentümer zur Laufzeit injizieren; Dadurch können Sie Ihre benutzerdefinierte Komponente problemlos in verschiedenen Kontexten (verschiedenen übergeordneten Komponenten/Vorlagen) wiederverwenden. Sehen Sie die twiddle für ein Beispiel, was ich meine.