如何在Angular 2中對指令進行單元測試？

Question

問題：我希望能夠在Angular 2中對指令進行單元測試，以確保它正確編譯。

在Angular 1中，可以使用$compile(angular.element(myElement)服務並在此之后調用$scope.$digest() 。我特別希望能夠在單元測試中執行此操作，以便我可以在Angular時測試最終在my-attr-directive編譯的代碼中運行<div my-attr-directive/> 。

約束：

• Angular 2使用JAVASCRIPT 。 有些相關的所有來源似乎都需要TS。 也許這個資源確實解決了這個問題，而我對TS的理解就是那么薄弱
• 茉莉花的單元測試
• 一定不要那么hacky，我的單元測試最終會破壞。 請參閱Angular 2中手動編譯HTML的相關SO帖子

Answer 1

使用TestBed測試編譯指令

假設您有以下指令：

@Directive({
  selector: '[my-directive]',
})
class MyDirective {
  public directiveProperty = 'hi!';
}

你需要做的是創建一個使用該指令的組件（它可以僅用於測試目的）：

@Component({
  selector: 'my-test-component',
  template: ''
})
class TestComponent {}

現在您需要創建一個聲明它們的模塊：

describe('App', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        TestComponent,
        MyDirective
      ]
    });
  });

  // ...

});

您可以將模板（包含指令）添加到組件中，但可以通過在test中覆蓋模板來動態處理它：

it('should be able to test directive', async(() => {
  TestBed.overrideComponent(TestComponent, {
    set: {
      template: '<div my-directive></div>'
    }
  });

  // ...      

}));

現在您可以嘗試編譯組件，並使用By.directive查詢。 在最后，有可能使用injector獲取指令實例：

TestBed.compileComponents().then(() => {
  const fixture = TestBed.createComponent(TestComponent);
  const directiveEl = fixture.debugElement.query(By.directive(MyDirective));
  expect(directiveEl).not.toBeNull();

  const directiveInstance = directiveEl.injector.get(MyDirective);
  expect(directiveInstance.directiveProperty).toBe('hi!');
}); 

＃老答案：

要測試指令，您需要使用它創建一個假組件：

@Component({
  selector: 'test-cmp',
  directives: [MyAttrDirective],
  template: ''
})
class TestComponent {}

您可以在組件本身中添加模板，但可以通過覆蓋測試中的模板來動態處理：

it('Should setup with conversation', inject([TestComponentBuilder], (testComponentBuilder: TestComponentBuilder) => {
    return testComponentBuilder
      .overrideTemplate(TestComponent, `<div my-attr-directive></div>`)
      .createAsync(TestComponent)
      .then((fixture: ComponentFixture<TestComponent>) => {
        fixture.detectChanges();
        const directiveEl = fixture.debugElement.query(By.css('[my-attr-directive]'));
        expect(directiveEl.nativeElement).toBeDefined();
      });
  }));

請注意，您可以測試哪些指令呈現但我找不到以組件方式測試指令的方法（指令沒有TestComponentBuilder）。

Answer 2

花了一些時間才找到一個很好的例子，角度gitter通道上的一個好人指出我看一下Angular Material Design 2存儲庫的例子。 您可以在此處找到指令測試示例。 這是Material Design 2的tooltip指令的測試文件。看起來您必須將其作為組件的一部分進行測試。