Clear iframe in SG if student has no submission

When we switch students in SpeedGrader and the new student has no
submission, clear the contents of the submission-holding iframe rather
than merely hiding it. This prevents an issue with per-question quiz
grading (which is intended to retain selection on the selected question
when moving between users) that could occur when selecting a student who
had not yet submitted anything, since the contents of the now-hidden iframe
were receiving events that assumed they were visible.

fixes GRADE-1322

Test plan:
* Have a course with a couple students
* Create a quiz with a few questions (enough that the quiz would not
  all fit on the screen in SpeedGrader)
* Fill out the quiz for several students
* As a teacher, open the quiz in SpeedGrader
  * From the settings menu, enable the "Grade by question" option (this
    should reload the page automatically)
  * When you navigate between students in the following ways, check that
    the currently-focused question remains focused for the new student.
    (That is, if you had (say) question #3 selected before switching
    students, the new student's answer to question #3 should be shown.)
    * From a student who has taken the quiz to another student who has
      taken it
    * From a student who has taken the quiz, to one who has not, then
      back to one who has taken it

Change-Id: I23d14b05441a9ada02b9adb68a4ca95804c7c93a
Reviewed-on: https://gerrit.instructure.com/157995
Reviewed-by: Gary Mei <[email protected]>
Tested-by: Jenkins
Reviewed-by: Spencer Olson <[email protected]>
QA-Review: James Butters <[email protected]>
Product-Review: Sidharth Oberoi <[email protected]>

public/javascripts/speed_grader.js

@@ -1957,6 +1957,7 @@ EG = {
     $(".speedgrader_alert").hide();
     if (!this.currentStudent.submission || !this.currentStudent.submission.submission_type || this.currentStudent.submission.workflow_state == 'unsubmitted') {
       $this_student_does_not_have_a_submission.show();
+      this.emptyIframeHolder()
     } else if (this.currentStudent.submission && this.currentStudent.submission.submitted_at && jsonData.context.quiz && jsonData.context.quiz.anonymous_submissions) {
       $this_student_has_a_submission.show();
     } else if (attachment) {

spec/javascripts/jsx/speed_graderSpec.js

@@ -3937,4 +3937,47 @@ QUnit.module('SpeedGrader', function(suiteHooks) {
       strictEqual(label, 'Grader 2')
     })
   })
+
+  QUnit.module('#loadSubmissionPreview', (hooks) => {
+    const EG = SpeedGrader.EG
+
+    hooks.beforeEach(() => {
+      fixtures.innerHTML = `
+        <div id='this_student_does_not_have_a_submission'></div>
+        <div id='iframe_holder'>
+          I am an iframe holder!
+        </div>
+        <span id="speedgrader-settings"></span>
+      `
+
+      SpeedGrader.setup()
+
+      EG.currentStudent = {
+        submission: { submission_type: 'quiz', workflow_state: 'unsubmitted' }
+      }
+    })
+
+    hooks.afterEach(() => {
+      fixtures.innerHTML = ''
+
+      SpeedGrader.teardown()
+      window.location.hash = ''
+    })
+
+    QUnit.module('when a submission is unsubmitted', () => {
+      test('shows the "this student does not have a submission" div', () => {
+        const $noSubmission = $('#this_student_does_not_have_a_submission')
+        $noSubmission.hide()
+
+        EG.loadSubmissionPreview()
+        ok($noSubmission.is(':visible'))
+      })
+
+      test('clears the contents of the iframe holder', () => {
+        EG.loadSubmissionPreview()
+
+        strictEqual($('#iframe_holder').html(), '')
+      })
+    })
+  })
 })