How to test angular component with div as ViewChild
up vote
0
down vote
favorite
I've a angular component as shown below. I want to write jasmine tests for the initMyChart() function below. I'm not able initialize library as I don't have the viewChild div element accessible in test.
component.html
<div #myId></div>
component.ts
export class MyComponent implements OnInit{
chart: ChartLibrary;
@ViewChild('myId') myIdDiv: ElementRef
constructor(){}
initMyChart(){
//Using some library which takes the div as input to initialize
this.chart = new Chart(this.myIdDiv.nativeElement)
}
}
When I try to run the test I get following error
console.error node_modulesjsdomlibjsdomvirtual-console.js:29
Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
angular jasmine karma-jasmine jestjs
edited Nov 12 at 20:04
skyboyer
2,80511028
asked Jun 22 at 20:01
RV.
143113
add a comment |
up vote
0
down vote
favorite
I've a angular component as shown below. I want to write jasmine tests for the initMyChart() function below. I'm not able initialize library as I don't have the viewChild div element accessible in test.
component.html
<div #myId></div>
component.ts
export class MyComponent implements OnInit{
chart: ChartLibrary;
@ViewChild('myId') myIdDiv: ElementRef
constructor(){}
initMyChart(){
//Using some library which takes the div as input to initialize
this.chart = new Chart(this.myIdDiv.nativeElement)
}
}
When I try to run the test I get following error
console.error node_modulesjsdomlibjsdomvirtual-console.js:29
Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
angular jasmine karma-jasmine jestjs
edited Nov 12 at 20:04
skyboyer
2,80511028
asked Jun 22 at 20:01
RV.
143113
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I've a angular component as shown below. I want to write jasmine tests for the initMyChart() function below. I'm not able initialize library as I don't have the viewChild div element accessible in test.
component.html
<div #myId></div>
component.ts
export class MyComponent implements OnInit{
chart: ChartLibrary;
@ViewChild('myId') myIdDiv: ElementRef
constructor(){}
initMyChart(){
//Using some library which takes the div as input to initialize
this.chart = new Chart(this.myIdDiv.nativeElement)
}
}
When I try to run the test I get following error
console.error node_modulesjsdomlibjsdomvirtual-console.js:29
Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
angular jasmine karma-jasmine jestjs
edited Nov 12 at 20:04
skyboyer
2,80511028
asked Jun 22 at 20:01
RV.
143113
I've a angular component as shown below. I want to write jasmine tests for the initMyChart() function below. I'm not able initialize library as I don't have the viewChild div element accessible in test.
component.html
<div #myId></div>
component.ts
export class MyComponent implements OnInit{
chart: ChartLibrary;
@ViewChild('myId') myIdDiv: ElementRef
constructor(){}
initMyChart(){
//Using some library which takes the div as input to initialize
this.chart = new Chart(this.myIdDiv.nativeElement)
}
}
When I try to run the test I get following error
console.error node_modulesjsdomlibjsdomvirtual-console.js:29
Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
angular jasmine karma-jasmine jestjs
angular jasmine karma-jasmine jestjs
edited Nov 12 at 20:04
skyboyer
2,80511028
asked Jun 22 at 20:01
RV.
143113
edited Nov 12 at 20:04
skyboyer
2,80511028
asked Jun 22 at 20:01
RV.
143113
edited Nov 12 at 20:04
skyboyer
2,80511028
edited Nov 12 at 20:04
skyboyer
2,80511028
edited Nov 12 at 20:04
skyboyer
2,80511028
2,80511028
asked Jun 22 at 20:01
RV.
143113
asked Jun 22 at 20:01
RV.
143113
asked Jun 22 at 20:01
RV.
143113
143113
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
I think use can use fixture.debugElement. For example:
const el = fixture.debugElement.nativeElement.querySelector('#myId');
And you can follow this link: enter link description here.
answered Nov 15 at 7:34
Akatsuki
162
New contributor
Akatsuki is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
I think use can use fixture.debugElement. For example:
const el = fixture.debugElement.nativeElement.querySelector('#myId');
And you can follow this link: enter link description here.
answered Nov 15 at 7:34
Akatsuki
162
New contributor
Akatsuki is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
0
down vote
accepted
I think use can use fixture.debugElement. For example:
const el = fixture.debugElement.nativeElement.querySelector('#myId');
And you can follow this link: enter link description here.
answered Nov 15 at 7:34
Akatsuki
162
New contributor
Akatsuki is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
I think use can use fixture.debugElement. For example:
const el = fixture.debugElement.nativeElement.querySelector('#myId');
And you can follow this link: enter link description here.
answered Nov 15 at 7:34
Akatsuki
162
New contributor
Akatsuki is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I think use can use fixture.debugElement. For example:
const el = fixture.debugElement.nativeElement.querySelector('#myId');
And you can follow this link: enter link description here.
answered Nov 15 at 7:34
Akatsuki
162
New contributor
Akatsuki is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Nov 15 at 7:34
Akatsuki
162
New contributor
Akatsuki is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Nov 15 at 7:34
Akatsuki
162
answered Nov 15 at 7:34
Akatsuki
162
162
New contributor
Akatsuki is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Akatsuki is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Akatsuki is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
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%2f50994859%2fhow-to-test-angular-component-with-div-as-viewchild%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
