角度2.0.0 - 模擬ファイルアップローダー

Question

私はng2ファイルアップロードを使用しています。ユニットテストでFileUploaderクラスをどうやって模擬しますか？

import { FileUploader } from 'ng2-file-upload/ng2-file-upload'; 

@Component({ 
    selector: 'my-component', 
    template: '...', 
    providers: [ MyService ] 
}) 

export class MyComponent { 
    public uploader: FileUploader = new FileUploader({url: '/my-app/api/upload', 
       authToken: 'token'}); 
constructor() { 
    this.uploader.onCompleteItem = (item:any, response: any, headers: any) => { 
    console.log('how to test here'); 
    } 
} 

私は苦労して自分の仕様を嘲笑しています。助けてください。

Answer 1

私はあなたのコメントに返信するつもりだったが、私は次のようにファイルfile-drop.directive.spec.tsから自分のユニットテストから取らFileUploaderクラスをモックする方法についてのあなたの元の質問に答えるために役立つかもしれないと思う：

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

import { FileUploader } from './file-uploader.class'; 
import { FileUploadModule } from './file-upload.module'; 

@Component({ 
    selector: 'container', 
    template: `<input type="file" ng2FileSelect [uploader]="uploader" />` 
}) 
export class ContainerComponent { 
    public uploader:FileUploader = new FileUploader({url: 'localhost:3000'}); 
} 

describe('Directive: FileSelectDirective',() => { 

    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     imports: [FileUploadModule], 
     declarations: [ContainerComponent], 
     providers: [ContainerComponent] 
    }); 
    }); 

    it('should be fine', inject([ContainerComponent], (fixture:ComponentFixture<ContainerComponent>) => { 
    expect(fixture).not.toBeNull(); 
    })); 
}); 

ここで、import { FileUploader } from './file-uploader.class';はFileUploaderをテストにインポートする方法です。ContainerComponentはテスト自体にインポートされます。

さらに、私は自分のコンポーネントでテストするためのダミーファイルを作成しましたが、私はまだそれを書いています！

it('should accept a file for upload',() => { 
    var modifiedDate = new Date(); 
    var file = new File([3555], 'test-file.jpg', {lastModified : modifiedDate, type: 'image/jpeg'}); 
    FileUploadComponent.upload(file); 
}); 

これが機能するかどうかをテストするには、ファイルが選択されたときにデータが入力されると予想されるメタデータモデルがあります。したがって、私は2つのアサーションを行うことができます。つまり、アップロード入力ボックスにファイルがあり、メタデータオブジェクトが読み込まれるということです。

ng2-file-uploadの場合、ファイルリストが作成され、テストファイルがインポートされたことを確認できます。

幸運を祈る！