Should respond a popover with question and option description for every click

4 files changed, 76 insertions, 35 deletions

diff --git a/webapp/coffee/dependency_input.coffee b/webapp/coffee/dependency_input.coffee
index d67d430..7b9432a 100644
--- a/webapp/coffee/dependency_input.coffee
+++ b/webapp/coffee/dependency_input.coffee
@@ -24,20 +24,26 @@ class DependencyInput
         q_value = "ID no identificado"
         opt_value = "ID inexistente o vacío"
 
-        opt_id = @value
-        opt_name = ".options.#{opt_id}.text"
-        opt_widget = $("input[name$='#{opt_name}']")
-        if opt_widget.length > 0
-            opt_value = opt_widget.val()
-            q_name = opt_widget.attr("name").replace(opt_name, ".name")
-            question_widget = $("input[name='#{q_name}']")
-            if question_widget.length > 0
-                q_value = question_widget.val()
+        input.on "click", ->
+            opt_id = @value
+            opt_name = ".options.#{opt_id}.text"
+            opt_widget = $("input[name$='#{opt_name}']")
+            if opt_widget.length > 0
+                opt_value = opt_widget.val()
+                q_name = opt_widget.attr("name").replace(opt_name, ".name")
+                question_widget = $("input[name='#{q_name}']")
+                if question_widget.length > 0
+                    q_value = question_widget.val()
+            input.popover({
+                title: q_value,
+                content: opt_value,
+                trigger: "manual"
+            })
+            input.popover("show")
+
+        input.on "blur", ->
+            input.popover("destroy")
 
-        input.popover({
-            title: q_value,
-            content: opt_value
-        })
         return widget
 
 
diff --git a/webapp/js_tests/spec/DependencyInputSpec.js b/webapp/js_tests/spec/DependencyInputSpec.js
index aa94ccc..dc339ca 100644
--- a/webapp/js_tests/spec/DependencyInputSpec.js
+++ b/webapp/js_tests/spec/DependencyInputSpec.js
@@ -36,8 +36,8 @@
       input.click();
       return expect(container).toContain(".popover");
     });
-    return it("should respond a popover with question and option description", function() {
-      var container, dependency_input, field_order, group_order, input, mock_field_order, mock_group_order, mock_option, mock_question, opt_id, opt_name, opt_value, popover_content, popover_title, q_name, q_value, widget;
+    return it("should respond a popover with question and option description for every click", function() {
+      var container, dependency_input, field_order, group_order, input, mock_field_order, mock_group_order, mock_option, mock_question, new_value, opt_id, opt_name, opt_selector, opt_value, popover_content, popover_title, q_name, q_name_, q_selector, q_value, widget;
       setFixtures('<div id="container"></div>');
       container = $('#container');
       mock_group_order = "0";
@@ -48,8 +48,8 @@
       container.append(mock_question);
       opt_id = "1378749492016";
       opt_value = "option value";
-      q_name = q_name.replace(".name", "");
-      opt_name = "" + q_name + ".options." + opt_id + ".text";
+      q_name_ = q_name.replace(".name", "");
+      opt_name = "" + q_name_ + ".options." + opt_id + ".text";
       mock_option = "<input type=\"text\" name=\"" + opt_name + "\" value=\"" + opt_value + "\">";
       container.append(mock_option);
       group_order = "1";
@@ -63,7 +63,19 @@
       popover_title = $(".popover .popover-title");
       expect(popover_title).toHaveText(q_value);
       popover_content = $(".popover .popover-content");
-      return expect(popover_content).toHaveText(opt_value);
+      expect(popover_content).toHaveText(opt_value);
+      $(".popover").remove();
+      input.blur();
+      new_value = "new value";
+      q_selector = "input[name=\"" + q_name + "\"]";
+      opt_selector = "input[name=\"" + opt_name + "\"]";
+      $(q_selector).val(new_value);
+      $(opt_selector).val(new_value);
+      input.click();
+      popover_title = $(".popover .popover-title");
+      expect(popover_title).toHaveText(new_value);
+      popover_content = $(".popover .popover-content");
+      return expect(popover_content).toHaveText(new_value);
     });
   });
 
