Question

Angular 单元测试组件在服务的 SpyObject 上调用

2019-04-02

2351

angular jasmine angular-test

我在组件中存根服务。现在，我想监视所有方法，但实际上并不调用它们。

我遵循了 angular 教程，该教程创建了一个间谍对象，然后定义了返回函数：

  it('#getValue should return stubbed value from a spy', () => {
    // create `getValue` spy on an object representing the ValueService
    const valueServiceSpy =
      jasmine.createSpyObj('ValueService', ['getValue']);

    // set the value to return when the `getValue` spy is called.
    const stubValue = 'stub value';
    valueServiceSpy.getValue.and.returnValue(stubValue);

我不想返回定义的值，而是想通过这个特定方法调用它。我还将间谍移到了 beforeEach，因为我想在多个测试中使用它。我不想模拟表单创建的原因是，它将是原始方法的 1：1 副本。

Spec

describe('GeneratorComponent', () => {
  let component: GeneratorComponent;
  let fixture: ComponentFixture<GeneratorComponent>;

  beforeEach(async(() => {
    const hotkeysServiceSpy = jasmine.createSpyObj('HotkeysService', ['add']);
    const generatorServiceSpy = jasmine.createSpyObj('GeneratorService', [
      'createGeneratorForm',
      'createRepository',
      'crawlRepository',
      'fillWithDummy'
    ]);
    generatorServiceSpy.createGeneratorForm.and.callThrough();
...

  beforeEach(() => {
    fixture = TestBed.createComponent(GeneratorComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

Component

constructor(
    private generatorService: GeneratorService,
    ...
  ) {
    this.generatorForm = generatorService.createGeneratorForm();
    this.generatorForm.valueChanges.debounceTime(500).subscribe( (changes) => {
    ...  
    });

现在我收到 TypeError：无法读取未定义的属性“valueChanges” 。

问题：

1) 如何仅通过创建我的表单的这个特定方法进行调用？

2) 通过此调用是否需要我导入/提供服务的所有依赖项（服务构造函数）或仅此特定方法的依赖项？

Answer 1

我发现了几个选项：

A)

创建原始服务
创建 SpyObj。
用原始方法覆盖 SpyObj 的表单创建方法

我认为这不是最好的方法，因为它需要将服务的所有依赖项导入到测试平台。

B)

在规范中重新定义表单方法，例如

const generatorServiceSpy = jasmine.createSpyObj('GeneratorService', [
      'createRepository',
      'crawlRepository',
      'fillWithDummy'
    ]);
    const formBuilder = new FormBuilder();
    generatorServiceSpy.createGeneratorForm = (generator?: Generator) => {
      console.log('generator', generator);
      const generatorForm = formBuilder.group({
        url: [null]
      });
      if (generator) { generatorForm.patchValue(generator); }
      return generatorForm;
    };

如果简化版本的方法更适合测试，这种方法可能会有所帮助。缺点是它不太枯燥。

c) 这是我首选的解决方案。它将最少的依赖声明与原始功能相结合。

beforeEach(async(() => {
    const generatorServiceSpy = jasmine.createSpyObj('GeneratorService', [
        'createRepository',
        'crawlRepository',
        'fillWithDummy'
    ]);
    const formBuilder = new FormBuilder();
    generatorServiceSpy.createGeneratorForm = GeneratorService.prototype.createReviewForm;