CODEWITHSUNDEEP
unit-testingangularkarma-jasmine
xiotee
xiotee

Reputation: 1559

Angular 2.0.0 - Mock File Uploader

I am using ng2-file-upload. How do I mock its FileUploader class in unit testing?

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

I am having a hard time mocking it in my spec. Please help.

Upvotes: 2

Views: 9765

Answers (1)

Terry Barriff
Terry Barriff

Reputation: 475

I was going to reply to your comment, but I think the following may help to answer your original question on how to mock the FileUploader class taken from their unit test from the file file-drop.directive.spec.ts:

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

Where import { FileUploader } from './file-uploader.class'; is how you import the FileUploader into your test, ContainerComponent is imported into the test itself.

Further to this, I have created a dummy file to test with on my component, but I am still writing it!

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

To test if this works, I have a metadata model that I expect to be populated upon the file being selected. I can therefore make two assertions, that both the upload input box will have a file and that the metadata object will be populated.

In the case of ng2-file-upload, I beleive the file list will be populated allowing you to check that the test file has been imported into that.

Good luck!

Upvotes: 2

Related Questions