mutationObserver 在指令中调用函数的 Angular 单元测试

问：

因此，我正在 Angular 中构建一个 focustrap 指令，例如用于模态/弹出窗口，其中焦点将不断循环在弹出窗口中的可聚焦元素上。例如，它使用 mutationObserver 来跟踪子项和 angular 按钮组件中禁用属性的更改。 我现在被困在单元测试 mutationObserver 中

我删除了一些使用的代码，因为这些部分对此问题并不重要。只要知道在某些时候禁用的属性可以在按钮中更改 focus-trap.directive.ts

 constructor(private el: ElementRef) {}

  ngOnInit() {
    this.init();
    this.listenForDisabledChanges(this.el.nativeElement);
  }

init() { // finds button elements without the disabled attribute } 

// The focustrap needs to know whenever a disabled attribute is placed i.e. in app-button component // after initializing
  listenForDisabledChanges(element: HTMLElement) {
    this.mutationObserver = new MutationObserver(
      (mutationList: MutationRecord[]) => {
        for (const mutation of mutationList) {
          if (
            mutation.type === 'attributes' &&
            mutation.attributeName === 'disabled'
          ) {
            this.init();
          }
        }
      }
    );

    // Start observing the target node for configured mutations
    this.mutationObserver.observe(element, {
      attributes: true,
      childList: true,
      subtree: true,
    });
  }

这是我尝试过的单元测试之一，但它在单元测试时不会调用 init 函数。我认为这是一个时机/等待正确时机的问题。

    it('should initialize again after a button changed disabled attribute', fakeAsync(() => {
      spyOn(directive, 'init');
      const enabledButton = fixture.nativeElement.querySelector(
        'button:not([disabled])'
      );
      enabledButton.disabled = true;

      fixture.detectChanges();
      expect(directive.init).toHaveBeenCalledTimes(1);
    }));

单元测试使用一个 testComponent，其中包含按钮上具有 disabled 属性的 Input（）

@Component({
  selector: 'app-test-component',
  template: `<app-popup title="titel" content="content">
    <app-button [disabledButton]="true">Disabled Button</app-button>
    <app-button>BUTTON2</app-button>

    <app-button>BUTTON3</app-button>
  </app-popup>`,
})
class TestComponent {}