Angular 5 测试：如何获取对子组件的引用

Question

我正在尝试测试 Angular 应用程序中主机组件和子组件之间的交互。我不知道如何获取对创建父组件时创建的子组件的引用。这是设置：

child.component.spec.ts

@Component({template: `<child [data]="model"></child>`})
class HostComponent {
  public model:any;
}

describe('ChildComponent', () => {
  let hostFixture: ComponentFixture<HostComponent>;
  let childFixture: ComponentFixture<ChildComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ChildComponent, HostComponent]
    });
  }));

  beforeEach(() => {
    // this creates the child component as well, but how to get to it?
    hostFixture = TestBed.createComponent(HostComponent);

    // this creates a NEW instance of child component, not the one from the Host template
    // so it's not the instance I actually want to test
    childFixture = TestBed.createComponent(ChildComponent);
  });
});

更改hostFixture.componentInstance 中的model 值实际上不会更改childFixture.componentInstance 的data 输入值；这就是我意识到有两个子组件实例的原因。

我的问题很简单，我怎样才能让childFixture 引用在HostComponent 模板中找到的组件夹具，而不是像我目前拥有的不同的实例？

The docs 没有帮助。

Answer 1

如the guide中所述，宿主组件实例是用TestBed.createComponent创建的，子组件实例可以从debugElement和By helper中选择：

childDebugElement = hostFixture.debugElement.query(By.directive(ChildComponent));

或者：

childDebugElement = hostFixture.debugElement.query(By.css('child'));

Answer 2

上面的答案很好，回答了正文的问题，但问题的标题/标题提出了其他问题。我也想回答标题提出的问题。 Estus 的回答对于特定用例是正确的，但 Google 会根据标题中的问题将您带到这里。

获取子组件而不是原生元素：

测试组件（问题中称为 HostComponent）：<child [data]="model" #child></child>

然后在类定义中：

@Component({template: `<child #child [data]="model"></child>`})
class HostComponent {
    public model:any;
    @ViewChild('child') child;
}

最后，在测试时，根据规范：

it('should do something', () => {
    component.child.value
    component.child.method
    // etc.
}

您可以在测试用例中使用它来查找您真正要测试的子组件。

---

剩下的就是满足 cmets 中提出的一个有争议的方面。

在可能的情况下，也有充分的理由将事情设为私有。如果您想对其进行单元测试，我不确定我的感受。如果你想测试一个私有成员，你必须让你想要的带有私有成员的对象的 typescript 编译器可以公开访问，方法是将它转换为并将它包装在括号中，以明确你正在转换的内容。

在组件中：

...
    @ViewChild('child') private child;
...

在测试中：

...
    (<any>component).child.value
    (<any>component).child.method
...

Answer 3

遍历 debugElement(s) 的子节点并访问上下文属性以访问组件及其属性

let debugElement = hostFixture.debugElement.childNodes[x] as DebugElement
debugElement = debugElement.childNodes[x] as DebugElement
...
let component = debugElement.context as YourComponent

这是一种非常静态的方法，因为如果添加了新子节点，那么您可能访问了错误的子节点。最好写一个辅助方法，遍历childNodes并找到正确的名称。

Answer 4

要访问子组件实例（甚至已键入）：

const childComponent: ChildComponent = hostFixture.debugElement.query(By.directive(ChildComponent)).componentInstance;