Add tests

app/assets/javascripts/components/annotations/annotation_form.ts

@@ -167,10 +167,11 @@ export class AnnotationForm extends watchMixin(ShadowlessLitElement) {
                         ></d-saved-annotation-input>
                     `}
                 <div class="field form-group">
-                    <label class="form-label">
+                    <label class="form-label" for="annotation-text">
                         ${I18n.t("js.user_annotation.fields.annotation_text")}
                     </label>
-                    <textarea autofocus
+                    <textarea id="annotation-text"
+                              autofocus
                               required
                               class="form-control annotation-submission-input ${this.hasErrors ? "validation-error" : ""}"
                               .rows=${this.rows}
@@ -202,11 +203,11 @@ export class AnnotationForm extends watchMixin(ShadowlessLitElement) {
                     </div>
                     ${ this.saveAnnotation ? html`
                         <div class="field form-group">
-                            <label class="form-label">
+                            <label class="form-label" for="saved-annotation-title">
                                 ${I18n.t("js.saved_annotation.title")}
                             </label>
                             <input required="required" class="form-control" type="text"
-                                   @change=${e => this.handleUpdateTitle(e)} value=${this.savedAnnotationTitle}>
+                                   @change=${e => this.handleUpdateTitle(e)} value=${this.savedAnnotationTitle} id="saved-annotation-title">
                         </div>
                     ` : html``}
                 `}

app/assets/javascripts/components/datalist_input.ts

@@ -41,20 +41,35 @@ export class DatalistInput extends watchMixin(ShadowlessLitElement) {
             if (!this.value) {
                 this.value = this.options.find(o => this.filter === o.label)?.value || "";
             }
-            const event = new CustomEvent("input", {
-                detail: { value: this.value, label: this.filter },
-                bubbles: true,
-                composed: true
-            });
-            this.dispatchEvent(event);
+            this.fireEvent();
         },
         options: () => {
             if (!this.filter) {
                 this.filter = this.label;
             }
+
+            // If we can find a result amongst the filtered options
+            // dispatch an event
+            if (!this.value) {
+                this.value = this.options.find(o => this.filter === o.label)?.value || "";
+                if (this.value) {
+                    this.fireEvent();
+                }
+            }
         }
     };
 
+    fireEvent(): void {
+        if (this.value) {
+            const event = new CustomEvent("input", {
+                detail: { value: this.value, label: this.filter },
+                bubbles: true,
+                composed: true
+            });
+            this.dispatchEvent(event);
+        }
+    }
+
     get label(): string {
         const option = this.options?.find(option => option.value === this.value);
         return option?.label || "";

test/system/saved_annotation_test.rb

@@ -0,0 +1,122 @@
+require 'capybara/minitest'
+require 'application_system_test_case'
+
+class AnnotationsTest < ApplicationSystemTestCase
+  include Devise::Test::IntegrationHelpers
+  # Make the Capybara DSL available in all integration tests
+  include Capybara::DSL
+  # Make `assert_*` methods behave like Minitest assertions
+  include Capybara::Minitest::Assertions
+
+  setup do
+    @zeus = create :zeus
+    @staff = create :staff
+    @student = create :student
+    @course = create :course, id: 10
+    CourseMembership.create user: @staff, status: :course_admin, course: @course
+
+    @instances = []
+    3.times do
+      code_lines = Faker::Lorem.sentences(number: 5)
+      instance = create :correct_submission, result: Rails.root.join('db/results/python-result.json').read, code: code_lines.join("\n"), course: @course, user: @student
+      instance.exercise.judge.renderer = PythiaRenderer
+      instance.exercise.judge.save
+      @instances << instance
+    end
+    @first = @instances.first
+  end
+
+  test 'Staff can save an annotation' do
+    sign_in @staff
+    visit(submission_path(id: @first.id))
+    click_link 'Code'
+
+    assert_no_css 'd-saved-annotations-sidecard'
+
+    find('tr#line-1').hover
+    find('button.annotation-button').click
+
+    initial = 'The first five words of this comment will be used as the title'
+    within 'form.annotation-submission' do
+      assert_no_css 'd-saved-annotation-input'
+
+      find('textarea.annotation-submission-input').fill_in with: initial
+
+      # assert checkbox to fill out title
+      assert_css '#check-save-annotation'
+      assert_no_css '#saved-annotation-title'
+      find('#check-save-annotation').check
+      assert_equal 'The first five words of', find('#saved-annotation-title').value
+      click_button 'Comment'
+    end
+
+    within '.annotation' do
+      assert_text initial
+      # assert linked icon
+      assert_css 'i.mdi-link-variant'
+    end
+
+    # assert sidebar with saved annotations
+    assert_css 'd-saved-annotations-sidecard'
+    assert_css 'd-saved-annotations-sidecard td[title="The first five words of"]'
+    sign_out @staff
+  end
+
+  test 'Student cannot save an annotation' do
+    sign_in @student
+    visit(submission_path(id: @first.id))
+    click_link 'Code'
+
+    assert_no_css 'd-saved-annotations-sidecard'
+
+    find('tr#line-1').hover
+    find('button.annotation-button').click
+
+    initial = 'The first five words of this comment will be used as the title'
+    within 'form.annotation-submission' do
+      assert_no_css 'd-saved-annotation-input'
+      find('textarea.annotation-submission-input').fill_in with: initial
+      assert_no_css '#check-save-annotation'
+      click_button 'Ask question'
+    end
+
+    within '.annotation' do
+      assert_text initial
+      assert_no_css 'i.mdi-link-variant'
+    end
+
+    assert_no_css 'd-saved-annotations-sidecard'
+    sign_out @student
+  end
+
+  test 'Staff can reuse an annotation' do
+    sign_in @staff
+    sa = create :saved_annotation, user: @staff, exercise: @first.exercise, course: @course
+    visit(submission_path(id: @first.id))
+
+    click_link 'Code'
+    assert_css 'd-saved-annotations-sidecard'
+    # assert_css `d-saved-annotations-sidecard td[title="#{sa.title}"]`
+
+    find('tr#line-1').hover
+    find('button.annotation-button').click
+
+    within 'form.annotation-submission' do
+      assert_css 'd-saved-annotation-input'
+
+      find('d-saved-annotation-input input[type="text"]').fill_in with: sa.title
+      assert find_field('Comment', with: sa.annotation_text)
+      assert_equal sa.annotation_text, find('textarea.annotation-submission-input').value
+
+      click_button 'Comment'
+    end
+
+    within '.annotation' do
+      assert_text sa.annotation_text
+      # assert linked icon
+      assert_css 'i.mdi-link-variant'
+    end
+    sign_out @staff
+  end
+
+end