Merge pull request #51 from github/accept

Allow setting custom Accept header for requests

Author: muan

include-fragment-element.js

@@ -37,6 +37,10 @@ function getData(el) {
   }
 }
 
+function isWildcard(accept) {
+  return accept && !!accept.split(',').find(x => x.match(/^\s*\*\/\*/))
+}
+
 export default class IncludeFragmentElement extends HTMLElement {
   constructor() {
     super()
@@ -58,11 +62,15 @@ export default class IncludeFragmentElement extends HTMLElement {
   }
 
   set src(val) {
-    if (val) {
-      this.setAttribute('src', val)
-    } else {
-      this.removeAttribute('src')
-    }
+    this.setAttribute('src', val)
+  }
+
+  get accept() {
+    return this.getAttribute('accept')
+  }
+
+  set accept(val) {
+    this.setAttribute('accept', val)
   }
 
   get data() {
@@ -99,7 +107,7 @@ export default class IncludeFragmentElement extends HTMLElement {
       method: 'GET',
       credentials: 'same-origin',
       headers: {
-        Accept: 'text/html'
+        Accept: this.accept || 'text/html'
       }
     })
   }
@@ -115,8 +123,8 @@ export default class IncludeFragmentElement extends HTMLElement {
           throw new Error(`Failed to load resource: the server responded with a status of ${response.status}`)
         }
         const ct = response.headers.get('Content-Type')
-        if (!ct || !ct.match(/^text\/html/)) {
-          throw new Error(`Failed to load resource: expected text/html but was ${ct}`)
+        if (!isWildcard(this.accept) && (!ct || !ct.match(this.accept ? this.accept : /^text\/html/))) {
+          throw new Error(`Failed to load resource: expected ${this.accept || 'text/html'} but was ${ct}`)
         }
         return response
       })

include-fragment-element.js.flow

@@ -5,6 +5,8 @@ declare module '@github/include-fragment-element' {
     get data(): Promise<string>;
     get src(): string;
     set src(url: string): void;
+    get accept(): string;
+    set accept(accept: string): void;
     fetch(request: Request): Promise<Response>;
   }
 }

index.d.ts

@@ -1,6 +1,7 @@
 export default class IncludeFragmentElement extends HTMLElement {
   readonly data: Promise<string>;
   src: string;
+  accept: string;
   fetch(request: Request): Promise<Response>;
 }
 

test/test.js

@@ -39,6 +39,28 @@ const responses = {
         'Content-Type': 'text/html'
       }
     })
+  },
+  '/fragment': function(request) {
+    if (request.headers.get('Accept') === 'text/html; fragment') {
+      return new Response('<div id="fragment">fragment</div>', {
+        status: 200,
+        headers: {
+          'Content-Type': 'text/html; fragment'
+        }
+      })
+    } else {
+      return new Response('406', {
+        status: 406
+      })
+    }
+  },
+  '/test.js': function() {
+    return new Response('alert("what")', {
+      status: 200,
+      headers: {
+        'Content-Type': 'text/javascript'
+      }
+    })
   }
 }
 
@@ -159,6 +181,49 @@ suite('include-fragment-element', function() {
       })
   })
 
+  test('throws on incorrect Content-Type', function() {
+    const el = document.createElement('include-fragment')
+    el.setAttribute('src', '/test.js')
+
+    return el.data.then(
+      () => {
+        assert.ok(false)
+      },
+      error => {
+        assert.match(error, /expected text\/html but was text\/javascript/)
+      }
+    )
+  })
+
+  test('throws on non-matching Content-Type', function() {
+    const el = document.createElement('include-fragment')
+    el.setAttribute('accept', 'text/html; fragment')
+    el.setAttribute('src', '/hello')
+
+    return el.data.then(
+      () => {
+        assert.ok(false)
+      },
+      error => {
+        assert.match(error, /expected text\/html; fragment but was text\/html; charset=utf-8/)
+      }
+    )
+  })
+
+  test('throws on 406', function() {
+    const el = document.createElement('include-fragment')
+    el.setAttribute('src', '/fragment')
+
+    return el.data.then(
+      () => {
+        assert.ok(false)
+      },
+      error => {
+        assert.match(error, /the server responded with a status of 406/)
+      }
+    )
+  })
+
   test('data is not writable', function() {
     const el = document.createElement('include-fragment')
     assert.ok(el.data !== 42)
@@ -231,6 +296,28 @@ suite('include-fragment-element', function() {
     })
   })
 
+  test('replaces with response with accept header for any', function() {
+    const div = document.createElement('div')
+    div.innerHTML = '<include-fragment src="/test.js" accept="*/*">loading</include-fragment>'
+    document.body.appendChild(div)
+
+    return when(div.firstChild, 'load').then(() => {
+      assert.equal(document.querySelector('include-fragment'), null)
+      assert.match(document.body.textContent, /alert\("what"\)/)
+    })
+  })
+
+  test('replaces with response with the right accept header', function() {
+    const div = document.createElement('div')
+    div.innerHTML = '<include-fragment src="/fragment" accept="text/html; fragment">loading</include-fragment>'
+    document.body.appendChild(div)
+
+    return when(div.firstChild, 'load').then(() => {
+      assert.equal(document.querySelector('include-fragment'), null)
+      assert.equal(document.querySelector('#fragment').textContent, 'fragment')
+    })
+  })
+
   test('error event is not cancelable or bubbles', function() {
     const div = document.createElement('div')
     div.innerHTML = '<include-fragment src="/boom">loading</include-fragment>'
@@ -262,6 +349,16 @@ suite('include-fragment-element', function() {
     )
   })
 
+  test('adds is-error class on incorrect Content-Type', function() {
+    const div = document.createElement('div')
+    div.innerHTML = '<include-fragment src="/fragment">loading</include-fragment>'
+    document.body.appendChild(div)
+
+    return when(div.firstChild, 'error').then(() =>
+      assert.ok(document.querySelector('include-fragment').classList.contains('is-error'))
+    )
+  })
+
   test('replaces element when src attribute is changed', function() {
     const elem = document.createElement('include-fragment')
     document.body.appendChild(elem)