Change and simplify template; move if statement on `status` into python

common/lib/capa/capa/inputtypes.py

@@ -1086,9 +1086,19 @@ class FormulaEquationInput(InputTypeBase):
 
     def _extra_context(self):
         """
-        TODO (vshnayder): Get rid of this once we have a standard way of requiring js to be loaded.
+        TODO (vshnayder): Get rid of 'previewer' once we have a standard way of requiring js to be loaded.
         """
-        return {'previewer': '/static/js/capa/formula_equation_preview.js', }
+        # `reported_status` is basically `status`, except we say 'unanswered'
+        reported_status = ''
+        if self.status == 'unsubmitted':
+            reported_status = 'unanswered'
+        elif self.status in ('correct', 'incorrect', 'incomplete'):
+            reported_status = self.status
+
+        return {
+            'previewer': '/static/js/capa/formula_equation_preview.js',
+            'reported_status': reported_status
+        }
 
     def handle_ajax(self, dispatch, get):
         '''

common/lib/capa/capa/templates/formulaequationinput.html

 <section id="formulaequationinput_${id}" class="formulaequationinput">
-    <div class="script_placeholder" data-src="${previewer}"/>
+  <div class="${reported_status}" id="status_${id}">
+    <input type="text" name="input_${id}" id="input_${id}"
+	   data-input-id="${id}" value="${value|h}"
+	   % if size:
+	   size="${size}"
+	   % endif
+	   />
 
-    % if status == 'unsubmitted':
-    <div class="unanswered" id="status_${id}">
-    % elif status == 'correct':
-    <div class="correct" id="status_${id}">
-    % elif status == 'incorrect':
-    <div class="incorrect" id="status_${id}">
-    % elif status == 'incomplete':
-    <div class="incorrect" id="status_${id}">
-    % endif
-
-    <input type="text" name="input_${id}" id="input_${id}" data-input-id="${id}" value="${value|h}"
-   % if size:
-   size="${size}"
-   % endif
-   />
-
-      <p class="status">
-        % if status == 'unsubmitted':
-        unanswered
-        % elif status == 'correct':
-        correct
-        % elif status == 'incorrect':
-        incorrect
-        % elif status == 'incomplete':
-        incomplete
-        % endif
-      </p>
+      <p class="status">${reported_status}</p>
 
       <div id="input_${id}_preview" class="equation">
         \[\]
         <img src="/static/images/spinner.gif" class="loading"/>
       </div>
-  <p id="answer_${id}" class="answer"></p>
+    <p id="answer_${id}" class="answer"></p>
+  </div>
 
-% if status in ['unsubmitted', 'correct', 'incorrect', 'incomplete']:
-</div>
-% endif
+  <div class="script_placeholder" data-src="${previewer}"/>
 </section>

common/lib/capa/capa/tests/test_input_templates.py

@@ -447,7 +447,32 @@ class TextlineTemplateTest(TemplateTestCase):
         xpath = "//span[@class='message']"
         self.assert_has_text(xml, xpath, self.context['msg'])
 
-# TODO formulaequationinput tests
+
+class FormulaEquationInputTemplateTest(TemplateTestCase):
+    """
+    Test make template for `<formulaequationinput>`s.
+    """
+    TEMPLATE_NAME = 'formulaequationinput.html'
+
+    def setUp(self):
+        self.context = {
+            'id': 2,
+            'value': 'PREFILLED_VALUE',
+            'status': 'unsubmitted',
+            'previewer': 'file.js',
+            'reported_status': 'REPORTED_STATUS',
+        }
+        super(FormulaEquationInputTemplateTest, self).setUp()
+
+    def test_no_size(self):
+        xml = self.render_to_xml(self.context)
+        self.assert_no_xpath(xml, "//input[@size]", self.context)
+
+    def test_size(self):
+        self.context['size'] = '40'
+        xml = self.render_to_xml(self.context)
+
+        self.assert_has_xpath(xml, "//input[@size='40']", self.context)
 
 class AnnotationInputTemplateTest(TemplateTestCase):
     """

common/lib/capa/capa/tests/test_inputtypes.py

@@ -809,6 +809,24 @@ class FormulaEquationTest(unittest.TestCase):
                     }
         self.assertEqual(context, expected)
 
+    def test_rendering_reported_status(self):
+        """
+        Verify that the 'reported status' matches expectations.
+        """
+        test_values = {
+            '': '',  # Default
+            'unsubmitted': 'unanswered',
+            'correct': 'correct',
+            'incorrect': 'incorrect',
+            'incomplete': 'incomplete',
+            'not a status': ''
+        }
+
+        for self_status, reported_status in test_values.iteritems():
+            self.the_input.status = self_status
+            context = self.the_input._get_render_context()  # pylint: disable=W0212
+            self.assertEqual(context['reported_status'], reported_status)
+
     def test_formcalc_ajax_sucess(self):
         """
         Verify that using the correct dispatch and valid data produces a valid response

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -173,7 +173,7 @@ section.problem {
       }
     }
 
-    &.incorrect, &.ui-icon-close {
+    &.incorrect, &.incomplete, &.ui-icon-close {
       p.status {
         @include inline-block();
         background: url('../images/incorrect-icon.png') center center no-repeat;
@@ -275,7 +275,7 @@ section.problem {
         width: 25px;
       }
 
-      &.incorrect, &.ui-icon-close {
+      &.incorrect, &.incomplete, &.ui-icon-close {
         @include inline-block();
         background: url('../images/incorrect-icon.png') center center no-repeat;
         height: 20px;