Question

我正在进行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 !');
    });
  });
}

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

我的想法是创建一个可以获取当前组件fixture和translateService的类，但是如何将其与beforeEach（）和所有内容挂钩？现在甚至可能吗？

任何见解都会非常有用。

Answer 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类，以帮助您进行测试，所有这些都在一个地方

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

1 个答案: