如何在Karma/Jasmine中测试点击

Question

我在外部点击了我的指令：

import { Directive, Output, EventEmitter, ElementRef, HostListener } from '@angular/core';

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

  constructor(private _elementRef: ElementRef) { }

  @Output()
  public clickOutside = new EventEmitter();

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

我可以做什么类型的测试来确定它是否正常工作？那我怎么测试呢？

它在组件中使用。例如，模态。当我在模式之外单击时，它会关闭。

Answer 1

 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { Component } from '@angular/core';

 import { ClickOutsideDirective } from '../p6-click-outside.directive';

@Component({
template: `<div (clickOutside)='onClick($event)' clickOutside> Click Outside this </div>
<button>This is outside<button>`
})
class TestClickOutsideComponent {

public active: boolean = false;

onClick() {
    this.active = !this.active;
}

}
fdescribe('P6ClickOutsideDirective', () => {
let component: TestClickOutsideComponent;
let fixture: ComponentFixture<TestClickOutsideComponent>;
beforeEach(() => {
    TestBed.configureTestingModule({
        declarations: [ClickOutsideDirective, TestClickOutsideComponent]
    });
    fixture = TestBed.createComponent(TestClickOutsideComponent);
    component = fixture.componentInstance;
});

fit('should create component', () => {
    expect(component).toBeDefined();
});

fit('it should call onClick method when clicked on the div element', async(() => {
    const activeValueBeforeClick = component.active;
    const debugEl: HTMLElement = fixture.debugElement.nativeElement;
    const div: HTMLElement = debugEl.querySelector('div');
    div.click();
    fixture.detectChanges();
    expect(activeValueBeforeClick).toBe(component.active);

当你点击div - eleent进行测试时，这将会起作用，当你在外部点击时，你必须写的另一个条件，我不能写的properly.seems事件是不会发出的！