From b8c7d22400b5dc9b37e7dfcc9cfcbf9e0eaa68d6 Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Thu, 22 Feb 2024 16:30:52 +0100
Subject: [PATCH] fix: cypress

---
 .../FeedbackByLearningUnitSummary.vue         | 10 ++-
 .../selfEvaluationFeedback/SmileyCell.vue     | 12 +--
 .../e2e/competenceNavi/selfEvaluation.cy.js   | 78 ++++---------------
 3 files changed, 30 insertions(+), 70 deletions(-)

diff --git a/client/src/components/selfEvaluationFeedback/FeedbackByLearningUnitSummary.vue b/client/src/components/selfEvaluationFeedback/FeedbackByLearningUnitSummary.vue
index 90d147a3..7939e216 100644
--- a/client/src/components/selfEvaluationFeedback/FeedbackByLearningUnitSummary.vue
+++ b/client/src/components/selfEvaluationFeedback/FeedbackByLearningUnitSummary.vue
@@ -25,7 +25,7 @@ const feedbackProviderName = computed(() => {
 </script>
 
 <template>
-  <div class="bg-white">
+  <div class="bg-white" data-cy>
     <!-- Top Row -->
     <div class="flex items-center justify-between border-b-2 border-gray-200 p-4">
       <div class="flex flex-col">
@@ -33,7 +33,10 @@ const feedbackProviderName = computed(() => {
         <span>Circle «{{ props.summary.circle_title }}»</span>
       </div>
       <span class="underline">
-        <router-link :to="props.summary.detail_url">
+        <router-link
+          :to="props.summary.detail_url"
+          :data-cy="`self-eval-${summary.id}-detail-url`"
+        >
           {{ $t("a.Selbsteinschätzung anschauen") }}
         </router-link>
       </span>
@@ -47,18 +50,21 @@ const feedbackProviderName = computed(() => {
         <div class="cell">
           <SmileyCell
             :count="props.summary.self_assessment.counts.pass"
+            :cypress-identifier="`self-eval-${props.summary.id}-pass`"
             smiley="it-icon-smiley-happy"
           />
         </div>
         <div class="cell">
           <SmileyCell
             :count="props.summary.self_assessment.counts.fail"
+            :cypress-identifier="`self-eval-${props.summary.id}-fail`"
             smiley="it-icon-smiley-thinking"
           />
         </div>
         <div class="cell">
           <SmileyCell
             :count="props.summary.self_assessment.counts.unknown"
+            :cypress-identifier="`self-eval-${props.summary.id}-unknown`"
             smiley="it-icon-smiley-neutral"
           />
         </div>
diff --git a/client/src/components/selfEvaluationFeedback/SmileyCell.vue b/client/src/components/selfEvaluationFeedback/SmileyCell.vue
index 3fe09962..f6ca1601 100644
--- a/client/src/components/selfEvaluationFeedback/SmileyCell.vue
+++ b/client/src/components/selfEvaluationFeedback/SmileyCell.vue
@@ -1,22 +1,24 @@
 <script setup lang="ts">
-defineProps<{
+import log from "loglevel";
+
+const props = defineProps<{
   count: number;
   smiley: string;
+  cypressIdentifier?: string;
 }>();
+
+log.info("Rendering SmileyCell:", props.cypressIdentifier);
 </script>
 
 <template>
   <template v-if="count > 0">
     <div class="flex items-center justify-center">
       <component :is="smiley" class="mr-1 inline-block h-6 w-6"></component>
-      <p class="inline-block w-6">
+      <p class="inline-block w-6" :data-cy="cypressIdentifier">
         {{ count }}
       </p>
     </div>
   </template>
-  <template v-else>
-    <div />
-  </template>
 </template>
 
 <style scoped></style>
diff --git a/cypress/e2e/competenceNavi/selfEvaluation.cy.js b/cypress/e2e/competenceNavi/selfEvaluation.cy.js
index 76b128c0..60ff51b5 100644
--- a/cypress/e2e/competenceNavi/selfEvaluation.cy.js
+++ b/cypress/e2e/competenceNavi/selfEvaluation.cy.js
@@ -1,4 +1,4 @@
-import { login } from "../helpers";
+import {login} from "../helpers";
 
 describe("selfEvaluation.cy.js", () => {
   beforeEach(() => {
@@ -28,37 +28,28 @@ describe("selfEvaluation.cy.js", () => {
     cy.get('[data-cy="self-evaluation-success"]').should("have.text", "0");
     cy.get('[data-cy="self-evaluation-unknown"]').should("have.text", "4");
 
+
+    // learning unit id = 687 also known as:
+    // Bedarfsanalyse, Ist- und Soll-Situation <<Reisen>>
+    const identifier = "self-eval-687"
+
     // data in KompetenzNavi/Selbsteinschätzungen is correct
-    cy.visit("/course/test-lehrgang/competence/criteria");
-    cy.get('[data-cy="test-lehrgang-lp-circle-reisen-lu-reisen-fail"]').should(
-      "have.text",
-      "0"
-    );
-    cy.get(
-      '[data-cy="test-lehrgang-lp-circle-reisen-lu-reisen-success"]'
-    ).should("have.text", "0");
-    cy.get(
-      '[data-cy="test-lehrgang-lp-circle-reisen-lu-reisen-unknown"]'
-    ).should("have.text", "2");
+    cy.visit("/course/test-lehrgang/competence/self-evaluation-and-feedback");
+    cy.get(`[data-cy="${identifier}-fail"]`).should("not.exist");
+    cy.get(`[data-cy="${identifier}-pass"]`).should("not.exist");
+    cy.get(`[data-cy="${identifier}-unknown"]`).should("have.text", "2");
 
     // it can open self evaluation from within KompetenzNavi
-    cy.get('[data-cy="test-lehrgang-lp-circle-reisen-lu-reisen-open"]').click();
+    cy.get(`[data-cy="${identifier}-detail-url"]`).click();
 
     // starting the self evaluation will return to KompetenzNavi
     cy.makeSelfEvaluation([true, false]);
-    cy.url().should("include", "/course/test-lehrgang/competence/criteria");
+    cy.url().should("include", "/course/test-lehrgang/competence/self-evaluation-and-feedback");
 
     // check data again on KompetenzNavi
-    cy.get('[data-cy="test-lehrgang-lp-circle-reisen-lu-reisen-fail"]').should(
-      "have.text",
-      "1"
-    );
-    cy.get(
-      '[data-cy="test-lehrgang-lp-circle-reisen-lu-reisen-success"]'
-    ).should("have.text", "1");
-    cy.get(
-      '[data-cy="test-lehrgang-lp-circle-reisen-lu-reisen-unknown"]'
-    ).should("have.text", "0");
+    cy.get(`[data-cy="${identifier}-fail"]`).should("have.text", "1");
+    cy.get(`[data-cy="${identifier}-pass"]`).should("have.text", "1");
+    cy.get(`[data-cy="${identifier}-unknown"]`).should("not.exist");
 
     // data in KompetenzNavi/Übersicht is correct
     cy.visit("/course/test-lehrgang/competence");
@@ -76,19 +67,6 @@ describe("selfEvaluation.cy.js", () => {
 
     // starting the self evaluation from circle should return to circle
     cy.url().should("include", "/course/test-lehrgang/learn/reisen");
-
-    // data in KompetenzNavi / Selbsteinschätzungen is correct
-    cy.visit("/course/test-lehrgang/competence/criteria");
-    cy.get('[data-cy="test-lehrgang-lp-circle-reisen-lu-reisen-fail"]').should(
-      "have.text",
-      "0"
-    );
-    cy.get(
-      '[data-cy="test-lehrgang-lp-circle-reisen-lu-reisen-success"]'
-    ).should("have.text", "2");
-    cy.get(
-      '[data-cy="test-lehrgang-lp-circle-reisen-lu-reisen-unknown"]'
-    ).should("have.text", "0");
   });
 
   it("should be able to make a fail self evaluation", () => {
@@ -97,19 +75,6 @@ describe("selfEvaluation.cy.js", () => {
     cy.get('[data-cy="test-lehrgang-lp-circle-reisen-lu-reisen"]')
       .find('[data-cy="fail"]')
       .should("exist");
-
-    // data in KompetenzNavi / Selbsteinschätzungen is correct
-    cy.visit("/course/test-lehrgang/competence/criteria");
-    cy.get('[data-cy="test-lehrgang-lp-circle-reisen-lu-reisen-fail"]').should(
-      "have.text",
-      "2"
-    );
-    cy.get(
-      '[data-cy="test-lehrgang-lp-circle-reisen-lu-reisen-success"]'
-    ).should("have.text", "0");
-    cy.get(
-      '[data-cy="test-lehrgang-lp-circle-reisen-lu-reisen-unknown"]'
-    ).should("have.text", "0");
   });
 
   it("should be able to make a mixed self evaluation", () => {
@@ -118,18 +83,5 @@ describe("selfEvaluation.cy.js", () => {
     cy.get('[data-cy="test-lehrgang-lp-circle-reisen-lu-reisen"]')
       .find('[data-cy="fail"]')
       .should("exist");
-
-    // data in KompetenzNavi / Selbsteinschätzungen is correct
-    cy.visit("/course/test-lehrgang/competence/criteria");
-    cy.get('[data-cy="test-lehrgang-lp-circle-reisen-lu-reisen-fail"]').should(
-      "have.text",
-      "1"
-    );
-    cy.get(
-      '[data-cy="test-lehrgang-lp-circle-reisen-lu-reisen-success"]'
-    ).should("have.text", "1");
-    cy.get(
-      '[data-cy="test-lehrgang-lp-circle-reisen-lu-reisen-unknown"]'
-    ).should("have.text", "0");
   });
 });