Angular 2 - 测试回调到子组件中的事件

我得到了一个包含1个子组件的组件。是这样的：Angular 2 - 测试回调到子组件中的事件

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

富是做东西的功能，假设是一个简单的增量。

我想编写一个单元测试，以确保自定义事件发出后，实际发生的增量。

是我的尝试目前在试做的是这样的：

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

这并不目前的工作。但如果我在setTimeout中包含期望值，它确实如此。这是有意义的，因为事件是异步的。

我想摆脱setTimeout。有没有办法告诉“等到事件回调已经完成”？

我试着寻找例子，但我只找到了检查发现特定事件而不是检查发射特定事件的后果的测试。

编辑：

我走了正确的答案yurzui。代码应该工作。我通过简化Q的代码犯了一个错误，省略了实际导致问题的代码：foo函数。

该函数从服务调用函数，它不是一个简单的增量。

为了便于参考，我的实际问题是为服务的模拟版本创建的间谍没有在该事件处理程序中注册对该函数的调用。现在的问题解决了

来源

2016-12-29 Massimo Franciosa

为什么写'（customEvent）=“foo”'而不是'（customEvent）=“foo（）”'？ – yurzui

对不起，这是一个错字。我编辑了这个问题:) –

它应该工作。你确定你使用变量的正确名称吗？举例来说，如果你有下面的模板

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

那么你的输出事件应该是这样的：

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

，最终测试将被传递Plunker Example

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

来源

2016-12-29 11:09:17 yurzui

我认为这个家伙是订阅onCustomEvent的地方，并且在回调中增加了变量ThatShouldBeIncremented，并试图以这种方式测试订阅。 – Milad

@yurzui是对的。我实际上是在抽象这个问题上犯了一个错误。我在“foo”函数中实际做的是调用服务（即注入）。我试图窥探这个服务的模拟版本，但没有奏效。我认为最初的问题是关于同步（这就是为什么我以这种方式创建问题），但实际问题是关于没有注册函数调用的间谍。 –

底线 - 问题在别的地方，代码应该可以工作。我会将yurzui的答案标记为正确的并编辑问题，因此任何其他访问者在这个问题上磕磕碰碰都不会误导。 –

你需要使用异步和使用刻度：

在您的测试：

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); 
    }));

任何的方式，我认为你这样做增量和东西只是为了看看，如果你的订阅工作，在这种情况下，处理这一个更好的办法是：

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

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

}));

如果没有，忽略这个。

来源

2016-12-29 10:52:00 Milad

嗨米拉德，谢谢你的回答。我现在发现我的问题实际上是不同的，并且与foo函数的实际功能（调用服务而不是增量）有关。通过抽象我隐藏真正问题的问题。 –

Angular 2 - 测试回调到子组件中的事件

回答

相关问题