Angular jsonforms causes test failures with --code-coverage

[Ketec]

Describe the bug

TypeError: Cannot read properties of undefined (reading '$state')
It seems like Istanbul (karma code coverage) fails to detect the JsonFormsAngularService injections.

Potentially because it is not decorated as an injectable in the code?

This causes any component that uses to fail - manually providing JsonFormsAngularService in the test providers does not help.

Runs fine if coverage is disabled.

Expected behavior

Tests should run when using jsonforms.

Steps to reproduce the issue

USe </ in a component.
Write unit test for the component (as long as it initializes.)

ng test --browsers=headless --watch=false --code-coverage

Screenshots

No response

In which browser are you experiencing the issue?

All

Framework

Angular

RendererSet

No response

Additional context

No response

[sdirix]

Hi @Ketec, this is very hard to diagnose for me without any further information. Note that we do code coverage tests in Angular Material just fine, using karma --coverage ourselves. Maybe you want to compare our settings to yours.

[Ketec]

I see it is using a rather old version of Karma.
karma-coverage-istanbul-reporter
I believe was deprecated in favour of karma-coverage.
This was already with Angular 11.

Possibly also old compilation target:
"target": "es5",
Which was listed as a temporary workaround when I googled for similar coverage issues.
But Angular 12 has already removed support for older browsers and new projects start with ES2015 as a minimum target.

ES2015 is also target in the seed app in https://github.com/eclipsesource/jsonforms-angular-seed (was going to try and replicate there ut its a bit out of date and does not compile).

[sdirix]

So would raising the target to es2015 in JSON Forms fix the problem for you? Seems weird that this would cause problems only for code coverage testing.

[Ketec]

Code coverage relies on istanbul which likely is not fully compatible with newer targets
ES5 is the max target that works ES2015 no longer does.

Likely related to:
angular/angular#44781

[sdirix]

But ES5 breaks the newer library? So would your problems be fixed if we switched to ES2015 and karma coverage?

[Ketec]

I think the issue is more about the code itself JsonFormsAngularService is not decorated as an injectable service which likely leads to it not getting properly injected/detected by Istanbul when generating code coverage.

It works if using the old es5 target but starts failing if the target is increased to a newer version.

[sdirix]

Hi @Ketec, so all we need are some additional decorations? That's fine with me if they don't break anything. Would you be willing to contribute this?

[Ketec]

This may go deeper, I also see this is not an angular library but a custom webpack build?

Wanted to test increasing target to 2015 aswell for the angular adapter but that just leads to different errors (
Compiled class declaration is not inside an IIFE: JsonFormsBaseRenderer
).

Likely need to know more in-depth about specific build /project structure here.

[sdirix]

It's not really a custom webpack build but just invoking pure ngc with a config.

[JBBianchi]

I think this has been fixed in #2212 or is it still an issue ?

[lucas-koehler]

@JBBianchi I think you are right: We are using target ES2021 by now and you updated the test runner. Closing this. We can repopen this or create a new issue if this problem re-appears. Thanks for the hint!