时间戳

首页 > 解决方案 > MutationObserver 上的 Angular 指令单元测试失败：参数 1 不是“节点”类型

unit-testing - MutationObserver 上的 Angular 指令单元测试失败：参数 1 不是“节点”类型

问题描述

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

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

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。任何建议都受到高度赞赏。

标签： unit-testingkarma-jasmineangular-directiveangular6mutation-observers

解决方案

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

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

显然，该方法在异步测试中被调用得太早了。

推荐阅读