角度4 - ジャスミンを使用したユニットテスト - ボタンエラーを示すクリックコード

Question

私はジャスミンを初めて使用しています。 Angle4でコードを書く。ボタンをテストしたい。スペックファイルに次のコードを記述しました。これはマルチファイルアップロードの機能です。また、ファイルの選択時に、ユーザーがファイルをアップロードできるようにしています。

import { 
    async, 
    ComponentFixture, 
    TestBed 
} from '@angular/core/testing'; 

import { 
    UploaddocumentComponent 
} from './uploaddocument.component'; 

describe('UploaddocumentComponent',() => { 
    let component: UploaddocumentComponent; 
    let fixture: ComponentFixture <UploaddocumentComponent> ; 

    beforeEach(async(() => { 
     TestBed.configureTestingModule({ 
       declarations: [UploaddocumentComponent] 
      }) 
      .compileComponents(); 
    })); 

    beforeEach(() => { 
     fixture = TestBed.createComponent(UploaddocumentComponent); 
     component = fixture.componentInstance; 
     fixture.detectChanges(); 
    }); 

    // it('should create',() => { 
    // expect(component).toBeTruthy(); 
    // }); 
    it('should', async(() => { 
     spyOn(component, 'uploadFileByRest'); 

     let button = fixture.debugElement.nativeElement.querySelector('button'); 
     button.click(); 

     fixture.whenStable().then(() => { 
      expect(component.uploadFileByRest).toHaveBeenCalled(); 
     }) 
    })); 
}); 

次の問題を参照してください。解決する方法？クロム

として示す

invoke@webpack:///~/zone.js/dist/zone.js:490:0 <- 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) 

HTML

<button pButton type="button" icon="fa-check" class="form-control" 
(click)="uploadFileByRest(); file.value = ''" [disabled]="!isFileSelected" 
label="Upload"></button> 

TS

doUploadByRest() { 
    //Saving file to Alfresco and DB 
} 

私は思うが、isRequestFromView - テストコードに入力する方法を教えてくれるHTML 21行？

import {Messages} from "primeng/primeng"; 

... 

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
      declarations: [UploaddocumentComponent, Message] 
     }) 
     .compileComponents(); 
})); 

ジャスミンのテストは自動的に依存関係をインポートしないためです：あなたの宣言にPrimeNGコンポーネントMessagesを追加

21 line <div class="row" *ngIf="!isRequestFromView"> 
     <p-messages [(value)]="msgs"></p-messages>    
     <div class="col-md-4"> 
      <label>Add File:</label> 
      <input multiple type="file" name="filedata" class="form-control" #file (change)="fileChangeEvent(file.files)" /> 
     </div> 
     <div class="col-md-2" style="margin-top:25px"> 
      <button pButton type="button" icon="fa-check" class="form-control" (click)="uploadFile(); file.value = ''" [disabled]="!isFileSelected" 
       label="Upload"></button> 
     </div> 
    </div> 

Answer 1

してみてください。これにより、テスト環境をより詳細に制御できるため、必要に応じてコンポーネントをモックすることができます。

@Component({ 
    selector: 'p-messages', 
    template: '' 
}) 
class MyMessageMock { 

} 

... 

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
      declarations: [UploaddocumentComponent, MyMessageMock] 
     }) 
     .compileComponents(); 
})); 

これは、あなたが何かをテストしているので、あなたのテストに影響を与えるべきではありませんあなたの<p-messages>要素だった空のコンポーネント、とあなたを残します：これはあなたにさらにエラーが発生します場合

、コンポーネントをからかってみてください完全に。