fix rating not highlighting on submission & grade summary pages

fixes OUT-1657

test plan:
- create two assignments
- attach a rubric to each assignment, make one rubric standard
  and the other rubric use a range (if you do not see option for
  range, you'll need to enable "Rubric Criterion Range" feature
  on the account). Use multiple criteria for each rubric
- as a student, submit to the assignments
- as a teacher, provide scores on the rubric. for the ranged
  rubric, provide a score that falls between ranges
- as the student, go to the submission show pages and click
  'show rubric' - the proper rating should be highlighted
  for each criterion
- as a student, go to the grades page
- next to the assignments, click on the icon to show the rubric
- the proper rating should be highlighted for each criterion

Change-Id: I035d1853a11ac01cd972a76ea2c41cbb332000c5
Reviewed-on: https://gerrit.instructure.com/144859
Tested-by: Jenkins
Reviewed-by: Michael Brewer-Davis <mbd@instructure.com>
Reviewed-by: Augusto Callejas <acallejas@instructure.com>
QA-Review: Dariusz Dzien <ddzien@instructure.com>
Product-Review: Sidharth Oberoi <soberoi@instructure.com>

app/views/shared/_rubric_criterion.html.erb

@@ -103,9 +103,13 @@
              rating.edge = (idx == 0 || idx == ratings.length - 1);
              next_rating = ratings[idx+1] if idx != ratings.length - 1;
              rating_min = (next_rating ? next_rating.points : 0);
+             selected = assessment_rating ? (n(assessment_rating[:points]) > n(rating_min) && n(assessment_rating[:points]) <= n(rating.points)) : false
              use_range = (criterion.try(:criterion_use_range) && rating_min.try(:to_f) != rating.points.try(:to_f) && range_rating_enabled);
           %>
-          <td id="rating_<%= rating.id %>" class="rating <%= "edge_rating" if rating.edge %> <%= "infinitesimal" if rating_min.try(:to_f) == rating.points.try(:to_f) %>">
+          <td id="rating_<%= rating.id %>"
+              class="rating <%= "edge_rating" if rating.edge %>
+                <%= "infinitesimal" if rating_min.try(:to_f) == rating.points.try(:to_f) %>
+                <%= "selected" if selected %>"
           <div class="container">
             <% if !learning_outcome_criterion %>
               <div class="editing links">

public/javascripts/rubric_assessment.js

