third_party/polymer/components/core-ajax/test/core-ajax-progress.html

   1 <!doctype html>
   2 <!--
   3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <html>
  11 <head>
  12   <title>core-ajax</title>
  13
  14   <script src="../../webcomponentsjs/webcomponents.js"></script>
  15   <script src="../../web-component-tester/browser.js"></script>
  16
  17
  18
  19   <link rel="import" href="../core-ajax.html">
  20
  21 </head>
  22 <body>
  23
  24   <core-ajax
  25     handleAs="json"
  26     auto></core-ajax>
  27
  28 <!--
  29     Test consistency of core-ajax's loading properties.
  30   -->
  31   <script>
  32     test('progress', function(done) {
  33       var ajax = document.querySelector("core-ajax");
  34       var xhr = sinon.useFakeXMLHttpRequest();
  35       var headers = {
  36         "Content-Type": "text/json"
  37       };
  38       var body = '{"content": "plentiful"}'
  39       var requests = this.requests = [];
  40       xhr.onCreate = function (xhr) {
  41           requests.push(xhr);
  42           // Polymer inspects the xhr object for the precense of onprogress to determine
  43           // whether to attach an event listener.
  44           xhr['onprogress'] = null;
  45       };
  46       var progressEvent = function(lengthComputable, loaded, total) {
  47         var progress = new ProgressEvent('progress', {
  48           lengthComputable: lengthComputable,
  49           loaded: loaded,
  50           total: total
  51         });
  52         return progress;
  53       }
  54
  55       // Fake a file download by sending multiple progress events.
  56       async.series([
  57         function(cb) {
  58           ajax.url="http://example.org/downloadLargeFile"
  59           cb();
  60         },
  61         flush,
  62         animationFrameFlush,
  63         function(cb) {
  64           requests[0].dispatchEvent(progressEvent(true, 10, 100));
  65           cb();
  66         },
  67         flush,
  68         animationFrameFlush,
  69         function(cb) {
  70           assert(ajax.loading === true,
  71               "Request partially complete, but loading property was false.");
  72           var progress = ajax.progress;
  73           assert(progress.lengthComputable, "Progress should be computable");
  74           assert(progress.loaded == 10, "Expected 10 bytes loaded, got " + progress.loaded);
  75           assert(progress.total == 100, "Expected 100 bytes total, got " + progress.total);
  76           cb();
  77         },
  78         animationFrameFlush,
  79         function(cb) {
  80           requests[0].dispatchEvent(progressEvent(true, 100, 100));
  81           cb();
  82         },
  83         animationFrameFlush,
  84         function(cb) {
  85           assert(ajax.loading === true,
  86               "Request partially complete, but loading property was false.");
  87           var progress = ajax.progress;
  88           assert(progress.lengthComputable, "Progress should be computable");
  89           assert(progress.loaded == 100, "Expected 10 bytes loaded, got " + progress.loaded);
  90           assert(progress.total == 100, "Expected 100 bytes total, got " + progress.total);
  91           cb();
  92         },
  93         function(cb) {
  94           requests[0].respond(200, headers, body);
  95           cb();
  96         },
  97         animationFrameFlush,
  98         function(cb) {
  99           assert(ajax.loading === false,
 100               "Request complete, but loading property was true.");
 101           assert(ajax.response.content === "plentiful", "response not parsed");
 102           cb();
 103         }
 104       ], done);
 105     });
 106 </script>
 107 </body>
 108 </html>