Jasmine spyOn never been called due to multitone service

Question

Here's my component:

export class QrcodeComponent implements OnInit {

 constructor(
   private qrGenService: QrGeneratorService,
  ) {
  }

 private draw(): void {
    this.setOptions();
    this.qrGenService.setInitOptions(this._options);
    this.qrGenService.generateQr();
  }

  ngOnInit(): void {
    this.draw();
  }
}

Here's spec:

const qrServiceStub = {
  setInitOptions: () => {},
  generateQr: () => {},
};

describe('QrCodeComponent', () => {
  let fixture: ComponentFixture<QrcodeComponent>;
  let component: QrcodeComponent;
  let qrService: QrGeneratorService;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      imports: [
        QrcodeComponent,
      ],
      providers: [
        { provide: QrGeneratorService, useValue: qrServiceStub },
      ],
    })
      .compileComponents();
    fixture = TestBed.createComponent(QrcodeComponent);
    component = fixture.componentInstance;
    qrService = TestBed.inject(QrGeneratorService);
    fixture.detectChanges();
  }));


  it('should call setInitOptions with options passed & generateQr methods', () => {
    // Arrange
    const setInitOptionsSpy = spyOn(qrService, 'setInitOptions').and.callThrough();
    const generateQrSpy = spyOn(qrService, 'generateQr').and.callThrough();
    // Assert
    expect(setInitOptionsSpy).toHaveBeenCalledWith(component.options);
    expect(generateQrSpy).toHaveBeenCalled();
  });

});

And for some reasons, I got the failed test:

• Error: Expected spy generateQr to have been called.
• Error: Expected spy setInitOptions to have been called with: [ Object ] but it was never called.

Does anybody have any idea what I'm doing wrong? Any help is appreciated!

NB qrService is multitone!