Unit testing ngAfterViewInit

Question

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'dataSource': 'undefined'. Current value: '[object Object]'.

In my component.ts I am getting this error. due to having code in ngafterviewinit.

  ngAfterViewInit(): void {
    this.role = this.aut.getuser();
    if (this.role ===  undefined) {
      this.router.navigate(['/']);
    }

    this.ELEMENT_DATA_RED_MALE = this.resul.fetchresults('red', 'male');
    this.dataSourceRedMale = this.ELEMENT_DATA_RED_MALE;
    this.ELEMENT_DATA_RED_FEMALE = this.resul.fetchresults('red', 'female');
    this.dataSourceRedFemale = this.ELEMENT_DATA_RED_FEMALE;
  
    this.ELEMENT_DATA_YELLOW_MALE = this.resul.fetchresults('yellow', 'male');
    this.dataSourceYellowMale = this.ELEMENT_DATA_YELLOW_MALE;
    this.ELEMENT_DATA_YELLOW_FEMALE = this.resul.fetchresults('yellow', 'female');
    this.dataSourceYellowFemale = this.ELEMENT_DATA_YELLOW_FEMALE;
  
    this.ELEMENT_DATA_BLUE_MALE = this.resul.fetchresults('blue', 'male');
    this.dataSourceBlueMale = this.ELEMENT_DATA_BLUE_MALE;
    this.ELEMENT_DATA_BLUE_FEMALE = this.resul.fetchresults('blue', 'female');
    this.dataSourceBlueFemale = this.ELEMENT_DATA_BLUE_FEMALE;
  
    this.ELEMENT_DATA_GREEN_MALE = this.resul.fetchresults('green', 'male');
    this.dataSourceGreenMale = this.ELEMENT_DATA_GREEN_MALE;
    this.ELEMENT_DATA_GREEN_FEMALE = this.resul.fetchresults('green', 'female');
    this.dataSourceGreenFemale = this.ELEMENT_DATA_GREEN_FEMALE;
  }

Please guide me about testing ngAfterviewInit, I am new to jasmine karma test.

score 3 · Accepted Answer · answered Jul 13 '21 at 13:00

3

I had a similar issue. Looking at the lifecycle hooks documentation, I changed ngAfterViewInit to ngAfterContentInit and it worked.

Refer Link: ExpressionChangedAfterItHasBeenCheckedError Explained

answered Jul 13 '21 at 13:00

Jai Kumaresh

715
1
7
33

Check these two answers https://stackoverflow.com/questions/37962821/what-is-the-difference-between-ngaftercontentinit-and-ngafterviewinit#answer-37967934 – Jai Kumaresh Jul 13 '21 at 15:36

Unit testing ngAfterViewInit

1 Answers1