Merge pull request #3 from improbable-eng/feature/more-browsers

Added IE9, Opera and additional platforms

Author: MarcusLongmuir

README.md

@@ -17,7 +17,7 @@ $ npm install browser-headers
 ```
 
 ## Browser Support
-This library is tested against IE 10, Safari, Firefox and Chrome.  It relies on browser support for [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray), [TextDecoder](https://developer.mozilla.org/en-US/docs/Web/API/TextEncoder) and [TextDecoder](https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder) Browser APIs; for legacy environments such as Safari and IE10, you will need to supply one or more of the polyfills listed below:
+This library is tested against Chrome, Safari, Firefox, Edge, IE 10 and IE 8.
 
 ## API
 
@@ -33,7 +33,7 @@ headers.forEach((key, values) => {
   console.log(key, values);
 });
 
-// Outputs:
+// Output:
 // "content-type", ["application/json"]
 // "my-header", ["value-one","value-two"]
 ```
@@ -45,6 +45,12 @@ The `BrowserHeaders` class can be constructed from one of:
 * An object consisting of `string->(string|string[])` (e.g. `{"key-a":["one","two"],"key-b":"three"}`) 
 * A `Map<string, string|string[]>`
 
+The constructor takes an additional optional `options` parameter of `{ splitValues: boolean = false }`, where 
+`splitValues` defines whether the header values should be split by comma (`,`) into separate strings - this is useful 
+to unify the `.append` functionality of `Headers` implementations (see the warning at the end of this README). 
+`splitValues` should be used with caution and defaults to `false` because it might split what is actually a single 
+logical value that contained a `,`.
+
 The `BrowserHeaders` class has the following methods:
 
 #### .get(key: string): string[]
@@ -72,4 +78,30 @@ Otherwise:
     Returns true if the `key` has at least one value.
 
 #### .appendFromString(str: string): void
-Appends the headers defined in the provided CLRF-delimited string (e.g. `key-a: one\r\nkey-b: two`)
+Appends the headers defined in the provided CLRF-delimited string (e.g. `key-a: one\r\nkey-b: two`)
+
+## Warning about .append in native `Headers`
+The `.append` function of the `Headers` class differs significantly between browsers.
+
+Some browsers concatenate the values with `, ` or just `,` and others actually maintain the individual values such that
+they can return later return an array. There is a constructor option 
+```js
+const headers = new Headers();
+headers.append("key-A", "one");
+headers.append("key-A", "two");
+const keyA = headers.get("key-A"); // or .getAll depending on the browser 
+console.log(typeof keyA);
+console.log(keyA);
+
+// Output in Edge 14:
+// string
+// one, two
+
+// Output in Safari 10:
+// string
+// one,two
+
+// Output in Chrome 56:
+// object
+// ["one", "two"]
+```

karma.conf.js

