0

我想用当前的 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
  }));
})

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

我的指令：

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
    }
}
4

1 回答 1

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();
    });
});

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

于 2016-09-13T13:25:42.830 回答