Angular 2中兄弟姐妹之间的单元测试通信

Posted

技术标签:

【中文标题】Angular 2中兄弟姐妹之间的单元测试通信【英文标题】:Unit testing communication between siblings in Angular 2 【发布时间】:2018-02-04 08:33:22 【问题描述】:

有人如何测试 Angular 2 中 2 个同级组件之间的通信?我似乎没有在网上找到任何可行的资源。

app.component.html

<comp1 #a></comp1>
<comp2 [x]="a.get()"></comp2>

其中get()comp1 组件中的一个函数,我将其值传递给组件comp2 的一个类变量。我怎样才能有效地测试这个?

app.componentcomp1comp2 的父组件并将它们括起来。

【问题讨论】:

网上对此有很多解释,请参考 Angular 文档:angular.io/guide/testing#test-a-component。您在app.component.spec.ts 中编写测试。 我不是在问如何编写测试。此外,没有文档解释如何测试我在这里试图暗示的通信。相信我。我到处搜索。 这实际上是一个直接的测试。你有没有试过?在此处发布您的测试,以便我继续为您提供帮助 【参考方案1】:

你提到的 sn-p 给出了一个部分的想法。但我认为您想测试一个组件数据的更改是否会影响另一个组件的数据。

it('should xx', async(() => 
    const fixture = TestBed.createComponent(ParentComponent);
    fixture.detectChanges();

    const child1 = fixture.debugElement.queryAll(By.directive(ChildComponent1))[0];
    const but = child1.queryAll(By.css('#some_element'))[0].nativeElement; // change data in child1
    fixture.detectChanges(); // detect changes

    const child2 = fixture.debugElement.queryAll(By.directive(ChildComponent2))[0];
    const child2info = child2.queryAll(By.css('some_element'))[1].nativeElement.innerHTML;
    expect(child2info).toBe('some_data'); // check if reflected in child2
  ));

所以,基本上你使用By.directive() 来获取子组件的DOM 元素。完成后,您需要使用 nativeElement 编辑 DOM。

编辑后,再次使用By.directive()获取第二个子组件的DOM元素,然后进一步检查其DOM是否有数据变化。

注意: 要更改ChildComponent1 中的数据,请执行but.value = "something" 之类的操作(如果它是&lt;input&gt; 框),然后在调用detectChanges() 之前创建一个Event

【讨论】:

以上是关于Angular 2中兄弟姐妹之间的单元测试通信的主要内容,如果未能解决你的问题,请参考以下文章

如果测试模块位于姐妹文件夹中,如何让我的 Python 单元测试导入测试模块?

如何在 Angular 4 中的兄弟组件之间共享功能

兄弟组件通信角度6

如何在 2 个组件之间进行通信 - 兄弟组件(Angular 1.5.8)

Angular 6 - 如何在单元测试中模拟 router.events url 响应

Angular 2 单元测试组件,模拟 ContentChildren