Add UI test for complex segment + fix couple bugs to get test to pass. (#13909)

* Add UI test for complex segment + fix couple bugs to get test to pass.

* fix test

3 files changed, 52 insertions, 4 deletions

diff --git a/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.controller.js b/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.controller.js
index 73a594197c..828011206f 100644
--- a/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.controller.js
+++ b/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.controller.js
@@ -228,7 +228,8 @@
                         subSegmentStr += ","; // OR operator
                     }
 
-                    subSegmentStr += orCondition.segment + orCondition.matches +  encodeURIComponent(orCondition.value);
+                    // one encode for urldecode on value, one encode for urldecode on condition
+                    subSegmentStr += orCondition.segment + orCondition.matches + encodeURIComponent(encodeURIComponent(orCondition.value));
                 });
 
                 if (segmentStr !== '') {
@@ -238,7 +239,7 @@
                 segmentStr += subSegmentStr;
             });
 
-            return segmentStr
+            return segmentStr;
         };
 
         this.setSegmentString = function (segmentStr) {
diff --git a/plugins/SegmentEditor/javascripts/Segmentation.js b/plugins/SegmentEditor/javascripts/Segmentation.js
index df5cf288d1..bfcdbda067 100644
--- a/plugins/SegmentEditor/javascripts/Segmentation.js
+++ b/plugins/SegmentEditor/javascripts/Segmentation.js
@@ -854,8 +854,8 @@ $(document).ready(function() {
         this.changeSegmentList = function () {};
 
         var cleanupSegmentDefinition = function(definition) {
-            definition = definition.replace("'", "%27");
-            definition = definition.replace("&", "%26");
+            definition = definition.replace(/'/g, "%27");
+            definition = definition.replace(/&/g, "%26");
             return definition;
         };
 
diff --git a/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js b/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
index b6d4df0691..2b17e6f7ae 100644
--- a/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
+++ b/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
@@ -27,6 +27,7 @@ describe("SegmentSelectorEditorTest", function () {
                 $(fieldName + ' .dropdown-content.active li:contains("' + textToSelect + '"):first').click();
             }, fieldName, textToSelect);
         });
+        page.click({ x: -10, y: -10 });
     }
 
     function selectDimension(page, prefixSelector, category, name)
@@ -226,4 +227,50 @@ describe("SegmentSelectorEditorTest", function () {
             page.click('.segmentationContainer .title');
         }, done);
     });
+
+    it('should correctly handle complex segments w/ encoded characters and whitespace', function (done) {
+        expect.screenshot('complex_segment').to.be.capture(function (page) {
+            page.load(url);
+
+            page.click('.segmentationContainer .title');
+            page.click('a.add_new_segment');
+            page.sendKeys('input.edit_segment_name', 'complex segment');
+
+            selectDimension(page, '.segmentRow0', 'Visitors', 'Browser');
+            selectFieldValue(page, '.segmentRow0 .segment-row:eq(0) .metricMatchBlock', 'Is not');
+
+            page.evaluate(function () {
+                var complexValue = 's#2&#--_*+?#  #5"\'&<>.22,3';
+                $('.segmentRow0 .segment-row:first .metricValueBlock input').val(complexValue).change();
+            });
+
+            page.click('.segment-add-or');
+
+            // configure or condition
+            selectDimension(page, '.segmentRow0 .segment-row:eq(1)', 'Visitors', 'Browser');
+            selectFieldValue(page, '.segmentRow0 .segment-row:eq(1) .metricMatchBlock', 'Is');
+
+            page.evaluate(function () {
+                var complexValue = 's#2&#--_*+?#  #5"\'&<>.22,3';
+                $('.segmentRow0 .segment-row:eq(1) .metricValueBlock input').val(complexValue).change();
+            });
+
+            page.click('.segment-add-row');
+
+            // configure and condition
+            selectDimension(page, '.segmentRow1', 'Visitors', 'Browser');
+            selectFieldValue(page, '.segmentRow1 .segment-row:first .metricMatchBlock', 'Is not');
+
+            page.evaluate(function () {
+                var complexValue = 's#2&#--_*+?#  #5"\'&<>.22,3';
+                $('.segmentRow1 .metricValueBlock input').val(complexValue).change();
+            });
+            page.evaluate(function () {
+                $('button.saveAndApply').click();
+            });
+            page.evaluate(function () {
+                console.log(window.location.href);
+            });
+        }, done);
+    });
 });