Unit testing Angular 2-对子组件中的事件进行测试回调

我得到了一个有一个子组件的组件。大概是这样的：

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

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

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

这目前不起作用。但是，如果我将expect包装在setTimeout中，它就会这样做。这是有意义的，因为事件是异步的

我想摆脱设置超时。有没有一种方法告诉我们“等待事件回调完成”

我试图寻找一些示例，但我只找到了检查特定事件是否已发出的测试，而不是检查发出特定事件的结果的测试

编辑：

我认为yurzui的答案是正确的。代码应该是有效的。我犯了一个错误，简化了Q的代码，忽略了真正导致问题的代码：foo函数

该函数是从服务调用函数，而不是简单的增量

---

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

您需要使用异步和勾选：

在您的测试中：

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

 } ) );

---

如果没有，请忽略此项。

您需要使用异步并使用勾号：

在您的测试中：

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

 } ) );

---

如果没有，请忽略此项。

它应该可以工作。您确定使用了正确的变量名称吗？例如，如果您有以下模板

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

最后，您的测试将通过

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

---

它应该会起作用。您确定使用了正确的变量名称吗？例如，如果您有以下模板

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

最后，您的测试将通过

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

---

为什么要写

（customEvent）=“foo”

而不是

（customEvent）=“foo（）”

？对不起，那是个打字错误。我编辑了这个问题：）为什么要写

（customEvent）=“foo”

，而不是

（customEvent）=“foo（）”

？对不起，这是个打字错误。我编辑了这个问题：）我想这家伙在某个地方订阅了onCustomEvent，在回调中增加了应该增加的变量，并尝试以这种方式测试订阅。@yurzui是对的。事实上，我在抽象这个问题时犯了一个错误。我在“foo”函数中实际做的是调用一个服务（注入的）。我试图监视这项服务的一个模拟版本，但没有成功。起初我以为问题是关于同步的（这就是为什么我以这种方式创建了这个问题），但实际问题是关于没有注册函数调用的间谍。底线-问题在其他地方，代码应该可以工作。我会将yurzui的答案标记为正确答案并编辑问题，这样任何其他在这个问题上绊倒的访问者都不会被误导。我认为这些人在某个地方订阅了onCustomEvent，并且在回调中增加了应该增加的变量，并尝试以这种方式测试订阅。@yurzui是对的。事实上，我在抽象这个问题时犯了一个错误。我在“foo”函数中实际做的是调用一个服务（注入的）。我试图监视这项服务的一个模拟版本，但没有成功。起初我以为问题是关于同步的（这就是为什么我以这种方式创建了这个问题），但实际问题是关于没有注册函数调用的间谍。底线-问题在其他地方，代码应该可以工作。我会将yurzui的答案标记为正确答案并编辑问题，这样其他在这个问题上绊倒的访客就不会被误导。嗨，Milad，谢谢你的回答。现在我发现我的问题实际上不同了，并且与foo函数的实际功能（调用服务而不是增量）有关。通过抽象问题，我隐藏了真正的问题。嗨，米拉德，谢谢你的回答。现在我发现我的问题实际上不同了，并且与foo函数的实际功能（调用服务而不是增量）有关。通过抽象问题，我隐藏了真正的问题。