使用事件發射器測試可點擊的 Angular 指令 - @Output() 未引發/觸發

Question

我有一個小指令來檢測用戶是否點擊了指令所附加的 HTML 元素之外，它看起來像這樣，沒什么特別的：

@Directive({
  selector: '[vcrClickOutside]'
})
export class ClickOutsideDirective {

  constructor(private elementRef: ElementRef) { }

  @Output()
  clickOutside = new EventEmitter();

  @HostListener('document:click', ['$event.target'])
  onClick(targetElement): void {
    const clickedInside = this.elementRef.nativeElement.contains(targetElement);
    if (!clickedInside) {
      this.clickOutside.emit(targetElement);
    }
  }
}

現在是測試我的指令的時候了，所以我創建了一個測試文件，引入了一個模擬組件，附加了指令，在我的測試中，我點擊了模擬組件的模板並嘗試捕捉發射器，這是測試：

// Mock Component
@Component({
  template: '<div (clickOutside)="toggleClick($event)"><div vcrClickOutside>Oh I just love writing tests</div></div>'
})
class MockComponent {
  constructor() { }
  hasBeenClicked = false;
  toggleClick(ev): void {
    this.hasBeenClicked = !this.hasBeenClicked;
  }
}
describe('ClickOutsideDirective', () => {

  let component: MockComponent;
  let fixture: ComponentFixture<MockComponent>;
  let element: HTMLElement;
  let outSideDiv: HTMLElement;
  let insideDiv: HTMLElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        MockComponent,
        ClickOutsideDirective
      ]
    });

    fixture = TestBed.createComponent(MockComponent);
    component = fixture.componentInstance;
    element = fixture.debugElement.nativeElement;
    outSideDiv = element.querySelectorAll('div')[0];
    insideDiv = element.querySelectorAll('div')[1];
    fixture.detectChanges();
  });

  it('click the outer div thus emitting the clickOutside and toggle the component value', () => {
    outSideDiv.click();
    fixture.detectChanges();
    expect(component.hasBeenClicked).toBeTruthy();
  });

一切似乎都很好，但是當我單擊外部 div 時，即使我知道該指令正在發出外部 div 上的@Output並沒有被提升，所以查看代碼(clickOutside)沒有被調用，因此方法toggleClick($event)沒有運行，我做錯了什么？

*** 更新 ****

我在錯誤的 div 上有輸出！ 我是一個白痴！

Answer 1

正如我在評論中回答的那樣 - 我將發射器放在錯誤的位置！

@Component({
  template: '<div><div vcrClickOutside (clickOutside)="toggleClick($event)">Oh I just love writing tests</div></div>'
})