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

测试编译指令

我们假设您有以下指令：

@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();
      });
  }));

您可以在组件本身中添加模板，但可以通过在测试中覆盖模板来动态处理：

{{1}}

请注意，您可以测试哪些指令呈现但我找不到以组件方式测试指令的方法（指令没有TestComponentBuilder）。

Answer 2

我花了一些时间才找到一个很好的例子，角度gitter频道上的一个好人指出我看一下Angular Material Design 2存储库的例子。您可以找到指令测试示例here。这是Material Design 2的tooltip指令的测试文件。看起来您必须将其作为组件的一部分进行测试。

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

2 个答案:

使用TestBed

＃老答案：