MutationObserver 上的 Angular 指令单元测试失败：参数 1 不是 'Node' 类型

Question

我正在为一个指令设置一些单元测试，其中有一个 MutationObserver 并在每次更改时发出一个事件（当活动 routerLink 更改时）。它适用于 Angular 的 ElementRef API.

我遵循了官方文档和这个很好的解释：并且实际上可以在测试中获取带有指令的元素：

describe('ActiveLinkChangeDirective', () => {
    let component: TestMatExpansionPanelComponent
    let fixture: ComponentFixture<TestMatExpansionPanelComponent>;
    let link
    let observed

beforeEach(fakeAsync(() => {

TestBed.configureTestingModule({
    imports: [RouterTestingModule],
    declarations: [ActiveLinkChangeDirective, 
                   TestMatExpansionPanelComponent],
    providers: [
      { provide: ElementRef, useClass: TestMatExpansionPanelComponent }],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
}).compileComponents().then(() => {

  fixture = TestBed.createComponent(TestMatExpansionPanelComponent)
  component = fixture.debugElement

  link  = fixture.debugElement.query(By.directive(ActiveLinkChangeDirective))
  expect(link).not.toBeNull()

  observed = link.injector.get(ActiveLinkChangeDirective)
  expect(observed).not.toBeNull()

  let observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => console.log(mutation.target))
  })

  observer.observe(observed, { attributes: true })

  fixture.detectChanges();
})

}))

但是，它失败并显示错误 Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.：

  it('should create an instance', () => {  
      let directive = new ActiveLinkChangeDirective(component)
      expect(directive).toBeTruthy()
  });

据我了解，这个错误意味着 MutationObserver 只是没有要观察的元素，并不是专门指观察到的元素类型。我只是无法将观察到的元素的实例传递给测试中的 MutationObserver。非常感谢任何建议。

Answer 1

我能够通过像这样包装 observer.observe 方法来使测试通过：

let addObserver = () => {
    if (!observed) {
      tick(500)
      addObserver
      return
    }
    observer.observe(observed, { attributes: true })
}

显然在异步测试中调用该方法的时间过早。

MutationObserver 上的 Angular 指令单元测试失败：参数 1 不是 'Node' 类型

Failing Angular directive unit test on MutationObserver: parameter 1 is not of type 'Node'

unit-testing

mutation-observers

karma-jasmine

angular-directive

angular6