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

【问题标题】：Angular Unit Test Component Callthrough On SpyObject of Service服务的 SpyObject 上的 Angular 单元测试组件调用
【发布时间】：2019-08-23 12:12:21
【问题描述】：

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

我按照angular tutorial创建了一个间谍对象，然后定义了返回函数：

  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 副本。

规格

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

组件

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

现在我得到TypeError: Cannot read property 'valueChanges' of undefined。

问题：

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

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

【问题讨论】：

标签： angular jasmine angular-test

【解决方案1】：

我找到了几个选项：

一）

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

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

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

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;

【讨论】：