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();
angular unit-testing
asked Nov 14 '18 at 2:03
BrandonBrandon
23.5k56093
add a comment |
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();
angular unit-testing
asked Nov 14 '18 at 2:03
BrandonBrandon
23.5k56093
First question there is several ways to mock if you mean to just mock the NgZone service inside a component? Second question, do you want to test if code is simply running in that lifecycle?
– Lucho
Nov 14 '18 at 6:12
@Lucho I really just want to be able to test thatngOnInit()is behaving as expected. If I don't have to mock NgZone to accomplish that, I'll be just as happy.
– Brandon
Nov 14 '18 at 12:45
Check posted answer, does it help you?
– Lucho
Nov 17 '18 at 16:11
add a comment |
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();
angular unit-testing
asked Nov 14 '18 at 2:03
BrandonBrandon
23.5k56093
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();
angular unit-testing
angular unit-testing
asked Nov 14 '18 at 2:03
BrandonBrandon
23.5k56093
asked Nov 14 '18 at 2:03
BrandonBrandon
23.5k56093
edited Nov 18 '18 at 13:46
Brandon
asked Nov 14 '18 at 2:03
BrandonBrandon
23.5k56093
asked Nov 14 '18 at 2:03
BrandonBrandon
23.5k56093
asked Nov 14 '18 at 2:03
BrandonBrandon
23.5k56093
23.5k56093
First question there is several ways to mock if you mean to just mock the NgZone service inside a component? Second question, do you want to test if code is simply running in that lifecycle?
– Lucho
Nov 14 '18 at 6:12
@Lucho I really just want to be able to test thatngOnInit()is behaving as expected. If I don't have to mock NgZone to accomplish that, I'll be just as happy.
– Brandon
Nov 14 '18 at 12:45
Check posted answer, does it help you?
– Lucho
Nov 17 '18 at 16:11
add a comment |
First question there is several ways to mock if you mean to just mock the NgZone service inside a component? Second question, do you want to test if code is simply running in that lifecycle?
– Lucho
Nov 14 '18 at 6:12
@Lucho I really just want to be able to test thatngOnInit()is behaving as expected. If I don't have to mock NgZone to accomplish that, I'll be just as happy.
– Brandon
Nov 14 '18 at 12:45
Check posted answer, does it help you?
– Lucho
Nov 17 '18 at 16:11
First question there is several ways to mock if you mean to just mock the NgZone service inside a component? Second question, do you want to test if code is simply running in that lifecycle?
– Lucho
Nov 14 '18 at 6:12
First question there is several ways to mock if you mean to just mock the NgZone service inside a component? Second question, do you want to test if code is simply running in that lifecycle?
– Lucho
Nov 14 '18 at 6:12
@Lucho I really just want to be able to test that
ngOnInit() is behaving as expected. If I don't have to mock NgZone to accomplish that, I'll be just as happy.– Brandon
Nov 14 '18 at 12:45
@Lucho I really just want to be able to test that
ngOnInit() is behaving as expected. If I don't have to mock NgZone to accomplish that, I'll be just as happy.– Brandon
Nov 14 '18 at 12:45
Check posted answer, does it help you?
– Lucho
Nov 17 '18 at 16:11
Check posted answer, does it help you?
– Lucho
Nov 17 '18 at 16:11
add a comment |
1 Answer
1
active
oldest
votes
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
}));
});
answered Nov 17 '18 at 16:10
LuchoLucho
239213
Changing when .detectChanges() is invoked seems to have cleared up the NgZone error, however, I'm still not able to test the exception is thrown. I isolated my input checks to a separate method, and that doesn't work either. Any ideas?
– Brandon
Nov 18 '18 at 0:29
@Brandon, is your github updated? If not update your post example with it() test and the method you are using
– Lucho
Nov 18 '18 at 8:08
I got it figured out. Instead of expecting.validateOptionDatesto trow, I had to switch it to.fixture.detectChanges
– Brandon
Nov 18 '18 at 13:41
I'm marking your answer as correct as moving the change detection is what fixed the NgZone error which was my original question.
– Brandon
Nov 18 '18 at 13:42
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53292151%2fngzone-undefined-when-testing-angular-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
}));
});
answered Nov 17 '18 at 16:10
LuchoLucho
239213
Changing when .detectChanges() is invoked seems to have cleared up the NgZone error, however, I'm still not able to test the exception is thrown. I isolated my input checks to a separate method, and that doesn't work either. Any ideas?
– Brandon
Nov 18 '18 at 0:29
@Brandon, is your github updated? If not update your post example with it() test and the method you are using
– Lucho
Nov 18 '18 at 8:08
I got it figured out. Instead of expecting.validateOptionDatesto trow, I had to switch it to.fixture.detectChanges
– Brandon
Nov 18 '18 at 13:41
I'm marking your answer as correct as moving the change detection is what fixed the NgZone error which was my original question.
– Brandon
Nov 18 '18 at 13:42
add a comment |
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
}));
});
answered Nov 17 '18 at 16:10
LuchoLucho
239213
Changing when .detectChanges() is invoked seems to have cleared up the NgZone error, however, I'm still not able to test the exception is thrown. I isolated my input checks to a separate method, and that doesn't work either. Any ideas?
– Brandon
Nov 18 '18 at 0:29
@Brandon, is your github updated? If not update your post example with it() test and the method you are using
– Lucho
Nov 18 '18 at 8:08
I got it figured out. Instead of expecting.validateOptionDatesto trow, I had to switch it to.fixture.detectChanges
– Brandon
Nov 18 '18 at 13:41
I'm marking your answer as correct as moving the change detection is what fixed the NgZone error which was my original question.
– Brandon
Nov 18 '18 at 13:42
add a comment |
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
}));
});
answered Nov 17 '18 at 16:10
LuchoLucho
239213
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
}));
});
answered Nov 17 '18 at 16:10
LuchoLucho
239213
edited Nov 17 '18 at 16:35
answered Nov 17 '18 at 16:10
LuchoLucho
239213
answered Nov 17 '18 at 16:10
LuchoLucho
239213
answered Nov 17 '18 at 16:10
LuchoLucho
239213
239213
Changing when .detectChanges() is invoked seems to have cleared up the NgZone error, however, I'm still not able to test the exception is thrown. I isolated my input checks to a separate method, and that doesn't work either. Any ideas?
– Brandon
Nov 18 '18 at 0:29
@Brandon, is your github updated? If not update your post example with it() test and the method you are using
– Lucho
Nov 18 '18 at 8:08
I got it figured out. Instead of expecting.validateOptionDatesto trow, I had to switch it to.fixture.detectChanges
– Brandon
Nov 18 '18 at 13:41
I'm marking your answer as correct as moving the change detection is what fixed the NgZone error which was my original question.
– Brandon
Nov 18 '18 at 13:42
add a comment |
Changing when .detectChanges() is invoked seems to have cleared up the NgZone error, however, I'm still not able to test the exception is thrown. I isolated my input checks to a separate method, and that doesn't work either. Any ideas?
– Brandon
Nov 18 '18 at 0:29
@Brandon, is your github updated? If not update your post example with it() test and the method you are using
– Lucho
Nov 18 '18 at 8:08
I got it figured out. Instead of expecting.validateOptionDatesto trow, I had to switch it to.fixture.detectChanges
– Brandon
Nov 18 '18 at 13:41
I'm marking your answer as correct as moving the change detection is what fixed the NgZone error which was my original question.
– Brandon
Nov 18 '18 at 13:42
Changing when .detectChanges() is invoked seems to have cleared up the NgZone error, however, I'm still not able to test the exception is thrown. I isolated my input checks to a separate method, and that doesn't work either. Any ideas?
– Brandon
Nov 18 '18 at 0:29
Changing when .detectChanges() is invoked seems to have cleared up the NgZone error, however, I'm still not able to test the exception is thrown. I isolated my input checks to a separate method, and that doesn't work either. Any ideas?
– Brandon
Nov 18 '18 at 0:29
@Brandon, is your github updated? If not update your post example with it() test and the method you are using
– Lucho
Nov 18 '18 at 8:08
@Brandon, is your github updated? If not update your post example with it() test and the method you are using
– Lucho
Nov 18 '18 at 8:08
I got it figured out. Instead of expecting
.validateOptionDates to trow, I had to switch it to .fixture.detectChanges– Brandon
Nov 18 '18 at 13:41
I got it figured out. Instead of expecting
.validateOptionDates to trow, I had to switch it to .fixture.detectChanges– Brandon
Nov 18 '18 at 13:41
I'm marking your answer as correct as moving the change detection is what fixed the NgZone error which was my original question.
– Brandon
Nov 18 '18 at 13:42
I'm marking your answer as correct as moving the change detection is what fixed the NgZone error which was my original question.
– Brandon
Nov 18 '18 at 13:42
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53292151%2fngzone-undefined-when-testing-angular-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
First question there is several ways to mock if you mean to just mock the NgZone service inside a component? Second question, do you want to test if code is simply running in that lifecycle?
– Lucho
Nov 14 '18 at 6:12
@Lucho I really just want to be able to test that
ngOnInit()is behaving as expected. If I don't have to mock NgZone to accomplish that, I'll be just as happy.– Brandon
Nov 14 '18 at 12:45
Check posted answer, does it help you?
– Lucho
Nov 17 '18 at 16:11