Jasmine tests for full staff grading.

openassessment/templates/openassessmentblock/staff_area/oa_staff_grade_learners.html

@@ -24,6 +24,7 @@
 
     <div class="staff__grade__content ui-toggle-visibility__content">
         <div class="wrapper--input">
+            <div class="staff__grade__form--error"></div>
             <div class="staff__grade__form"></div>
         </div>
     </div>

openassessment/xblock/static/js/fixtures/templates.json

@@ -1031,5 +1031,117 @@
             ]
         },
         "output": "oa_turbo_mode.html"
+    },
+    {
+        "template": "openassessmentblock/staff_area/oa_staff_grade_learners_assessment.html",
+        "context": {
+            "rubric_criteria": [
+                {
+                    "name": "vocabulary",
+                    "prompt": "vocabulary",
+                    "order_num": 0,
+                    "feedback": "optional",
+                    "options": [
+                        {
+                            "order_num": 0,
+                            "points": 0,
+                            "name": "Bad"
+                        },
+                        {
+                            "order_num": 1,
+                            "points": 1,
+                            "name": "Good"
+                        }
+                    ]
+                },
+                {
+                    "name": "grammar",
+                    "prompt": "grammar",
+                    "order_num": 1,
+                    "options": [
+                        {
+                            "order_num": 0,
+                            "points": 0,
+                            "name": "Bad"
+                        },
+                        {
+                            "order_num": 1,
+                            "points": 1,
+                            "name": "Good"
+                        }
+                    ]
+                },
+                {
+                    "name": "feedback_only",
+                    "prompt": "Feedback only, no options!",
+                    "order_num": 2,
+                    "feedback": "required",
+                    "options": []
+                }
+            ],
+            "submission": {
+                "answer": {
+                    "text": "testing response text"
+                }
+            },
+            "student_username": "mock_user"
+        },
+        "output": "oa_staff_grade_learners_assessment.html"
+    },
+    {
+        "template": "openassessmentblock/staff_area/oa_staff_grade_learners_assessment.html",
+        "context": {
+            "rubric_criteria": [
+                {
+                    "name": "vocabulary",
+                    "prompt": "vocabulary",
+                    "order_num": 0,
+                    "feedback": "optional",
+                    "options": [
+                        {
+                            "order_num": 0,
+                            "points": 0,
+                            "name": "Bad"
+                        },
+                        {
+                            "order_num": 1,
+                            "points": 1,
+                            "name": "Good"
+                        }
+                    ]
+                },
+                {
+                    "name": "grammar",
+                    "prompt": "grammar",
+                    "order_num": 1,
+                    "options": [
+                        {
+                            "order_num": 0,
+                            "points": 0,
+                            "name": "Bad"
+                        },
+                        {
+                            "order_num": 1,
+                            "points": 1,
+                            "name": "Good"
+                        }
+                    ]
+                },
+                {
+                    "name": "feedback_only",
+                    "prompt": "Feedback only, no options!",
+                    "order_num": 2,
+                    "feedback": "required",
+                    "options": []
+                }
+            ],
+            "submission": {
+                "answer": {
+                    "text": "testing response text"
+                }
+            },
+            "student_username": "mock_user_2"
+        },
+        "output": "oa_staff_grade_learners_assessment_2.html"
     }
 ]

openassessment/xblock/static/js/spec/lms/oa_staff_area.js

