From 966533e13bc5de38cf901009aa5a4010c4d56104 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Tue, 26 Sep 2023 18:46:51 +0200
Subject: [PATCH] Add feedback trainer cypress test

---
 .../src/components/ui/HorizontalBarChart.vue  |  4 +-
 client/src/components/ui/RatingScale.vue      |  1 +
 client/src/components/ui/VerticalBarChart.vue |  9 +-
 client/src/pages/cockpit/FeedbackPage.vue     | 12 ++-
 .../cockpitPage/SubmissionsOverview.vue       |  6 +-
 cypress/e2e/feedback/feedbackStudent.cy.js    |  2 +-
 cypress/e2e/feedback/feedbackTrainer.cy.js    | 92 +++++++++++++++++++
 .../core/management/commands/cypress_reset.py | 12 +--
 server/vbv_lernwelt/feedback/factories.py     |  2 +-
 server/vbv_lernwelt/feedback/services.py      |  2 +-
 10 files changed, 124 insertions(+), 18 deletions(-)
 create mode 100644 cypress/e2e/feedback/feedbackTrainer.cy.js

diff --git a/client/src/components/ui/HorizontalBarChart.vue b/client/src/components/ui/HorizontalBarChart.vue
index b7693079..e9eed75f 100644
--- a/client/src/components/ui/HorizontalBarChart.vue
+++ b/client/src/components/ui/HorizontalBarChart.vue
@@ -26,7 +26,9 @@
         class="h-8 bg-sky-500"
         :style="{ width: `${percentage * 100 * 0.8}%` }"
       ></div>
-      <div class="text-sm">{{ (percentage * 100).toFixed(1) }}%</div>
+      <div class="text-sm" :data-cy="`percentage-value-${label}`">
+        {{ (percentage * 100).toFixed(1) }}%
+      </div>
     </div>
   </QuestionSummary>
 </template>
diff --git a/client/src/components/ui/RatingScale.vue b/client/src/components/ui/RatingScale.vue
index 495936cc..4afaa72d 100644
--- a/client/src/components/ui/RatingScale.vue
+++ b/client/src/components/ui/RatingScale.vue
@@ -5,6 +5,7 @@
       <span
         class="col-start-2 row-span-2 inline-flex h-9 w-11 items-center justify-center rounded text-xl font-bold"
         :style="ratingValueStyle"
+        data-cy="rating-scale-average"
       >
         {{ rating.toFixed(1) }}
       </span>
diff --git a/client/src/components/ui/VerticalBarChart.vue b/client/src/components/ui/VerticalBarChart.vue
index 8719ebab..8a913440 100644
--- a/client/src/components/ui/VerticalBarChart.vue
+++ b/client/src/components/ui/VerticalBarChart.vue
@@ -28,14 +28,14 @@
         :style="greenStyle"
       ></div>
       <div class="self-center justify-self-center font-bold grid-in-left-label">
-        <Popover class="relative">
+        <Popover class="relative" data-cy="popover-no">
           <PopoverButton class="focus:outline-none">
             {{ $t("general.no") }}
           </PopoverButton>
           <PopoverPanel
             class="absolute top-[-200%] z-10 w-[120px] border border-gray-500 bg-white p-1 text-left text-sm font-normal"
           >
