如何对 Angular 的 Meta 服务进行单元测试？

Question

My Component is using Angular's Meta service to update a meta tag during ngOnInit . I'm using my RegionService to get an app-id and set it with Meta's updateTag method via a template literal. But my unit test is having problems getting the value set by my RegionService in the template literal. The test returns the following error:

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

How can I modify my test so that it knows the value app-id , set by my template literal ${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

Since you've replaced the RegionService with a SpyObj mock:

{ provide: RegionService, useValue: regionServiceSpyObj }

the real service is no longer being used in your tests (which is the correct approach because you're not testing that service here).

So now you need to define what value the mock service's getAppId() method is going to return. You do that by creating a spy strategy for that method on your spy object.

There are different types of spy strategies you can use, but for your purposes here, probably the simplest is 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'});
});

And note that setting regionServiceSpy.selectedRegion = 'FR' is not needed here since the actual service method is not being called.