.detectChanges() not working within Angular test

Question

I\'ve been tasked with writing tests for a chat app developed with Angular. Below is the snippet of Angular template code I\'m currently writing tests for:

Answer 1

The answer provided here https://stackoverflow.com/a/50142134/3765819 fixes the problem. However, there is also another way which I think it can prevent further problems on the UI. The problem I had was similar to the one described on the question, meaning that when testing for a specific string on HTML I could not find it. Even though when running the code it worded fine, the UI was not updated accordingly when testing it.

What I had to do was:

To inject ChangeDetectorRef into the .ts file:

constructor(private changeDetector: ChangeDetectorRef) {}

and call it when needed:

this.changeDetector.markForCheck();