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

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">

The service in the *ngIf is the service that I want to mock on the spec.ts below

TS

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

SPECT.TS

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

As you see, I tried to create mock of api service as: mockApiService = jasmine.createSpyObj(['userBelongsTo']) , then use in the it as: mockApiService.userBelongsTo.and.returnValue(of('operations')) , but when I debug it throws as unknown as the following picture

and the test return the following error:

Cannot read properties of undefined (reading 'userBelongsTo')

I do not know if this happen because userBelongs to it is inside another service inside apiService:

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

How can I make this work? Regards

Answer 1

Dependency injections should be private , why does the template HTML needs to handle the service call? Instead of delegating the service call to the template, make a proper function in the component, as a result, your template will be cleaner

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

For testing, you need to provide the mock/fake value from userBelongsTo before starting to test. Additionally, the way you are mocking the service is wrong, it could be like the following:

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

I do not know if this happen because userBelongs to it is inside another service inside apiService

When unit testing, you don't care how any dependecy is implemented when is injected in the component, you are mocking all dependencies so it doesn't matter.

One thing to notice, since you provided how ApiService is implemented, keep in mind that somewhere, in some module , ApiService needs to be added in the providers array since it isn't provided as root , ex: @Injectable({ provideIn: 'root' })