title: How to test FormGroupDirective in component?
body: <p>I've some problems to tests component with <code>FormGroupDirective</code> in <code>viewProviders</code>.
  Can't create mock of <code>parent</code> and set empty formGroup. </p>
  
  <p>My component:
  </p>
  
  <pre><code>@Component({
     (...)
     viewProviders: [
        {
          provide: ControlContainer, useExisting: FormGroupDirective
        }
      ]
    })
  export class SomeNestedFormComponent implements OnInit {
    form: FormGroup;
  
    constructor(private fb: FormBuilder, private parent: FormGroupDirective) {}
  
    ngOnInit() {
      this.form = this.parent.form;
      this.form.addControl('field', this.createSomeFormGroup());
    }
  }
  </code></pre>
  
  <p>Spec:
  </p>
  
  <pre><code>describe('SomeNestedFormComponent', () =&gt; {
    let component: SomeNestedFormComponent;
    let fixture: ComponentFixture&lt;SomeNestedFormComponent&gt;;
    let formGroupDirective: Partial&lt;FormGroupDirective&gt;;
  
    beforeEach(async(() =&gt; {
      formGroupDirective = {
        form: new FormGroup({})
      };
  
      TestBed.configureTestingModule({
        imports: [
          SharedModule,
          FormsModule,
          ReactiveFormsModule
        ],
        declarations: [SomeNestedFormComponent],
        providers: []
      })
        .overrideComponent(PermissionListComponent, {
          set: {
            viewProviders: [
              {
                provide: FormGroupDirective, useValue: formGroupDirective
              }
            ]
          }
        })
        .compileComponents()
        .then(() =&gt; {
          fixture = TestBed.createComponent(SomeNestedFormComponent);
          component = fixture.componentInstance;
          component.ngOnInit();
          fixture.detectChanges();
        });
    }));
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  });
  </code></pre>
  
  <p>This throw: <code>Error: formGroupName must be used with a parent formGroup directive. (...)</code>
  Try to handle <code>FormGroupDirective</code> as a service with <code>spyOn</code>, but it throws <code>TypeError: this.form.addControl is not a function</code></p>
  
  <pre class="lang-ts prettyprint-override"><code>describe('SomeNestedFormComponent', () =&gt; {
    (...)
    let fgdSpy:  jasmine.SpyObj&lt;SomeNestedFormComponent&gt;;
  
    beforeEach(async(() =&gt; {
      const FGDirectiveSpy = jasmine.createSpyObj('FormGroupDirective', ['form', 'addControl']);
  
      TestBed.configureTestingModule({
        (...)
        providers: [
          {provide: FormGroupDirective, useValue: FGDirectiveSpy}
        ]
      })
        .compileComponents()
        .then(() =&gt; {
          fgdSpy = TestBed.get(FormGroupDirective);
          (...)
        });
  </code></pre>
  
  <p>Is there any way to test that component?</p>