Question

我正在为其中包含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。任何建议都将受到高度赞赏。

Answer 1

我可以通过包装observer.observe方法来使测试通过：

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

显然，该方法在异步测试中被调用为时过早。

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

1 个答案: