Add cypress tests to avoid bug regression

app/views/annotations/_annotation_area.html.erb

@@ -1,4 +1,4 @@
-<figcaption id="annotation-caption">
+<figcaption id="annotation-caption" data-cy="annotation-caption">
    <div id="annotation-infobar">
       <!--- ANNOTATION CATEGORY -->
    </div>

app/views/lectures/edit/_comments.html.erb

@@ -36,7 +36,7 @@
   </div>
 
   <!--- Annotation button related setting -->
-  <div class="pt-3 form-group">
+  <div class="pt-3 form-group" data-cy="annotation-lecture-settings">
     <%= t('admin.lecture.enable_annotation_button') %>
     <%= helpdesk(t('admin.lecture.enable_annotation_button_helpdesk'), false) %>
 

app/views/lectures/edit/_form.html.erb

@@ -118,6 +118,7 @@
 
       <!-- Communication -->
       <div class="tab-pane fade" id="lecture-pane-communication"
+          data-cy="lecture-pane-communication"
           role="tabpanel" aria-labelledby="lecture-nav-communication" tabindex="0">
         <div class="container small-width lecture-pane">
           <%= render partial: 'lectures/edit/announcements',

app/views/media/feedback.html.erb

@@ -23,7 +23,8 @@
               <span id="heatmap">
                 <!-- JavaScript inserts heatmap here -->
               </span>
-              <span id="feedback-markers" class="annotation-marker">
+              <span id="feedback-markers" data-cy="feedback-markers"
+                  class="annotation-marker">
                 <!-- JavaScript inserts markers here -->
               </span>
               <input type="range" id="seek-bar"

spec/cypress/e2e/annotations_spec.cy.js

@@ -0,0 +1,69 @@
+import FactoryBot from "../support/factorybot";
+
+function createLectureLessonMedium(context, teacher) {
+  // Lecture
+  FactoryBot.create("lecture_with_sparse_toc", "with_title", "with_teacher_by_id",
+    { title: "Groundbreaking lecture", teacher_id: teacher.id }).as("lecture");
+
+  // Lesson
+  cy.then(() => {
+    FactoryBot.create("valid_lesson", { lecture_id: context.lecture.id }).as("lesson");
+  });
+
+  // Medium
+  cy.then(() => {
+    FactoryBot.create("lesson_medium", "with_video", "released",
+      "with_lesson_by_id", { lesson_id: context.lesson.id, description: "Soil medium" })
+      .as("medium");
+  });
+}
+
+describe("Annotations visibility", () => {
+  context("when teacher disables annotation sharing with teachers", () => {
+    it("annotations published before that are still visible to the teacher", function () {
+      cy.createUser("generic").as("user");
+      cy.createUserAndLogin("teacher").then(teacher => createLectureLessonMedium(this, teacher));
+
+      cy.then(() => {
+        // Create new annotation
+        FactoryBot.create("annotation", "with_text", "shared_with_teacher",
+          { medium_id: this.medium.id, user_id: this.user.id }).as("annotation");
+
+        // Disable annotation sharing in lecture settings
+        cy.visit(`/lectures/${this.lecture.id}/edit#communication`);
+        cy.getBySelector("annotation-lecture-settings")
+          .find("input[value=0]").should("have.length", 1).click();
+
+        // Click on submit button to save changes
+        cy.intercept("POST", `/lectures/${this.lecture.id}`).as("lectureUpdate");
+        cy.getBySelector("lecture-pane-communication")
+          .find("input[type=submit]").should("have.length", 1).click();
+        cy.wait("@lectureUpdate");
+
+        // Make sure that changes were really saved
+        cy.reload();
+        cy.getBySelector("annotation-lecture-settings").then(($form) => {
+          cy.wrap($form).find("input[value=0]").should("be.checked");
+          cy.wrap($form).find("input[value=1]").should("not.be.checked");
+        });
+      });
+
+      cy.then(() => {
+        cy.visit(`/media/${this.medium.id}/feedback`);
+
+        // Annotation visible
+        cy.getBySelector("feedback-markers")
+          .children().should("have.length", 1)
+          .click({ force: true });
+
+        // Annotation can be opened in sidebar
+        cy.getBySelector("annotation-caption").then(($sideBar) => {
+          cy.i18n(`admin.annotation.${this.annotation.category}`).then((category) => {
+            cy.wrap($sideBar).children().first().should("contain", category);
+          });
+          cy.wrap($sideBar).children().eq(1).should("contain", this.annotation.comment);
+        });
+      });
+    });
+  });
+});