Question

我有一个用Angular6编写的简单指令

import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';
    @Directive({
      selector: '[appClickOutside]'
    })
    export class ClickOutsideDirective {
      @Output('clickOutside') _clickOutside = new EventEmitter()

      constructor(private _elementRef : ElementRef) { 
      }

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

            }
        }

    }

此指令基本上侦听组件外部的click事件并做出相应的反应。

我想为此指令编写单元测试。

我正在尝试，但不知道该怎么做。谁能帮忙。

这是默认的spec.ts，其中有一些附加内容：

import { ClickOutsideDirective } from './click-outside.directive';
import { ElementRef } from '@angular/core';

describe('ClickOutsideDirective', () => {
  it('should create an instance', () => {
    //TODO: Just passing null as event to make this file compilable
    const directive = new ClickOutsideDirective(null);
    expect(directive).toBeTruthy();
  });
});


export class MockElementRef extends ElementRef {}

Answer 1

您必须像使用组件TestBed来测试组件一样来测试此指令。您必须将此指令放置在具有以下模板的test host组件上：

@Component({
  template: `
    <div class="inside" appClickOutside (clickOutside)="onClickOutside()"></div>
    <div class="outside"></div>
  `
})
export class TestHostComponent {
  onClickOutside(): void {}
}

然后您可以创建一个TestBed：

TestBed.configureTestingModule({
  declarations: [ ClickOutsideDirective, TestHostComponent ]
})

const fixture  = TestBed.createComponent(TestHostComponent);
const testHost = fixture.componentInstance;
const inside = fixture.nativeElement.querySelector('.inside');
const outside = fixture.nativeElement.querySelector('.outside');

然后，您可以在onClickOutside的{{1}}上创建间谍，并触发内部和外部元素的点击（我留给您查找：））。

我猜想这更多的是集成测试而不是单元测试，但是使用这样的指令更有意义。否则，如果您只想测试TestHostComponent，那么您就不得不嘲笑很多东西，在我看来，在这种情况下这毫无意义。

Angular6指令的编写单元测试

1 个答案: