CODEWITHSUNDEEP
angularunit-testing
Brandon Taylor
Brandon Taylor

Reputation: 34553

NgZone undefined when testing Angular component

I'm developing a Date Range picker component in Angular and having difficulty testing if input values are bad.

My ngOnInit() does a check for min/max date values.

When I attempt to write a test for this case

Jasmine returns:

Expected function to throw RangeError, but it threw TypeError: Cannot read property 'ngZone' of undefined.

Researching S.O. posts, led me to create a mock NgZone class and provide that in the TestBed, which simply leads to more problems such as "subscribe is undefined".

I thought this might be due to an EventEmitter, but I've tried removing that, and I receive the same errors.

First, how can I resolve the NgZone error? There are a few S.O. posts on this topic, but I seem to be coming up short.

Second, how can I properly test that my ngOnInit() behaves as expected if bad values are passed in?

Update

Even through I had isolated my input validation function, I still wasn't able to check if that function threw an error. Instead, I had to check detectChanges(), which is the function that invoked everything else:

expect(() => fixture.detectChanges()).toThrow();

Upvotes: 2

Views: 3589

Answers (1)

Lucho
Lucho

Reputation: 1547

The NgZone service is used to reach Api’s for supporting to run code inside and outside ZoneJS space. However if you find it useful in your test to use it you can create an instance of the service by using:

let ngService = Testbed.get(NgZone)

If your purpose to test the lifecycle ngOnInit() of the component, Angular has provided tools for this in the Testbed API by using ComponentFixture where you have control of generating a changedetection in order to trigger ngOnInit like so:

describe('tests', () => {

  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [ ],
        declarations: [ MyComponent ],
    }).compileComponents();
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;

  }));


  it('simple test', async(() => {
    fixture.detectChanges(); // triggers cd and passes through component lifecycle ngOnInit

  }));

});

Upvotes: 3

Related Questions