如何单元测试Angular的元服务？

Question

我的组件是在ngoninit期间使用Angular的Meta服务更新元标记。我正在使用我的grounionservice获取App-ID，并通过模板文字使用Meta的UpdateTag方法设置它。但是我的单位测试是在模板字面的我的grounionservice设置的值时遇到问题。该测试返回以下错误：

Expected spy Meta.updateTag to have been called with:
  [ Object({ name: 'apple-itunes-app', content: 'app-id=0123456789' }) ]
but actual calls were:
  [ Object({ name: 'apple-itunes-app', content: 'app-id=undefined' }) ].

我如何修改测试，以便知道值app-id，由我的模板literal $ {this.gregionservice.getAppid（）} ？

my.component.ts

import { Component, OnInit } from '@angular/core';
import { RegionService } from 'src/services/region.service';
import { Meta } from '@angular/platform-browser';

export class MyComponent implements OnInit {

  constructor(
    private regionService: RegionService,
    private meta: Meta
  ) {}
  
  ngOnInit() {
    this.meta.updateTag({name: 'apple-itunes-app', content: `app-id=${this.regionService.getAppId()}`});
  }

}

my.component.spec.ts

import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { MyComponent } from './my.component';
import { RegionService } from 'src/services/region.service';
import { Meta } from '@angular/platform-browser';
import { RouterTestingModule } from '@angular/router/testing';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let regionServiceSpy: jasmine.SpyObj<RegionService>;
  let metaServiceSpy: jasmine.SpyObj<Meta>;

  beforeEach(
    waitForAsync(() => {
      const regionServiceSpyObj = jasmine.createSpyObj('RegionService', ['getAppId', 'retrieveABCRegions', 'retrieveDEFRegions']);
      const metaServiceSpyObj = jasmine.createSpyObj('Meta', ['updateTag']);

      TestBed.configureTestingModule({
        declarations: [MyComponent],
        imports: [RouterTestingModule],
        providers: [
          { provide: RegionService, useValue: regionServiceSpyObj },
          { provide: Meta, useValue: metaServiceSpyObj },
        ],
        schemas: [NO_ERRORS_SCHEMA],
      }).compileComponents();

    regionServiceSpy = TestBed.inject(RegionService) as jasmine.SpyObj<RegionService>;
    metaServiceSpy = TestBed.inject(Meta) as jasmine.SpyObj<Meta>;
    }),
  );

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


  it('should set app-id to 0123456789 if selectedRegion is FR', () => {
    // arrange

    // act
    regionServiceSpy.selectedRegion = 'FR';

    // assert
    expect(metaServiceSpy.updateTag).toHaveBeenCalledWith({name: 'apple-itunes-app', content: 'app-id=0123456789'});
  });
});

region.service.ts

import { retrieveABCRegions, retrieveDEFRegions} from 'src/regions';

@Injectable({
  providedIn: 'root',
})
export class RegionService {

  selectedRegion: Region;

  getAppId(): string {
    if (retrieveABCRegions().includes(this.selectedRegion)) {
      return '111111111'; 
    } else if (retrieveDEFRegions().includes(this.selectedRegion)) {
      return '0123456789';
    }
  }
}

Answer 1

由于您已用gemionservice spyobj模拟：

{ provide: RegionService, useValue: regionServiceSpyObj }

实际服务不再在测试中使用（这是正确的方法，因为您没有测试该测试在这里服务）。

因此，现在您需要定义模拟服务的getAppid（）方法将返回什么值。您可以通过在间谍对象上为该方法创建间谍策略来做到这一点。

有不同类型的间谍策略最简单的是returnValue（）：

it('should set app-id to 0123456789 if selectedRegion is FR', () => {
  // arrange

  // act
  // regionServiceSpy.selectedRegion = 'FR'; <--- not needed for this test since real service method not being called
  regionServiceSpy.getAppId.and.returnValue('0123456789'); // <-- define what value mock service's getAppId returns

  // assert
  expect(metaServiceSpy.updateTag).toHaveBeenCalledWith({name: 'apple-itunes-app', content: 'app-id=0123456789'});
});

并注意设置gecionservicespy.seledectegion ='fr'不是在这里需要，因为没有调用实际的服务方法。