@@ -20,26 +20,28 @@ describe('OpenAssessment.StaffAreaView', function() {
     var StubServer = function() {
         this.studentTemplate = 'oa_student_info.html';
         this.staffAreaTemplate = 'oa_staff_area.html';
+        this.staffGradeFormTemplate = 'oa_staff_grade_learners_assessment.html';
 
         // Remember which fragments have been loaded
         this.fragmentsLoaded = [];
 
-        // Render the template for the staff info view
-        this.render = function(component) {
+        this.mockLoadTemplate = function(template) {
             var server = this;
-            this.fragmentsLoaded.push(component);
             return $.Deferred(function(defer) {
-                var fragment = readFixtures(server.staffAreaTemplate);
+                var fragment = readFixtures(template);
                 defer.resolveWith(server, [fragment]);
             });
         };
 
-        this.studentInfo = function() {
+        // Render the template for the staff info view
+        this.render = function(component) {
             var server = this;
-            return $.Deferred(function(defer) {
-                var fragment = readFixtures(server.studentTemplate);
-                defer.resolveWith(server, [fragment]);
-            });
+            this.fragmentsLoaded.push(component);
+            return this.mockLoadTemplate(server.staffAreaTemplate);
+        };
+
+        this.studentInfo = function() {
+            return this.mockLoadTemplate(server.studentTemplate);
         };
 
         this.scheduleTraining = function() {
@@ -64,8 +66,11 @@ describe('OpenAssessment.StaffAreaView', function() {
             return successPromise;
         };
 
-        this.data = {};
+        this.staffGradeForm = function() {
+            return this.mockLoadTemplate(server.staffGradeFormTemplate);
+        };
 
+        this.data = {};
     };
 
     // Stubs
@@ -74,6 +79,7 @@ describe('OpenAssessment.StaffAreaView', function() {
 
     /**
      * Create a staff area view.
+     *
      * @param {dict} serverResponse An optional fake response from the server.
      * @param {string} staffAreaTemplate - An optional template to use.
      * @returns {OpenAssessment.StaffAreaView} The staff area view.
@@ -95,7 +101,8 @@ describe('OpenAssessment.StaffAreaView', function() {
     /**
      * Initialize the staff area view, then check whether it makes
      * an AJAX call to populate itself.
-     * @param shouldCall True if an AJAX call should be made.
+     *
+     * @param {bool} shouldCall - True if an AJAX call should be made.
      */
     var assertStaffAreaAjaxCall = function(shouldCall) {
         createStaffArea();
@@ -247,7 +254,7 @@ describe('OpenAssessment.StaffAreaView', function() {
         });
     });
 
-    describe('Staff Tools', function() {
+    describe('Manage Individual Learners', function() {
         var chooseStudent = function(view, studentName) {
             var studentNameField = $('.openassessment__student_username', view.element),
                 submitButton = $('.action--submit-username', view.element);
@@ -278,6 +285,15 @@ describe('OpenAssessment.StaffAreaView', function() {
                 .toBe('You must provide a learner name.');
         });
 
+        it('shows an error message when failing to load the student info', function() {
+            var staffArea = createStaffArea();
+            server.studentInfo = failWith(server);
+            chooseStudent(staffArea, 'testStudent');
+            expect($('.openassessment_student_info_form .form--error', staffArea.element).first().text().trim()).toBe(
+                'Unexpected server error.'
+            );
+        });
+
         describe('Submission Management', function() {
             it('updates submission cancellation button when comments changes', function() {
                 // Prevent the server's response from resolving,
@@ -400,7 +416,6 @@ describe('OpenAssessment.StaffAreaView', function() {
                 fillAssessment($assessment);
 
                 // Submit the assessment but return a server error message
-                staffArea.comment('Cancellation reason.');
                 server.staffAssess = failWith(server, serverErrorMessage);
                 submitAssessment(staffArea);
 
@@ -410,7 +425,7 @@ describe('OpenAssessment.StaffAreaView', function() {
         });
     });
 
-    describe('Staff Info', function() {
+    describe('View Assignment Statistics', function() {
         beforeEach(function() {
             loadFixtures('oa_base_course_staff.html');
         });
@@ -427,4 +442,107 @@ describe('OpenAssessment.StaffAreaView', function() {
             expect($staffInfoPanel).toHaveClass('is--hidden');
         });
     });
+
+    describe('Grade Available Responses', function() {
+        var showInstructorAssessmentForm = function(staffArea) {
+            $('.staff__grade__control', staffArea.element).click();
+        };
+
+        var fillAssessment = function($assessment) {
+            $('#staff__assessment__rubric__question--2__feedback', $assessment).val('Text response');
+            $('.question__answers', $assessment).each(function() {
+                $('input[type="radio"]', this).first().click();
+            });
+        };
+
+        var submitAssessment = function(staffArea) {
+            var $assessment = $('.wrapper--staff-assessment', staffArea.element),
+                $submitButton = $('.action--submit', $assessment);
+            $submitButton.click();
+        };
+
+        beforeEach(function() {
+            loadFixtures('oa_base_course_staff.html');
+        });
+
+        it('enables both submit buttons when all required fields are specified', function() {
+            var staffArea = createStaffArea({}, 'oa_staff_area_full_grading.html'),
+                $assessment, $submitButtons;
+            showInstructorAssessmentForm(staffArea);
+            $assessment = $('.wrapper--staff-assessment', staffArea.element);
+            $submitButtons = $('.action--submit', $assessment);
+            expect($submitButtons.length).toBe(2);
+            expect($submitButtons).toHaveClass('is--disabled');
+            fillAssessment($assessment);
+            expect($submitButtons).not.toHaveClass('is--disabled');
+        });
+
+        it('can submit a staff grade', function() {
+            var staffArea = createStaffArea({}, 'oa_staff_area_full_grading.html'),
+                $assessment, $gradeSection;
+            showInstructorAssessmentForm(staffArea);
+            $assessment = $('.wrapper--staff-assessment', staffArea.element);
+
+            // Verify that the submission is shown for the first user
+            expect($('.staff-assessment__display__title', $assessment).text().trim()).toBe(
+                'Response for: mock_user'
+            );
+
+            // Fill in and submit the assessment
+            fillAssessment($assessment);
+            server.staffGradeFormTemplate = 'oa_staff_grade_learners_assessment_2.html';
+            submitAssessment(staffArea);
+
+            // Verify that the assessment form has been removed
+            expect($('.staff__grade__form', staffArea.element).html().trim()).toBe('');
+        });
+
+        it('can submit a staff grade and receive another submission', function() {
+            var staffArea = createStaffArea({}, 'oa_staff_area_full_grading.html'),
+                $assessment;
+            showInstructorAssessmentForm(staffArea);
+
+            // Verify that the submission is shown for the first user
+            expect($('.staff-assessment__display__title', staffArea.element).text().trim()).toBe(
+                'Response for: mock_user'
+            );
+
+            // Fill in and click the button to submit and request another submission
+            $assessment = $('.wrapper--staff-assessment', staffArea.element);
+            fillAssessment($assessment);
+            server.staffGradeFormTemplate = 'oa_staff_grade_learners_assessment_2.html';
+            $('.continue_grading--action', $assessment).click();
+
+            // Verify that the submission is shown for the second learner
+            expect($('.staff-assessment__display__title', staffArea.element).text().trim()).toBe(
+                'Response for: mock_user_2'
+            );
+        });
+
+        it('shows an error message when failing to load the staff grade form', function() {
+            var staffArea = createStaffArea({}, 'oa_staff_area_full_grading.html'),
+                $assessment, $submitButtons;
+            server.staffGradeForm = failWith(server);
+            showInstructorAssessmentForm(staffArea);
+            expect($('.staff__grade__form--error', staffArea.element).first().text().trim()).toBe(
+                'Unexpected server error.'
+            );
+        });
+
+        it('shows an error message when a staff grade request fails', function() {
+            var staffArea = createStaffArea({}, 'oa_staff_area_full_grading.html'),
+                serverErrorMessage = 'Mock server error',
+                $assessment;
+            showInstructorAssessmentForm(staffArea);
+            $assessment = $('.wrapper--staff-assessment', staffArea.element);
+            fillAssessment($assessment);
+
+            // Submit the assessment but return a server error message
+            server.staffAssess = failWith(server, serverErrorMessage);
+            submitAssessment(staffArea);
+
+            // Verify that the error message is shown
+            expect($('.staff-grade-error', staffArea.element).first().text().trim()).toBe(serverErrorMessage);
+        });
+    });
 });

openassessment/xblock/static/js/src/lms/oa_staff_area.js

@@ -120,22 +120,23 @@
 
         loadStaffGradeForm: function(eventObject) {
             var view = this;
-            var staff_form_element = $(eventObject.currentTarget);
-            var isCollapsed = staff_form_element.hasClass("is--collapsed");
+            var $staffForm = $(eventObject.currentTarget);
+            var isCollapsed = $staffForm.hasClass("is--collapsed");
             var deferred = $.Deferred();
+            var showFormError = function(errorMessage) {
+                $staffForm.find('.staff__grade__form--error').text(errorMessage);
+            };
 
             if (isCollapsed && !this.staffGradeFormLoaded) {
                 eventObject.preventDefault();
                 this.staffGradeFormLoaded = true;
                 this.server.staffGradeForm().done(function(html) {
-                    // TODO: need to create a div to show an error message if this server call fails.
-                    //showFormError('');
+                    showFormError('');
 
                     // Load the HTML and install event handlers
-                    $('.staff__grade__form', view.element).replaceWith(html);
+                    $staffForm.find('.staff__grade__form').replaceWith(html);
 
-                    // Initialize the rubric : TODO SHARE CODE!
-                    var $rubric = $('.staff-assessment__assessment', view.element);
+                    var $rubric = $staffForm.find('.staff-assessment__assessment');
                     if ($rubric.size() > 0) {
                         var rubricElement = $rubric.get(0);
                         var rubric = new OpenAssessment.Rubric(rubricElement);
@@ -144,26 +145,23 @@
                         rubric.canSubmitCallback($.proxy(view.staffSubmitEnabled, view));
 
                         // Install a click handler for the submit buttons
-                        $('.wrapper--staff-assessment .action--submit', view.element).click(
+                        $staffForm.find('.action--submit').click(
                             function(eventObject) {
-                                var submissionID = staff_form_element.find('.staff__grade__form').data('submission-uuid');  // This was a change
-
+                                var submissionID = $staffForm.find('.staff__grade__form').data('submission-uuid');
                                 eventObject.preventDefault();
                                 view.submitStaffGradeForm(submissionID, rubric,
                                     $(eventObject.currentTarget).hasClass('continue_grading--action')
-                                );  // This was a change
+                                );
                             }
                         );
                     }
                     deferred.resolve();
                 }).fail(function() {
-                    // showFormError(gettext('Unexpected server error.'));
-                    this.staffGradeFormLoaded = false;
+                    showFormError(gettext('Unexpected server error.'));
+                    view.staffGradeFormLoaded = false;
                     deferred.reject();
                 });
-
             }
-
         },
 
         /**
@@ -357,7 +355,7 @@
         },
 
         /**
-         * Enable/disable the staff assessment submit button.
+         * Enable/disable submit button(s) for staff grading or staff override.
          *
          * @param {boolean} enabled If specified, sets the state of the button.
          * @returns {boolean} Whether the button is enabled
@@ -409,7 +407,7 @@
                 rubric.optionsSelected(), rubric.criterionFeedback(), rubric.overallFeedback(), submissionID
             ).done(function() {
                 view.staffGradeFormLoaded = false;
-                var onSuccessCallback = function () {
+                var onSuccessCallback = function() {
                     $('.button-staff-grading').click();
                     if (continueGrading) {
                         $('.staff__grade__title').click();

openassessment/xblock/static/js/src/oa_server.js

@@ -116,10 +116,8 @@ if (typeof OpenAssessment.Server === "undefined" || !OpenAssessment.Server) {
         },
 
         /**
-         * Load the student information section inside the Staff Info section. TODO update
+         * Renders the next submission for staff grading.
          *
-         * @param {string} studentUsername - The username for the student.
-         * @param {object} options - An optional set of configuration options.
          * @returns {promise} A JQuery promise, which resolves with the HTML of the rendered section
          *     fails with an error message.
          */