您的位置: 首页  >  技术问答  >  如何在Angular 2中对指令进行单元测试？

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

分类: 技术问答 • 2022-03-24 11:10:46

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

问题描述：

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

在Angular 1中，可以使用 $ compile（angular.element（myElement）服务并调用 $ scope。$ digest（）之后。我特别想在单元测试中做到这一点，所以当Angular最终在< div my-attr-directive上运行时我可以测试一下/> 在 my-attr-directive 编译的代码中。

In Angular 1, it was possible to use$compile(angular.element(myElement) service and call $scope.$digest() after that. I specifically want to be able to do this in unit tests so I could test that when Angular ends up running across <div my-attr-directive/> in the code that my-attr-directive compiles.

约束：


  • Angular 2使用JAVASCRIPT 。所有来源有点相关似乎都需要TS 。也许这个资源确实解决了这个问题问题和我对TS的理解就是那么弱

  • 茉莉花中的单元测试

  • 一定不能b如此hacky我的单元测试最终会破裂。有关在Angular 2中手动编译HTML的

  • Angular 2 using JAVASCRIPT. All sources somewhat related seem to require TS. Perhaps this resource truly does solve the problem and my understanding of TS is just that weak
  • Unit Test in Jasmine
  • Must be not be so hacky that my unit tests will eventually break. See a related SO post on compiling HTML manually in Angular 2

答

使用测试编译指令TestBed



假设您有以下指令：

Testing compiled directive using TestBed

Let's say you have a following directive: 

@Directive({
  selector: '[my-directive]',
})
class MyDirective {
  public directiveProperty = 'hi!';
}

您需要做的是创建一个使用该指令的组件（它可以仅用于测试目的）：

What you have to do, is to create a component that uses the directive (it can be just for testing purpose): 

@Component({
  selector: 'my-test-component',
  template: ''
})
class TestComponent {}

现在你需要创建一个声明它们的模块：

Now you need to create a module that has them declared:

describe('App', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        TestComponent,
        MyDirective
      ]
    });
  });

  // ...

});

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

You can add the template (that contains directive) to the component, but it can be handled dynamically by overwriting the template in test:

it('should be able to test directive', async(() => {
  TestBed.overrideComponent(TestComponent, {
    set: {
      template: '<div my-directive></div>'
    }
  });

  // ...      

}));

现在您可以尝试编译组件，并使用 By查询它。指令。在最后，有可能使用注入器获取指令实例：

Now you can try to compile the component, and query it using By.directive. At the very end, there is a possibility to get a directive instance using the 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!');
});



＃旧答案：



测试你需要用它创建假组件的指令：

# Old answer:

To test a directive you need to create a fake component with it:

@Component({
  selector: 'test-cmp',
  directives: [MyAttrDirective],
  template: ''
})
class TestComponent {}

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

You can add the template in the component itself but it can be handled dynamically by overwriting the template in test:

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

Note that you're able to test what directive renders but I couldn't find the way to test a directive in a way components are (there is no TestComponentBuilder for directives).

相关推荐