Fixed MATLAB Run Code bug with answer boxes.

LMS-2807

common/lib/capa/capa/templates/matlabinput.html

@@ -39,7 +39,7 @@
   <div class="external-grader-message" aria-live="polite">
     ${msg|n}
   </div>
-  <div class="external-grader-message ungraded-matlab-result" aria-live="polite">
+  <div class="ungraded-matlab-result" aria-live="polite">
     ${queue_msg|n}
   </div>
 
@@ -51,6 +51,7 @@
 
   <script>
     $(function(){
+      var IntervalManager, PendingMatlabResult;
       var gentle_alert = function (parent_elt, msg) {
           if($(parent_elt).find('.capa_alert').length) {
               $(parent_elt).find('.capa_alert').remove();
@@ -58,10 +59,11 @@
           var alert_elem = $("<div>" + msg + "</div>");
           alert_elem.addClass('capa_alert').addClass('is-fading-in');
           $(parent_elt).find('.action').after(alert_elem);
-      }
+      };
 
       // hook up the plot button
       var plot = function(event) {
+          var matlab_result_task;
           var problem_elt = $(event.target).closest('.problems-wrapper');
           url = $(event.target).closest('.problems-wrapper').data('url');
           input_id = "${id}";
@@ -82,20 +84,29 @@
           // a chain of callbacks, each querying the server on success of the previous one
 
           var get_callback = function(response) {
-              var new_result_elem = $(response.html).find(".ungraded-matlab-result");
-              new_result_elem.addClass("is-fading-in");
+              var new_result_elem = $(response.html).find(".ungraded-matlab-result").html();
+              var external_grader_msg = $(response.html).find(".external-grader-message").html();
               result_elem = $(problem_elt).find(".ungraded-matlab-result");
-              result_elem.replaceWith(new_result_elem);
-              console.log(response.html);
-          }
+              result_elem.addClass("is-fading-in");
+              result_elem.html(new_result_elem);
+              external_grader_msg_elem = $(problem_elt).find(".external-grader-message");
+              external_grader_msg_elem.addClass("is-fading-in");
+              external_grader_msg_elem.html(external_grader_msg);
+              if (!external_grader_msg.trim()) {
+                  matlab_result_task.task_poller.stop();
+              } else {
+                  result_elem.html('');
+              }
+          };
 
           var plot_callback = function(response) {
               if(response.success) {
-                  $.postWithPrefix(url + "/problem_get", get_callback);
+                  matlab_result_task = new PendingMatlabResult(get_callback);
+                  matlab_result_task.task_poller.start();
               } else {
                   gentle_alert(problem_elt, response.message);
               }
-          }
+          };
 
           var save_callback = function(response) {
               if(response.success) {
@@ -106,12 +117,62 @@
               else {
                   gentle_alert(problem_elt, response.message);
               }
-          }
+          };
 
           // save the answer
           $.postWithPrefix(url + '/problem_save', answer, save_callback);
-      }
+      };
       $('#plot_${id}').click(plot);
+
+      // Copied from lms/static/coffee/src/instructor_dashboard/util.js
+      IntervalManager = (function() {
+
+        function IntervalManager(ms, fn) {
+          this.ms = ms;
+          this.fn = fn;
+          this.intervalID = null;
+        }
+
+        IntervalManager.prototype.start = function() {
+          this.fn();
+          if (this.intervalID === null) {
+            return this.intervalID = setInterval(this.fn, this.ms);
+          }
+        };
+
+        IntervalManager.prototype.stop = function() {
+          clearInterval(this.intervalID);
+          return this.intervalID = null;
+        };
+
+        return IntervalManager;
+
+      })();
+
+      PendingMatlabResult = (function() {
+        /* Pending Matlab Result Section
+        */
+
+        function PendingMatlabResult(get_callback) {
+          var MATLAB_RESULT_POLL_INTERVAL,
+            _this = this;
+          this.reload_matlab_result = function(get_callback) {
+            return PendingMatlabResult.prototype.reload_matlab_result.apply(_this, arguments);
+          };
+          MATLAB_RESULT_POLL_INTERVAL = 1000;
+          this.reload_matlab_result(get_callback);
+          this.task_poller = new IntervalManager(MATLAB_RESULT_POLL_INTERVAL, function() {
+            return _this.reload_matlab_result(get_callback);
+          });
+        }
+
+        PendingMatlabResult.prototype.reload_matlab_result = function(get_callback) {
+          return $.postWithPrefix(url + "/problem_get", get_callback)
+        };
+
+        return PendingMatlabResult;
+
+        })();
     });
   </script>
 </section>

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

