title: How to write unit test case for Angular 2 Reactive forms by using Karma/Jasmine?
body: <p>I have develop a simple reactive form in Angular 2, Which includes <code>username</code>, <code>password</code> and <code>login</code> buttons. Here button default disable up to getting email and password values. Here i am trying to write a test case for button enable by using <code>karma/Jasmine</code>, But i am new to this testing framework, I have written normal valid and invalid things,but not getting clarity to write this particular thing. If any one aware of this, could you please help me to quick start.</p>
  
  <p>This is my reactive form:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nb-card *ngIf="!loading" &gt;
      &lt;nb-card-header&gt;
          &lt;i class="fa fa-lock"&gt;&lt;/i&gt;Sign In Form &lt;/nb-card-header&gt;
      &lt;nb-card-body&gt;
          &lt;form [formGroup]="authForm" (ngSubmit)="onLogin()" &gt;
              &lt;input id="userid" type="text" class="bx--text-input" placeholder="EOSE Userid" 
              formControlName="userid" [attr.data-invalid]="useridMessage ? '' : null"/&gt; 
              
              &lt;div class="bx--form-requirement" *ngIf="useridMessage"&gt;{{ useridMessage }} &lt;/div&gt; 
                &lt;br&gt;
              &lt;input id="password" type="password" class="bx--text-input" placeholder="EOSE Password" 
              formControlName="password" [attr.data-invalid]="passwordMessage ? '' : null"/&gt; 
              &lt;div class="bx--form-requirement" *ngIf="passwordMessage" &gt;{{ passwordMessage }} &lt;/div&gt;
              
             &lt;br&gt;
              &lt;carbon-button type="primary" [disabled]="!authForm.valid"&gt;Sign In&lt;/carbon-button&gt;  
          &lt;/form&gt; 
      &lt;/nb-card-body&gt;  
  &lt;/nb-card&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my <code>.spec</code> file.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>beforeEach(() =&gt; {
      fixture = TestBed.createComponent(LoginFormComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create the app', async(() =&gt; {
      const fixture = TestBed.createComponent(LoginFormComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
    }));
    it('form should be invalid', async(() =&gt; {
      component.authForm.controls['userid'].setValue('');
      component.authForm.controls['password'].setValue('');
      expect(component.authForm.valid).toBeFalsy();
    }));</code></pre>
  </div>
  </div>
  </p>