模拟服务返回未定义的嵌套服务

Question

我目前正在处理一个 Angular 项目，我正在使用 Karma + Jasmine 为组件创建单元测试，所以我有 HTML，它有一个ngIf调用 API 服务：

HTML

<div class="row" *ngIf="apiService.utilsService.userBelongsTo('operations')"></div">

*ngIf中的服务是我想在下面的spec.ts上模拟的服务

TS

export class CashFlowSalariesComponent implements OnInit, OnChanges {
constructor(
public apiService: ApiService,
) {}

斯佩克特

 describe('CashFlowSalariesComponent', () => { let fixture: ComponentFixture < CashFlowSalariesComponent >; let mockApiService; let data; beforeEach(async(() => { data = [{ id: 1006, role: "Developer", ... }] mockApiService = jasmine.createSpyObj(['userBelongsTo']) TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ RouterTestingModule, FormsModule, ReactiveFormsModule, BrowserModule, HttpClientTestingModule, ToastrModule.forRoot({ positionClass: 'toast-bottom-right' }) ], declarations: [ CashFlowSalariesComponent, ], providers: [{ provide: ApiService, useValue: mockApiService }, UserService, ProfileService, VettingStatusService, ApplicationRoleService, SeniorityLevelService, PlacementStatusService, EducationLevelService, UtilsService, ShirtSizeService, CountryService, CityService, PostalCodeService, StateService, ClientSectorService, JobService, ProfileActivityService, ProfileSalaryActivityService, ClientService, RequestTimeOffService, TimeOffTypeService, PulsecheckDetailService, PulsecheckMasterService, PulsecheckQuestionService, ExpenseService, DepartmentService, ExchangeRateService, SkillCategoriesService, ProfileRoleService, ToastrService ] }) fixture = TestBed.createComponent(CashFlowSalariesComponent); })); it('should set salaries data correctly', () => { mockApiService.userBelongsTo.and.returnValue(of('operations')) debugger; fixture.detectChanges(); })

如您所见，我尝试将 api 服务的模拟创建为： mockApiService = jasmine.createSpyObj(['userBelongsTo']) ，然后在it使用： mockApiService.userBelongsTo.and.returnValue(of('operations')) ，但是当我调试时它抛出如下图所示的未知

并且测试返回以下错误：

无法读取未定义的属性（读取“userBelongsTo”）

我不知道这是否会发生，因为 userBelongs 位于 apiService 中的另一个服务中：

API服务

@Injectable()
export class ApiService {
 public utilsService: UtilsService;

constructor(private injector: Injector) {
this.utilsService = injector.get(UtilsService);
}
}

实用程序服务：

userBelongsTo(groupName: string) {
    return this.groups.split(',').reduce((c, g) => c || g.toUpperCase() == groupName.toUpperCase(), false);
  }

我怎样才能使这项工作？ 问候

Answer 1

依赖注入应该是private的，为什么模板 HTML 需要处理服务调用？ 不要将服务调用委托给模板，而是在组件中创建一个正确的 function，这样，您的模板会更干净

<div class="row" *ngIf="getBelongsTo()"></div">

constructor(private apiService: ApiService) {}

getBelongsTo(): boolean {
  // I guess userBelongsTo returns either a string or undefined,
  // so using !! creates a valid boolean
  // if userBelongsTo returns a valid string, returns TRUE
  // if returns undefined/null returns FALSE
  return !!this.apiService.utilsService.userBelongsTo('operations');
}

对于测试，您需要在开始测试之前从userBelongsTo提供mock/fake值。 另外，你的方式 mocking 服务是错误的，可能是这样的：

const mockApiService = jasmine.createSpyObj<ApiService>('ApiService', ['userBelongsTo']);
let data;

beforeEach(() => {
  data = [{ id: 1006, role: "Developer", ...}];
  mockApiService.userBelongsTo.and.returnValue(of('operations'));
}

beforeEach(async() => {
  TestBed.configureTestingModule({
    declarations: [...],
    provides: [{provide: ApiService, useValue: mockApiService}]
  })
})

我不知道这是否会发生，因为 userBelongs 位于 apiService 中的另一个服务中

进行单元测试时，您不关心在组件中注入时如何实现任何依赖项，您是 mocking 所有依赖项，所以没关系。

需要注意的一件事是，由于您提供了ApiService的实现方式，请记住，在某个module的某处，需要将ApiService添加到providers数组中，因为它不是作为root提供的，例如： @Injectable({ provideIn: 'root' })