javascript - 为什么文本在使用 toEqual 时不匹配 Angular ？

Question

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

这是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')
  })
})