Merge pull request #40 from garlicnation/wct

Migrate core-ajax to web-component-tester tests.
googlearchive · Nov 6, 2014 · 3bcaa8f · 3bcaa8f
2 parents f6fa664 + 8a1ba31
commit 3bcaa8f
Show file tree

Hide file tree

Showing 10 changed files with 551 additions and 298 deletions.
diff --git a/test/core-ajax-progress.html b/test/core-ajax-progress.html
@@ -0,0 +1,113 @@
+<!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 animationFrameFlush = function(callback) {
+        requestAnimationFrame(function(){
+          flush(callback);
+        })
+      };
+      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>
diff --git a/test/core-ajax-race.html b/test/core-ajax-race.html
@@ -0,0 +1,88 @@
+<!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);
+      };
+      var animationFrameFlush = function(callback) {
+        requestAnimationFrame(function(){
+          flush(callback);
+        })
+      };
+
+      // Make request1, then request2. request2 returns first, followed by request1.
+      async.series([
+        function(cb) {
+          ajax.url="http://example.org/request1"
+          cb();
+        },
+        flush,
+        animationFrameFlush,
+        function(cb) {
+          ajax.url="http://example.org/request2"
+          cb();
+        },
+        flush,
+        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>