fix(fetch-http-handler): handle empty blob in browsers (#1199)

* fix(fetch-http-handler): handle empty blob in browsers

* test: add test for handling null FileReader result

* chore: rename karma tests to *.browser.spec.ts

Author: AllanZhengYP

packages/fetch-http-handler/jest.config.js

@@ -2,5 +2,5 @@ const base = require("../../jest.config.base.js");
 
 module.exports = {
   ...base,
-  testPathIgnorePatterns: ["/node_modules/", "stream-collector.spec.js"]
+  testPathIgnorePatterns: ["/node_modules/", "(.*).browser.spec.js"]
 };

packages/fetch-http-handler/karma.conf.js

@@ -2,7 +2,7 @@ process.env.CHROME_BIN = require("puppeteer").executablePath();
 module.exports = function (config) {
   config.set({
     frameworks: ["jasmine", "karma-typescript"],
-    files: ["src/stream-collector*.ts"],
+    files: ["src/stream-collector.ts", "src/stream-collector.browser.spec.ts"],
     exclude: ["**/*.d.ts"],
     preprocessors: {
       "**/*.ts": "karma-typescript"

packages/fetch-http-handler/src/stream-collector.browser.spec.ts

@@ -0,0 +1,44 @@
+import { streamCollector } from "./stream-collector";
+
+describe("streamCollector", () => {
+  it("returns a Uint8Array from a blob", done => {
+    const expected = Uint8Array.from([102, 111, 111]);
+    const dataPromise = new Response(expected.buffer)
+      .blob()
+      .then(blob => streamCollector(blob));
+    dataPromise.then((data: any) => {
+      expect(data).toEqual(expected);
+      done();
+    });
+  });
+
+  it("returns a Uint8Array from a ReadableStream", done => {
+    const expected = Uint8Array.from([102, 111, 111]);
+    const dataPromise = streamCollector(new Response(expected.buffer).body);
+    dataPromise.then((data: any) => {
+      expect(data).toEqual(expected);
+      done();
+    });
+  });
+
+  it("returns a Uint8Array when stream is empty", done => {
+    const expected = new Uint8Array(0);
+    const dataPromise = streamCollector(new Response(expected.buffer).body);
+    dataPromise.then((data: any) => {
+      expect(data).toEqual(expected);
+      done();
+    });
+  });
+
+  it("returns a Uint8Array when blob is empty", done => {
+    const expected = new Uint8Array(0);
+
+    const dataPromise = new Response(expected.buffer)
+      .blob()
+      .then(blob => streamCollector(blob));
+    dataPromise.then((data: any) => {
+      expect(data).toEqual(expected);
+      done();
+    });
+  });
+});

packages/fetch-http-handler/src/stream-collector.spec.ts

@@ -1,31 +1,35 @@
 import { streamCollector } from "./stream-collector";
 
+/**
+ * Have to mock the FileReader behavior in IE, where
+ * reader.result is null if reads an empty blob.
+ */
 describe("streamCollector", () => {
-  it("returns a Uint8Array from a blob", done => {
-    const dataPromise = new Response(new Uint8Array([102, 111, 111]).buffer)
-      .blob()
-      .then(blob => streamCollector(blob));
-    dataPromise.then((data: any) => {
-      expect(data).toEqual(Uint8Array.from([102, 111, 111]));
-      done();
-    });
+  let originalFileReader = (global as any).FileReader;
+  let originalBlob = (global as any).Blob;
+  beforeAll(() => {
+    originalFileReader = (global as any).FileReader;
+    originalBlob = (global as any).Blob;
   });
-
-  it("returns a Uint8Array from a ReadableStream", done => {
-    const dataPromise = streamCollector(
-      new Response(new Uint8Array([102, 111, 111]).buffer).body
-    );
-    dataPromise.then((data: any) => {
-      expect(data).toEqual(Uint8Array.from([102, 111, 111]));
-      done();
-    });
+  afterAll(() => {
+    (global as any).FileReader = originalFileReader;
+    (global as any).Blob = originalBlob;
   });
 
-  it("returns a Uint8Array when stream is empty", done => {
-    const expected = new Uint8Array(0);
-    const dataPromise = streamCollector(new Response(expected.buffer).body);
+  it("returns a Uint8Array when blob is empty and when FileReader data is null(in IE)", done => {
+    (global as any).FileReader = function FileReader() {
+      this.result = null; //In IE, FileReader.result is null after reading empty blob
+      this.readAsDataURL = jest.fn().mockImplementation(() => {
+        if (this.onloadend) {
+          this.readyState = 2;
+          this.onloadend();
+        }
+      });
+    };
+    (global as any).Blob = function Blob() {};
+    const dataPromise = streamCollector(new Blob());
     dataPromise.then((data: any) => {
-      expect(data).toEqual(expected);
+      expect(data).toEqual(Uint8Array.from([]));
       done();
     });
   });

packages/fetch-http-handler/src/stream-collector.ts

@@ -44,8 +44,11 @@ function readToBase64(blob: Blob): Promise<string> {
       if (reader.readyState !== 2) {
         return reject(new Error("Reader aborted too early"));
       }
-      const result = reader.result as string;
-      const dataOffset = result.indexOf(",") + 1;
+      const result = (reader.result ?? "") as string;
+      // Response can include only 'data:' for empty blob, return empty string in this case.
+      // Otherwise, return the string after ','
+      const commaIndex = result.indexOf(",");
+      const dataOffset = commaIndex > -1 ? commaIndex + 1 : result.length;
       resolve(result.substring(dataOffset));
     };
     reader.onabort = () => reject(new Error("Read aborted"));