Angular 2 - test callback to an event in the child component

Question

I got a component with 1 child component. something like this:

<custom-component (customEvent)="foo()"></custom-component>

foo is a function that does stuff, assume is a simple increment.

I want to write a unit test that ensures that after the custom event is emitted, the increment actually happened.

what I tried to do currently in the test is something like this:

let oldValue = component.variableThatShouldBeIncremented;
childComponent.onCustomEvent.emit();
expect(component.variableThatShouldBeIncremented).toBeGreaterThan(oldValue);

this doesn't currently work. but if I wrap the expect in a setTimeout it does. this makes sense as the event is async.

I want to get rid of the setTimeout. is there a way to tell "wait until the event callback has been fulfilled"?

I've tried to look for examples but I've only found tests that are checking that a specific event has been emitted rather than checking the consequence of emitting a specific event.

EDIT:

I'm taking the yurzui answer for correct. the code should work. I've made a mistake by simplify the code for the Q, omitting the code that was actually causing the problem: the foo function.

that function was calling a function from a service and it wasn't a simple increment.

for reference purposes, my actual problem was that the spy created for the mocked version of the service didn't register the call to the function inside the event handler. the problem is now solved

Why are writing (customEvent)="foo" instead of (customEvent)="foo()"? — yurzui
– yurzui, Commented Dec 29, 2016 at 10:48

yurzui · Accepted Answer · 2016-12-29 11:09:17Z

2

It should work. Are you sure that you use right name of your variables? For instance, if you have the following template

<custom-component (customEvent)="foo()"></custom-component>

then your output event should look like this:

@Output('customEvent') onCustomEvent = new EventEmitter();

and finally your test will be passed Plunker Example

it('should work', () => {
  let oldValue = component.variableThatShouldBeIncremented;
  childComponent.onCustomEvent.emit();
  expect(component.variableThatShouldBeIncremented).toBeGreaterThan(oldValue);
});

answered Dec 29, 2016 at 11:09

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Milad Over a year ago

I think this guys is somewhere subscribed to that onCustomEvent and in the callback is increasing variableThatShouldBeIncremented and tries to test the subscription this way.

Massimo Franciosa Over a year ago

@yurzui is right. I actually made a mistake abstracting the problem. what I'm actually doing in the "foo" function is calling a service (that is injected). I was trying to spy on a mocked version of this service but didn't work. I thought initially the problem was about synchronisation (that's why I've created the question in this way) but the actual problem was about the spy that didn't register the call of the function.

Massimo Franciosa Over a year ago

bottom line - the problem is somewhere else, and the code should work. I will mark the yurzui answer as the correct one and edit the question, so any other visitor stumbling on this Q won't be mislead.

Milad · Accepted Answer · 2016-12-29 11:24:55Z

You'd need to use async and use tick :

In your test :

    it( 'should work', fakeAsync( () => {

        let oldValue = component.variableThatShouldBeIncremented;
        childComponent.onCustomEvent.emit();
        tick(10); // fast forward 10 milliseconds considering that emit would take 10 milliseconds 

          expect(component.variableThatShouldBeIncremented).toBeGreaterThan(oldValue);
    } ) );

Any by the way , I assume you're doing that increment and stuff just to see if your subscribe is working , in that case , , a nicer way to handle this is :

 it( 'should work', fakeAsync( () => {

    childComponent.customEvent.subscribe((data)=>{
       expect(data).toBe('what ever you expect to be emitted');
    });
    childComponent.onCustomEvent.emit();

 } ) );

If not , ignore this.

Hi Milad, thanks for your answer. I've find out now that my problem was actually different and related to what actually the function foo does (which is calling a service and not an increment). by abstracting the problem I've made the real issue hidden.

Collectives™ on Stack Overflow

Angular 2 - test callback to an event in the child component

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related