title: Angular 4 - Unit testing using Jasmine - Button click code showing error
body: <p>I am new to Jasmine. Writing code in Angular 4. I want to test a button. I wrote following code in my spec file. This is the functionality of multi file upload. And on selection of file(s), we are allowing user to upload files.</p>
  
  <pre><code>import {
      async,
      ComponentFixture,
      TestBed
  } from '@angular/core/testing';
  
  import {
      UploaddocumentComponent
  } from './uploaddocument.component';
  
  describe('UploaddocumentComponent', () =&gt; {
      let component: UploaddocumentComponent;
      let fixture: ComponentFixture &lt; UploaddocumentComponent &gt; ;
  
      beforeEach(async(() =&gt; {
          TestBed.configureTestingModule({
                  declarations: [UploaddocumentComponent]
              })
              .compileComponents();
      }));
  
      beforeEach(() =&gt; {
          fixture = TestBed.createComponent(UploaddocumentComponent);
          component = fixture.componentInstance;
          fixture.detectChanges();
      });
  
      // it('should create', () =&gt; {
      //   expect(component).toBeTruthy();
      // });
      it('should', async(() =&gt; {
          spyOn(component, 'uploadFileByRest');
  
          let button = fixture.debugElement.nativeElement.querySelector('button');
          button.click();
  
          fixture.whenStable().then(() =&gt; {
              expect(component.uploadFileByRest).toHaveBeenCalled();
          })
      }));
  });
  </code></pre>
  
  <p>In PhantomJS browser, seeing following issue. How to resolve?</p>
  
  <pre><code>invoke@webpack:///~/zone.js/dist/zone.js:490:0 &lt;- src/polyfills.ts:3454:
  PhantomJS 2.1.1 (Windows 7 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.981 
  secs/ 0.127 secs)
  </code></pre>
  
  <p><code>HTML</code></p>
  
  <pre><code>&lt;button pButton type="button" icon="fa-check" class="form-control" 
  (click)="uploadFileByRest(); file.value = ''" [disabled]="!isFileSelected"
  label="Upload"&gt;&lt;/button&gt;
  </code></pre>
  
  <p><code>TS</code></p>
  
  <pre><code>doUploadByRest() {
     //Saving file to Alfresco and DB
  }
  </code></pre>
  
  <p>Chrome showing as </p>
  
  <p><a href="https://i.stack.imgur.com/amtm2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/amtm2.png" alt="enter image description here"></a></p>
  
  <p>HTML 21 line it's showing issue I think, isRequestFromView - how to give input to testing code?</p>
  
  <pre><code>    21 line &lt;div class="row" *ngIf="!isRequestFromView"&gt;
          &lt;p-messages [(value)]="msgs"&gt;&lt;/p-messages&gt;            
          &lt;div class="col-md-4"&gt;
              &lt;label&gt;Add File:&lt;/label&gt;
              &lt;input multiple type="file" name="filedata" class="form-control" #file (change)="fileChangeEvent(file.files)" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"  style="margin-top:25px"&gt;
              &lt;button pButton type="button" icon="fa-check" class="form-control" (click)="uploadFile(); file.value = ''" [disabled]="!isFileSelected"
                  label="Upload"&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>