Address comments; improve reliability of progress test.

rictic · rictic · commit 94945293f87d · 2014-10-23T11:10:15.000-07:00
* changed single-quoted attributes to double quoted
 * use a slower network request to more reliably assert about the request
   while it is loading
 * add a core-range to the progress test in order to catch the assignment to
   read-only property bug
diff --git a/core-ajax.html b/core-ajax.html
@@ -217,6 +217,10 @@
      */
     xhrArgs: null,
 
+    created: function() {
+      this.progress = {};
+    },
+
     ready: function() {
       this.xhr = document.createElement('core-xhr');
     },
diff --git a/demo-progress.html b/demo-progress.html
@@ -11,7 +11,7 @@
   <polymer-element name="progress-test">
     <template>
       <core-ajax
-          id='ajax' auto
+          id="ajax" auto
           url="http://httpbin.org/drip"
           params="{{ {numbytes: numbytes, duration:5} }}"
           response="{{response}}"
@@ -23,17 +23,19 @@
         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}}'>
+        <button on-click="{{restart}}">Restart</button>
+        <template if="{{loading}}">
           Loading...
         </template>
-        <template if='{{!loading}}'>
+        <template if="{{!loading}}">
           Loaded!
         </template>
       </div>
-      <template if='{{loading && progress.loaded}}'>
+      <template if="{{loading && progress.loaded}}">
         <paper-progress
             value="{{progress.loaded}}"
             min="0"
diff --git a/tests/html/core-ajax-progress-and-loading.html b/tests/html/core-ajax-progress-and-loading.html
@@ -16,19 +16,32 @@
   <script src="../../../polymer-test-tools/htmltest.js"></script>
 
   <link rel="import" href="../../core-ajax.html">
+  <link rel="import" href="../../../core-range/core-range.html">
 
 </head>
 <body>
 
   <polymer-element name="race-condition">
     <template>
       <!-- TODO: change this from /headers to /drip if we can get httpbin to
-                 send a Content-Length with their /drip response. -->
+                 send a Content-Length with their /drip response.
+                 The delay is needed so that we can make assertions about
+                 the intermediate state in browsers that are slow to
+                 notice attribute changes.
+
+                 https://github.com/kennethreitz/httpbin/pull/160
+                 -->
       <core-ajax
-          auto url="http://httpbin.org/headers"
-          params="{{ {numbytes: numbytes, duration:1} }}"
+          auto url="http://httpbin.org/delay/1"
           loading="{{loading}}" progress="{{progress}}"
-          on-core-response='{{responseReceived}}'></core-ajax>
+          on-core-response="{{responseReceived}}"></core-ajax>
+      <core-range
+            id="range"
+            value="{{progress.loaded}}"
+            min="0"
+            max="{{progress.total}}"
+            ratio="{{ratio}}">
+      </core-range>
     </template>
     <script>
       Polymer({
@@ -53,23 +66,31 @@
           // Shortly after the response is received we should settle into
           // the final consistent state for the element.
           setTimeout(function() {
-            chai.assert.equal(this.loading, false);
-            chai.assert.equal(this.loadingWasTrue, true);
+            chai.assert.equal(this.loading, false,
+                              'Should no longer be loading');
+            chai.assert.equal(
+                this.loadingWasTrue, true,
+                'For a little while, we should have been loading.');
             if (this.progress && this.progress.lengthComputable) {
               chai.assert.equal(this.progress.total, this.progress.loaded);
             }
             this.assertConsistent();
             clearTimeout(this.finalTimeout);
             done();
-          }.bind(this), 100);
+          }.bind(this), 300);
         },
         assertConsistent: function() {
-          debugger;
           if (this.progress && this.progress.lengthComputable) {
             chai.assert.isNumber(this.progress.total);
             chai.assert.isNumber(this.progress.loaded);
+            chai.assert.isNumber(this.ratio);
             chai.assert(this.progress.loaded >= 0,
                         'Bytes loaded should not be negative.');
+            if (this.progress.loaded > 0) {
+              this.$.range.update();
+              chai.assert(this.ratio > 0,
+                          'If bytes loaded is >0, % loaded must be >0.');
+            }
             chai.assert(this.progress.loaded <= this.progress.total,
                         'Bytes loaded should be less than or equal the total.');
             if (this.previousLoaded !== null) {
@@ -86,9 +107,9 @@
             this.loadingFinished = true;
           }
           if (this.loadingFinished) {
-              chai.assert.equal(
-                  this.loading, false,
-                  'Once loaded, the request should stay that way');
+            chai.assert.equal(
+                this.loading, false,
+                'Once loaded, the request should stay that way');
           }
         }
       });