+"""
+Matlab Problem Page.
+"""
+from bok_choy.page_object import PageObject
+
+
+class MatlabProblemPage(PageObject):
+    """
+    View of matlab problem page.
+    """
+
+    url = None
+
+    def is_browser_on_page(self):
+        return self.q(css='.ungraded-matlab-result').present
+
+    @property
+    def problem_name(self):
+        """
+        Return the current problem name.
+        """
+        return self.q(css='.problem-header').text[0]
+
+    def set_response(self, response_str):
+        """
+        Input a response to the prompt.
+        """
+        input_css = "$('.CodeMirror')[0].CodeMirror.setValue('{}');".format(response_str)
+        self.browser.execute_script(input_css)
+
+    def click_run_code(self):
+        """
+        Click the run code button.
+        """
+        self.q(css='input.save').click()
+        self.wait_for_ajax()
+
+    def get_grader_msg(self, class_name):
+        """
+        Returns the text value of given class.
+        """
+        self.wait_for_ajax()
+        return self.q(css=class_name).text

common/test/acceptance/tests/test_matlab_problem.py

+# -*- coding: utf-8 -*-
+"""
+E2E tests for the LMS.
+"""
+import time
+
+from .helpers import UniqueCourseTest
+from ..pages.studio.auto_auth import AutoAuthPage
+from ..pages.lms.courseware import CoursewarePage
+from ..pages.lms.matlab_problem import MatlabProblemPage
+from ..fixtures.course import CourseFixture, XBlockFixtureDesc
+from ..fixtures.xqueue import XQueueResponseFixture
+from textwrap import dedent
+
+
+class MatlabProblemTest(UniqueCourseTest):
+    """
+    Tests that verify matlab problem "Run Code".
+    """
+    USERNAME = "STAFF_TESTER"
+    EMAIL = "johndoe@example.com"
+
+    def setUp(self):
+        super(MatlabProblemTest, self).setUp()
+
+        self.XQUEUE_GRADE_RESPONSE = None
+
+        self.courseware_page = CoursewarePage(self.browser, self.course_id)
+
+        # Install a course with sections/problems, tabs, updates, and handouts
+        course_fix = CourseFixture(
+            self.course_info['org'], self.course_info['number'],
+            self.course_info['run'], self.course_info['display_name']
+        )
+
+        problem_data = dedent("""
+            <problem markdown="null">
+                  <text>
+                    <p>
+                        Write MATLAB code to create the following row vector and store it in a variable named <code>V</code>.
+                    </p>
+                    <table id="a0000000466" class="equation" width="100%" cellspacing="0" cellpadding="7" style="table-layout:auto">
+                      <tr>
+                        <td class="equation">[1 1 2 3 5 8 13]</td>
+                      </tr>
+                    </table>
+                    <p>
+                      <coderesponse queuename="matlab">
+                        <matlabinput rows="10" cols="40" mode="" tabsize="4">
+                            <plot_payload>
+                            </plot_payload>
+                        </matlabinput>
+                        <codeparam>
+                          <initial_display/>
+                            <answer_display>
+                            </answer_display>
+                            <grader_payload>
+                            </grader_payload>
+                        </codeparam>
+                      </coderesponse>
+                    </p>
+                  </text>
+            </problem>
+        """)
+
+        course_fix.add_children(
+            XBlockFixtureDesc('chapter', 'Test Section').add_children(
+                XBlockFixtureDesc('sequential', 'Test Subsection').add_children(
+                    XBlockFixtureDesc('problem', 'Test Matlab Problem', data=problem_data)
+                )
+            )
+        ).install()
+
+        # Auto-auth register for the course.
+        AutoAuthPage(self.browser, username=self.USERNAME, email=self.EMAIL,
+                     course_id=self.course_id, staff=False).visit()
+
+    def _goto_matlab_problem_page(self):
+        """
+        Open matlab problem page with assertion.
+        """
+        self.courseware_page.visit()
+        matlab_problem_page = MatlabProblemPage(self.browser)
+        self.assertEqual(matlab_problem_page.problem_name, 'TEST MATLAB PROBLEM')
+        return matlab_problem_page
+
+    def test_run_code(self):
+        """
+        Test "Run Code" button functionality.
+        """
+
+        # Enter a submission, which will trigger a pre-defined response from the XQueue stub.
+        self.submission = "a=1" + self.unique_id[0:5]
+
+        self.XQUEUE_GRADE_RESPONSE = {'msg': self.submission}
+
+        matlab_problem_page = self._goto_matlab_problem_page()
+
+        # Configure the XQueue stub's response for the text we will submit
+        if self.XQUEUE_GRADE_RESPONSE is not None:
+            XQueueResponseFixture(self.submission, self.XQUEUE_GRADE_RESPONSE).install()
+
+        matlab_problem_page.set_response(self.submission)
+        matlab_problem_page.click_run_code()
+
+        self.assertEqual(
+            u'Submitted. As soon as a response is returned, this message will be replaced by that feedback.',
+            matlab_problem_page.get_grader_msg(".external-grader-message")[0]
+        )
+
+        # Wait 5 seconds for xqueue stub server grader response sent back to lms.
+        time.sleep(5)
+
+        self.assertEqual(u'', matlab_problem_page.get_grader_msg(".external-grader-message")[0])
+        self.assertEqual(
+            self.XQUEUE_GRADE_RESPONSE.get("msg"),
+            matlab_problem_page.get_grader_msg(".ungraded-matlab-result")[0]
+        )