使用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
      ]
    });
  });

  // ...

});

您可以将模板（包含指令）添加到组件中，但是可以通过覆盖测试中的模板来动态处理它：

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）。