在从 html 调用的服务上获取未定义

Question

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

HTML

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

TS

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

斯佩克特

 describe('CashFlowSalariesComponent', () => { let fixture: ComponentFixture < CashFlowSalariesComponent >; let mockCashFlowService; let data; beforeEach(async(() => { data = [{ id: 1006, role: "Developer", ... }] mockCashFlowService = jasmine.createSpyObj(['createTableData']) TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ RouterTestingModule, FormsModule, ReactiveFormsModule, BrowserModule, HttpClientTestingModule, ToastrModule.forRoot({ positionClass: 'toast-bottom-right' }) ], declarations: [ CashFlowSalariesComponent, ], providers: [{ provide: ApiService, useValue: mockCashFlowService }, 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 create', () => { expect(CashFlowSalariesComponent).toBeTruthy(); }); it('should set salaries data correctly', () => { mockCashFlowService.userBelongsTo = 'operations' mockCashFlowService.createTableData.and.returnValue( of (data)) debugger; fixture.detectChanges(); expect(fixture.componentInstance.dataHeaders.length).toBe(10); })

如您所见，我尝试将 userBelongsTo 设置为： mockCashFlowService.userBelongsTo = 'operations'但出现错误：

TypeError：无法设置未定义的属性（设置“userBelongsTo”）

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

它是未定义的，因为你还没有定义它。 您需要将它添加到您的模拟中，然后让它返回一些东西。

mockCashFlowService = jasmine.createSpyObj(['createTableData', 'userBelongsTo']);

https://volaresoftware.com/en/technical-posts/mocking-calls-with-jasmine