14

I am using angular-cli testing framework.

inside my component , I have used 'ng2-slim-loading-bar' node module.

submit(){
    this._slimLoadingBarService.start(() => {
    });
    //method operations
}

Now when I am testing this component, I have applied spyOn this service as :

beforeEach(() => {
    let slimLoadingBarService=new SlimLoadingBarService();
    demoComponent = new DemoComponent(slimLoadingBarService);
    TestBed.configureTestingModule({
        declarations: [
            DemoComponent
        ],
        providers: [
            { provide: SlimLoadingBarService, useClass: SlimLoadingBarService}
        ],
        imports: [
            SharedModule
        ]
    });
});
it('should pass data to servie', () => {
    spyOn(slimLoadingBarService,'start').and.callThrough();
   //testing code,if I remove the above service from my component, test runs fine
});

but its not working.

It throws below error:

spyOn could not find an object to spy upon for start()

Chandan Rauniyar
  • 814
  • 1
  • 14
  • 24
Bhushan Gadekar
  • 13,485
  • 21
  • 82
  • 131

2 Answers2

16

Declaring slimLoadingBarService with let, you are constraining its scope to the beforeEach callback scope. Declare it with var, or better, declare it after the proper describe() block and set its content within beforeEach callback function:

describe("some describe statement" , function(){
    let slimLoadingBarService = null;

    beforeEach( () => {
        slimLoadingBarService=new SlimLoadingBarService();

    });

    it('should pass data to service', () => {
        spyOn(slimLoadingBarService,'start').and.callThrough();
       //testing code,if I remove the above service from my component, test runs fine
    });
});
Sergeon
  • 6,638
  • 2
  • 23
  • 43
  • 1
    +1. And you can inject that service in the beforeEach with `slimLoadingBarService = TestBed.inject(SlimLoadingBarService);` (for Angular 9) instead of the line that's there. And to take advantage of typescript, you could define the variable after the the describe as `let mockSlimLoadingBarService: SlimLoadingBarService;` so it's typed. You'd have to create an interface called `SlimLoadingBarService` and probably put it in a slim-loading-bar-service.model.ts file, but it helps keeps things organized and can weed out bugs before they happen. – Tom Hall Apr 07 '20 at 01:46
9

it's due to non declaration in beforeEach

updated syntax after angular 10

beforeEach(() => {
    slimLoadingBarService = TestBed.inject(SlimLoadingBarService);
});

before angular 10

beforeEach(() => {
    slimLoadingBarService = TestBed.get(SlimLoadingBarService);
});
nirmal
  • 2,143
  • 1
  • 19
  • 29