web-dev-qa-db-fra.com

Comment se moquer du fichier en javascript?

Je développe un petit projet pour exercer mes compétences TDD. Le projet consiste en un lecteur audio qui a la capacité de glisser-déposer des fichiers dans une liste de lecture. J'utilise Jasmine comme cadre de test. Le problème que j'ai rencontré est que je ne peux pas me moquer des fichiers javascript pour tester ma fonctionnalité de téléchargement de fichiers. J'ai essayé de créer un fichier comme celui-ci:

new File(new Blob(), "name");

mais Chrome ne permet pas de créer des fichiers manuellement. Le constructeur du fichier est illégal à utiliser. J'ai trouvé une solution avec grunt.js qui consiste à renvoyer des fichiers depuis grunt, mais je ne veux pas vraiment utiliser côté serveur pour un si petit projet de test. Existe-t-il une solution à ce problème?

javascripthtmlunit-testingtddjasmine
33
Eriendel

Chrome vous permettra de créer un nouveau fichier:

var f = new File([""], "filename", { type: 'text/html' });

Cependant, IE11 (et les autres navigateurs?) Ne le seront pas.

Voici mon (pauvre?) Faux fichier:

var blob = new Blob([""], { type: 'text/html' });
blob["lastModifiedDate"] = "";
blob["name"] = "filename";
var fakeF = blob;

Vous pouvez remplir les valeurs comme bon vous semble. Vous pouvez remplir le blob avec tout ce dont vous avez besoin. (Voir l'autre réponse pour savoir comment utiliser une image).

J'ai testé cela dans IE11, Chrome et Firefox. Jusqu'à présent, il semble que je travaille, au moins à des fins de test unitaire.

Bonus: le voici en TypeScript:

let blob = new Blob([""], { type: 'text/html' });
blob["lastModifiedDate"] = "";
blob["name"] = "filename";

let fakeF = <File>blob;
47
Chris Weber

Vous n'avez pas besoin de créer un blob, vous pouvez faire cela qui applique directement la chaîne d'image authentique (j'ai utilisé ce convertisseur ), ou vous pouvez suivre l'exemple ci-dessous (si vous ne vous souciez pas d'avoir une image valide]):

html <img id="test" />

var img = window.btoa('I don't care about a broken image');
document.getElementById('test').src='data:image/png;base64,'+img;

La fonction btoa consiste simplement à créer base64 à partir d'une chaîne.

1
SamMorrowDrums