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

Question

我的组件是在ngOnInit期间使用角元服务来更新元标记。我正在使用我的RegionService获得一个应用程序id，并通过一个模板文本使用Meta的updateTag方法来设置它。但是，我的单元测试在获取模板文本中的RegionService设置的值时遇到了问题。测试返回以下错误：

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' }) ].

我如何修改我的测试，使它知道由我的模板文字${this.regionService.getAppId()}设置的值${this.regionService.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

因为您已经用一个RegionService模拟替换了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'});
});

请注意，这里不需要设置regionServiceSpy.selectedRegion = 'FR'，因为没有调用实际的服务方法。