From 79b511614ac979ed588a8a1380f2e318cfcb4117 Mon Sep 17 00:00:00 2001
From: Dirk Grappendorf <dirk.grappendorf@telcat.de>
Date: Mon, 22 Jun 2015 15:31:52 +0200
Subject: [PATCH] feat: Upgrade to Polymer 1.0

---
 Gruntfile.js                      |  69 ++++++---
 README.md                         |   2 +-
 bower.json                        |  11 +-
 grapp-rest-resource.html          | 241 +++++++++++++++++-------------
 index.html                        |  18 +--
 package.json                      |  29 ++--
 src/grapp-rest-resource.coffee    | 131 +++++++++-------
 src/grapp-rest-resource.html      |   9 +-
 test/basic.html                   |   8 +-
 example.json => test/example.json |   0
 test/headers.html                 |  12 +-
 11 files changed, 300 insertions(+), 230 deletions(-)
 rename example.json => test/example.json (100%)

diff --git a/Gruntfile.js b/Gruntfile.js
index 72e2866..4331e6b 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,13 +1,5 @@
 module.exports = function(grunt) {
 
-  var mapDotDotUrlToLib = function(req, res, next) {
-    var url_parts = req.url.split('/');
-    if (url_parts.length > 2 && ['lib', 'test'].indexOf(url_parts[1]) == -1) {
-      req.url = '/lib' + req.url;
-    }
-    return next();
-  };
-
   grunt.initConfig({
     pkg: grunt.file.readJSON('bower.json'),
 
@@ -44,7 +36,10 @@ module.exports = function(grunt) {
     },
 
     coffeelint: {
-      src: ['src/*.coffee']
+      src: ['src/*.coffee'],
+      options: {
+        max_line_length: { level: 'ignore' }
+      }
     },
 
     coffee: {
@@ -60,7 +55,7 @@ module.exports = function(grunt) {
     htmlbuild: {
       dist: {
         src: 'src/*.html',
-        dest: './',
+        dest: 'build/',
         options: {
           scripts: {
             dist: ['build/*.js']
@@ -75,19 +70,21 @@ module.exports = function(grunt) {
       }
     },
 
-    connect: {
-      server: {
-        options: {
-          port: 8080,
-          base: '.',
-          middleware: function(connect, options, middlewares) {
-            middlewares.unshift(mapDotDotUrlToLib);
-            return middlewares;
-          }
-        }
+    replace: {
+      dist: {
+        src: 'build/*.html',
+        dest: './',
+        replacements: [{
+          from: /href="..\/lib\/([^"]+)"/g,
+          to: 'href="../$1"'
+        }]
       }
     },
 
+    connect: {
+      server: {}
+    },
+
     watch: {
       stylesheets: {
         files: 'src/*.less',
@@ -127,6 +124,12 @@ module.exports = function(grunt) {
     changelog: {
       options: {
       }
+    },
+
+    shell: {
+      test: {
+        command: 'xvfb-run -a ./bin/grunt wct-test'
+      }
     }
   });
 
@@ -140,9 +143,33 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-conventional-changelog');
   grunt.loadNpmTasks('grunt-html-build');
+  grunt.loadNpmTasks('grunt-shell');
+  grunt.loadNpmTasks('grunt-text-replace');
 
   grunt.registerTask('build', 'Compile all assets and create the distribution files',
-    ['less', 'coffeelint', 'coffee', 'htmlbuild']);
+    ['less', 'coffeelint', 'coffee', 'htmlbuild', 'replace']);
+
+  grunt.registerTask('wct-test', function() {
+    var
+        done = this.async(),
+        wct = require('web-component-tester'),
+        options = {
+          remote: false,
+          persistent: false,
+          root: '.',
+          plugins: {
+            local: {
+              browsers: ['chrome']
+            }
+          }
+        };
+    wct.test(options, function() {
+      done();
+      process.exit(0);
+    });
+  });
+
+  grunt.registerTask('test', 'Test the web application', ['shell:test']);
 
   grunt.task.renameTask('bump', 'bumpversion');
 
diff --git a/README.md b/README.md
index 68b38f0..9eb19a7 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@ grapp-rest-resource
 
 A web component that encapsulates REST API calls.
 
-Attributes
+Properties
 ----------
 
   * **url**
diff --git a/bower.json b/bower.json
index d283875..786228e 100644
--- a/bower.json
+++ b/bower.json
@@ -20,7 +20,6 @@
   "keywords": [
     "web-components",
     "polymer",
-    "coyoho",
     "grappendorf"
   ],
   "authors": [
@@ -32,12 +31,12 @@
     "url": "git://github.com/grappendorf/grapp-rest-resource.git"
   },
   "dependencies": {
-    "polymer": "Polymer/polymer#~0.5.1",
-    "core-ajax": "Polymer/core-ajax#~0.5.1"
+    "polymer": "Polymer/polymer#~1.0.0",
+    "iron-ajax": "PolymerElements/iron-ajax#~1.0.0"
   },
   "devDependencies": {
-    "coffee-script": "latest",
-    "jquery": "latest",
-    "web-component-tester": "Polymer/web-component-tester#2.2.6"
+    "web-component-tester": "Polymer/web-component-tester#3.1.7",
+    "jquery": "2.1.4",
+    "coffee-script": "1.9.3"
   }
 }
diff --git a/grapp-rest-resource.html b/grapp-rest-resource.html
index 6b85d7a..c1d5c3e 100644
--- a/grapp-rest-resource.html
+++ b/grapp-rest-resource.html
@@ -9,14 +9,13 @@
 -->
 
 
-<link href="../core-ajax/core-xhr.html" rel="import">
+<link href="../iron-ajax/iron-request.html" rel="import">
 
-<polymer-element name="grapp-rest-resource"
-  attributes="url params resource indexUrl showUrl newUrl createUrl updateUrl destroyUrl memberUrl headers token">
+<dom-module id="grapp-rest-resource">
 
   <template>
 
-    <core-xhr id="xhr"></core-xhr>
+    <iron-request id="request"></iron-request>
 
   </template>
 
@@ -51,156 +50,188 @@
     return url;
   };
 
-  Polymer('grapp-rest-resource', {
-    created: function() {
+  Polymer({
+    is: 'grapp-rest-resource',
+    properties: {
+      url: {
+        type: String
+      },
+      params: {
+        type: String
+      },
+      resource: {
+        type: Object
+      },
+      indexUrl: {
+        type: String
+      },
+      showUrl: {
+        type: String
+      },
+      newUrl: {
+        type: String
+      },
+      createUrl: {
+        type: String
+      },
+      updateUrl: {
+        type: String
+      },
+      destroyUrl: {
+        type: String
+      },
+      memberUrl: {
+        type: String
+      },
+      headers: {
+        type: Object,
+        value: {}
+      },
+      token: {
+        type: String
+      }
+    },
+    ready: function() {
       var self;
-      this.headers = {};
       self = this;
       return this.resource = {
         index: function(success, error) {
-          return self.$.xhr.request({
+          return self.$.request.send({
             url: prepareUrl(self.indexUrl || self.url, self.params),
-            headers: self.prepareHeaders(),
-            callback: function(data, response) {
-              var json;
-              json = (data.trim() !== '' ? JSON.parse(data) : {});
-              switch (response.status) {
-                case 200:
-                  return typeof success === "function" ? success(json) : void 0;
-                case 401:
-                  return self.fire('grapp-authentication-error');
-                default:
-                  return typeof error === "function" ? error(json) : void 0;
-              }
+            headers: self.prepareHeaders()
+          }).then(function(request) {
+            var json;
+            json = (request.response.trim() !== '' ? JSON.parse(request.response) : {});
+            switch (request.xhr.status) {
+              case 200:
+                return typeof success === "function" ? success(json) : void 0;
+              case 401:
+                return self.fire('grapp-authentication-error');
+              default:
+                return typeof error === "function" ? error(json) : void 0;
             }
           });
         },
         show: function(id, success, error) {
-          return self.$.xhr.request({
+          return self.$.request.send({
             url: prepareUrl(self.showUrl || self.url, self.params, id),
-            headers: self.prepareHeaders(),
-            callback: function(data, response) {
-              var json;
-              json = (data.trim() !== '' ? JSON.parse(data) : {});
-              switch (response.status) {
-                case 200:
-                  return typeof success === "function" ? success(json) : void 0;
-                case 401:
-                  return self.fire('grapp-authentication-error');
-                default:
-                  return typeof error === "function" ? error(json) : void 0;
-              }
+            headers: self.prepareHeaders()
+          }).then(function(request) {
+            var json;
+            json = (request.response.trim() !== '' ? JSON.parse(request.response) : {});
+            switch (request.xhr.status) {
+              case 200:
+                return typeof success === "function" ? success(json) : void 0;
+              case 401:
+                return self.fire('grapp-authentication-error');
+              default:
+                return typeof error === "function" ? error(json) : void 0;
             }
           });
         },
         "new": function(success, error) {
-          return self.$.xhr.request({
+          return self.$.request.send({
             url: prepareUrl(self.newUrl || self.url, self.params, null, 'new'),
-            headers: self.prepareHeaders(),
-            callback: function(data, response) {
-              var json;
-              json = (data.trim() !== '' ? JSON.parse(data) : {});
-              switch (response.status) {
-                case 200:
-                  return typeof success === "function" ? success(json) : void 0;
-                case 401:
-                  return self.fire('grapp-authentication-error');
-                default:
-                  return typeof error === "function" ? error(json) : void 0;
-              }
+            headers: self.prepareHeaders()
+          }).then(function(request) {
+            var json;
+            json = (request.response.trim() !== '' ? JSON.parse(request.response) : {});
+            switch (request.xhr.status) {
+              case 200:
+                return typeof success === "function" ? success(json) : void 0;
+              case 401:
+                return self.fire('grapp-authentication-error');
+              default:
+                return typeof error === "function" ? error(json) : void 0;
             }
           });
         },
         create: function(data, success, error) {
-          return self.$.xhr.request({
+          return self.$.request.send({
             method: 'POST',
             url: prepareUrl(self.createUrl || self.url, self.params),
             headers: self.prepareHeaders(),
-            body: JSON.stringify(data),
-            callback: function(data, response) {
-              var json;
-              json = (data.trim() !== '' ? JSON.parse(data) : {});
-              switch (response.status) {
-                case 200:
-                case 201:
-                case 204:
-                  return typeof success === "function" ? success(json) : void 0;
-                case 401:
-                  return self.fire('grapp-authentication-error');
-                default:
-                  return typeof error === "function" ? error(json) : void 0;
-              }
+            body: JSON.stringify(data)
+          }).then(function(request) {
+            var json;
+            json = (request.response.trim() !== '' ? JSON.parse(request.response) : {});
+            switch (request.xhr.status) {
+              case 200:
+              case 201:
+              case 204:
+                return typeof success === "function" ? success(json) : void 0;
+              case 401:
+                return self.fire('grapp-authentication-error');
+              default:
+                return typeof error === "function" ? error(json) : void 0;
             }
           });
         },
         update: function(id, data, success, error) {
-          return self.$.xhr.request({
+          return self.$.request.send({
             method: 'PUT',
             url: prepareUrl(self.updateUrl || self.url, self.params, id),
             headers: self.prepareHeaders(),
-            body: JSON.stringify(data),
-            callback: function(data, response) {
-              var json;
-              json = (data.trim() !== '' ? JSON.parse(data) : {});
-              switch (response.status) {
-                case 200:
-                case 201:
-                case 204:
-                  return typeof success === "function" ? success(json) : void 0;
-                case 401:
-                  return self.fire('grapp-authentication-error');
-                default:
-                  return typeof error === "function" ? error(json) : void 0;
-              }
+            body: JSON.stringify(data)
+          }).then(function(request) {
+            var json;
+            json = (request.response.trim() !== '' ? JSON.parse(request.response) : {});
+            switch (request.xhr.status) {
+              case 200:
+              case 201:
+              case 204:
+                return typeof success === "function" ? success(json) : void 0;
+              case 401:
+                return self.fire('grapp-authentication-error');
+              default:
+                return typeof error === "function" ? error(json) : void 0;
             }
           });
         },
         destroy: function(id, success, error) {
-          return self.$.xhr.request({
+          return self.$.request.send({
             method: 'DELETE',
             url: prepareUrl(self.destroyUrl || self.url, self.params, id),
-            headers: self.prepareHeaders(),
-            callback: function(data, response) {
-              var json;
-              json = (data.trim() !== '' ? JSON.parse(data) : {});
-              switch (response.status) {
-                case 200:
-                  return typeof success === "function" ? success(json) : void 0;
-                case 401:
-                  return self.fire('grapp-authentication-error');
-                default:
-                  return typeof error === "function" ? error(json) : void 0;
-              }
+            headers: self.prepareHeaders()
+          }).then(function(request) {
+            var json;
+            json = (request.response.trim() !== '' ? JSON.parse(request.response) : {});
+            switch (request.xhr.status) {
+              case 200:
+                return typeof success === "function" ? success(json) : void 0;
+              case 401:
+                return self.fire('grapp-authentication-error');
+              default:
+                return typeof error === "function" ? error(json) : void 0;
             }
           });
         },
         memberAction: function(id, action, success, error) {
-          return self.$.xhr.request({
+          return self.$.request.send({
             method: 'PUT',
             url: prepareUrl(self.memberUrl || self.url, self.params, id, action),
-            headers: self.prepareHeaders(),
-            callback: function(data, response) {
-              switch (response.status) {
-                case 200:
-                  return typeof success === "function" ? success() : void 0;
-                case 401:
-                  return self.fire('grapp-authentication-error');
-                default:
-                  return typeof error === "function" ? error() : void 0;
-              }
+            headers: self.prepareHeaders()
+          }).then(function(request) {
+            switch (request.xhr.status) {
+              case 200:
+                return typeof success === "function" ? success() : void 0;
+              case 401:
+                return self.fire('grapp-authentication-error');
+              default:
+                return typeof error === "function" ? error() : void 0;
             }
           });
         }
       };
     },
     prepareHeaders: function() {
-      var h, key, val, _ref;
+      var h, key, ref, val;
       h = {
         'Accept': 'application/json'
       };
-      _ref = this.headers;
-      for (key in _ref) {
-        val = _ref[key];
+      ref = this.headers;
+      for (key in ref) {
+        val = ref[key];
         h[key] = val;
       }
       if (this.token) {
@@ -213,4 +244,4 @@
 }).call(this);
 </script>
 
-</polymer-element>
+</dom-module>
diff --git a/index.html b/index.html
index 90d4d5c..d6d1a84 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,8 @@
 <head>
 
   <title>grapp-rest-resource web component</title>
-
-  <script src="lib/webcomponentsjs/webcomponents.min.js"></script>
-  <link href="grapp-rest-resource.html" rel="import">
+  <script src='lib/webcomponentsjs/webcomponents-lite.min.js'></script>
+  <link href="build/grapp-rest-resource.html" rel="import">
 
 </head>
 
@@ -28,21 +27,22 @@ <h2>A web component that encapsulates REST API calls</h2>
 
   <h2>Demo</h2>
 
-  <polymer-element name="demo-element">
+  <dom-module id="demo-element">
     <template>
 
-      <grapp-rest-resource id="data" url="example.json"></grapp-rest-resource>
+      <grapp-rest-resource id="data" url="test/example.json"></grapp-rest-resource>
 
-      <template repeat="{{item in data}}">
+      <template is="dom-repeat" items="[[data]]">
         <p>
-          {{item.name}}: {{item.role}}
+          <span>{{item.name}}</span>: <span>{{item.role}}</span>
         </p>
       </template>
 
     </template>
 
     <script>
-      Polymer('demo-element', {
+      Polymer({
+        is: 'demo-element',
         ready: function() {
           this.$.data.resource.index((function(result) {
             this.data = result;
@@ -50,7 +50,7 @@ <h2>Demo</h2>
         }
       });
     </script>
-  </polymer-element>
+  </dom-module>
 
   <demo-element></demo-element>
 
diff --git a/package.json b/package.json
index c783571..f09e9e8 100644
--- a/package.json
+++ b/package.json
@@ -4,18 +4,21 @@
     "url": "git://github.com/grappendorf/grapp-rest-resource.git"
   },
   "devDependencies": {
-    "bower": "latest",
-    "grunt": "latest",
-    "grunt-bump": "latest",
-    "grunt-cli": "latest",
-    "grunt-coffeelint": "latest",
-    "grunt-contrib-clean": "latest",
-    "grunt-contrib-connect": "latest",
-    "grunt-contrib-coffee": "latest",
-    "grunt-contrib-copy": "latest",
-    "grunt-contrib-less": "latest",
-    "grunt-contrib-watch": "latest",
-    "grunt-conventional-changelog": "latest",
-    "grunt-html-build": "latest"
+    "bower": "1.4.1",
+    "grunt": "0.4.5",
+    "grunt-bump": "0.3.0",
+    "grunt-cli": "0.1.13",
+    "grunt-coffeelint": "0.0.13",
+    "grunt-contrib-clean": "0.6.0",
+    "grunt-contrib-connect": "0.10.1",
+    "grunt-contrib-coffee": "0.13.0",
+    "grunt-contrib-copy": "0.8.0",
+    "grunt-contrib-less": "1.0.1",
+    "grunt-contrib-watch": "0.6.1",
+    "grunt-conventional-changelog": "1.1.0",
+    "grunt-html-build": "0.4.3",
+    "grunt-shell": "1.1.2",
+    "grunt-text-replace": "0.4.0",
+    "web-component-tester": "3.1.7"
   }
 }
diff --git a/src/grapp-rest-resource.coffee b/src/grapp-rest-resource.coffee
index 1a151a0..b22f8a7 100644
--- a/src/grapp-rest-resource.coffee
+++ b/src/grapp-rest-resource.coffee
@@ -11,101 +11,116 @@ prepareUrl = (url, params = {}, id = null, action = null) ->
   url
 
 
-Polymer 'grapp-rest-resource',
+Polymer
 
-  created: ->
-    @headers = {}
+  is: 'grapp-rest-resource',
+
+  properties:
+    url: {type: String}
+    params: {type: String}
+    resource: {type: Object}
+    indexUrl: {type: String}
+    showUrl: {type: String}
+    newUrl: {type: String}
+    createUrl: {type: String}
+    updateUrl: {type: String}
+    destroyUrl: {type: String}
+    memberUrl: {type: String}
+    headers: {type: Object, value: {}}
+    token: {type: String}
+
+  ready: ->
     self = @
 
     @resource =
       index: (success, error) ->
-        self.$.xhr.request
+        self.$.request.send
           url: prepareUrl self.indexUrl || self.url, self.params
           headers: self.prepareHeaders()
-          callback: (data, response) ->
-            json = (if data.trim() != '' then JSON.parse data else {})
-            switch response.status
-              when 200 then success? json
-              when 401 then self.fire 'grapp-authentication-error'
-              else
-                error? json
+        .then (request) ->
+          json = (if request.response.trim() != '' then JSON.parse request.response else {})
+          switch request.xhr.status
+            when 200 then success? json
+            when 401 then self.fire 'grapp-authentication-error'
+            else
+              error? json
 
       show: (id, success, error) ->
-        self.$.xhr.request
+        self.$.request.send
           url: prepareUrl self.showUrl || self.url, self.params, id
           headers: self.prepareHeaders()
-          callback: (data, response) ->
-            json = (if data.trim() != '' then JSON.parse data else {})
-            switch response.status
-              when 200 then success? json
-              when 401 then self.fire 'grapp-authentication-error'
-              else
-                error? json
+        .then (request) ->
+          json = (if request.response.trim() != '' then JSON.parse request.response else {})
+          switch request.xhr.status
+            when 200 then success? json
+            when 401 then self.fire 'grapp-authentication-error'
+            else
+              error? json
 
       new: (success, error) ->
-        self.$.xhr.request
+        self.$.request.send
           url: prepareUrl self.newUrl || self.url, self.params, null, 'new'
           headers: self.prepareHeaders()
-          callback: (data, response) ->
-            json = (if data.trim() != '' then JSON.parse data else {})
-            switch response.status
-              when 200 then success? json
-              when 401 then self.fire 'grapp-authentication-error'
-              else
-                error? json
+        .then (request) ->
+          json = (if request.response.trim() != '' then JSON.parse request.response else {})
+          switch request.xhr.status
+            when 200 then success? json
+            when 401 then self.fire 'grapp-authentication-error'
+            else
+              error? json
 
       create: (data, success, error) ->
-        self.$.xhr.request
+        self.$.request.send
           method: 'POST'
           url: prepareUrl self.createUrl || self.url, self.params
           headers: self.prepareHeaders()
           body: JSON.stringify data
-          callback: (data, response) ->
-            json = (if data.trim() != '' then JSON.parse data else {})
-            switch response.status
-              when 200, 201, 204 then success? json
-              when 401 then self.fire 'grapp-authentication-error'
-              else
-                error? json
+        .then (request) ->
+          json = (if request.response.trim() != '' then JSON.parse request.response else {})
+          switch request.xhr.status
+            when 200, 201, 204 then success? json
+            when 401 then self.fire 'grapp-authentication-error'
+            else
+              error? json
 
       update: (id, data, success, error) ->
-        self.$.xhr.request
+        self.$.request.send
           method: 'PUT'
           url: prepareUrl self.updateUrl || self.url, self.params, id
           headers: self.prepareHeaders()
           body: JSON.stringify data
-          callback: (data, response) ->
-            json = (if data.trim() != '' then JSON.parse data else {})
-            switch response.status
-              when 200, 201, 204 then success? json
-              when 401 then self.fire 'grapp-authentication-error'
-              else
-                error? json
+        .then (request) ->
+          json = (if request.response.trim() != '' then JSON.parse request.response else {})
+          switch request.xhr.status
+            when 200, 201, 204 then success? json
+            when 401 then self.fire 'grapp-authentication-error'
+            else
+              error? json
 
       destroy: (id, success, error) ->
-        self.$.xhr.request
+        self.$.request.send
           method: 'DELETE'
           url: prepareUrl self.destroyUrl || self.url, self.params, id
           headers: self.prepareHeaders()
-          callback: (data, response) ->
-            json = (if data.trim() != '' then JSON.parse data else {})
-            switch response.status
-              when 200 then success? json
-              when 401 then self.fire 'grapp-authentication-error'
-              else
-                error? json
+        .then (request) ->
+          json = (if request.response.trim() != '' then JSON.parse request.response else {})
+          switch request.xhr.status
+            when 200 then success? json
+            when 401 then self.fire 'grapp-authentication-error'
+            else
+              error? json
 
       memberAction: (id, action, success, error) ->
-        self.$.xhr.request
+        self.$.request.send
           method: 'PUT'
           url: prepareUrl self.memberUrl || self.url, self.params, id, action
           headers: self.prepareHeaders()
-          callback: (data, response) ->
-            switch response.status
-              when 200 then success?()
-              when 401 then self.fire 'grapp-authentication-error'
-              else
-                error?()
+        .then (request) ->
+          switch request.xhr.status
+            when 200 then success?()
+            when 401 then self.fire 'grapp-authentication-error'
+            else
+              error?()
 
   prepareHeaders: ->
     h = {'Accept': 'application/json'}
diff --git a/src/grapp-rest-resource.html b/src/grapp-rest-resource.html
index 84f3bdb..f838338 100644
--- a/src/grapp-rest-resource.html
+++ b/src/grapp-rest-resource.html
@@ -7,14 +7,13 @@
 -->
 <!-- /build -->
 
-<link href="../core-ajax/core-xhr.html" rel="import">
+<link href="../lib/iron-ajax/iron-request.html" rel="import">
 
-<polymer-element name="grapp-rest-resource"
-  attributes="url params resource indexUrl showUrl newUrl createUrl updateUrl destroyUrl memberUrl headers token">
+<dom-module id="grapp-rest-resource">
 
   <template>
 
-    <core-xhr id="xhr"></core-xhr>
+    <iron-request id="request"></iron-request>
 
   </template>
 
@@ -22,4 +21,4 @@
   <script src="grapp-rest-resource.js"></script>
   <!-- /build -->
 
-</polymer-element>
+</dom-module>
diff --git a/test/basic.html b/test/basic.html
index c1e4700..e385958 100644
--- a/test/basic.html
+++ b/test/basic.html
@@ -6,17 +6,18 @@
   <title>grapp-rest-resource basic tests</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
+  <script src='../lib/webcomponentsjs/webcomponents-lite.min.js'></script>
   <script src="../lib/web-component-tester/browser.js"></script>
   <script src="../lib/coffee-script/extras/coffee-script.js"></script>
 
-  <link href="../grapp-rest-resource.html" rel="import">
+  <link href="../build/grapp-rest-resource.html" rel="import">
 </head>
 <body>
 
   <grapp-rest-resource id="element" url="data.json" headers='{"foo":123}'></grapp-rest-resource>
 
   <grapp-rest-resource id="element_with_special_url" url="data.json"
-    indexUrl="special_data.json"></grapp-rest-resource>
+    index-url="special_data.json"></grapp-rest-resource>
 
   <script type="text/coffeescript">
 
@@ -38,8 +39,5 @@
 
   </script>
 
-  <script>
-  </script>
-
 </body>
 </html>
diff --git a/example.json b/test/example.json
similarity index 100%
rename from example.json
rename to test/example.json
diff --git a/test/headers.html b/test/headers.html
index 5bd1f88..265c382 100644
--- a/test/headers.html
+++ b/test/headers.html
@@ -6,10 +6,11 @@
   <title>grapp-rest-resource headers tests</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
+  <script src='../lib/webcomponentsjs/webcomponents-lite.min.js'></script>
   <script src="../lib/web-component-tester/browser.js"></script>
   <script src="../lib/coffee-script/extras/coffee-script.js"></script>
 
-  <link href="../grapp-rest-resource.html" rel="import">
+  <link href="../build/grapp-rest-resource.html" rel="import">
 </head>
 <body>
 
@@ -25,22 +26,19 @@
 
       it 'sends the custom headers', ->
         element = document.querySelector '#element_with_headers'
-        xhr_request = sinon.stub element.$.xhr, 'request'
+        xhr_request = sinon.stub(element.$.request, 'send').returns new Promise(->)
         element.resource.index()
-        expect(xhr_request).to.have.been.calledWith sinon.match {headers: {foo: 123}}
+        expect(xhr_request).to.have.been.calledWith sinon.match {headers: {Accept: 'application/json', foo: 123}}
 
     describe 'with defined token attribute ', ->
 
       it 'sends the an authorization header', ->
         element = document.querySelector '#element_with_token'
-        xhr_request = sinon.stub element.$.xhr, 'request'
+        xhr_request = sinon.stub(element.$.request, 'send').returns new Promise(->)
         element.resource.index()
         expect(xhr_request).to.have.been.calledWith sinon.match {headers: {Authorization: 'JWT'}}
 
   </script>
 
-  <script>
-  </script>
-
 </body>
 </html>