@@ -95,22 +95,7 @@ window.rubricAssessment = {
           $criterion.find(".rating.selected").removeClass('selected');
           if (val || val === 0) {
             $criterion.find(".criterion_description").addClass('completed');
-            $criterion.find(".rating").each(function() {
-              const rating_val = numberHelper.parse($(this).find(".points").text());
-              const use_range = $criterion.find('.criterion_use_range').attr('checked')
-              if (rating_val === val) {
-                $(this).addClass('selected');
-              } else if (use_range) {
-                const $nextRating = $(this).next('.rating')
-                let min_value = 0;
-                if ($nextRating.find(".points").text()) {
-                  min_value = numberHelper.parse($nextRating.find('.points').text());
-                }
-                if ((rating_val > val) && (min_value < val)){
-                  $(this).addClass('selected');
-                }
-              }
-            });
+            rubricAssessment.highlightCriterionScore($criterion, val)
           } else {
             $criterion.find(".criterion_description").removeClass('completed');
           }
@@ -169,6 +154,25 @@ window.rubricAssessment = {
     setInterval(rubricAssessment.sizeRatings, 2500);
   },
 
+  highlightCriterionScore: function($criterion, val){
+    $criterion.find(".rating").each(function() {
+      const rating_val = numberHelper.parse($(this).find(".points").text());
+      const use_range = $criterion.find('.criterion_use_range').attr('checked')
+      if (rating_val === val) {
+        $(this).addClass('selected');
+      } else if (use_range) {
+        const $nextRating = $(this).next('.rating')
+        let min_value = 0;
+        if ($nextRating.find(".points").text()) {
+          min_value = numberHelper.parse($nextRating.find('.points').text());
+        }
+        if ((rating_val > val) && (min_value < val)){
+          $(this).addClass('selected');
+        }
+      }
+    });
+  },
+
   sizeRatings: function() {
     var $visibleCriteria = $(".rubric .criterion:visible");
     if ($visibleCriteria.length) {
@@ -261,6 +265,7 @@ window.rubricAssessment = {
     if(data) {
       var assessment = data;
       var total = 0;
+      var $criterion = null;
       for(var idx in assessment.data) {
         var rating = assessment.data[idx];
         var comments = rating.comments_enabled ? rating.comments : rating.description;
@@ -269,7 +274,7 @@ window.rubricAssessment = {
         } else {
           var comments_html = htmlEscape(comments);
         }
-        var $criterion = $rubric.find("#criterion_" + rating.criterion_id);
+        $criterion = $rubric.find("#criterion_" + rating.criterion_id);
         if(!rating.id) {
           $criterion.find(".rating").each(function() {
             var rating_val = parseFloat($(this).find(".points").text(), 10);
@@ -301,6 +306,7 @@ window.rubricAssessment = {
         }
       }
       total = window.rubricAssessment.roundAndFormat(total);
+      if ($criterion) rubricAssessment.highlightCriterionScore($criterion, total);
       $rubric.find(".rubric_total").text(total);
     }
   },

spec/javascripts/jsx/rubric_assessmentSpec.js

@@ -16,6 +16,8 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
+import $ from 'jquery'
+
 define(['rubric_assessment', 'i18n!rubric_assessment'], (rubric_assessment, I18n) => {
   QUnit.module('RubricAssessment#roundAndFormat');
 
@@ -36,4 +38,30 @@ define(['rubric_assessment', 'i18n!rubric_assessment'], (rubric_assessment, I18n
     strictEqual(rubric_assessment.roundAndFormat(undefined), '');
     strictEqual(rubric_assessment.roundAndFormat(''), '');
   });
+
+  test('properly adds the "selected" class to a rating when score is equal', function () {
+    const $criterion = $(
+      "<span>" +
+        "<span class='rating'><span class='points'>5</span></span>" +
+        "<span class='rating'><span class='points'>3</span></span>" +
+        "<span class='rating'><span class='points'>0</span></span>" +
+      "</span>"
+    );
+    rubric_assessment.highlightCriterionScore($criterion, 3);
+    strictEqual($criterion.find('.selected').find('.points').text(), "3");
+  })
+
+  test('properly adds the "selected" class to proper rating when score is in range', function () {
+    const $criterion = $(
+      "<span>" +
+        "<input type='checkbox' class='criterion_use_range' checked>" +
+        "<span class='rating'><span class='points'>5</span></span>" +
+        "<span class='rating'><span class='points'>3</span></span>" +
+        "<span class='rating'><span class='points'>0</span></span>" +
+      "</span>"
+    );
+    rubric_assessment.highlightCriterionScore($criterion, 4);
+    strictEqual($criterion.find('.selected').length, 1);
+    strictEqual($criterion.find('.selected').find('.points').text(), "5");
+  })
 });

spec/selenium/grades/student_grades_summary/grades_spec.rb

@@ -210,13 +210,16 @@ describe "grades" do
     it "should display rubric on assignment", priority: "1", test_id: 229661 do
       get "/courses/#{@course.id}/grades"
 
-      #click rubric
+      # click rubric
       f("#submission_#{@first_assignment.id} .toggle_rubric_assessments_link").click
       wait_for_ajaximations
       expect(fj('.rubric_assessments:visible .rubric_title')).to include_text(@rubric.title)
       expect(fj('.rubric_assessments:visible .rubric_total')).to include_text('2')
 
-      #check rubric comment
+      # check if proper rating is highlighted for a score of 2 on scale of 10|5|0
+      expect(fj('.rubric_assessments:visible .selected')).to include_text('5')
+
+      # check rubric comment
       expect(fj('.assessment-comments:visible div').text).to eq 'cool, yo'
     end