<!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>