title: Expected undefined to be truthy - Jasmine/Karma
body: <p>I have develop a simple reactive form in angular 2, Which includes username, password and login button. Here button default disable up to getting email and password values. Here i am trying to write a test case for button enable and disable( If we give input data to the both fields button should enable otherwise button will disable). 
  I have written a test case like "Button should be disable" expecting it will pass, but it is failing with error "Error: Expected undefined to be truthy."</p>
  
  <p>This is my reactive form:</p>
  
  <pre class="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>
  
  <p>This is my .spec file.</p>
  
  <pre class="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('Button should be disable', async(() =&gt; {
      component.authForm.controls['userid'].setValue('');
      component.authForm.controls['password'].setValue('');
      fixture.detectChanges();
      let btn = fixture.debugElement.query(By.css('carbon-button'));  
      expect(btn.nativeElement.disabled).toBeTruthy(); 
    }));
  </code></pre>
  
  <p>This is .ts file</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component, OnInit} from '@angular/core';
  import { AbstractControl, FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
  import { ActionLoadModule } from '../../../@core/auth/auth.reducer';
  import { Store } from '@ngrx/store';
  import { AppState } from '../../../@models/app-state';
  import { ActionSignIn, selectorLogin, ActionChangePassword } from '../../../@core/login/login.reducer';
  import { LoginState } from '../../../@core/login/login.state';
  import { BusyState } from '../../../@shared/busy-indicator/busy-state';
  
  @Component({
    selector: 'eose-login-form',
    templateUrl: './login-form.component.html',
    styleUrls: ['./login-form.component.scss']
  })
  export class LoginFormComponent implements OnInit {
  
    dirty: true;
    // loading: BusyState;
    loading: boolean = false;
    loadingMsg: string = '';
    authForm: FormGroup;
    changeForm: FormGroup
    constructor(
      private store: Store&lt;AppState&gt;,
      private fb: FormBuilder
    ) {
  
    }
  
     userid = new FormControl('', [Validators.required, Validators.maxLength(8)]);
     password = new FormControl('', [Validators.required, Validators.maxLength(8)]);
  
    useridMessage: string;
    passwordMessage: string;
  
  
    handleLoadingChange(loadingState: BusyState) {
     // this.loading = loadingState;
    }
   private useridValidationMessage = {
          required: 'User id value is required.',
          maxlength: 'The maximum allowed length of user id is 8.'
   };
  private passwordValidationMessages = {
      required: 'Password value is required.',
      maxlength: 'The maximum allowed length of password is 8.'
  };
  
  setMessage(c: AbstractControl): void {
      this.useridMessage = '';
      if ((c.dirty || c.touched) &amp;&amp; c.errors) {
       this.useridMessage = Object.keys(c.errors).map(key =&gt;
              this.useridValidationMessage[key]).join(' ');
      }
  }
  setpasswordMessage(c: AbstractControl): void {
      this.passwordMessage = '';
      if ((c.dirty || c.touched) &amp;&amp; c.errors) {
          this.passwordMessage = Object.keys(c.errors).map(key =&gt;
              this.passwordValidationMessages[key]).join(' ');
      }
  }
  
  
  ngOnInit() {
  
      this.authForm = this.fb.group({
        'env': new FormControl('cdtdevdir'),
        userid: this.userid,
        password: this.password
      });
  
  
    const useridControl = this.authForm.get('userid');
          useridControl.valueChanges.subscribe(value =&gt;
              this.setMessage(useridControl));
  
      const passwordControl = this.authForm.get('password');
          passwordControl.valueChanges.subscribe(value =&gt;
              this.setpasswordMessage(passwordControl));
  
    this.store.select(selectorLogin)
    .subscribe((loginState: LoginState) =&gt; {
      this.loading = loginState.loading;
      this.loadingMsg = loginState.loadingMsg;
    });
  
  }
  
  
  onLogin() {
     console.log('Login Payload', this.authForm.value);
     this.store.dispatch(new ActionSignIn(this.authForm.value));
     console.log('Where to save userid to get the Authstate')
     this.store.dispatch(new ActionLoadModule({userid: 'SOSMSV'}));
     this.onReset();
  }
  
  
  onReset() {
        console.log("Form Submitted!");
        this.authForm.get('password').setValue(null);
        this.changeForm.reset();
        this.authForm.removeControl('newpassword');
  }
  
  }
  </code></pre>