Added Polymer

This commit is contained in:
Thaum
2014-11-26 10:18:35 +00:00
parent 5eea4714b2
commit 3408ba9e8d
1210 changed files with 394645 additions and 47 deletions

View File

@@ -0,0 +1,21 @@
{
"name": "core-ajax",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#^0.5.0"
},
"devDependencies": {
"polymer-test-tools": "Polymer/polymer-test-tools#master"
},
"version": "0.5.1",
"homepage": "https://github.com/Polymer/core-ajax",
"_release": "0.5.1",
"_resolution": {
"type": "version",
"tag": "0.5.1",
"commit": "c86e3ce6520a00725ebde89a05eb5c233c601e58"
},
"_source": "git://github.com/Polymer/core-ajax.git",
"_target": "^0.5.0",
"_originalSource": "Polymer/core-ajax"
}

View File

@@ -0,0 +1,4 @@
core-ajax
=========
See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-ajax) for more information.

View File

@@ -0,0 +1,11 @@
{
"name": "core-ajax",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#^0.5.0"
},
"devDependencies": {
"polymer-test-tools": "Polymer/polymer-test-tools#master"
},
"version": "0.5.1"
}

View File

@@ -0,0 +1,406 @@
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!--
@group Polymer Core Elements
The `core-ajax` element exposes `XMLHttpRequest` functionality.
<core-ajax
auto
url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"chrome"}'
handleAs="json"
on-core-response="{{handleResponse}}"></core-ajax>
With `auto` set to `true`, the element performs a request whenever
its `url`, `params` or `body` properties are changed.
Note: The `params` attribute must be double quoted JSON.
You can trigger a request explicitly by calling `go` on the
element.
@element core-ajax
@status beta
@homepage github.io
-->
<link rel="import" href="core-xhr.html">
<polymer-element name="core-ajax" hidden attributes="url handleAs auto params response error method headers body contentType withCredentials progress loading">
<script>
Polymer('core-ajax', {
/**
* Fired when a response is received.
*
* @event core-response
*/
/**
* Fired when an error is received.
*
* @event core-error
*/
/**
* Fired whenever a response or an error is received.
*
* @event core-complete
*/
/**
* The URL target of the request.
*
* @attribute url
* @type string
* @default ''
*/
url: '',
/**
* Specifies what data to store in the `response` property, and
* to deliver as `event.response` in `response` events.
*
* One of:
*
* `text`: uses `XHR.responseText`.
*
* `xml`: uses `XHR.responseXML`.
*
* `json`: uses `XHR.responseText` parsed as JSON.
*
* `arraybuffer`: uses `XHR.response`.
*
* `blob`: uses `XHR.response`.
*
* `document`: uses `XHR.response`.
*
* @attribute handleAs
* @type string
* @default 'text'
*/
handleAs: '',
/**
* If true, automatically performs an Ajax request when either `url` or `params` changes.
*
* @attribute auto
* @type boolean
* @default false
*/
auto: false,
/**
* Parameters to send to the specified URL, as JSON.
*
* @attribute params
* @type string (JSON)
* @default ''
*/
params: '',
/**
* The response for the current request, or null if it hasn't
* completed yet or the request resulted in error.
*
* @attribute response
* @type Object
* @default null
*/
response: null,
/**
* The error for the current request, or null if it hasn't
* completed yet or the request resulted in success.
*
* @attribute error
* @type Object
* @default null
*/
error: null,
/**
* Whether the current request is currently loading.
*
* @attribute loading
* @type boolean
* @default false
*/
loading: false,
/**
* The progress of the current request.
*
* @attribute progress
* @type {loaded: number, total: number, lengthComputable: boolean}
* @default {}
*/
progress: null,
/**
* The HTTP method to use such as 'GET', 'POST', 'PUT', or 'DELETE'.
* Default is 'GET'.
*
* @attribute method
* @type string
* @default ''
*/
method: '',
/**
* HTTP request headers to send.
*
* Example:
*
* <core-ajax
* auto
* url="http://somesite.com"
* headers='{"X-Requested-With": "XMLHttpRequest"}'
* handleAs="json"
* on-core-response="{{handleResponse}}"></core-ajax>
*
* @attribute headers
* @type Object
* @default null
*/
headers: null,
/**
* Optional raw body content to send when method === "POST".
*
* Example:
*
* <core-ajax method="POST" auto url="http://somesite.com"
* body='{"foo":1, "bar":2}'>
* </core-ajax>
*
* @attribute body
* @type Object
* @default null
*/
body: null,
/**
* Content type to use when sending data.
*
* @attribute contentType
* @type string
* @default 'application/x-www-form-urlencoded'
*/
contentType: 'application/x-www-form-urlencoded',
/**
* Set the withCredentials flag on the request.
*
* @attribute withCredentials
* @type boolean
* @default false
*/
withCredentials: false,
/**
* Additional properties to send to core-xhr.
*
* Can be set to an object containing default properties
* to send as arguments to the `core-xhr.request()` method
* which implements the low-level communication.
*
* @property xhrArgs
* @type Object
* @default null
*/
xhrArgs: null,
created: function() {
this.progress = {};
},
ready: function() {
this.xhr = document.createElement('core-xhr');
},
receive: function(response, xhr) {
if (this.isSuccess(xhr)) {
this.processResponse(xhr);
} else {
this.processError(xhr);
}
this.complete(xhr);
},
isSuccess: function(xhr) {
var status = xhr.status || 0;
return !status || (status >= 200 && status < 300);
},
processResponse: function(xhr) {
var response = this.evalResponse(xhr);
if (xhr === this.activeRequest) {
this.response = response;
}
this.fire('core-response', {response: response, xhr: xhr});
},
processError: function(xhr) {
var response = xhr.status + ': ' + xhr.responseText;
if (xhr === this.activeRequest) {
this.error = response;
}
this.fire('core-error', {response: response, xhr: xhr});
},
processProgress: function(progress, xhr) {
if (xhr !== this.activeRequest) {
return;
}
// We create a proxy object here because these fields
// on the progress event are readonly properties, which
// causes problems in common use cases (e.g. binding to
// <paper-progress> attributes).
var progressProxy = {
lengthComputable: progress.lengthComputable,
loaded: progress.loaded,
total: progress.total
}
this.progress = progressProxy;
},
complete: function(xhr) {
if (xhr === this.activeRequest) {
this.loading = false;
}
this.fire('core-complete', {response: xhr.status, xhr: xhr});
},
evalResponse: function(xhr) {
return this[(this.handleAs || 'text') + 'Handler'](xhr);
},
xmlHandler: function(xhr) {
return xhr.responseXML;
},
textHandler: function(xhr) {
return xhr.responseText;
},
jsonHandler: function(xhr) {
var r = xhr.responseText;
try {
return JSON.parse(r);
} catch (x) {
console.warn('core-ajax caught an exception trying to parse response as JSON:');
console.warn('url:', this.url);
console.warn(x);
return r;
}
},
documentHandler: function(xhr) {
return xhr.response;
},
blobHandler: function(xhr) {
return xhr.response;
},
arraybufferHandler: function(xhr) {
return xhr.response;
},
urlChanged: function() {
if (!this.handleAs) {
var ext = String(this.url).split('.').pop();
switch (ext) {
case 'json':
this.handleAs = 'json';
break;
}
}
this.autoGo();
},
paramsChanged: function() {
this.autoGo();
},
bodyChanged: function() {
this.autoGo();
},
autoChanged: function() {
this.autoGo();
},
// TODO(sorvell): multiple side-effects could call autoGo
// during one micro-task, use a job to have only one action
// occur
autoGo: function() {
if (this.auto) {
this.goJob = this.job(this.goJob, this.go, 0);
}
},
/**
* Performs an Ajax request to the specified URL.
*
* @method go
*/
go: function() {
var args = this.xhrArgs || {};
// TODO(sjmiles): we may want XHR to default to POST if body is set
args.body = this.body || args.body;
args.params = this.params || args.params;
if (args.params && typeof(args.params) == 'string') {
args.params = JSON.parse(args.params);
}
args.headers = this.headers || args.headers || {};
if (args.headers && typeof(args.headers) == 'string') {
args.headers = JSON.parse(args.headers);
}
var hasContentType = Object.keys(args.headers).some(function (header) {
return header.toLowerCase() === 'content-type';
});
if (!hasContentType && this.contentType) {
args.headers['Content-Type'] = this.contentType;
}
if (this.handleAs === 'arraybuffer' || this.handleAs === 'blob' ||
this.handleAs === 'document') {
args.responseType = this.handleAs;
}
args.withCredentials = this.withCredentials;
args.callback = this.receive.bind(this);
args.url = this.url;
args.method = this.method;
this.response = this.error = this.progress = null;
this.activeRequest = args.url && this.xhr.request(args);
if (this.activeRequest) {
this.loading = true;
var activeRequest = this.activeRequest;
// IE < 10 doesn't support progress events.
if ('onprogress' in activeRequest) {
this.activeRequest.addEventListener(
'progress',
function(progress) {
this.processProgress(progress, activeRequest);
}.bind(this), false);
} else {
this.progress = {
lengthComputable: false,
}
}
}
return this.activeRequest;
}
});
</script>
</polymer-element>

