如何对指令 Angular 2 进行单元测试答案

【问题标题】：How to Unit test a Directive Angular 2如何对指令 Angular 2 进行单元测试
【发布时间】：2017-08-08 03:22:10
【问题描述】：

我有这个下拉指令，我想进行单元测试，但我在控制台中收到此错误。我对如何独立测试此指令感到困惑

import {Directive, HostListener, HostBinding} from '@angular/core';

  @Directive({
    selector: '[appDropdown]'
  })
  export class DropdownDirective {

    private isOpen:boolean = false;

    @HostBinding('class.open') get opened(){
      return this.isOpen;
    }
    constructor() { }

    @HostListener('click')open(){
      this.isOpen = true;
    }

    @HostListener('mouseleave')close(){
      this.isOpen = false;
    }
  }

规格文件

import {
  it,
  describe,
  expect,
  inject,
  injectAsync,
  beforeEach,
  beforeEachProviders,
  TestComponentBuilder
} from 'angular2/testing';

import {Component} from '@angular/core';


describe('DropDown Diretive', () => {

  let mouseenter;

  beforeEachProviders(() => [
    TestComponentBuilder
  ]);

  beforeEach(() => {
    mouseenter = new MouseEvent('click', {});
  });


  it('Style added', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    let template = '<div appDropdown></div>';
    return tcb.overrideTemplate(TestComponent, template)
      .createAsync(TestComponent)
      .then((fixture) => {
        let div = fixture.nativeElement.querySelector('div');

        fixture.detectChanges();

        expect(div.style.className).toEqual('open');

      });
}));

  @Component({
    selector: 'container'
  })

  class TestComponent { }

我现在正在使用 Angular 4 Rc 3 请帮助新手在 Angular 中编写测试用例

控制台错误

Failed: No provider for DirectiveResolver!

【问题讨论】：

标签： angular jasmine karma-runner

【解决方案1】：

beforeEachProviders 自 2.0.0 RC4 起已弃用，请检查此问题：How to fix beforeEachProviders (deprecated on RC4)

DropdownDirective 需要声明才能在组件模板中使用。（并且它的选择器应该是app-dropdown。）

查看官方文档了解更多信息。 https://angular.io/docs/ts/latest/guide/testing.html。在这种情况下，我可能会考虑使用 TestBed。

【讨论】：