Сбой модульного теста директивы Angular на MutationObserver: параметр 1 не имеет типа «Узел»

Я настраиваю некоторые модульные тесты для директивы, в которой есть MutationObserver и генерирует событие при каждом изменении (по мере изменения активного routerLink). Он хорошо работает с ElementRef API Angular.

Я следил за официальными документами и этим прекрасным объяснением: 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-testing karma-jasmine angular6 angular-directive mutation-observers
person RedDree    schedule 13.07.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Мне удалось пройти тест, обернув метод observer.observe следующим образом:

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

Очевидно, метод вызывался слишком рано в асинхронном тесте.

person RedDree    schedule 18.07.2018