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

Question

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

在 Angular 1 中，可以使用 $compile(angular.element(myElement)服务电话$scope.$digest()在那之后。我特别希望能够在单元测试中执行此操作，这样我就可以测试 Angular 何时最终运行 <div my-attr-directive/>在 my-attr-directive 的代码中编译。

约束:

• 使用 JAVASCRIPT 的 Angular 2。所有有点相关的来源似乎都需要 TS。 Perhaps this resource truly does solve the problem我对TS的理解也很薄弱
• Jasmine 中的单元测试
• 一定不能太老套以至于我的单元测试最终会失败。参见 a related SO post on compiling HTML manually in Angular 2

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