Angular 2.0.0 - 模擬文件上傳器

我正在使用ng2-file-upload。如何在單元測試中模擬它的FileUploader類？Angular 2.0.0 - 模擬文件上傳器

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'); 
    } 
}

我有一個艱難的時間在我的規格嘲笑它。請幫忙。

來源

2016-11-10 xiotee

我遇到了同樣的問題，我已經構建了一個文件上傳組件，並試圖將此https://www.noppanit.com/javascript-tdd-on-file-upload/移植到我的規範中。 TS。我剛剛在另一個資源中看到spyOn只有在您輸入茉莉花時纔可用。在設置的過程中。我會告訴你（我認爲spyOn是解決方案）。 –

@TerryBarriff謝謝。我也有一個測試它的問題，因爲我已經覆蓋了一些ng2-file-upload FileUploader函數。你有什麼想法嗎？ – xiotee

你檢查了我的答案嗎？它有幫助嗎？ –

我會回覆你的評論，但我覺得有以下可能有助於回答關於如何嘲笑他們的單元測試從文件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); 
});

爲了測試，如果這個工程，我有我期待在被選擇的文件將被填充的元數據模型。因此，我可以做出兩個斷言，即上傳輸入框將有一個文件，並且元數據對象將被填充。

在ng2-file-upload的情況下，我相信會填充文件列表，以便檢查測試文件是否已導入到該文件列表中。

祝你好運！

來源

2016-11-21 08:20:22

@terrybariff由於我覆蓋了FileUploader的功能，所以我仍然遇到問題。我如何測試它們？我會更新這個問題。 – xiotee

Angular 2.0.0 - 模擬文件上傳器

回答

相關問題