Key entry and click both hide error message. QUnit test doesn't work …

…for the click case.

functional_tests/test_list_item_validation.py

@@ -5,6 +5,12 @@ class ItemValidationTest(FunctionalTest):
     def get_error_element(self):
         return self.browser.find_element_by_css_selector('.has-error')
 
+    def cause_validation_error(self):
+        self.browser.get(self.server_url)
+        self.get_item_input_box().send_keys('\n')
+        error = self.get_error_element()
+        self.assertTrue(error.is_displayed())
+
     def test_cannot_add_empty_list_items(self):
         # Rob goes to the home page and accidentally tires to submit
         # an empty list item. He hits Enter on the empty input box.
@@ -50,10 +56,7 @@ def test_cannot_add_duplicate_items(self):
 
     def test_error_messages_are_cleared_on_input(self):
         # Rob starts a new list in a way that causes a validation error:
-        self.browser.get(self.server_url)
-        self.get_item_input_box().send_keys('\n')
-        error = self.get_error_element()
-        self.assertTrue(error.is_displayed())
+        self.cause_validation_error()
 
         # He starts typing in the input box to clear the error
         self.get_item_input_box().send_keys('a')
@@ -64,3 +67,13 @@ def test_error_messages_are_cleared_on_input(self):
 
         # is_displayed() informs us whether an element is visible or not
 
+    def test_error_messages_are_cleared_on_click_inside_element(self):
+        # Rob starts a new list in a way that causes a validation error
+        self.cause_validation_error()
+
+        # He clicks the box to clear the error
+        self.get_item_input_box().click()
+
+        # He is pleased to have the error message disappear
+        error = self.get_error_element()
+        self.assertFalse(error.is_displayed())

lists/static/list.js

@@ -1,6 +1,14 @@
 /*global $, test, equal */
 
-$('input').on('keypress', function() {
-    $('.has-error').hide();
+$(document).ready(function () {
+    $('input').on('keypress', function() {
+        $('.has-error').hide();
+    });
+});
+
+$(document).ready(function () {
+    $('input').on('click', function() {
+        $('.has-error').hide();
+    });
 });
 

lists/static/tests/tests.html

@@ -10,7 +10,7 @@
     <div id="qunit"></div>
     <div id="qunit-fixture">
         <form>
-            <input name="text" />
+            <input id="id_text" name="text" />
             <div class="has-error">Error text</div>
         </form>
     </div>
@@ -22,13 +22,19 @@
 /*global $, test, equal */
 
 test("errors should be hidden on keypress", function() {
-  $('input').trigger('keypress'); //
-  equal($('.has-error').is(':visible'), false);
+    $('#id_text').trigger('keypress'); //
+    equal($('.has-error').is(':visible'), false);
 });
 
-test("errors shouldn't be hidden before keypress", function() {
+test("errors should be hidden on click", function() {
+    $('#id_text').trigger('click'); //
+    equal($('.has-error').is(':visible'), false);
+});
+
+test("errors should be visible before keypress or click", function() {
     equal($('.has-error').is(':visible'), true);
 });
+
     </script>
 
 </body>