How to verify HTML template in Angular apps?
I'm writing karma/jasmine unit test for an Angular app. The idea is to verify, that the HTML template is valid.
Suppose a simple component "my-comp". And suppose, I would use the following HTML template, which calls a non-existing property:
<my-comp [noop]="dummy"></my-comp>
During execution of the app, I would get a template parse error:
Can't bind to 'noop' since it isn't a known property of 'my-comp'.
Now, I would like to check this during tests. However, the unit test passes, and the component get initialised.
Is there a way to detect this kind of error in tests?
angular unit-testing karma-jasmine edited Nov 20 '18 at 17:08
Vít Kotačka
533523
asked Nov 20 '18 at 15:14
Heiner LamprechtHeiner Lamprecht
215
add a comment |
I'm writing karma/jasmine unit test for an Angular app. The idea is to verify, that the HTML template is valid.
Suppose a simple component "my-comp". And suppose, I would use the following HTML template, which calls a non-existing property:
<my-comp [noop]="dummy"></my-comp>
During execution of the app, I would get a template parse error:
Can't bind to 'noop' since it isn't a known property of 'my-comp'.
Now, I would like to check this during tests. However, the unit test passes, and the component get initialised.
Is there a way to detect this kind of error in tests?
angular unit-testing karma-jasmine edited Nov 20 '18 at 17:08
Vít Kotačka
533523
asked Nov 20 '18 at 15:14
Heiner LamprechtHeiner Lamprecht
215
When you say the component gets initialized, did you execute fixture.detectChanges()? I ask because that would attempt to actually create the component in the DOM and at that point should give you the same error in the test.
– dmcgrandle
Nov 21 '18 at 5:48
Yes, detectChanges is called. Besides, there is some logging output from the component.
– Heiner Lamprecht
Nov 21 '18 at 8:04
add a comment |
I'm writing karma/jasmine unit test for an Angular app. The idea is to verify, that the HTML template is valid.
Suppose a simple component "my-comp". And suppose, I would use the following HTML template, which calls a non-existing property:
<my-comp [noop]="dummy"></my-comp>
During execution of the app, I would get a template parse error:
Can't bind to 'noop' since it isn't a known property of 'my-comp'.
Now, I would like to check this during tests. However, the unit test passes, and the component get initialised.
Is there a way to detect this kind of error in tests?
angular unit-testing karma-jasmine edited Nov 20 '18 at 17:08
Vít Kotačka
533523
asked Nov 20 '18 at 15:14
Heiner LamprechtHeiner Lamprecht
215
I'm writing karma/jasmine unit test for an Angular app. The idea is to verify, that the HTML template is valid.
Suppose a simple component "my-comp". And suppose, I would use the following HTML template, which calls a non-existing property:
<my-comp [noop]="dummy"></my-comp>
During execution of the app, I would get a template parse error:
Can't bind to 'noop' since it isn't a known property of 'my-comp'.
Now, I would like to check this during tests. However, the unit test passes, and the component get initialised.
Is there a way to detect this kind of error in tests?
angular unit-testing karma-jasmine angular unit-testing karma-jasmine edited Nov 20 '18 at 17:08
Vít Kotačka
533523
asked Nov 20 '18 at 15:14
Heiner LamprechtHeiner Lamprecht
215
edited Nov 20 '18 at 17:08
Vít Kotačka
533523
asked Nov 20 '18 at 15:14
Heiner LamprechtHeiner Lamprecht
215
edited Nov 20 '18 at 17:08
Vít Kotačka
533523
edited Nov 20 '18 at 17:08
Vít Kotačka
533523
edited Nov 20 '18 at 17:08
Vít Kotačka
533523
533523
asked Nov 20 '18 at 15:14
Heiner LamprechtHeiner Lamprecht
215
asked Nov 20 '18 at 15:14
Heiner LamprechtHeiner Lamprecht
215
asked Nov 20 '18 at 15:14
Heiner LamprechtHeiner Lamprecht
215
215
When you say the component gets initialized, did you execute fixture.detectChanges()? I ask because that would attempt to actually create the component in the DOM and at that point should give you the same error in the test.
– dmcgrandle
Nov 21 '18 at 5:48
Yes, detectChanges is called. Besides, there is some logging output from the component.
– Heiner Lamprecht
Nov 21 '18 at 8:04
add a comment |
When you say the component gets initialized, did you execute fixture.detectChanges()? I ask because that would attempt to actually create the component in the DOM and at that point should give you the same error in the test.
– dmcgrandle
Nov 21 '18 at 5:48
Yes, detectChanges is called. Besides, there is some logging output from the component.
– Heiner Lamprecht
Nov 21 '18 at 8:04
When you say the component gets initialized, did you execute fixture.detectChanges()? I ask because that would attempt to actually create the component in the DOM and at that point should give you the same error in the test.
– dmcgrandle
Nov 21 '18 at 5:48
When you say the component gets initialized, did you execute fixture.detectChanges()? I ask because that would attempt to actually create the component in the DOM and at that point should give you the same error in the test.
– dmcgrandle
Nov 21 '18 at 5:48
Yes, detectChanges is called. Besides, there is some logging output from the component.
– Heiner Lamprecht
Nov 21 '18 at 8:04
Yes, detectChanges is called. Besides, there is some logging output from the component.
– Heiner Lamprecht
Nov 21 '18 at 8:04
add a comment |
1 Answer
1
active
oldest
votes
This is normal for an Angular component and test.
In your case [noop]=dummy will not work if you don't provide an @Input()noop on the component. No such property exists and hence compilation will fail.
However, during the test, the when you do
line1 const fixture = TestBed.createComponent(MyComponent);
line2 const component = fixture.componentInstance;
This will generate a component based on your definition in your component.ts Hence, you dont see any failure.
If you have linter set on your VS project, you will notice that if you add:
component.noop after line2, there will be a error in your test file as this property doesn't exist on your component.
answered Nov 20 '18 at 16:58
dream88dream88
1758
Well, there is no use to addcomponent.noopin the test. It is obvious, that this would fail. The thing is, that I want the test to verify, that all the templates in the app are correct and do not use any non-existing properties. This is necessary, because developers may mistype names, or during refactoring not all places are found and fixed. Anyways, building the app with-aotalso reports all these errors.
– Heiner Lamprecht
Nov 21 '18 at 8:05
In this case, the build /ng serve will fail, just like in cases when you use a bootsrap component telling the dev that there is no such associated property ( if they are passing non-existant property). To pass all required property, you should usually have a default value for your showstopper @Input and an APi to explain what they do. Usually these are inside a component. Config.ts.You can have a look at some specs on github.com/ng-bootstrap/ng-bootstrap/blob/master/src/popover/…
– dream88
Nov 21 '18 at 8:53
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%2f53396036%2fhow-to-verify-html-template-in-angular-apps%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
This is normal for an Angular component and test.
In your case [noop]=dummy will not work if you don't provide an @Input()noop on the component. No such property exists and hence compilation will fail.
However, during the test, the when you do
line1 const fixture = TestBed.createComponent(MyComponent);
line2 const component = fixture.componentInstance;
This will generate a component based on your definition in your component.ts Hence, you dont see any failure.
If you have linter set on your VS project, you will notice that if you add:
component.noop after line2, there will be a error in your test file as this property doesn't exist on your component.
answered Nov 20 '18 at 16:58
dream88dream88
1758
Well, there is no use to addcomponent.noopin the test. It is obvious, that this would fail. The thing is, that I want the test to verify, that all the templates in the app are correct and do not use any non-existing properties. This is necessary, because developers may mistype names, or during refactoring not all places are found and fixed. Anyways, building the app with-aotalso reports all these errors.
– Heiner Lamprecht
Nov 21 '18 at 8:05
In this case, the build /ng serve will fail, just like in cases when you use a bootsrap component telling the dev that there is no such associated property ( if they are passing non-existant property). To pass all required property, you should usually have a default value for your showstopper @Input and an APi to explain what they do. Usually these are inside a component. Config.ts.You can have a look at some specs on github.com/ng-bootstrap/ng-bootstrap/blob/master/src/popover/…
– dream88
Nov 21 '18 at 8:53
add a comment |
This is normal for an Angular component and test.
In your case [noop]=dummy will not work if you don't provide an @Input()noop on the component. No such property exists and hence compilation will fail.
However, during the test, the when you do
line1 const fixture = TestBed.createComponent(MyComponent);
line2 const component = fixture.componentInstance;
This will generate a component based on your definition in your component.ts Hence, you dont see any failure.
If you have linter set on your VS project, you will notice that if you add:
component.noop after line2, there will be a error in your test file as this property doesn't exist on your component.
answered Nov 20 '18 at 16:58
dream88dream88
1758
Well, there is no use to addcomponent.noopin the test. It is obvious, that this would fail. The thing is, that I want the test to verify, that all the templates in the app are correct and do not use any non-existing properties. This is necessary, because developers may mistype names, or during refactoring not all places are found and fixed. Anyways, building the app with-aotalso reports all these errors.
– Heiner Lamprecht
Nov 21 '18 at 8:05
In this case, the build /ng serve will fail, just like in cases when you use a bootsrap component telling the dev that there is no such associated property ( if they are passing non-existant property). To pass all required property, you should usually have a default value for your showstopper @Input and an APi to explain what they do. Usually these are inside a component. Config.ts.You can have a look at some specs on github.com/ng-bootstrap/ng-bootstrap/blob/master/src/popover/…
– dream88
Nov 21 '18 at 8:53
add a comment |
This is normal for an Angular component and test.
In your case [noop]=dummy will not work if you don't provide an @Input()noop on the component. No such property exists and hence compilation will fail.
However, during the test, the when you do
line1 const fixture = TestBed.createComponent(MyComponent);
line2 const component = fixture.componentInstance;
This will generate a component based on your definition in your component.ts Hence, you dont see any failure.
If you have linter set on your VS project, you will notice that if you add:
component.noop after line2, there will be a error in your test file as this property doesn't exist on your component.
answered Nov 20 '18 at 16:58
dream88dream88
1758
This is normal for an Angular component and test.
In your case [noop]=dummy will not work if you don't provide an @Input()noop on the component. No such property exists and hence compilation will fail.
However, during the test, the when you do
line1 const fixture = TestBed.createComponent(MyComponent);
line2 const component = fixture.componentInstance;
This will generate a component based on your definition in your component.ts Hence, you dont see any failure.
If you have linter set on your VS project, you will notice that if you add:
component.noop after line2, there will be a error in your test file as this property doesn't exist on your component.
answered Nov 20 '18 at 16:58
dream88dream88
1758
answered Nov 20 '18 at 16:58
dream88dream88
1758
answered Nov 20 '18 at 16:58
dream88dream88
1758
answered Nov 20 '18 at 16:58
dream88dream88
1758
1758
Well, there is no use to addcomponent.noopin the test. It is obvious, that this would fail. The thing is, that I want the test to verify, that all the templates in the app are correct and do not use any non-existing properties. This is necessary, because developers may mistype names, or during refactoring not all places are found and fixed. Anyways, building the app with-aotalso reports all these errors.
– Heiner Lamprecht
Nov 21 '18 at 8:05
In this case, the build /ng serve will fail, just like in cases when you use a bootsrap component telling the dev that there is no such associated property ( if they are passing non-existant property). To pass all required property, you should usually have a default value for your showstopper @Input and an APi to explain what they do. Usually these are inside a component. Config.ts.You can have a look at some specs on github.com/ng-bootstrap/ng-bootstrap/blob/master/src/popover/…
– dream88
Nov 21 '18 at 8:53
add a comment |
Well, there is no use to addcomponent.noopin the test. It is obvious, that this would fail. The thing is, that I want the test to verify, that all the templates in the app are correct and do not use any non-existing properties. This is necessary, because developers may mistype names, or during refactoring not all places are found and fixed. Anyways, building the app with-aotalso reports all these errors.
– Heiner Lamprecht
Nov 21 '18 at 8:05
In this case, the build /ng serve will fail, just like in cases when you use a bootsrap component telling the dev that there is no such associated property ( if they are passing non-existant property). To pass all required property, you should usually have a default value for your showstopper @Input and an APi to explain what they do. Usually these are inside a component. Config.ts.You can have a look at some specs on github.com/ng-bootstrap/ng-bootstrap/blob/master/src/popover/…
– dream88
Nov 21 '18 at 8:53
Well, there is no use to add
component.noop in the test. It is obvious, that this would fail. The thing is, that I want the test to verify, that all the templates in the app are correct and do not use any non-existing properties. This is necessary, because developers may mistype names, or during refactoring not all places are found and fixed. Anyways, building the app with -aot also reports all these errors.– Heiner Lamprecht
Nov 21 '18 at 8:05
Well, there is no use to add
component.noop in the test. It is obvious, that this would fail. The thing is, that I want the test to verify, that all the templates in the app are correct and do not use any non-existing properties. This is necessary, because developers may mistype names, or during refactoring not all places are found and fixed. Anyways, building the app with -aot also reports all these errors.– Heiner Lamprecht
Nov 21 '18 at 8:05
In this case, the build /ng serve will fail, just like in cases when you use a bootsrap component telling the dev that there is no such associated property ( if they are passing non-existant property). To pass all required property, you should usually have a default value for your showstopper @Input and an APi to explain what they do. Usually these are inside a component. Config.ts.You can have a look at some specs on github.com/ng-bootstrap/ng-bootstrap/blob/master/src/popover/…
– dream88
Nov 21 '18 at 8:53
In this case, the build /ng serve will fail, just like in cases when you use a bootsrap component telling the dev that there is no such associated property ( if they are passing non-existant property). To pass all required property, you should usually have a default value for your showstopper @Input and an APi to explain what they do. Usually these are inside a component. Config.ts.You can have a look at some specs on github.com/ng-bootstrap/ng-bootstrap/blob/master/src/popover/…
– dream88
Nov 21 '18 at 8:53
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%2f53396036%2fhow-to-verify-html-template-in-angular-apps%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
When you say the component gets initialized, did you execute fixture.detectChanges()? I ask because that would attempt to actually create the component in the DOM and at that point should give you the same error in the test.
– dmcgrandle
Nov 21 '18 at 5:48
Yes, detectChanges is called. Besides, there is some logging output from the component.
– Heiner Lamprecht
Nov 21 '18 at 8:04