-            <p>
+            <p data-cy="num-no">
               {{
                 `"${$t("general.no")}" ${numberOfRatings["no"]} ${$t(
                   "feedback.answers"
@@ -46,14 +46,14 @@
         </Popover>
       </div>
       <div class="self-center justify-self-center font-bold grid-in-right-label">
-        <Popover class="relative">
+        <Popover class="relative" data-cy="popover-yes">
           <PopoverButton class="focus:outline-none">
             {{ $t("general.yes") }}
           </PopoverButton>
           <PopoverPanel
             class="absolute top-[-200%] z-10 w-[120px] border border-gray-500 bg-white p-1 text-left text-sm font-normal"
           >
-            <p>
+            <p data-cy="num-yes">
               {{
                 `"${$t("general.yes")}" ${numberOfRatings["yes"]} ${$t(
                   "feedback.answers"
@@ -71,6 +71,7 @@
 import QuestionSummary from "@/components/ui/QuestionSummary.vue";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
 import { computed } from "vue";
+
 const props = defineProps<{
   ratings: boolean[];
   title: string;
diff --git a/client/src/pages/cockpit/FeedbackPage.vue b/client/src/pages/cockpit/FeedbackPage.vue
index d85a0750..69bdaf47 100644
--- a/client/src/pages/cockpit/FeedbackPage.vue
+++ b/client/src/pages/cockpit/FeedbackPage.vue
@@ -13,11 +13,17 @@
       <main v-if="feedbackData">
         <h1 class="mb-2">{{ $t("feedback.feedbackPageTitle") }}</h1>
         <p class="mb-10">
-          <span class="font-bold">{{ feedbackData.amount }}</span>
+          <span class="font-bold" data-cy="feedback-data-amount">
+            {{ feedbackData.amount }}
+          </span>
           {{ $t("feedback.feedbackPageInfo") }}
         </p>
-        <ol>
-          <li v-for="(question, i) in orderedQuestions" :key="i">
+        <ol v-if="feedbackData.amount > 0">
+          <li
+            v-for="(question, i) in orderedQuestions"
+            :key="i"
+            :data-cy="`question-${i + 1}`"
+          >
             <RatingScale
               v-if="ratingKeys.includes(question.key)"
               class="mb-8 bg-white"
diff --git a/client/src/pages/cockpit/cockpitPage/SubmissionsOverview.vue b/client/src/pages/cockpit/cockpitPage/SubmissionsOverview.vue
index 93b5967a..e323cf10 100644
--- a/client/src/pages/cockpit/cockpitPage/SubmissionsOverview.vue
+++ b/client/src/pages/cockpit/cockpitPage/SubmissionsOverview.vue
@@ -163,7 +163,11 @@ const getIconName = (lc: LearningContent) => {
           <button class="btn-primary">
             <router-link
               :to="submittable.detailsLink"
-              :data-cy="`show-details-btn-${submittable.content.slug}`"
+              :data-cy="
+                isFeedback(submittable.content)
+                  ? `show-feedback-btn-${submittable.content.slug}`
+                  : `show-details-btn-${submittable.content.slug}`
+              "
             >
               {{ submittable.showDetailsText }}
             </router-link>
diff --git a/cypress/e2e/feedback/feedbackStudent.cy.js b/cypress/e2e/feedback/feedbackStudent.cy.js
index 385b2759..69cf4216 100644
--- a/cypress/e2e/feedback/feedbackStudent.cy.js
+++ b/cypress/e2e/feedback/feedbackStudent.cy.js
@@ -1,7 +1,7 @@
 import { TEST_STUDENT1_USER_ID } from "../../consts";
 import { login } from "../helpers";
 
-describe("assignmentStudent.cy.js", () => {
+describe("feedbackStudent.cy.js", () => {
   beforeEach(() => {
     cy.manageCommand("cypress_reset");
     login("test-student1@example.com", "test");
diff --git a/cypress/e2e/feedback/feedbackTrainer.cy.js b/cypress/e2e/feedback/feedbackTrainer.cy.js
new file mode 100644
index 00000000..f2b26973
--- /dev/null
+++ b/cypress/e2e/feedback/feedbackTrainer.cy.js
@@ -0,0 +1,92 @@
+import { login } from "../helpers";
+
+describe("feedbackTrainer.cy.js", () => {
+  beforeEach(() => {
+    cy.visit("/course/test-lehrgang/learn/fahrzeug/feedback");
+  });
+
+  it("can open feedback results page with empty results", () => {
+    cy.manageCommand("cypress_reset");
+    login("test-trainer1@example.com", "test");
+    cy.visit("/course/test-lehrgang/cockpit");
+    cy.get(
+      '[data-cy="show-feedback-btn-test-lehrgang-lp-circle-fahrzeug-lc-feedback"]'
+    ).click();
+
+    cy.get('[data-cy="feedback-data-amount"]').should("contain", "0");
+  });
+
+  it("can open feedback results page with results", () => {
+    cy.manageCommand("cypress_reset --create-feedback-responses");
+    login("test-trainer1@example.com", "test");
+    cy.visit("/course/test-lehrgang/cockpit");
+    cy.get(
+      '[data-cy="show-feedback-btn-test-lehrgang-lp-circle-fahrzeug-lc-feedback"]'
+    ).click();
+
+    cy.get('[data-cy="feedback-data-amount"]').should("contain", "3");
+
+    cy.get('[data-cy="question-1"]')
+      .find('[data-cy="rating-scale-average"]')
+      .should("contain", "3.3");
+
+    cy.get('[data-cy="question-2"]')
+      .find('[data-cy="rating-scale-average"]')
+      .should("contain", "3.0");
+
+    cy.get('[data-cy="question-3"]')
+      .find('[data-cy="percentage-value-40%"]')
+      .should("contain", "33.3");
+    cy.get('[data-cy="question-3"]')
+      .find('[data-cy="percentage-value-80%"]')
+      .should("contain", "33.3");
+    cy.get('[data-cy="question-3"]')
+      .find('[data-cy="percentage-value-100%"]')
+      .should("contain", "33.3");
+
+    cy.get('[data-cy="question-4"]')
+      .find('[data-cy="popover-yes"]')
+      .click()
+      .find('[data-cy="num-yes"]')
+      .should("contain", "3");
+    cy.get('[data-cy="question-4"]')
+      .find('[data-cy="popover-no"]')
+      .click()
+      .find('[data-cy="num-no"]')
+      .should("contain", "0");
+
+    cy.get('[data-cy="question-5"]')
+      .find('[data-cy="rating-scale-average"]')
+      .should("contain", "2.7");
+
+    cy.get('[data-cy="question-6"]')
+      .find('[data-cy="rating-scale-average"]')
+      .should("contain", "3.0");
+
+    cy.get('[data-cy="question-7"]')
+      .should("contain", "Super Kurs!")
+      .should("contain", "Super, bin begeistert")
+      .should("contain", "Ok, entspricht den Erwartungen");
+
+    cy.get('[data-cy="question-8"]')
+      .find('[data-cy="popover-yes"]')
+      .click()
+      .find('[data-cy="num-yes"]')
+      .should("contain", "2");
+    cy.get('[data-cy="question-8"]')
+      .find('[data-cy="popover-no"]')
+      .click()
+      .find('[data-cy="num-no"]')
+      .should("contain", "1");
+
+    cy.get('[data-cy="question-9"]')
+      .should("contain", "Nichts Schlechtes")
+      .should("contain", "Es wäre praktisch, Zugang zu einer FAQ zu haben.")
+      .should("contain", "Mehr Videos wären schön.");
+
+    cy.get('[data-cy="question-10"]')
+      .should("contain", "Nur Gutes.")
+      .should("contain", "Das Beispiel mit der Katze fand ich sehr gut")
+      .should("contain", "Die Präsentation war super");
+  });
+});
diff --git a/server/vbv_lernwelt/core/management/commands/cypress_reset.py b/server/vbv_lernwelt/core/management/commands/cypress_reset.py
index e6f6a5c2..b0dcd30e 100644
--- a/server/vbv_lernwelt/core/management/commands/cypress_reset.py
+++ b/server/vbv_lernwelt/core/management/commands/cypress_reset.py
@@ -4,16 +4,16 @@ from vbv_lernwelt.assignment.models import Assignment, AssignmentCompletion
 from vbv_lernwelt.core.constants import (
     TEST_COURSE_SESSION_BERN_ID,
     TEST_STUDENT1_USER_ID,
-    TEST_TRAINER1_USER_ID,
     TEST_STUDENT2_USER_ID,
     TEST_STUDENT3_USER_ID,
+    TEST_TRAINER1_USER_ID,
 )
 from vbv_lernwelt.core.models import User
 from vbv_lernwelt.course.creators.test_course import (
     create_edoniq_test_result_data,
+    create_feedback_response_data,
     create_test_assignment_evaluation_data,
     create_test_assignment_submitted_data,
-    create_feedback_response_data,
 )
 from vbv_lernwelt.course.models import CourseCompletion, CourseSession
 from vbv_lernwelt.feedback.models import FeedbackResponse
@@ -122,8 +122,8 @@ def command(
                 "goal_attainment": 4,
                 "proficiency": 100,
                 "preparation_task_clarity": True,
-                "instructor_competence": 4,
-                "instructor_respect": 4,
+                "instructor_competence": 3,
+                "instructor_respect": 3,
                 "instructor_open_feedback": "Super, bin begeistert",
                 "would_recommend": True,
                 "course_negative_feedback": "Es wäre praktisch, Zugang zu einer FAQ zu haben.",
@@ -141,9 +141,9 @@ def command(
                 "goal_attainment": 2,
                 "proficiency": 40,
                 "preparation_task_clarity": True,
-                "instructor_competence": 2,
+                "instructor_competence": 1,
                 "instructor_respect": 2,
-                "instructor_open_feedback": "Ok, enspricht den Erwartungen",
+                "instructor_open_feedback": "Ok, entspricht den Erwartungen",
                 "would_recommend": False,
                 "course_negative_feedback": "Mehr Videos wären schön.",
                 "course_positive_feedback": "Die Präsentation war super",
diff --git a/server/vbv_lernwelt/feedback/factories.py b/server/vbv_lernwelt/feedback/factories.py
index d44622c7..fcd76201 100644
--- a/server/vbv_lernwelt/feedback/factories.py
+++ b/server/vbv_lernwelt/feedback/factories.py
@@ -18,7 +18,7 @@ class FeedbackResponseFactory(DjangoModelFactory):
                 [
                     "Alles gut, manchmal etwas langfädig",
                     "Super, bin begeistert",
-                    "Ok, enspricht den Erwartungen",
+                    "Ok, entspricht den Erwartungen",
                 ]
             ),
             "would_recommend": FuzzyChoice([True, False]),
diff --git a/server/vbv_lernwelt/feedback/services.py b/server/vbv_lernwelt/feedback/services.py
index 3bc1fa19..86460ea4 100644
--- a/server/vbv_lernwelt/feedback/services.py
+++ b/server/vbv_lernwelt/feedback/services.py
@@ -1,7 +1,7 @@
 import structlog
 
 from vbv_lernwelt.core.models import User
-from vbv_lernwelt.course.models import CourseSession, CourseCompletionStatus
+from vbv_lernwelt.course.models import CourseCompletionStatus, CourseSession
 from vbv_lernwelt.course.services import mark_course_completion
 from vbv_lernwelt.feedback.models import FeedbackResponse
 from vbv_lernwelt.learnpath.models import LearningContentFeedback