diff --git a/webapp/js_tests/spec/coffee/DependencyInputSpec.coffee b/webapp/js_tests/spec/coffee/DependencyInputSpec.coffee
index df1dc60..320e162 100644
--- a/webapp/js_tests/spec/coffee/DependencyInputSpec.coffee
+++ b/webapp/js_tests/spec/coffee/DependencyInputSpec.coffee
@@ -39,7 +39,7 @@ describe "DependencyInput", ->
 
         expect(container).toContain(".popover")
 
-    it "should respond a popover with question and option description", ->
+    it "should respond a popover with question and option description for every click", ->
         setFixtures('<div id="container"></div>');
         container = $('#container');
 
@@ -54,8 +54,8 @@ describe "DependencyInput", ->
 
         opt_id = "1378749492016"
         opt_value = "option value"
-        q_name = q_name.replace(".name", "")
-        opt_name = "#{q_name}.options.#{opt_id}.text"
+        q_name_ = q_name.replace(".name", "")
+        opt_name = "#{q_name_}.options.#{opt_id}.text"
         mock_option = """
             <input type="text" name="#{opt_name}" value="#{opt_value}">
                       """
@@ -75,3 +75,18 @@ describe "DependencyInput", ->
 
         popover_content = $(".popover .popover-content")
         expect(popover_content).toHaveText(opt_value)
+
+        $(".popover").remove()
+        input.blur()
+        new_value = "new value"
+        q_selector = """input[name="#{q_name}"]"""
+        opt_selector = """input[name="#{opt_name}"]"""
+        $(q_selector).val(new_value)
+        $(opt_selector).val(new_value)
+        input.click()
+
+        popover_title = $(".popover .popover-title")
+        expect(popover_title).toHaveText(new_value)
+
+        popover_content = $(".popover .popover-content")
+        expect(popover_content).toHaveText(new_value)
diff --git a/webapp/webapp/static/js/dependency_input.js b/webapp/webapp/static/js/dependency_input.js
index cfdff32..457b317 100644
--- a/webapp/webapp/static/js/dependency_input.js
+++ b/webapp/webapp/static/js/dependency_input.js
@@ -11,7 +11,7 @@
     }
 
     DependencyInput.prototype.render = function() {
-      var context, input, opt_id, opt_name, opt_value, opt_widget, q_name, q_value, question_widget, widget;
+      var context, input, opt_value, q_value, widget;
       context = {
         "value": this.value,
         "order": this.field_order,
@@ -22,20 +22,28 @@
       input = $(widget[3]);
       q_value = "ID no identificado";
       opt_value = "ID inexistente o vacío";
-      opt_id = this.value;
-      opt_name = ".options." + opt_id + ".text";
-      opt_widget = $("input[name$='" + opt_name + "']");
-      if (opt_widget.length > 0) {
-        opt_value = opt_widget.val();
-        q_name = opt_widget.attr("name").replace(opt_name, ".name");
-        question_widget = $("input[name='" + q_name + "']");
-        if (question_widget.length > 0) {
-          q_value = question_widget.val();
+      input.on("click", function() {
+        var opt_id, opt_name, opt_widget, q_name, question_widget;
+        opt_id = this.value;
+        opt_name = ".options." + opt_id + ".text";
+        opt_widget = $("input[name$='" + opt_name + "']");
+        if (opt_widget.length > 0) {
+          opt_value = opt_widget.val();
+          q_name = opt_widget.attr("name").replace(opt_name, ".name");
+          question_widget = $("input[name='" + q_name + "']");
+          if (question_widget.length > 0) {
+            q_value = question_widget.val();
+          }
         }
-      }
-      input.popover({
-        title: q_value,
-        content: opt_value
+        input.popover({
+          title: q_value,
+          content: opt_value,
+          trigger: "manual"
+        });
+        return input.popover("show");
+      });
+      input.on("blur", function() {
+        return input.popover("destroy");
       });
       return widget;
     };