¿Cómo escribo la prueba de FileReader en Jasmine?

Es fundamental interpretar el código bien previamente a adaptarlo a tu trabajo y si tquieres aportar algo puedes dejarlo en la sección de comentarios.

Solución:

El problema aquí es el uso de reader.onload que es difícil de probar. podrías usar reader.addEventListener en cambio, para que pueda espiar el objeto FileReader global y devolver un simulacro:

eventListener = jasmine.createSpy();
spyOn(window, "FileReader").andReturn(
 addEventListener: eventListener
)

entonces puede activar la devolución de llamada onload usted mismo:

expect(eventListener.mostRecentCall.args[0]).toEqual('load');
eventListener.mostRecentCall.args[1](
  target:
    result:'the result you wanna test'
  
)

Esta sintaxis cambió en 2.0. El siguiente código da un ejemplo basado en la respuesta de Andreas Köberle pero usando la nueva sintaxis

    // create a mock object, its a function with some inspection methods attached
    var eventListener = jasmine.createSpy();

    // this is going to be returned when FileReader is instantiated
    var dummyFileReader =  addEventListener: eventListener ;

    // pipe the dummy FileReader to the application when FileReader is called on window
    // this works because window.FileReader() is equivalent to new FileReader()
    spyOn(window, "FileReader").and.returnValue(dummyFileReader)

    // your application will do something like this ..
    var reader = new FileReader();

    // .. and attach the onload event handler
    reader.addEventListener('load', function(e) 

        // obviously this wouldnt be in your app - but it demonstrates that this is the 
        // function called by the last line - onloadHandler(event);
        expect(e.target.result).toEqual('url');

        // jasmine async callback
        done();
    );

    // if addEventListener was called on the spy then mostRecent() will be an object. 
    // if not it will be null so careful with that. the args array contains the 
    // arguments that addEventListener was called with. in our case arg[0] is the event name ..
    expect(eventListener.calls.mostRecent().args[0]).toEqual('load');

    // .. and arg[1] is the event handler function
    var onloadHandler = eventListener.calls.mostRecent().args[1];

    // which means we can make a dummy event object .. 
    var event =  target :  result : 'url'  ;

    // .. and call the applications event handler with our test data as if the user had 
    // chosen a file via the picker
    onloadHandler(event);

También enfrenté un problema similar y pude lograrlo sin usar addeventlistener. Había usado onloadend, así que a continuación se muestra lo que hice. Mi archivo ts tenía el siguiente código: –

    let reader = new FileReader();
    reader.onloadend = function() 
                let dataUrl = reader.result;
                // Some working here
            ;
    reader.readAsDataURL(blob);

Código de caso de mi archivo de especificaciones (prueba): –

 let mockFileReader = 
            result:'',
            readAsDataURL:(blobInput)=> 
                console.log('readAsDataURL');
            ,
            onloadend:()=> 
                console.log('onloadend');
            
        ;

    spyOn(window, 'FileReader').and.returnValue(mockFileReader);
    spyOn(mockFileReader, 'readAsDataURL').and.callFake((blobInput)=> 
        // debug your running application and assign to "encodedString" whatever 
        //value comes actually after using readAsDataURL for e.g. 
        //"data:*/*;base64,XoteIKsldk......"
        mockFileReader.result = encodedString;
        mockFileReader.onloadend();
    );

De esta manera, se burló del objeto FileReader y devolvió una llamada falsa a su propio “readAsDataURL”. Y, por lo tanto, ahora, cuando su código real llama “reasAsDataURL”, se llama a su función falsa en la que está asignando un codificado string en “resultado” y llamando a la función “onloadend” a la que ya había asignado una funcionalidad en su archivo de código (.ts). Y por lo tanto, se llama con el resultado esperado. Espero eso ayude.

Agradecemos que desees añadir valor a nuestro contenido cooperando tu experiencia en las aclaraciones.

---

---

Utiliza Nuestro Buscador