Running jasmine tests for a component with NgZone dependency

user_3512815 0
Viewed 14751

How would I go ahead with running a jasmine test for the following component:

@Component({
  moduleId: module.id,
  selector: "testComp",
  template: "<div>{{value}}</div>",
})
export class TestComp {
  public value: string = "This is me";
  constructor(public zone: NgZone) {
    this.zone.run(() => console.log("zone is here"));
  }
}

The following fails with the Can't resolve all parameters for NgZone:

describe("test", () => {
    let fixture;
    let component;

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [TestComp],
        schemas: [NO_ERRORS_SCHEMA],
        providers: [NgZone]
    }).compileComponents;
}));
beforeEach(() => {
    fixture = TestBed.createComponent(TestComp);
    component = fixture.debugElement.componentInstance;
});
it("should check that the component is created", () => {
    expect(component).toBeTruthy();
});

})

using Angular 4.1.3. I found the MockNgZone class @ https://no-shadow-angular-io.firebaseapp.com/docs/ts/latest/api/core/testing/MockNgZone-class.html. But it seems unavailable in the @angular/core/testing for this particular version: enter image description here

Anybody knows what I should do to test this component?

Regards

ngzone jasmine angular
5 Answers

If your problem is about runOutsideAngular because then you cannot use async or fakeAsync, the only thing you need to mock is that function and the following works well:

const ngZone = TestBed.get(NgZone);

spyOn(ngZone, 'runOutsideAngular').and.callFake((fn: Function) => fn());
user_23985930

I also had similar requirement and this is how I did it,

TestBed configuration,

beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [
            // Specify imports
        ],
        providers: [
            { provide: DependentService, useValue: dependentServiceSpy }
            // Do not provide NgZone here
        ]
    });
    guard = TestBed.inject(ARouteGuard);
});

Please note here that I HAVE NOT SPECIFIED NgZone in the providers array.

And this is how my tests will look like,

it('should be created', () => {
    let zone = TestBed.get(NgZone);
    spyOn(zone, 'run').and.callFake((fn: Function) => fn());
    
    // Implement your test and expectations

    expect(guard).toBeTruthy();
});

I had to remove NgZone or it's corresponding mock objects from the providers: [ ] array because, it introduced other errors like "Can't resolve all parameters for NgZone" and "Cannot read property subscribe of undefined".

user_42515720

We had the same issue, exactly. At the end we left ngZone as is, and make sure we test the callbacks it uses.

beforeEach(async(() => {
TestBed.configureTestingModule({
    ...
    providers: [NgZone]
  })
}));

And for code that used the ngZone such as 

zone.run(someFunction)

We made sure to have good test coverage someFunction with unit tests.

user_67670600
Related