Dependency injection with @Self() is broken in tests

[jonrimmer]

🐞 bug report

Affected Package

@angular/core

Is this a regression?

Unknown

Description

The @Self() decorator does not work in tests to inject dependencies from directives placed on a component by a test-specific wrapper component.

E.g. if a I have a custom form control that injects NgControl using the @Self() decorator, as recommended by the Angular team:

constructor(@Self() ngControl: NgControl) {
  ngControl.valueAccessor = this;
}

And I try to use this in a test wrapper component:

@Component({
  template: `
    <form>
      <app-hello [formControl]="ctrl" name="test"></app-hello>
   </form>
 `
})
class TestWrapper {
  ctrl = new FormControl(''); 
}

describe('HelloComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule, ReactiveFormsModule],
      declarations: [
        HelloComponent,
        TestWrapperComponent
      ],
    }).compileComponents();
  }));
});

Then test will fail due to an inability to inject NgControl.

🔬 Minimal Reproduction

https://github.com/jonrimmer/di-is-broken

If you run the app, you will see that it works fine.

If you run the test, you will see that it fails due to an inability to inject NgControl into the custom form control.

🔥 Exception or Error

Chrome 75.0.3770 (Mac OS X 10.14.5) HelloComponent should create FAILED
	No provider for NgControl ("[ERROR ->]"): @0:0
	error properties: Object({ ngSyntaxError: true, ngParseErrors: [ No provider for NgControl ("[ERROR ->]"): @0:0 ] })

🌍 Your Environment

Angular Version:

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.6
@angular-devkit/build-angular     0.800.6
@angular-devkit/build-optimizer   0.800.6
@angular-devkit/build-webpack     0.800.6
@angular-devkit/core              8.0.6
@angular-devkit/schematics        8.0.6
@angular/cli                      8.0.6
@ngtools/webpack                  8.0.6
@schematics/angular               8.0.6
@schematics/update                0.800.6
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

Anything else relevant?

[mhevery]

Can you simplify the example and turn it into stackblitz. We have limited amount of time, and we can't spend time reverse engineering your example. The fewer files the better. Also text describing where exactly you are expecting to inject things and where you are not getting what you expect.

[kavinda1995]

Happened to me also when creating an input in angular elements

[jonrimmer]

@mhevery I cannot, because the injection problem is happening in tests, as indicated by the issue title and description, and Stackblitz has no capability to run Angular unit tests.. The linked repo is a ng new project with a single, simple commit applied. The bug text also already includes the description of what I am injecting and what is going wrong.

I spent considerable effort and time creating this simplified example. I find your suggestion that I didn't, and that I'm asking you to perform unreasonable reverse engineering rude and unfounded. If your team doesn't have the capacity to handle bug reports from the community, then you shouldn't accept them, instead of insulting community members who make good-faith attempts to contribute.

[ryneo]

@jonrimmer I came across this problem when implementing a custom control like yours. Turns out the way to fix the unit tests is to add the @Optional() decorator to the NgControl dependency like

constructor(@Self() @Optional() ngControl: NgControl) {
  ngControl.valueAccessor = this;
}

It is a requirement that this component has a host test component to provide it with a FormControl.

Also it appears that your example code has a typo. The test component class is TestWrapper but it is declared as TestWrapperComponent in the testing module.

[chenlijun99]

@jonrimmer By any chance, does this happen when you run ng build --prod? Because I'm implementing custom form controls too. I haven't setup any tests yet, as we're in very early prototyping phase, but while with ng serve everything is just fine, when trying AOT I get the same error as yours.

[Adityau1]

Try

(fixture.componentInstance as any).ngControl = new FormControl();