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

Question

问题:我希望能够在Angular 2中对指令进行单元测试,以确保它正确编译.

在Angular 1中,之后可以使用$compile(angular.element(myElement)服务和调用$scope.$digest().我特别希望能够在单元测试中执行此操作,以便在Angular最终<div my-attr-directive/>在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).