Fixed MathJax rendering in problem hint

TNL-2857

common/lib/xmodule/xmodule/js/src/capa/display.coffee

@@ -711,7 +711,13 @@ class @Problem
     else
       next_index = parseInt(hint_index) + 1
     $.postWithPrefix "#{@url}/hint_button", hint_index: next_index, input_id: @id, (response) =>
-      @$('.problem-hint').html(response.contents)
-      @$('.problem-hint').attr('hint_index', response.hint_index)
+      hint_container = @.$('.problem-hint')
+      hint_container.html(response.contents)
+      MathJax.Hub.Queue [
+        'Typeset'
+        MathJax.Hub
+        hint_container[0]
+      ]
+      hint_container.attr('hint_index', response.hint_index)
       @$('.hint-button').focus()  # a11y focus on click, like the Check button
 

common/test/acceptance/pages/lms/problem.py

@@ -42,6 +42,22 @@ class ProblemPage(PageObject):
         """
         return self.q(css="div.problem div.problem-hint").text[0]
 
+    @property
+    def mathjax_rendered_in_problem(self):
+        """
+        Check that MathJax have been rendered in problem hint
+        """
+        mathjax_container = self.q(css="div.problem p .MathJax .math")
+        return mathjax_container.visible and mathjax_container.present
+
+    @property
+    def mathjax_rendered_in_hint(self):
+        """
+        Check that MathJax have been rendered in problem hint
+        """
+        mathjax_container = self.q(css="div.problem div.problem-hint .MathJax .math")
+        return mathjax_container.visible and mathjax_container.present
+
     def fill_answer(self, text):
         """
         Fill in the answer to the problem.

common/test/acceptance/tests/lms/test_lms_problems.py

@@ -4,12 +4,13 @@ Bok choy acceptance tests for problems in the LMS
 
 See also old lettuce tests in lms/djangoapps/courseware/features/problems.feature
 """
+from textwrap import dedent
+
 from ..helpers import UniqueCourseTest
 from ...pages.studio.auto_auth import AutoAuthPage
 from ...pages.lms.courseware import CoursewarePage
 from ...pages.lms.problem import ProblemPage
 from ...fixtures.course import CourseFixture, XBlockFixtureDesc
-from textwrap import dedent
 from ..helpers import EventsTestMixin
 
 
@@ -53,6 +54,7 @@ class ProblemClarificationTest(ProblemsTest):
     """
     Tests the <clarification> element that can be used in problem XML.
     """
+
     def get_problem(self):
         """
         Create a problem with a <clarification>
@@ -93,6 +95,7 @@ class ProblemExtendedHintTest(ProblemsTest, EventsTestMixin):
     """
     Test that extended hint features plumb through to the page html and tracking log.
     """
+
     def get_problem(self):
         """
         Problem with extended hint features.
@@ -161,3 +164,52 @@ class ProblemExtendedHintTest(ProblemsTest, EventsTestMixin):
                 {'event': {u'hint_index': 0, u'hint_len': 2, u'hint_text': u'demand-hint1'}}
             ],
             actual_events)
+
+
+class ProblemWithMathjax(ProblemsTest):
+    """
+    Tests the <MathJax> used in problem
+    """
+
+    def get_problem(self):
+        """
+        Create a problem with a <MathJax> in body and hint
+        """
+        xml = dedent(r"""
+            <problem>
+                <p>Check mathjax has rendered [mathjax]E=mc^2[/mathjax]</p>
+                <multiplechoiceresponse>
+                  <choicegroup label="Answer this?" type="MultipleChoice">
+                    <choice correct="true">Choice1 <choicehint>Correct choice message</choicehint></choice>
+                    <choice correct="false">Choice2<choicehint>Wrong choice message</choicehint></choice>
+                  </choicegroup>
+                </multiplechoiceresponse>
+                <demandhint>
+                        <hint>mathjax should work1 \(E=mc^2\) </hint>
+                        <hint>mathjax should work2 [mathjax]E=mc^2[/mathjax]</hint>
+                </demandhint>
+            </problem>
+        """)
+        return XBlockFixtureDesc('problem', 'MATHJAX TEST PROBLEM', data=xml)
+
+    def test_mathjax_in_hint(self):
+        """
+        Test that MathJax have successfully rendered in problem hint
+        """
+        self.courseware_page.visit()
+        problem_page = ProblemPage(self.browser)
+        self.assertEqual(problem_page.problem_name, "MATHJAX TEST PROBLEM")
+
+        # Verify Mathjax have been rendered
+        self.assertTrue(problem_page.mathjax_rendered_in_problem, "MathJax did not rendered in body")
+
+        # The hint button rotates through multiple hints
+        problem_page.click_hint()
+        self.assertIn("Hint (1 of 2): mathjax should work1", problem_page.hint_text)
+        self.assertTrue(problem_page.mathjax_rendered_in_hint, "MathJax did not rendered in problem hint")
+
+        # Rotate the hint and check the problem hint
+        problem_page.click_hint()
+
+        self.assertIn("Hint (2 of 2): mathjax should work2", problem_page.hint_text)
+        self.assertTrue(problem_page.mathjax_rendered_in_hint, "MathJax did not rendered in problem hint")