Angular 2.0.0 -模拟文件上传器

Question

我使用的是ng2-file-upload。如何在单元测试中模拟它的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);
});

为了测试这是否有效，我有一个元数据模型，我希望在选择文件时填充该模型。因此，我可以做出两个断言，即两个上传输入框都将有一个文件，并且元数据对象将被填充。

在ng2- file -upload的情况下，我相信文件列表将被填充，允许您检查测试文件是否已导入其中。

祝好运!