Fix #39 GET params values get dropped from URL

- use encodeURIComponent to encode the 'path' query parameter so that any question marks (and other special chars) in the path are processed correctly. - add tests/functional/testIssue39.js
janodvarko · Aug 30, 2015 · 0fb0e13 · 0fb0e13
1 parent 9e30d90
commit 0fb0e13
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 6 deletions.
diff --git a/selenium/tests/testIssue39.html.php b/selenium/tests/testIssue39.html.php
@@ -0,0 +1,28 @@
+<!doctype html>
+<?php
+require_once("config.php");
+?>
+<html>
+<head>
+  <title>testIssue39.html.php</title>
+</head>
+<body>
+
+<!-- Test local (relative) HAR -->
+<div id="previewLocalWithQueryString" class="har" height="100" data-har="/selenium/tests/hars/simple.har?action=show_me_har_file"></div>
+
+<!-- Test remote (JSONP) HAR -->
+<div id="previewNonLocalWithQueryString" class="har" height="100" data-har="<?php echo $test_base.'tests/hars/testLoad1.harp?action=show_me_har_file' ?>" data-callback="callback_testLoad1"></div>
+
+<script>
+(function() {
+    var har = document.createElement("script");
+    har.src = "<?php echo $harviewer_base ?>har.js";
+    har.setAttribute("id", "har");
+    har.setAttribute("async", "true");
+    document.documentElement.firstChild.appendChild(har);
+})();
+</script>
+
+</body>
+</html>
diff --git a/tests/functional-suites.js b/tests/functional-suites.js
@@ -28,6 +28,7 @@ define([
       'tests/functional/testSearchHAR',
       'tests/functional/testPreviewExpand',
       'tests/functional/testEmbeddedInvalidPreview',
-      'tests/functional/testSearchJsonQuery'
+      'tests/functional/testSearchJsonQuery',
+      'tests/functional/testIssue39'
     ];
 });
diff --git a/tests/functional/testIssue39.js b/tests/functional/testIssue39.js
@@ -0,0 +1,72 @@
+define([
+  'intern',
+  'intern!object',
+  'intern/chai!assert',
+  'require',
+  './DriverUtils',
+  'intern/dojo/node!leadfoot/helpers/pollUntil'
+], function(intern, registerSuite, assert, require, DriverUtils, pollUntil) {
+  var harViewerBase = intern.config.harviewer.harViewerBase;
+  var testBase = intern.config.harviewer.testBase;
+
+  registerSuite({
+    name: 'testIssue39',
+
+    /**
+     * https://github.com/janodvarko/harviewer/issues/39
+     * Query param values get dropped from URL when used as "data-har" HTML attribute.
+     * E.g.:
+     *   <div class="har" height="500" data-har="http://example.com/index.php?action=show_me_har_file"></div>
+     * Leads to IFRAME URL of:
+     *   http://example.com/index.php?action&callback=onInputData&_=1440704124791
+     */
+    'testIssue39': function() {
+      // Some of these tests need a larger timeout for finding DOM elements
+      // because we need the HAR to parse/display fully before we query the DOM.
+      var findTimeout = intern.config.harviewer.findTimeout;
+      var r = this.remote;
+      var utils = new DriverUtils(r);
+
+      var url = testBase + "tests/testIssue39.html.php";
+
+      return r
+        .setFindTimeout(findTimeout)
+        .get(url)
+        .then(DriverUtils.waitForElements("iframe", 2, findTimeout))
+        .then(pollUntil(DriverUtils.querySelectAllInFrameAndReturnLengthOrNull, ['#previewLocalWithQueryString', '.pageTable'], findTimeout))
+        .then(function(len) {
+          assert.strictEqual(len, 1, "#previewLocalWithQueryString.pageTable");
+        })
+        .findByCssSelector("#previewLocalWithQueryString iframe")
+        .then(function(iframe) {
+            return iframe.getAttribute("src").then(function(src) {
+                // search for the action parameter and value.
+                // "%3D" === encodeURIComponent("=")
+                assert.include(src, "action%3Dshow_me_har_file");
+            });
+        })
+        .end() // end IFRAME
+        .then(pollUntil(DriverUtils.querySelectAllInFrameAndReturnLengthOrNull, ['#previewNonLocalWithQueryString', '.pageTable'], findTimeout))
+        .then(function(len) {
+          assert.strictEqual(len, 1, "#previewNonLocalWithQueryString.pageTable");
+        })
+        .findByCssSelector("#previewNonLocalWithQueryString iframe")
+        .then(function(iframe) {
+            return iframe.getAttribute("src").then(function(src) {
+                // search for the action parameter and value.
+                // "%3D" === encodeURIComponent("=")
+                assert.include(src, "action%3Dshow_me_har_file");
+            });
+        })
+        .end() // end IFRAME
+        .then(pollUntil(DriverUtils.querySelectAllInFrameAndReturnLengthOrNull, ['#previewLocalWithQueryString', '.netRow'], findTimeout))
+        .then(function(len) {
+          assert.strictEqual(len, 2, "#previewLocalWithQueryString.netRow");
+        })
+        .then(pollUntil(DriverUtils.querySelectAllInFrameAndReturnLengthOrNull, ['#previewNonLocalWithQueryString', '.netRow'], findTimeout))
+        .then(function(len) {
+          assert.strictEqual(len, 11, "#previewNonLocalWithQueryString.netRow");
+        });
+    }
+  });
+});
diff --git a/webapp/har.js b/webapp/har.js
@@ -6,7 +6,7 @@
 /**
  * Finds all elements with class="har" on the page and creates HAR preview frame for each.
  * See list of attributes that can be specified on such elements:
- * 
+ *
  * class: (mandatory) elements with this class are considered as HAR preview elements.
  *      The class is removed as soon as the element is processed. Possible additional
  *      classes are not touched.
@@ -19,7 +19,7 @@
  * height: (optional, default: '150px') height of the preview.
  * expand: (optional, default: 'true') true if individual pages should be expanded.
  * validate: (optional, default: 'true') false if HAR validation (according to the schema) should be skipped.
- * 
+ *
  * Embed this script on a page:
  * <script>
  * (function() {
@@ -31,11 +31,11 @@
  * })();
  * if(typeof(harInitialize)!="undefined"){harInitialize()}
  * </script>
- * 
+ *
  * Examples of HAR elements:
  * <div class="har" data-har="http://example.com/my.harp"></div>
  * - load HARP file from an external domain using JSONP.
- * 
+ *
  * <div class="har" data-har="/my.har"></div>
  * - load HAR file from the same domain.
 
@@ -66,7 +66,7 @@ window.harInitialize = function()
         var expand = element.getAttribute("expand");
         var validate = element.getAttribute("validate");
 
-        var args = "?" + (path.indexOf("http:") == 0 ? "inputUrl" : "path") + "=" + path;
+        var args = "?" + (path.indexOf("http:") == 0 ? "inputUrl" : "path") + "=" + encodeURIComponent(path);
         if (expand != "false")
             args += "&expand=" + (expand ? expand : "true");