Question

我有这个下拉指令我想要进行单元测试但是我在控制台中遇到这个错误。我很困惑如何测试这个指令独立

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!

Answer 1

beforeEachProviders is deprecated since 2.0.0 RC4, check this question: How to fix beforeEachProviders (deprecated on RC4)

DropdownDirective needs to be declared in order to be able to used in component templates. (And its selector should be app-dropdown.)

Check the official documentation for more info. https://angular.io/docs/ts/latest/guide/testing.html. I would probably consider using the TestBed in this case.

如何对Directive Angular 2进行单元测试

1 个答案: