Angular2 测试:ComponentFixture 中的 DebugElement 和 NativeElement 对象有什么区别?

2022-01-11 00:00:00 unit-testing jasmine dom javascript angular

我目前正在整理一些在组件级别测试 Angular 2 应用程序的最佳实践.

I'm currently putting together some best practices for testing Angular 2 apps on a component level.

我看过一些教程查询夹具的 NativeElement 对象以获取选择器等，例如

I've seen a few tutorials query a fixture's NativeElement object for selectors and the like, e.g.

it('should render "Hello World!" after click', async(() => {
    builder.createAsync(HelloWorld).then((fixture: ComponentFixture<HelloWorld>) => {
        fixture.detectChanges();
        let el = fixture.nativeElement;
        el.querySelector('h1').click();
        fixture.detectChanges();
            
        expect(el.querySelector('h1')).toHaveText('Hello World!');
    });
}));

但是，在 juliemr 的 Angular 2测试种子 她通过父 DebugElement 对象访问 NativeElement.

However, in juliemr's Angular 2 test seed she accesses the NativeElement through a parent DebugElement object.

it('should render "Hello World!" after click', async(() => {
    builder.createAsync(HelloWorld).then((fixture: ComponentFixture<HelloWorld>) => {
      fixture.detectChanges();
      let compiled = fixture.debugElement.nativeElement;
      compiled.querySelector('h1').click();
      fixture.detectChanges();
            
      expect(compiled.querySelector('h1')).toHaveText('Hello World!');
    });
}));

是否有任何特定情况下您会使用夹具的 debugElement.nativeElement 而不是其 nativeElement?

Are there any specific cases you'd use a fixture's debugElement.nativeElement over its nativeElement?

推荐答案

  • nativeElement 返回对 DOM 元素的引用
  • DebugElement 是一个 Angular2 类，它包含与调查元素或组件相关的各种引用和方法(参见 DebugNode和DebugElement的源码

    • nativeElement returns a reference to the DOM element
    • DebugElement is an Angular2 class that contains all kinds of references and methods relevant to investigate an element or component (See the source of DebugNode and DebugElement

相关文章