Webapp unit tests have very noisy logs

[dianabarsan]

Describe the issue When running webapp unit tests, they are riddled with some reapeated errors, which makes it difficult to follow and see results of the tests: https://github.com/medic/cht-core/actions/runs/11143437308/job/30970853497#step:10:6833

      ✔ should set a form error if form is invalid
ERROR: 'ERROR', Error: Error retrieving icon :icon-back! Unable to find icon with the name ":icon-back"
Error: Error retrieving icon :icon-back! Unable to find icon with the name ":icon-back"
    at Object.error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/material/fesm2022/icon.mjs:939:48)
    at ConsumerObserver.error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Subscriber.js:102:33)
    at SafeSubscriber._error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Subscriber.js:64:30)
    at SafeSubscriber.error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Subscriber.js:40:18)
    at OperatorSubscriber._error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Subscriber.js:64:30)
    at OperatorSubscriber.error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Subscriber.js:40:18)
    at Observable._subscribe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/observable/throwError.js:5:45)
    at Observable._trySubscribe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Observable.js:37:25)
    at cb (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Observable.js:31:30)
    at errorContext (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/util/errorContext.js:19:9)
  Contacts component
    ✔ should create ContactsComponent
ERROR: 'ERROR', Error: Error retrieving icon :icon-back! Unable to find icon with the name ":icon-back"
Error: Error retrieving icon :icon-back! Unable to find icon with the name ":icon-back"
    at Object.error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/material/fesm2022/icon.mjs:939:48)
    at ConsumerObserver.error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Subscriber.js:102:33)
    at SafeSubscriber._error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Subscriber.js:64:30)
    at SafeSubscriber.error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Subscriber.js:40:18)
    at OperatorSubscriber._error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Subscriber.js:64:30)
    at OperatorSubscriber.error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Subscriber.js:40:18)
    at Observable._subscribe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/observable/throwError.js:5:45)
    at Observable._trySubscribe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Observable.js:37:25)
    at cb (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Observable.js:31:30)
    at errorContext (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/util/errorContext.js:19:9)
    ✔ ngOnInit() should load and filter contacts and watch for changes
ERROR: 'ERROR', Error: Error retrieving icon :icon-back! Unable to find icon with the name ":icon-back"
Error: Error retrieving icon :icon-back! Unable to find icon with the name ":icon-back"
    at Object.error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/material/fesm2022/icon.mjs:939:48)
    at ConsumerObserver.error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Subscriber.js:102:33)
    at SafeSubscriber._error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Subscriber.js:64:30)
    at SafeSubscriber.error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Subscriber.js:40:18)
    at OperatorSubscriber._error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Subscriber.js:64:30)
    at OperatorSubscriber.error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Subscriber.js:40:18)
    at Observable._subscribe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/observable/throwError.js:5:45)
    at Observable._trySubscribe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Observable.js:37:25)
    at cb (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/Observable.js:31:30)
    at errorContext (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/dist/esm/internal/util/errorContext.js:19:9)
    ✔ ngOnDestroy() should unsubscribe from observables

Describe the improvement you'd like Update the tests so these errors are not thrown or at least not logged.

[Akshanshkaushal]

@dianabarsan I would like to work upon this issue. Could you please assign this?

[Satyamyaduvanshi]

Hi @Akshanshkaushal, are you still working on this issue? If not, I’d like to take it up.

[Akshanshkaushal]

Hi @Akshanshkaushal, are you still working on this issue? If not, I’d like to take it up.

@Satyamyaduvanshi I'm working upon this one and will raise the pr today

[Akshanshkaushal]

@dianabarsan Please check the PR and let me know what needs to be changed.

[jkuester]

@Benmuiruri figured out a fix that worked within a given test file. Registering the missing icon prevented the errors from being printed to the logs for those tests.

It is not immediately clear to me if we can generalize this solution to somehow work for the whole test suite, but it at least seems like a good place to start tinkering.