View File

@@ -0,0 +1,116 @@
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!--
/**
* @group Polymer Core Elements
*
* core-xhr can be used to perform XMLHttpRequests.
*
* <core-xhr id="xhr"></core-xhr>
* ...
* this.$.xhr.request({url: url, params: params, callback: callback});
*
* @element core-xhr
*/
-->
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="core-xhr" hidden>
<script>
Polymer('core-xhr', {
/**
* Sends a HTTP request to the server and returns the XHR object.
*
* @method request
* @param {Object} inOptions
* @param {String} inOptions.url The url to which the request is sent.
* @param {String} inOptions.method The HTTP method to use, default is GET.
* @param {boolean} inOptions.sync By default, all requests are sent asynchronously. To send synchronous requests, set to true.
* @param {Object} inOptions.params Data to be sent to the server.
* @param {Object} inOptions.body The content for the request body for POST method.
* @param {Object} inOptions.headers HTTP request headers.
* @param {String} inOptions.responseType The response type. Default is 'text'.
* @param {boolean} inOptions.withCredentials Whether or not to send credentials on the request. Default is false.
* @param {Object} inOptions.callback Called when request is completed.
* @returns {Object} XHR object.
*/
request: function(options) {
var xhr = new XMLHttpRequest();
var url = options.url;
var method = options.method || 'GET';
var async = !options.sync;
//
var params = this.toQueryString(options.params);
if (params && method == 'GET') {
url += (url.indexOf('?') > 0 ? '&' : '?') + params;
}
var xhrParams = this.isBodyMethod(method) ? (options.body || params) : null;
//
xhr.open(method, url, async);
if (options.responseType) {
xhr.responseType = options.responseType;
}
if (options.withCredentials) {
xhr.withCredentials = true;
}
this.makeReadyStateHandler(xhr, options.callback);
this.setRequestHeaders(xhr, options.headers);
xhr.send(xhrParams);
if (!async) {
xhr.onreadystatechange(xhr);
}
return xhr;
},
toQueryString: function(params) {
var r = [];
for (var n in params) {
var v = params[n];
n = encodeURIComponent(n);
r.push(v == null ? n : (n + '=' + encodeURIComponent(v)));
}
return r.join('&');
},
isBodyMethod: function(method) {
return this.bodyMethods[(method || '').toUpperCase()];
},
bodyMethods: {
POST: 1,
PUT: 1,
PATCH: 1,
DELETE: 1
},
makeReadyStateHandler: function(xhr, callback) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
callback && callback.call(null, xhr.response, xhr);
}
};
},
setRequestHeaders: function(xhr, headers) {
if (headers) {
for (var name in headers) {
xhr.setRequestHeader(name, headers[name]);
}
}
}
});
</script>
</polymer-element>

