Question

我想用当前的Angular2版本（RC6）测试一个指令。

我正在阅读NG2 Test recipes，即可以创建一个在模板中实现指令的临时组件。

@Component({ 
  selector: 'container',
  template: `<div log-clicks (changes)="changed($event)"></div>`,
  directives: [logClicks]
})
export class Container {  
  @Output() changes = new EventEmitter();
  changed(value){
    this.changes.emit(value);
  }
}

describe('Directive: logClicks', () => {
  let fixture;
  beforeEachProviders(() => [ TestComponentBuilder ]);

  beforeEach(injectAsync([TestComponentBuilder], tcb => {
    return tcb.createAsync(Container).then(f => fixture = f);
  }));

  //specs
  it('should increment counter', done => {
    //... actual test
  }));
})

现在这个解决方案看起来有点hacky，并且通过添加一个可能自己创建错误的类来增加简单测试的复杂性。如果我不想仅为此目的生成新组件，该怎么办？有没有直接的方法来测试指令？

我的指示：

import { Directive, Input, OnInit } from '@angular/core';
import { NgControl, Form} from '@angular/forms';

@Directive({
    selector: '[autoSave][formControlName],[autoSave][formControl],[autoSave][ngModel]'
})

export class AutoSave implements OnInit {
    constructor(public genericControl: NgControl) {  }
    @Input('autoSave') label: string;

    ngOnInit() {
       //stuff happens
    }
}

Answer 1

您应该可以直接测试指令/组件。

import { addProviders, async, inject, describe, expect, beforeEach, it, beforeEachProviders } from '@angular/core/testing';
import { logClicks } from './logClicks';

describe('App: List', () => {
  var component: logClicks;

  beforeEach(() => {
    component = new logClicks();
  });

  it('should create the app', () => {
      expect(component).toBeTruthy();
    });
});

我对你的指令做了一些假设，因为你没有包含代码，但你应该能够针对你的指令创建这样的测试。

在不创建新组件的情况下测试Angular2指令

1 个答案: