Wie man Datei in Javascript verspottet?

Ich entwickle ein kleines Projekt, um meine TDD-Fähigkeiten zu trainieren. Das Projekt besteht aus einem Audioplayer, der Dateien per Drag’n’Drop in eine Playlist ziehen kann. Ich verwende Jasmine als Testframework. Das Problem, mit dem ich konfrontiert war, ist, dass ich keine Javascript-Dateien simulieren kann, um meine Datei-Upload-Funktionalität zu testen. Ich habe versucht, eine Datei wie folgt zu erstellen:

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

aber Chrome erlaubt keine manuelle Erstellung von Dateien. Der Konstruktor der Datei darf nicht verwendet werden. Ich habe mit grunt.js eine Lösung gefunden, die darin besteht, einige Dateien von grunt zurückzugeben, aber ich möchte nicht wirklich serverseitig für ein so kleines Testprojekt verwenden. Gibt es eine Problemumgehung für dieses Problem?

Mit Chrome können Sie eine neue Datei erstellen:

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

IE11 (und andere Browser?) werden dies jedoch nicht tun.

Hier ist meine (arme?) gefälschte Datei:

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

Sie können die Werte nach Belieben eingeben. Sie können den Blob mit allem füllen, was Sie brauchen. (Siehe die andere Antwort zur Verwendung eines Bildes).

Ich habe dies in IE11, Chrome und Firefox getestet. Bisher scheint es zu funktionieren, zumindest für meine Unit-Testzwecke.

Bonus: Hier ist es in Maschinenschrift:

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

let fakeF = <File>blob;

So erstelle ich eine Dummy-PDF-Datei zur Verwendung pdf.js

1. Erstellen Sie einen base64-String Ihrer Datei. ich benutze base64 Befehl in meiner Shell.

   base64 < src/mockData/dummy.pdf
   #outputs something like: VEhJUyBJUyBUSEUgQU5TV0VSCg==
   

2. Kopieren Sie diese Zeichenfolge in Ihren Quellcode.

   const dataBase64 = "VEhJUyBJUyBUSEUgQU5TV0VSCg==";
   //note this not a pdf, but for demo purposes because a pdf file is too big
   

3. Decodieren Sie das base64 und erstellen Sie eine Datei

   const arrayBuffer = Uint8Array.from(window.atob(dataBase64), c => c.charCodeAt(0));
   const file = new File([arrayBuffer], "dummy.pdf", {type: 'application/pdf'});
   

Sie müssen keinen Blob erstellen, das können Sie mach das was die echte Bildzeichenfolge direkt anwendet (ich habe verwendet dieser Konverter), oder Sie können dem folgenden Beispiel folgen (wenn es Ihnen eigentlich egal ist, ein gültiges Bild zu haben]):

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;

Das btoa Die Funktion besteht nur darin, base64 aus einer Zeichenfolge zu erstellen.

Um den arrayBuffer zum Laufen zu bringen, habe ich ihn in meinen Tests so vorgetäuscht:

class File extends Blob {
  name: string
  constructor(a: any, name: string) {
    super(a)
    this.name = name
  }
}

// @ts-ignore
globalThis.File = File