View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html>
<head>
<script src="../webcomponentsjs/webcomponents.js" debug></script>
<meta charset="utf-8">
<title>Race condition</title>
</head>
<body>
<link rel="import" href="core-ajax.html">
<link rel="import" href="../paper-progress/paper-progress.html">
<polymer-element name="progress-test">
<template>
<core-ajax
id="ajax" auto
url="http://httpbin.org/drip"
params="{{ {numbytes: numbytes, duration:5} }}"
response="{{response}}"
progress="{{progress}}"
loading="{{loading}}"
></core-ajax>
<!--
Ordinarily you'd gate on progress.lengthComputable, but we know the
length in this case (and httpbin sadly doesn't return a
Content-Length header for this requesthere).
https://github.com/kennethreitz/httpbin/pull/160
-->
<div>
<button on-click="{{restart}}">Restart</button>
<template if="{{loading}}">
Loading...
</template>
<template if="{{!loading}}">
Loaded!
</template>
</div>
<template if="{{loading && progress.loaded}}">
<paper-progress
value="{{progress.loaded}}"
min="0"
max="{{numbytes}}">
</paper-progress><br>
</template>
</template>
<script>
Polymer('progress-test', {
loading: true,
i: 0,
numbytes: 1000,
pretty: function(i) {
return JSON.stringify(i, null, 2);
},
restart: function() {
this.$.ajax.abort();
this.$.ajax.go();
}
});
</script>
</polymer-element>
<progress-test></progress-test>
</body>
</html>

