ExpressionChangedAfterItHasBeenCheckedError when testing Angular Material Table
Using Angular 7 I added material table to my application with ng generate @angular/material:table test-table
Inside the generated template there is a paginator:
<mat-paginator #paginator
[length]="dataSource.data.length"
[pageIndex]="0"
[pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
On init the datasource is changed:
ngOnInit() {
this.dataSource = new ItemsTableDataSource(
this.paginator,
this.sort,
this.route.paramMap,
this.afs
);
}
When trying to compile the component on Karma expect(component).toBeTruthy(); I'm getting the following error
Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has
changed after it was checked. Previous value: 'length: 0'. Current
value: 'length: 1'.
How can I solve this issue?
angular karma-jasmine angular-material2 angular7
edited Nov 29 '18 at 12:39
Goncalo Peres
1,4691619
asked Nov 24 '18 at 6:31
Roni HacohenRoni Hacohen
6319
add a comment |
Using Angular 7 I added material table to my application with ng generate @angular/material:table test-table
Inside the generated template there is a paginator:
<mat-paginator #paginator
[length]="dataSource.data.length"
[pageIndex]="0"
[pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
On init the datasource is changed:
ngOnInit() {
this.dataSource = new ItemsTableDataSource(
this.paginator,
this.sort,
this.route.paramMap,
this.afs
);
}
When trying to compile the component on Karma expect(component).toBeTruthy(); I'm getting the following error
Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has
changed after it was checked. Previous value: 'length: 0'. Current
value: 'length: 1'.
How can I solve this issue?
angular karma-jasmine angular-material2 angular7
edited Nov 29 '18 at 12:39
Goncalo Peres
1,4691619
asked Nov 24 '18 at 6:31
Roni HacohenRoni Hacohen
6319
Please update your post with example code of the unit-test
– Lucho
Nov 25 '18 at 9:06
@Lucho It's just a basicexpect(component).toBeTruthy()test as I mentioned in the post.
– Roni Hacohen
Nov 25 '18 at 20:02
It's just not that, the config(Testbed) setup has a role aswell
– Lucho
Nov 25 '18 at 21:01
Here is my spec file: github.com/ronihcohen/fin-app-ng/blob/…
– Roni Hacohen
Nov 26 '18 at 4:39
Have a look at this post: stackoverflow.com/a/53015635/9226213. It might be related.
– G. Tranter
Nov 27 '18 at 16:37
add a comment |
Using Angular 7 I added material table to my application with ng generate @angular/material:table test-table
Inside the generated template there is a paginator:
<mat-paginator #paginator
[length]="dataSource.data.length"
[pageIndex]="0"
[pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
On init the datasource is changed:
ngOnInit() {
this.dataSource = new ItemsTableDataSource(
this.paginator,
this.sort,
this.route.paramMap,
this.afs
);
}
When trying to compile the component on Karma expect(component).toBeTruthy(); I'm getting the following error
Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has
changed after it was checked. Previous value: 'length: 0'. Current
value: 'length: 1'.
How can I solve this issue?
angular karma-jasmine angular-material2 angular7
edited Nov 29 '18 at 12:39
Goncalo Peres
1,4691619
asked Nov 24 '18 at 6:31
Roni HacohenRoni Hacohen
6319
Using Angular 7 I added material table to my application with ng generate @angular/material:table test-table
Inside the generated template there is a paginator:
<mat-paginator #paginator
[length]="dataSource.data.length"
[pageIndex]="0"
[pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
On init the datasource is changed:
ngOnInit() {
this.dataSource = new ItemsTableDataSource(
this.paginator,
this.sort,
this.route.paramMap,
this.afs
);
}
When trying to compile the component on Karma expect(component).toBeTruthy(); I'm getting the following error
Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has
changed after it was checked. Previous value: 'length: 0'. Current
value: 'length: 1'.
How can I solve this issue?
angular karma-jasmine angular-material2 angular7
angular karma-jasmine angular-material2 angular7
edited Nov 29 '18 at 12:39
Goncalo Peres
1,4691619
asked Nov 24 '18 at 6:31
Roni HacohenRoni Hacohen
6319
edited Nov 29 '18 at 12:39
Goncalo Peres
1,4691619
asked Nov 24 '18 at 6:31
Roni HacohenRoni Hacohen
6319
edited Nov 29 '18 at 12:39
Goncalo Peres
1,4691619
edited Nov 29 '18 at 12:39
Goncalo Peres
1,4691619
edited Nov 29 '18 at 12:39
Goncalo Peres
1,4691619
1,4691619
asked Nov 24 '18 at 6:31
Roni HacohenRoni Hacohen
6319
asked Nov 24 '18 at 6:31
Roni HacohenRoni Hacohen
6319
asked Nov 24 '18 at 6:31
Roni HacohenRoni Hacohen
6319
6319
Please update your post with example code of the unit-test
– Lucho
Nov 25 '18 at 9:06
@Lucho It's just a basicexpect(component).toBeTruthy()test as I mentioned in the post.
– Roni Hacohen
Nov 25 '18 at 20:02
It's just not that, the config(Testbed) setup has a role aswell
– Lucho
Nov 25 '18 at 21:01
Here is my spec file: github.com/ronihcohen/fin-app-ng/blob/…
– Roni Hacohen
Nov 26 '18 at 4:39
Have a look at this post: stackoverflow.com/a/53015635/9226213. It might be related.
– G. Tranter
Nov 27 '18 at 16:37
add a comment |
Please update your post with example code of the unit-test
– Lucho
Nov 25 '18 at 9:06
@Lucho It's just a basicexpect(component).toBeTruthy()test as I mentioned in the post.
– Roni Hacohen
Nov 25 '18 at 20:02
It's just not that, the config(Testbed) setup has a role aswell
– Lucho
Nov 25 '18 at 21:01
Here is my spec file: github.com/ronihcohen/fin-app-ng/blob/…
– Roni Hacohen
Nov 26 '18 at 4:39
Have a look at this post: stackoverflow.com/a/53015635/9226213. It might be related.
– G. Tranter
Nov 27 '18 at 16:37
Please update your post with example code of the unit-test
– Lucho
Nov 25 '18 at 9:06
Please update your post with example code of the unit-test
– Lucho
Nov 25 '18 at 9:06
@Lucho It's just a basic
expect(component).toBeTruthy() test as I mentioned in the post.– Roni Hacohen
Nov 25 '18 at 20:02
@Lucho It's just a basic
expect(component).toBeTruthy() test as I mentioned in the post.– Roni Hacohen
Nov 25 '18 at 20:02
It's just not that, the config(Testbed) setup has a role aswell
– Lucho
Nov 25 '18 at 21:01
It's just not that, the config(Testbed) setup has a role aswell
– Lucho
Nov 25 '18 at 21:01
Here is my spec file: github.com/ronihcohen/fin-app-ng/blob/…
– Roni Hacohen
Nov 26 '18 at 4:39
Here is my spec file: github.com/ronihcohen/fin-app-ng/blob/…
– Roni Hacohen
Nov 26 '18 at 4:39
Have a look at this post: stackoverflow.com/a/53015635/9226213. It might be related.
– G. Tranter
Nov 27 '18 at 16:37
Have a look at this post: stackoverflow.com/a/53015635/9226213. It might be related.
– G. Tranter
Nov 27 '18 at 16:37
add a comment |
1 Answer
1
active
oldest
votes
Not sure how kosher it is but in my case I simply removed the 'fixture.detectChanges()' call from the spec file. I am working with an A6 ReactiveForm, setting some initial dummy date range values in the test. The form works fine but the test failed with your error.
answered Dec 7 '18 at 21:54
EddieBabyEddieBaby
5913
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%2f53455767%2fexpressionchangedafterithasbeencheckederror-when-testing-angular-material-table%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
Not sure how kosher it is but in my case I simply removed the 'fixture.detectChanges()' call from the spec file. I am working with an A6 ReactiveForm, setting some initial dummy date range values in the test. The form works fine but the test failed with your error.
answered Dec 7 '18 at 21:54
EddieBabyEddieBaby
5913
add a comment |
Not sure how kosher it is but in my case I simply removed the 'fixture.detectChanges()' call from the spec file. I am working with an A6 ReactiveForm, setting some initial dummy date range values in the test. The form works fine but the test failed with your error.
answered Dec 7 '18 at 21:54
EddieBabyEddieBaby
5913
add a comment |
Not sure how kosher it is but in my case I simply removed the 'fixture.detectChanges()' call from the spec file. I am working with an A6 ReactiveForm, setting some initial dummy date range values in the test. The form works fine but the test failed with your error.
answered Dec 7 '18 at 21:54
EddieBabyEddieBaby
5913
Not sure how kosher it is but in my case I simply removed the 'fixture.detectChanges()' call from the spec file. I am working with an A6 ReactiveForm, setting some initial dummy date range values in the test. The form works fine but the test failed with your error.
answered Dec 7 '18 at 21:54
EddieBabyEddieBaby
5913
answered Dec 7 '18 at 21:54
EddieBabyEddieBaby
5913
answered Dec 7 '18 at 21:54
EddieBabyEddieBaby
5913
answered Dec 7 '18 at 21:54
EddieBabyEddieBaby
5913
5913
add a comment |
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%2f53455767%2fexpressionchangedafterithasbeencheckederror-when-testing-angular-material-table%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
Please update your post with example code of the unit-test
– Lucho
Nov 25 '18 at 9:06
@Lucho It's just a basic
expect(component).toBeTruthy()test as I mentioned in the post.– Roni Hacohen
Nov 25 '18 at 20:02
It's just not that, the config(Testbed) setup has a role aswell
– Lucho
Nov 25 '18 at 21:01
Here is my spec file: github.com/ronihcohen/fin-app-ng/blob/…
– Roni Hacohen
Nov 26 '18 at 4:39
Have a look at this post: stackoverflow.com/a/53015635/9226213. It might be related.
– G. Tranter
Nov 27 '18 at 16:37