为什么text使用toEqual在angular中不匹配？

Question

我正在尝试使用jasmine测试我的组件，但我不确定为什么我fail

这是y代码 https://stackblitz.com/edit/angular-bup8gb

describe('initial display',()=>{
   it('show counter text',()=>{
      debugEl = fixture.debugElement.query(By.css('p.abc'));
      el = fixture.nativeElement;
       fixture.detectChanges();
     expect(el.textContent).toEqual('counter 1')
   })
 })

Answer 1

以下是执行所需操作的正确语法：

describe('initial display',()=>{
  it('show counter text',()=>{
    debugEl = fixture.debugElement.query(By.css('.abc'));
    el = debugEl.nativeElement; //** You need to get the element from the degubEl
    fixture.detectChanges();
    expect(el.textContent).toEqual('counter 1')
  })
})

这是另一种方法，但如果模板中有多个p元素，则可能不合适：

describe('initial display',()=>{
  it('show counter text',()=>{
    el = fixture.nativeElement;
    fixture.detectChanges();
    expect(el.querySelector('p').textContent).toEqual('counter 1')
  })
})