View File

@@ -0,0 +1,43 @@
<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>core-ajax</title>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="core-ajax.html">
</head>
<body>
<core-ajax auto url="//gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"chrome"}'
handleAs="json"></core-ajax>
<template repeat="{{response.feed.entry}}">
<div>{{title.$t}}</div>
</template>
<script>
document.addEventListener('polymer-ready', function() {
var ajax = document.querySelector("core-ajax");
ajax.addEventListener("core-response",
function(e) {
document.querySelector('template').model = {
response: e.detail.response
};
}
);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,22 @@
<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->
<html>
<head>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../core-component-page/core-component-page.html">
</head>
<body unresolved>
<core-component-page></core-component-page>
</body>
</html>

View File

@@ -0,0 +1,23 @@
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<x-meta id="core-ajax" label="Ajax" group="Core">
<property name="handleAs" kind="select" options="json,text,xml,arraybuffer,blob,document"></property>
<property name="method" kind="select" options="GET,POST,PUT,DELETE"></property>
<template>
<core-ajax handleAs="json" method="GET"></core-ajax>
</template>
<template id="imports">
<link rel="import" href="core-ajax.html">
</template>
</x-meta>

View File

@@ -0,0 +1,108 @@
<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>core-ajax</title>
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="../core-ajax.html">
</head>
<body>
<core-ajax
handleAs="json"
auto></core-ajax>
<!--
Test consistency of core-ajax's loading properties.
-->
<script>
test('progress', function(done) {
var ajax = document.querySelector("core-ajax");
var xhr = sinon.useFakeXMLHttpRequest();
var headers = {
"Content-Type": "text/json"
};
var body = '{"content": "plentiful"}'
var requests = this.requests = [];
xhr.onCreate = function (xhr) {
requests.push(xhr);
// Polymer inspects the xhr object for the precense of onprogress to determine
// whether to attach an event listener.
xhr['onprogress'] = null;
};
var progressEvent = function(lengthComputable, loaded, total) {
var progress = new ProgressEvent('progress', {
lengthComputable: lengthComputable,
loaded: loaded,
total: total
});
return progress;
}
// Fake a file download by sending multiple progress events.
async.series([
function(cb) {
ajax.url="http://example.org/downloadLargeFile"
cb();
},
flush,
animationFrameFlush,
function(cb) {
requests[0].dispatchEvent(progressEvent(true, 10, 100));
cb();
},
flush,
animationFrameFlush,
function(cb) {
assert(ajax.loading === true,
"Request partially complete, but loading property was false.");
var progress = ajax.progress;
assert(progress.lengthComputable, "Progress should be computable");
assert(progress.loaded == 10, "Expected 10 bytes loaded, got " + progress.loaded);
assert(progress.total == 100, "Expected 100 bytes total, got " + progress.total);
cb();
},
animationFrameFlush,
function(cb) {
requests[0].dispatchEvent(progressEvent(true, 100, 100));
cb();
},
animationFrameFlush,
function(cb) {
assert(ajax.loading === true,
"Request partially complete, but loading property was false.");
var progress = ajax.progress;
assert(progress.lengthComputable, "Progress should be computable");
assert(progress.loaded == 100, "Expected 10 bytes loaded, got " + progress.loaded);
assert(progress.total == 100, "Expected 100 bytes total, got " + progress.total);
cb();
},
function(cb) {
requests[0].respond(200, headers, body);
cb();
},
animationFrameFlush,
function(cb) {
assert(ajax.loading === false,
"Request complete, but loading property was true.");
assert(ajax.response.content === "plentiful", "response not parsed");
cb();
}
], done);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,81 @@
<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>core-ajax</title>
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="../core-ajax.html">
</head>
<body>
<core-ajax
handleAs="json"
auto></core-ajax>
<!--
Test that when core-ajax fires multiple times as requests are updated,
only the response from the most recent request is used to update the response
object.
-->
<script>
test('race-condition', function(done) {
var ajax = document.querySelector("core-ajax");
var xhr = sinon.useFakeXMLHttpRequest();
var headers = {
"Content-Type": "text/json"
};
var body = function(url) {
return '{"url": "' + url + '"}';
};
var requests = [];
xhr.onCreate = function (xhr) {
requests.push(xhr);
};
// Make request1, then request2. request2 returns first, followed by request1.
async.series([
function(cb) {
ajax.url="http://example.org/request1"
cb();
},
animationFrameFlush,
function(cb) {
ajax.url="http://example.org/request2"
cb();
},
animationFrameFlush,
function(cb) {
requests[0].respond(200, headers, body("http://example.org/request2"));
cb();
},
flush,
function(cb) {
requests[1].respond(200, headers, body("http://example.org/request1"));
cb();
},
flush,
function(cb) {
assert(ajax.response.url.match('request1'),
"Race condition detected. An earlier request's delayed response " +
"caused the more recent request's response to be overwritten.");
done();
cb();
}
], function(){});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,287 @@
<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>core-ajax</title>
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="../core-ajax.html">
</head>
<body>
<core-ajax></core-ajax>
<script>
suite('core-ajax', function() {
var xhr, requests, ajax;
suiteSetup(function() {
xhr = sinon.useFakeXMLHttpRequest();
ajax = document.querySelector("core-ajax");
xhr.onCreate = function (xhr) {
requests.push(xhr);
};
// Reset the core-ajax element before each test.
ajax.auto = false;
ajax.url = '';
ajax.params = '';
ajax.handleAs = 'text';
ajax.body = '';
});
setup(function() {
requests = [];
});
suite('handleAs', function() {
suite('text', function(){
var headers = {
"Content-Type": "text/plain"
};
setup(function(done){
async.series([
function(cb){
ajax.handleAs = 'text';
ajax.url = "http://example.com/text"
ajax.auto = true;
cb();
},
animationFrameFlush,
function(cb){
requests[0].respond(200, headers, "test text");
cb();
}
], done);
});
test('Raw text should pass through', function(){
assert.equal(ajax.response, "test text")
});
});
suite('xml', function(){
var headers = {
"Content-Type": "text/xml"
};
setup(function(done){
async.series([
function(cb){
ajax.handleAs = 'xml';
ajax.url = "http://example.com/xml"
ajax.auto = true;
cb();
},
animationFrameFlush,
function(cb){
requests[0].respond(200, headers,
"<note>" +
"<to>AJ</to>" +
"<from>Dog</from>" +
"<subject>Reminder</subject>" +
"<body><q>Feed me!</q></body>" +
"</note>");
cb();
}
], done);
});
test('XML should be returned with queryable structure', function(){
var q = ajax.response.querySelector("note body q");
assert.equal(q.childNodes[0].textContent, "Feed me!");
var to = ajax.response.querySelector("to");
assert.equal(to.childNodes[0].textContent, "AJ");
})});
suite('json', function(){
var headers = {
"Content-Type": "text/json"
};
setup(function(done){
async.series([
function(cb){
ajax.handleAs = 'json';
ajax.url = "http://example.com/json"
ajax.auto = true;
cb();
},
animationFrameFlush,
function(cb){
requests[0].respond(200, headers,
'{"object" : {"list" : [2, 3, {"key": "value"}]}}');
cb();
}
], done);
});
test('JSON should be returned as an Object', function(){
var r = ajax.response;
assert.equal(r.object.list[1], 3);
assert.equal(r.object.list[2].key, "value");
});
});
suite('arraybuffer', function(){
var headers = {
"Content-Type": "text/plain"
};
setup(function(done){
async.series([
function(cb){
ajax.handleAs = 'arraybuffer';
ajax.url = "http://example.com/data"
ajax.auto = true;
cb();
},
animationFrameFlush,
function(cb){
var buf = new ArrayBuffer(8*4);
var resp = new Int32Array(buf);
resp[3] = 12;
resp[6] = 21;
requests[0].response = buf;
requests[0].respond(200, headers, 'blahblahblah');
cb();
}
], done);
});
test('arraybuffer response should be passed through', function(){
var r = ajax.response;
var ints = new Int32Array(r);
assert.equal(ints[3], 12);
assert.equal(ints[6], 21);
});
});
suite('blob', function(){});
suite('document', function(){});
});
suite('auto', function() {
suiteSetup(function(){
ajax.url = "http://example.com/"
ajax.auto = true;
});
test('url change should trigger request', function(done){
async.series([
function(cb){
ajax.url = "http://example.com/auto";
cb();
},
animationFrameFlush,
function(cb){
assert.equal(requests.length, 1);
cb();
}
], done);
});
test('params change should trigger request', function(done){
async.series([
function(cb){
ajax.params = {param: "value"};
cb();
},
animationFrameFlush,
function(cb){
assert.equal(requests.length, 1);
cb();
}
], done);
});
test('body change should trigger request', function(done){
async.series([
function(cb){
ajax.method = "POST";
ajax.body = "bodystuff";
cb();
},
animationFrameFlush,
function(cb){
assert.equal(requests.length, 1);
cb();
}
], done);
});
});
suite('events', function(){
var headers = {
"Content-Type": "text/plain"
};
var body = "somebodytext";
var responded;
setup(function(done){
async.series([
function(cb){
ajax.auto = false;
cb();
},
animationFrameFlush,
function(cb){;
ajax.handleAs = 'text';
ajax.url = "http://example.com/text"
ajax.auto = true;
cb();
},
animationFrameFlush,
], done);
responded = false;
});
suite('core-response', function(){
test('core-response should be fired on success', function(done){
window.addEventListener('core-response', function(response, xhr){
responded = true;
});
requests[0].respond(200, headers, body);
assert.isTrue(responded);
done();
});
test('core-response should not be fired on failure', function(done){
window.addEventListener('core-response', function(response, xhr){
responded = true;
});
requests[0].respond(404, headers, body);
assert.isFalse(responded);
done();
});
});
suite('core-error', function(){
test('core-error should be fired on failure', function(done){
window.addEventListener('core-error', function(response, xhr){
responded = true;
});
requests[0].respond(404, headers, body);
assert.isTrue(responded);
done();
});
test('core-error should not be fired on success', function(done){
var responded = false;
window.addEventListener('core-error', function(response, xhr){
responded = true;
});
requests[0].respond(200, headers, body);
assert.isFalse(responded);
done();
});
});
suite('core-complete', function(){
test('core-complete should be fired on success', function(done){
window.addEventListener('core-complete', function(response, xhr){
responded = true;
});
requests[0].respond(200, headers, body);
assert.isTrue(responded);
done();
});
test('core-complete should be fired on failure', function(done){
var responded = false;
window.addEventListener('core-complete', function(response, xhr){
responded = true;
});
requests[0].respond(404, headers, body);
assert.isTrue(responded);
done();
});
});
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,17 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'core-ajax-progress.html',
'core-ajax-race.html',
'core-ajax.html'
]);
</script>
</body>
</html>