web-dev-qa-db-ja.com

javascriptでファイルをモックする方法は？

TDDスキルを発揮するための小さなプロジェクトを開発しています。このプロジェクトは、プレイリスト内のファイルをドラッグアンドドロップする機能を備えたオーディオプレーヤーで構成されています。 Jasmineをテストフレームワークとして使用しています。私が直面した問題は、ファイルのアップロード機能をテストするためにJavaScriptファイルをモックできないことです。私はこのようなファイルを作成しようとしました：

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

しかし、Chromeは手動でファイルを作成することはできません。ファイルのコンストラクタは使用するのは違法です。このような小さなテストプロジェクトのサーバー側この問題の回避策はありますか？

javascripthtml5unit-testingtddjasmine
30
Eriendel

Chromeでは、新しいファイルを作成できます。

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

ただし、IE11（および他のブラウザー？）はサポートしません。

これが私の（貧しい？）偽のファイルです：

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

必要に応じて値を入力できます。必要なものでブロブを埋めることができます。 （画像の使用方法については、他の回答を参照してください）。

IE11、Chrome、Firefoxでこれをテストしました。これまでのところ、少なくとも単体テストの目的で動作しているようです。

おまけ：TypeScriptにあります：

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

let fakeF = <File>blob;
47
Chris Weber

Blobを作成する必要はありません。 do this を使用すると、本物の画像文字列を直接適用できます（ this converter を使用しました）。または、以下の例を実行できます。 （有効な画像を実際に気にしない場合]）：

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;

btoa 関数は、文字列からbase64を作成するだけです。

1
SamMorrowDrums