angular2执行来自外部类的单元测试

时间:2017-03-23 11:03:37

标签: angular karma-jasmine angular2-testing

我正在进行angular2测试。

我目前正在使用ngx-translate进行应用程序翻译,在进行翻译测试时,我想知道是否可以从外部助手类执行组件测试。

现在,我正在使用ngx-translate中的HttpLoader,我可以毫无问题地执行我的第一次测试:

randomComponent.spec.ts

  it('should translate in english', async(() => {
    // Get the service
    translateService = TestBed.get(TranslateService);
    expect(translateService).toBeTruthy();
    checkTranslations(fixture, 'en', translateService);
  }));

  it('should translate in french', async(() => {
    // Get the service
    translateService = TestBed.get(TranslateService);
    expect(translateService).toBeTruthy();
    checkTranslations(fixture, 'fr', translateService);
  }));

translateHelper.ts

import { async, ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

export function checkTranslations(fixture: ComponentFixture<any>, language: string, translateService: any) {
  // Get all the content to be translated
  let contentToBeTranslated = fixture.debugElement.queryAll(By.css('*[translation]'));
  let beforeTranslationContent: string[] = [];

  contentToBeTranslated.forEach(debugElement => {
    beforeTranslationContent.push(debugElement.nativeElement.textContent);
  });

  // Test all english translations
  translateService.use(language).subscribe(() => {
    fixture.detectChanges();
    // Find missing translations
    contentToBeTranslated.forEach(debugElement => {
      expect(beforeTranslationContent.find(content => content == debugElement.nativeElement.textContent) ? true : false).toBe(false, ': Missing translation !');
    });
  });
}

到目前为止一切顺利,但如果我稍后添加语言,我将不得不为每种语言添加更多单元测试,如果我想测试我的翻译,我必须为每种语言复制/粘贴所有这些测试每个组成部分。

我的想法是创建一个可以获取当前组件fixturetranslateService的类,但是如何将其与beforeEach()和所有内容挂钩?现在甚至可能吗?

任何见解都会非常有用。

1 个答案:

答案 0 :(得分:1)

完全有可能。我们在测试中这样做,并且是一个很好的做法,可以帮助确保测试代码的干燥性和可读性。

beforeEach()接受一个函数,所以你唯一需要做的就是创建一个函数。

export module TestHelpers {
  export function createComponent<T>(component: Type<T>,
                                     moduleDef: TestModuleMetadata = {},
                                     afterCreationFn: ((helper: Helpers<T>) => void) = noop) {
    return async(() => {
      const fixture = TestBed
        .configureTestingModule(moduleDef)
        .createComponent(component);
      afterCreationFn(new Helpers(fixture));
      fixture.detectChanges();
    });
  }

export class Helpers<T> {
    fixture: ComponentFixture<T>;

    constructor(fixture: ComponentFixture<T>) {
      this.fixture = fixture;
    }

    component() {
      return this.fixture.componentInstance;
    }
}

}

并在你的测试中

beforeEach(TestHelpers.createComponent(
    TestComponent,
    {
      imports: [],
      declarations: [
        TestComponent
      ]
    },
    (h: Helpers<TestComponent>) => {
      helper = h;
      componentInstance = helper.component();
  }));

然后,您可以使用任何辅助函数实现Helper类,以帮助您进行测试,所有这些都在一个地方