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

Question

I'm currently working on an Angular project and I am creating unit testing for a component using Karma + Jasmine, so I have HTML that has a ngIf calling the API Service as:

HTML

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

TS

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

SPECT.TS

 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); })

As you see, I tried to set userBelongsTo as: mockCashFlowService.userBelongsTo = 'operations' but I get an error:

TypeError: Cannot set properties of undefined (setting 'userBelongsTo')

ApiService

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

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

Utils.Service:

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

Answer 1

It is undefined because you have not defined it. You need to add it to your mock and then have it return something.

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

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