angular: Code Coverage breaks constructor inheritance

🐞 Bug report

Command (mark with an x)

- [ ] new
- [ ] build
- [ ] serve
- [x] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 7.2

Description

Running with code coverage enabled breaks constructor inheritance.

Inserting a constructor in the ValidationDirective also fixes the error.

🔬 Minimal Reproduction

https://github.com/CSchulz/angular-code-coverage-breaks-constructor-inheritance

Run npm test results into

TypeError: Cannot read property ‘get’ of undefined

Run npm test -- --codeCoverage false succeeds.

🔥 Exception or Error

For some reason the dependencies of the ValidationDirective don’t get resolved correctly. You can see in the createClass method that the deps of ValidationDirective are empty.

🌍 Your Environment


Angular CLI: 8.0.3
Node: 10.15.3
OS: darwin x64
Angular: 8.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.800.3
@angular-devkit/build-angular      0.800.3
@angular-devkit/build-ng-packagr   0.800.3
@angular-devkit/build-optimizer    0.800.3
@angular-devkit/build-webpack      0.800.3
@angular-devkit/core               8.0.3
@angular-devkit/schematics         8.0.3
@angular/cli                       8.0.3
@ngtools/json-schema               1.1.0
@ngtools/webpack                   8.0.3
@schematics/angular                8.0.3
@schematics/update                 0.800.3
ng-packagr                         5.3.0
rxjs                               6.4.0
typescript                         3.4.5
webpack                            4.30.0

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 25
  • Comments: 16 (6 by maintainers)

Most upvoted comments

I encountered this today with component, and I it somehow got fixed after overriding the constructor in the extending component.

@Component(..)
class AbstractComponent {
   constructor(@Inject(TOKEN) protected injectedDependency) {}
}

@Component(..)
class B extends AbstractComponent {} // works properly

@Component(..)
class C extends AbstractComponent { // tests fail due to injectedDependency not being found
   field = true;
   someFunc() {}
}

@Component(..)
class D extends AbstractComponent { // works properly
   field = true;
   
   constructor(@Inject(TOKEN) injectedDependency) {
      super(injectedDependency)
   }
   
   someFunc() {}
}

For some reason, adding fields/functions to a component extending another component causes this error to appear. But overriding the constructor and calling super seems to fix it.

I’m aware that this is not a proper fix, but I prefer to keep our compiler target to es2015.

I also encountered the issue. When the flag code-coverage is set, then the dependencies are not injected in to the inherited constructor of the child class, in the unit tests. Which makes the tests to fail.

It started to happen only when I changed the tsconfig’s target from es5 to es2015.

Degrading the target back to es5 is not a welcomed solution. After upgrading to Angular 13, which doesn’t support IE11, it makes sense to change the target in the unit tests to es2015. Moreover, after upgrading to Angular 13, I had issues with some other tests when still using target es5. So I was kind of forced to update target to es2015.

@alan-agius4 do you think that in the times of Angular 13 we could increase a bit the severity of this issue? now it’s labelled severity5: regression

in our case, changing the compiler target to es5 was fixing the problem. It only fails for us if a direct property assignment public validation = true; is present in the child class inheriting from a parent class with a non-empty constructor definition. This all fits with the reproduction in the original post.

Enabling code coverage should never change the test results… this is a big no-go and it loses confidence in the tech stack used for production!

Hi, as a workaround you can change the target to es5 in your tsconfig.spec.json.

Example:

  "compilerOptions": {
    "target": "es5",
    "types": [
      "jasmine",
      "node"
    ]
  }

Hi, as a workaround you can change the target to es5 in your tsconfig.spec.json.

Example:

  "compilerOptions": {
    "target": "es5",
    "types": [
      "jasmine",
      "node"
    ]
  }

As a workaround works, but is there any news on this? I’m having this problem with jest and its coverage too. If you need a repro with jest I can create one to help 👍

This issue is still present in 8.2.2 … I have a component that inherits a base class and the base class constructor does not receive injected services (they are all undefined) when using code coverage.

@JoostK, actually beat me to it!