Dateien hochladen in Enzym-Tests

Ich habe eine FileInput in meinem render-Funktion

      <FileInput
      accept= "image/jpeg,image/png,audio/mp3"
      onChange= {this.fileInputOnChange}
      children= {<i className="fa fa-paperclip"/>}
      className= 'fileInput'
      />

Muss ich schreiben, ein test für die Datei hochladen, wenn ich simulieren Sie die Funktion ändern Sie die Funktion aufrufen fileInputOnChange

fileInputOnChange: function(evt){
var file = evt.target.files[0];
var fileReader = new FileReader();

fileReader.onload = function(readFile){
  //Check the file type.
  var fileType = file.type.toLowerCase();

  if(fileType.lastIndexOf('image') === 0 && (fileType.lastIndexOf('png') >= 0 || fileType.lastIndexOf('jpeg'))){
    var image = new Image();

    image.onload = function(){
      var attachedFile = {
        attached: file,
        mediaSource: readFile.target.result,
        type: 'image'
      } 
        this.props.onChange(attachedFile);
    }.bind(this);

    image.onerror = function(){
      this.props.onError("INVALID_TYPE");
    }.bind(this);

    image.src = readFile.target.result;
  }else if(fileType.lastIndexOf('audio') === 0 && fileType.lastIndexOf('mp3') >= 0){
    //@todo: manage audio upload here
    var audio = new Audio();

    audio.oncanplaythrough = function(){
      var attachedFile = {
        attached: file,
        mediaSource: readFile.target.result,
        type: 'audio'
      } 
        this.props.onChange(attachedFile);
    }.bind(this);

    audio.onerror = function(e){
      this.props.onError("INVALID_TYPE");
    }.bind(this)

    audio.src = readFile.target.result;

  }else if (fileType.lastIndexOf('video') === 0 && fileType.lastIndexOf('mp4') >= 0){        
    var video = document.createElement('video');

    video.oncanplaythrough = function(){
      var attachedFile = {
        attached: file,
        mediaSource: readFile.target.result,
        type: 'video'
      } 
        this.props.onChange(attachedFile);
    }.bind(this);

    video.onerror = function(){
      this.props.onError("INVALID_TYPE");
    }.bind(this)

    video.src = readFile.target.result;
  }
}.bind(this);

fileReader.onerror = function(){
  this.props.onError("READING_ERROR");
}.bind(this)

fileReader.readAsDataURL(file); }

Ich konnte nicht fügen Sie alle Dateien, die während der Simulation die Schaltfläche "hochladen", ich bin verwirrt, wie zu schreiben, der test für dieses Szenario. Jemand kam über diese Art von Szenarien? Ich wäre dankbar für alle sorta hilft.

it('testing attachfile change function...',()=>{
 const wrapper=shallow(<AttachFile />);
 wrapper.find('FileInput').simulate('change');
 console.log(wrapper.debug());
 });

Als ich versuchte, den obigen test habe ich die folgenden Fehler

TypeError: Cannot read property 'target' of undefined
  at [object Object].fileInputOnChange (js/components/home/chats/AttachFile.react.js:11:16)
  at node_modules/enzyme/build/ShallowWrapper.js:768:23
  at ReactDefaultBatchingStrategyTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:138:20)
  at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules/react/lib/ReactDefaultBatchingStrategy.js:63:19)
  at batchedUpdates (node_modules/react/lib/ReactUpdates.js:98:20)
  at node_modules/enzyme/build/ShallowWrapper.js:767:45
  at withSetStateAllowed (node_modules/enzyme/build/Utils.js:196:3)
  at ShallowWrapper.simulate    (node_modules/enzyme/build/ShallowWrapper.js:764:42)
  at Context.<anonymous> (test/sample.js:40:27)
  • habe keine Lösung zu simulieren ändern???
InformationsquelleAutor Thomas John | 2016-09-26
Schreibe einen Kommentar