fix(util): Discontinue using Blob for JSON

Blobs obscure the JSON in Chrome dev tools, etc., and so we will stop using them for JSON.

Closes #90

src/http-client.js

@@ -43,6 +43,11 @@ export class HttpClient {
     if (typeof fetch === 'undefined') {
       throw new Error('HttpClient requires a Fetch API implementation, but the current environment doesn\'t support it. You may need to load a polyfill such as https://github.com/github/fetch');
     }
+
+    // Use application/json as the default content-type.
+    this.defaults = {
+      headers: { 'content-type': 'application/json' }
+    };
   }
 
   /**

src/util.js

@@ -1,11 +1,10 @@
 /**
-* Create a Blob containing JSON-serialized data.
-* Useful for easily creating JSON fetch request bodies.
+* Serialize an object to JSON. Useful for easily creating JSON fetch request bodies.
 *
 * @param body The object to be serialized to JSON.
 * @param replacer The JSON.stringify replacer used when serializing.
-* @returns A Blob containing the JSON serialized body.
+* @returns A JSON string.
 */
-export function json(body: any, replacer?: any): Blob {
-  return new Blob([JSON.stringify((body !== undefined ? body : {}), replacer)], { type: 'application/json' });
+export function json(body: any, replacer?: any): string {
+  return JSON.stringify((body !== undefined ? body : {}), replacer);
 }

test/http-client.spec.js

@@ -1,4 +1,5 @@
 import 'aurelia-polyfills';
+import {json} from '../src/util';
 import {HttpClient} from '../src/http-client';
 import {HttpClientConfiguration} from '../src/http-client-configuration';
 
@@ -101,6 +102,52 @@ describe('HttpClient', () => {
         });
     });
 
+    it('makes proper requests with json() inputs', (done) => {
+      fetch.and.returnValue(emptyResponse(200));
+
+      client
+        .fetch('http://example.com/some/cool/path', {
+          method: 'post',
+          body: json({ test: 'object' })
+        })
+        .then(result => {
+          expect(result.ok).toBe(true);
+        })
+        .catch(result => {
+          expect(result).not.toBe(result);
+        })
+        .then(() => {
+          expect(fetch).toHaveBeenCalled();
+          let [request] = fetch.calls.first().args;
+          expect(request.headers.has('content-type')).toBe(true);
+          expect(request.headers.get('content-type')).toMatch(/application\/json/);
+          done();
+        });
+    });
+
+    it('makes proper requests with JSON.stringify inputs', (done) => {
+      fetch.and.returnValue(emptyResponse(200));
+
+      client
+        .fetch('http://example.com/some/cool/path', {
+          method: 'post',
+          body: JSON.stringify({ test: 'object' })
+        })
+        .then(result => {
+          expect(result.ok).toBe(true);
+        })
+        .catch(result => {
+          expect(result).not.toBe(result);
+        })
+        .then(() => {
+          expect(fetch).toHaveBeenCalled();
+          let [request] = fetch.calls.first().args;
+          expect(request.headers.has('content-type')).toBe(true);
+          expect(request.headers.get('content-type')).toMatch(/application\/json/);
+          done();
+        });
+    });
+
     it('makes requests with null RequestInit', (done) => {
       fetch.and.returnValue(emptyResponse(200));
 

test/util.spec.js

@@ -1,21 +1,11 @@
-import 'aurelia-polyfills';
 import {json} from '../src/util';
 
 describe('util', () => {
   describe('json', () => {
-    it('creates JSON blobs', (done) => {
+    it('returns valid JSON', () => {
       let data = { test: 'data' };
-      let blob = json(data);
-
-      expect(blob.type).toEqual('application/json');
-
-      let reader = new FileReader();
-      reader.addEventListener('loadend', () => {
-        expect(JSON.parse(reader.result)).toEqual(data);
-        done();
-      });
-
-      reader.readAsText(blob);
+      let result = JSON.parse(json(data));
+      expect(data).toEqual(result);
     });
   });
 });