是否可以在茉莉花测试中获取模板引用变量？

Question

For example in my-components-list.html I have:

<my-component #first></my-component>
<my-component #second></my-component>
<my-component #third></my-component>
<input #forth/>

And I want to get it in my test like:

it('test', () => {
    const myComponent: HTMLElement = fixture.debugElement.query(By.someMethod('#first'));
    const myInput: HTMLElement = fixture.debugElement.query(By.someMethod('#forth'));
}

Answer 1

You can use the template reference variables like you would use them in normal Angular code. Define them with the @ViewChild decorator as fields in your component class:

@ViewChild('first') first: ElementRef;
@ViewChild('second') second: ElementRef;
...

Then in your test you can access them like normal component fields: fixture.componentInstance.first

I first expected a dynamic solution for this problem where i can access the elements by reference variable name but the more i think about the described solution i think it is the correct way. It is more typesafe and the elements are encapsulated as part of the component and not the template.