@@ -6,26 +6,55 @@ module.exports = function(config) {
   // Browsers to run on Sauce Labs
   // Check out https://saucelabs.com/platforms for all browser/OS combos
   var customLaunchers = {
-    'SL_Safari': {
+    'SL_Safari_Latest': {
       base: 'SauceLabs',
       browserName: 'safari',
       platform: 'OS X 10.11'
     },
-    'SL_Chrome': {
+    'SL_Safari_8': {
+      base: 'SauceLabs',
+      browserName: 'safari',
+      platform: 'OS X 10.10',
+      version: '8',
+    },
+    'SL_Chrome_Latest': {
       base: 'SauceLabs',
       browserName: 'chrome',
       platform: 'linux'
     },
-    'SL_Firefox': {
+    'SL_Chrome_48': {
+      base: 'SauceLabs',
+      browserName: 'chrome',
+      platform: 'OS X 10.10',
+      version: '48',
+    },
+    'SL_Firefox_Latest': {
       base: 'SauceLabs',
       browserName: 'firefox',
       platform: 'linux'
     },
-    'SL_IE10': {
+    'SL_Opera_12': {
+      base: 'SauceLabs',
+      browserName: 'opera',
+      platform: 'Windows 7',
+      version: '12'
+    },
+    'SL_Edge': {
+      base: 'SauceLabs',
+      browserName: 'microsoftedge',
+      platform: 'Windows 10'
+    },
+    'SL_IE_10': {
       base: 'SauceLabs',
       browserName: 'internet explorer',
       platform: 'Windows 7',
       version: '10'
+    },
+    'SL_IE_9': {
+      base: 'SauceLabs',
+      browserName: 'internet explorer',
+      platform: 'Windows 7',
+      version: '9'
     }
   };
 
@@ -38,7 +67,7 @@ module.exports = function(config) {
     reporters.push('saucelabs');
     Array.prototype.push.apply(browsers, Object.keys(customLaunchers));
     singlerun = true;
-    concurrency = 1;
+    concurrency = 4;
   }
 
   config.set({

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "main": "lib/index.js",
   "repository": "https://github.com/improbable-eng/js-browser-headers",
-  "license": "MIT",
+  "license": "Apache-2.0",
   "keywords": [
     "headers",
     "fetch"
@@ -28,7 +28,6 @@
     "jasmine": "^2.4.1",
     "jasmine-core": "^2.4.1",
     "karma": "^1.2.0",
-    "karma-chrome-launcher": "^1.0.1",
     "karma-jasmine": "^1.0.2",
     "karma-sauce-launcher": "^1.0.0",
     "tslint": "^4.4.2",

src/BrowserHeaders.ts

@@ -8,6 +8,7 @@ export declare interface WindowHeaders {
   delete(key: string): void;
   keys(): any;
   entries(): any;
+  forEach(callback: (value: string, key: string) => void): any;
   append(key: string, value: string): void;
   set(key: string, value: string): void;
   [Symbol.iterator]: () => Iterator<string>,
@@ -24,7 +25,12 @@ function getHeaderValues(headers: WindowHeaders, key: string): string[] {
   }
 
   // There is no getAll() function so get *should* return an array
-  return headers.get(key);
+  const getValue = headers.get(key);
+  if (getValue && typeof getValue === "string") {
+    // some .get() implementations return a string even though they don't have a .getAll() - notably Microsoft Edge
+    return [getValue];
+  }
+  return getValue;
 }
 
 // getHeaderKeys returns an array of keys in a headers instance
@@ -40,8 +46,16 @@ function getHeaderKeys(headers: WindowHeaders): string[] {
         keys.push(key);
       }
     }
+  } else if (headers.forEach) {
+    headers.forEach((_, key) => {
+      if (!asMap[key]) {
+        // Only add the key if it hasn't been added already
+        asMap[key] = true;
+        keys.push(key);
+      }
+    });
   } else {
-    // If keys() isn't available then fallback to iterating through headers
+    // If keys() and forEach() aren't available then fallback to iterating through headers
     for (let entry of headers) {
       const key = entry[0];
       if (!asMap[key]) {
@@ -54,14 +68,25 @@ function getHeaderKeys(headers: WindowHeaders): string[] {
   return keys;
 }
 
+function splitHeaderValue(str: string) {
+  const values = [];
+  const commaSpaceValues = value.split(", ");
+  commaSpaceValues.forEach(commaSpaceValue => {
+    commaSpaceValue.split(",").forEach(commaValue => {
+      values.push(commaValue);
+    });
+  });
+  return values;
+}
+
 export type HeaderObject = {[key: string]: string|string[]};
 export type HeaderMap = Map<string,string|string[]>;
 
 // BrowserHeaders is a wrapper class for Headers
 export default class BrowserHeaders {
   keyValueMap: {[key: string]: string[]};
 
-  constructor(init?: HeaderObject | HeaderMap | BrowserHeaders | WindowHeaders | string) {
+  constructor(init: HeaderObject | HeaderMap | BrowserHeaders | WindowHeaders | string = "", options: {splitValues: boolean} = { splitValues: false } ) {
     this.keyValueMap = {};
 
     if (init) {
@@ -70,7 +95,11 @@ export default class BrowserHeaders {
         keys.forEach(key => {
           const values = getHeaderValues(init as WindowHeaders, key);
           values.forEach(value => {
-            this.append(key, value)
+            if (options.splitValues) {
+              this.append(key, splitHeaderValue(value));
+            } else {
+              this.append(key, value);
+            }
           });
         });
       } else if (init instanceof BrowserHeaders) {

test/BrowserHeaders.spec.ts

@@ -196,13 +196,45 @@ describe("browser-headers", () => {
   // Can only test the Headers compatibility if there is a Headers class in this browser
   if (typeof Headers !== "undefined") {
     describe("Headers-compatibility", () => {
-      it("should construct a BrowserHeaders from a Headers instance", () => {
+      it("should construct a BrowserHeaders from a Headers instance and not split the values by default", () => {
         const headers = new Headers();
-        headers.append("keyA", "one");
-        headers.append("keyA", "Two");
+        headers.append("keyA", "one, Two");
         headers.append("keyB", "three");
 
         const browserHeaders = new BrowserHeaders(headers);
+        deepEqual(browserHeaders.get("keyA"), ["one, Two"]);
+        deepEqual(browserHeaders.get("keyB"), ["three"]);
+      });
+
+      it("should construct a BrowserHeaders from a Headers instance and split the values if specified (comma)", () => {
+        const headers = new Headers();
+        headers.append("keyA", "one,Two");
+        headers.append("keyB", "three");
+
+        const browserHeaders = new BrowserHeaders(headers, {splitValues: true});
+        deepEqual(browserHeaders.get("keyA"), ["one", "Two"]);
+        deepEqual(browserHeaders.get("keyB"), ["three"]);
+      });
+
+      it("should construct a BrowserHeaders from a Headers instance and split the values if specified (comma + space)", () => {
+        const headers = new Headers();
+        headers.append("keyA", "one, Two");
+        headers.append("keyB", "three");
+
+        const browserHeaders = new BrowserHeaders(headers, {splitValues: true});
+        deepEqual(browserHeaders.get("keyA"), ["one", "Two"]);
+        deepEqual(browserHeaders.get("keyB"), ["three"]);
+      });
+
+      /* This test uses separate append calls for `keyA`, which in some browsers joins the strings with a comma. By
+       setting splitValues to true, this test checks that this browser-specific detail can be abstracted. */
+      it("should construct a BrowserHeaders from a Headers instance and split the values if specified - separate appends", () => {
+        const headers = new Headers();
+        headers.append("keyA", "one");
+        headers.append("keya", "Two");
+        headers.append("keyB", "three");
+
+        const browserHeaders = new BrowserHeaders(headers, {splitValues: true});
         deepEqual(browserHeaders.get("keyA"), ["one", "Two"]);
         deepEqual(browserHeaders.get("keyB"), ["three"]);
       });