Question

我正在进行单元测试Angular服务，如下所示：

/* data.service.ts */
import { Injectable } from '@angular/core';

import { FooService } from './foo.service';
import { Data } from './data.model';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private fooService: FooService) {}

  addData(data: Data) {
    return this.fooService.getActiveFoo().addData(data);
  }
}

FooService是同一模块中的服务。它使用InjectionTokens注入一些值。

/* foo.service.ts */
import { Inject, Injectable } from '@angular/core';

import { KEY1, KEY2 } from './tokens';
import { Foo } from './foo.ts';

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

  activeFoo: Foo; 

  constructor(@Inject(KEY1) private key1: string, @Inject(KEY2) private key2: string) {}

  ...

  getActiveFoo() {
    return this.activeFoo; 
 }
}


/* tokens.ts */
import { InjectionToken } from '@angular/core';

export const KEY1 = new InjectionToken('KEY_1');
export const KEY2 = new InjectionToken('KEY_2');

所有三个文件都是同一个模块的一部分，设置如下：

/* bar.module.ts */
import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { KEY1, KEY2 } from './tokens';
import { DataService } from './data.service';
import { FooService } from './foo.service';

@NgModule({
  imports: [CommonModule],
})
export class BarModule {
  static forRoot(key1Val: string, key2Val: string): ModuleWithProviders {
    return {
      ngModule: BarModule,
      providers: [
        DataService,
        FooService,
        { provide: KEY1, useValue: key1Val},
        { provide: KEY2, useValue: key2Val}
      ]
    };
  }
}

这在应用程序本身中运行良好。现在我正在为data.service.ts编写单元测试，并且遇到了提供的InjectionTokens问题。

/* data.service.spec.ts */
import { TestBed, inject } from '@angular/core/testing';

import { DataService } from './data.service';
import { FooService } from './foo.service';
import { KEY1, KEY2 } from './tokens';

describe('DataService', () => {
  const mockFooService = jasmine.createSpyObj(['getActiveFoo']);

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        DataService,
        { provide: FooService, useValue: mockFooService },
        { provide: KEY1, useValue: 'abc' },
        { provide: KEY2, useValue: '123' }
      ]
    });
  });

  it('should be created', inject([DataService], (service: DataService) => {
    expect(service).toBeTruthy();
  }));
});

当我运行我的测试时，我收到错误说

Error: StaticInjectorError(DynamicTestModule)[FooService -> InjectionToken KEY_1]: 
  StaticInjectorError(Platform: core)[FooService -> InjectionToken KEY_1]: 
    NullInjectorError: No provider for InjectionToken KEY_1!

我尝试在测试提供程序中使用空对象而不是字符串，但仍然会得到相同的错误。还有其他方法需要提供这些令牌吗？

Answer 1

我通过向InjectionTokens添加工厂函数来解决这个问题，该函数返回令牌的默认值。完成此操作后，它默认在根注入器处提供令牌。

由于两个服务都是由根注入器提供的，并且令牌是在BarModule的注射器中提供的，因此它们在测试台中没有彼此可见，但在整个模块加载时都可以看到由我的应用程序，因为他们都出现在模块中。我通过从两个服务中删除providedIn并保留原来的令牌来确认这一点。

我的令牌现在看起来像

/* tokens.ts */
import { InjectionToken } from '@angular/core';

export const KEY1 = new InjectionToken<string>('KEY_1', {factory: () => '' });
export const KEY2 = new InjectionToken<string>('KEY_2', {factory: () => '' });

作为额外的好处，令牌现在可以树木摇动了。有关详细信息，请参阅here。

单元测试依赖于使用InjectionToken

1 个答案: