ExpressionChangedAfterItHasBeenCheckedError when testing Angular Material Table












0















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?










share|improve this question

























  • 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
















0















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?










share|improve this question

























  • 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














0












0








0








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?










share|improve this question
















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 29 '18 at 12:39









Goncalo Peres

1,4691619




1,4691619










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 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



















  • 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

















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












1 Answer
1






active

oldest

votes


















1














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.






share|improve this answer























    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
    });


    }
    });














    draft saved

    draft discarded


















    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









    1














    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.






    share|improve this answer




























      1














      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.






      share|improve this answer


























        1












        1








        1







        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.






        share|improve this answer













        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.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Dec 7 '18 at 21:54









        EddieBabyEddieBaby

        5913




        5913
































            draft saved

            draft discarded




















































            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.




            draft saved


            draft discarded














            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





















































            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







            Popular posts from this blog

            404 Error Contact Form 7 ajax form submitting

            How to know if a Active Directory user can login interactively

            TypeError: fit_transform() missing 1 required positional argument: 'X'