如何在Angular 2中对指令进行单元测试？

Question

问题： 我希望能够对 Angular 2中的指令 进行 单元测试，以确保它可以正确编译。

在Angular 1中，之后可以使用$compile(angular.element(myElement)service和call
$scope.$digest()。我特别希望能够在单元测试中做到这一点，这样我就可以测试Angular最终<div my-attr-directive/>在my-attr-directive编译后的代码中运行了。

限制条件：

• 使用JAVASCRIPT的Angular 2 。所有有些相关的资源似乎都需要TS。也许这些资源确实可以解决问题，而我对TS的理解还很薄弱
• 茉莉花中的单元测试
• 一定不要太笨拙，以至于我的单元测试最终会失败。

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

  // ...

});

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

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