Circular dep error for custom form control when mocking with MockComponent

Hi,

I ran into an issue during the upgrade to Angular v10 where some tests are failing when mocking a custom form control component when the the form is implementing ControlValueAccessor and Validator. Then it fails in the component which mocks the custom-control with: Error: Circular dep for MockOfMyFormControlComponent.

Here is a repo with minimal setup to reproduce this issue: https://github.com/michael-hein/ng-mocks-circular-dep-error

// my-form-control.component.ts
@Component({
  selector: 'app-my-form-control',
  templateUrl: './my-form-control.component.html',
  styleUrls: ['./my-form-control.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyFormControlComponent),
      multi: true,
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => MyFormControlComponent),
      multi: true,
    },
  ],
})
export class MyFormControlComponent
  implements ControlValueAccessor, OnInit, Validator {
  constructor() {}
  validate(control: AbstractControl): ValidationErrors {
    throw new Error('Method not implemented.');
  }
  registerOnValidatorChange?(fn: () => void): void {
    throw new Error('Method not implemented.');
  }
  writeValue(obj: any): void {
    throw new Error('Method not implemented.');
  }
  registerOnChange(fn: any): void {
    throw new Error('Method not implemented.');
  }
  registerOnTouched(fn: any): void {
    throw new Error('Method not implemented.');
  }
  setDisabledState?(isDisabled: boolean): void {
    throw new Error('Method not implemented.');
  }

  ngOnInit(): void {}
}

// app.component.spec.ts
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ReactiveFormsModule],
      declarations: [AppComponent, MockComponent(MyFormControlComponent)],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    fixture.detectChanges();
    expect(app).toBeTruthy();
  });
});

Error details:

Error: Circular dep for MockOfMyFormControlComponent
            at getNodeInjectable (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:3903:1)
            at searchTokensOnInjector (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:3849:1)
            at getOrCreateInjectable (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:3771:1)
            at ɵɵdirectiveInject (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:13733:1)
            at ɵɵinject (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:804:1)
            at factory (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11321:1)
            at multiResolve (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:19005:1)
            at NodeInjectorFactory.multiProvidersFactoryResolver [as factory] (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:18970:1)
            at getNodeInjectable (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:3913:1)

Latest version of ng-mocks were used with the latest angular version

"dependencies": {
    "@angular/animations": "~10.0.3",
    "@angular/cdk": "^10.0.2",
    "@angular/common": "~10.0.3",
    "@angular/compiler": "~10.0.3",
    "@angular/core": "~10.0.3",
    "@angular/forms": "~10.0.3",
    "@angular/platform-browser": "~10.0.3",
    "@angular/platform-browser-dynamic": "~10.0.3",
    "@angular/router": "~10.0.3",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.2",
    "@angular/cli": "~10.0.2",
    "@angular/compiler-cli": "~10.0.3",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "ng-mocks": "10.0.2",
    "prettier": "^2.0.5",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.6"
  }

Thank you!

[satanTime]

thanks for the verification, I’ll add the case with NG_VALIDATORS only to ensure it doesn’t cause any issues and release a new version on Sunday.

[michael-hein]

Hi, thanks, might you try the fix from PR? I think it fixes everything.

yes, this works fine and solves all issues, thank you 😃