failing test angular 2 application

Question

Have a similar situation but the fix above does not work. Here is the directory tree in my case. The form is subcomponent to the app.

The app.component.html:

<div class="jumbotron">                                                                           
     <div class="container">                                                                         
      <h1>Simple Curl request</h1>                                                                  
    </div>                                                                                          
 </div>                                                                                            
 <div class="container">                                                                           
   <app-form></app-form>                                                                           
 </div>

which is basically calling the subcomponent 'form'. And within the we call [formGroup] and similar error as above happens.

It fails with error:

Can't bind to 'formGroup' since it isn't a known property of 'form'."

The form.component.ts contains the header :

import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms';

The form.component.html contains:

<div class="card-block">                                                                  |
      <form [formGroup]="cform" (ngSubmit)="doRequest($event)">                               |
        <div class="card form-group">                                                         |
          <div class="card-header">                                                           |
            Authentication                                                                    |
          </div>                                                                              |
          <div class="card-block">                                                            |
            <div class="form-group" formGroupName="authentication">                           |
              <label for="">Type</label>                                                      |
              <select formCon ....

And there you see the formGroup mentioned.... Functionally there is no problem but the testcases fails...... Why ????????

Possible duplicate of [Can't bind to 'formGroup' since it isn't a known property of 'form'](http://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form) — Adam, Feb 15 '17 at 22:26
Are you importing the `FormModule` into your testing module? — Adam, Feb 15 '17 at 22:27
`import { FormsModule, ReactiveFormsModule } from '@angular/forms';` Edit: Adam was faster, but you should try to import FormsModule (and ReactiveFormsModule if you use it) — mickdev, Feb 15 '17 at 22:27
thanks everyone. I did import it but that is different from injecting it like in app.module.ts. It is confusing that this is not mentioned in the documents. That app.module is not useful for testing and the whole thing should be replicated in separate test modules. — user1102171, Feb 17 '17 at 11:51

score 2 · Accepted Answer · answered Feb 15 '17 at 22:32

2

When you are doing test configuration you module config is not loaded so make sure that you tell all what need to be loaded in test config

TestBed.configureTestingModule({
      declarations: [Component1, Component2IfUsed],
      providers: [ApiService
        MockBackend, BaseRequestOptions],
      imports: [
        FormsModule,
        ReactiveFormsModule
      ]
    })

So basically in test config you must provide all required info for dependency injection.

answered Feb 15 '17 at 22:32

Vova Bilyachat

18,765
4
55
80

Thanks a lot Volodymyr. This should be well documented in core angular framework documentation and it is not. Makes it difficult and confusing. I am using angular-cli for setup of components ... – user1102171 Feb 17 '17 at 11:45
It has nothing to do with CLI, idea is when you test you need to know what to bootstrap, because some modules you will mock. – Vova Bilyachat Feb 17 '17 at 11:46
I know that angular cli has nothing to do with it. But when you create a tool that default generates code, it should generate templates that leads to successful running of autotestcases. From that standpoint the tool utility will be increased. It is not the case with angular cli... – user1102171 Feb 18 '17 at 13:12

failing test angular 2 application

1 Answers1