From 998001df146928395ff8ac8388b05147029edeeb Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Wed, 5 Oct 2022 17:02:17 +0200
Subject: [PATCH] Fix cypress tests

---
 .../learningPath/LearningSequence.vue         | 16 +++++++++-----
 .../learningPath/SelfEvaluation.vue           | 15 +++++++++++--
 cypress/e2e/circle.cy.js                      | 22 +++++++++++++++++++
 3 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/client/src/components/learningPath/LearningSequence.vue b/client/src/components/learningPath/LearningSequence.vue
index f319a96e..1fd65536 100644
--- a/client/src/components/learningPath/LearningSequence.vue
+++ b/client/src/components/learningPath/LearningSequence.vue
@@ -158,24 +158,28 @@ const learningSequenceBorderClass = computed(() => {
         <div
           v-if="learningUnit.children.length"
           class="hover:cursor-pointer"
+          :data-cy="`${learningUnit.slug}`"
           @click="circleStore.openSelfEvaluation(learningUnit)"
         >
           <div
             v-if="circleStore.calcSelfEvaluationStatus(learningUnit)"
-            class="flex items-center gap-4 pb-3 lg:pb-6"
+            class="flex items-center gap-4 pb-3 lg:pb-6 self-evaluation-success"
           >
-            <it-icon-smiley-happy class="w-8 h-8 flex-none" />
+            <it-icon-smiley-happy class="w-8 h-8 flex-none" data-cy="success" />
             <div>Selbsteinschätzung: Ich kann das.</div>
           </div>
           <div
             v-else-if="circleStore.calcSelfEvaluationStatus(learningUnit) === false"
-            class="flex items-center gap-4 pb-3 lg:pb-6"
+            class="flex items-center gap-4 pb-3 lg:pb-6 self-evaluation-fail"
           >
-            <it-icon-smiley-thinking class="w-8 h-8 flex-none" />
+            <it-icon-smiley-thinking class="w-8 h-8 flex-none" data-cy="fail" />
             <div>Selbsteinschätzung: Muss ich nochmals anschauen</div>
           </div>
-          <div v-else class="flex items-center gap-4 pb-3 lg:pb-6">
-            <it-icon-smiley-neutral class="w-8 h-8 flex-none" />
+          <div
+            v-else
+            class="flex items-center gap-4 pb-3 lg:pb-6 self-evaluation-unknown"
+          >
+            <it-icon-smiley-neutral class="w-8 h-8 flex-none" data-cy="unknown" />
             <div>Selbsteinschätzung</div>
           </div>
         </div>
diff --git a/client/src/components/learningPath/SelfEvaluation.vue b/client/src/components/learningPath/SelfEvaluation.vue
index 0a0fdc91..be53ba5b 100644
--- a/client/src/components/learningPath/SelfEvaluation.vue
+++ b/client/src/components/learningPath/SelfEvaluation.vue
@@ -45,9 +45,18 @@ function handleContinue() {
         <span class="hidden lg:inline">zurück zum Circle</span>
       </button>
 
-      <h1 class="text-xl hidden lg:block">{{ learningUnit.title }}</h1>
+      <h1 class="text-xl hidden lg:block" data-cy="ln-title">
+        Selbsteinschätzung {{ learningUnit.title }}
+      </h1>
 
-      <button type="button" class="btn-blue" @click="handleContinue()">Weiter</button>
+      <button
+        type="button"
+        class="btn-blue"
+        data-cy="complete-and-continue"
+        @click="handleContinue()"
+      >
+        Weiter
+      </button>
     </nav>
 
     <div class="container-medium">
@@ -73,6 +82,7 @@ function handleContinue() {
               'border-2': currentQuestion.completion_status === 'success',
               'border-gray-500': currentQuestion.completion_status !== 'success',
             }"
+            data-cy="success"
             @click="circleStore.markCompletion(currentQuestion, 'success')"
           >
             <it-icon-smiley-happy class="w-16 h-16 mr-4"></it-icon-smiley-happy>
@@ -85,6 +95,7 @@ function handleContinue() {
               'border-2': currentQuestion.completion_status === 'fail',
               'border-gray-500': currentQuestion.completion_status !== 'fail',
             }"
+            data-cy="fail"
             @click="circleStore.markCompletion(currentQuestion, 'fail')"
           >
             <it-icon-smiley-thinking class="w-16 h-16 mr-4"></it-icon-smiley-thinking>
diff --git a/cypress/e2e/circle.cy.js b/cypress/e2e/circle.cy.js
index 7bf1715f..6a6d385c 100644
--- a/cypress/e2e/circle.cy.js
+++ b/cypress/e2e/circle.cy.js
@@ -31,6 +31,10 @@ describe("circle page", () => {
   });
 
   it("can open learning contents and complete them by continuing", () => {
+    cy.get(
+      '[data-cy="test-lehrgang-lp-circle-analyse-lu-fahrzeug"] > div'
+    ).should("have.class", "self-evaluation-unknown");
+
     cy.get(
       '[data-cy="test-lehrgang-lp-circle-analyse-lc-rafael-fasel-wechselt-sein-auto"]'
     ).click();
@@ -43,12 +47,30 @@ describe("circle page", () => {
     cy.get('[data-cy="ln-title"]').should("contain", "Fachcheck Fahrzeug");
     cy.get('[data-cy="complete-and-continue"]').click();
 
+    cy.get('[data-cy="ln-title"]').should(
+      "contain",
+      "Selbsteinschätzung Fahrzeug"
+    );
+    cy.get('[data-cy="success"]').click();
+    cy.get('[data-cy="complete-and-continue"]').click();
+
+    cy.get('[data-cy="ln-title"]').should(
+      "contain",
+      "Selbsteinschätzung Fahrzeug"
+    );
+    cy.get('[data-cy="success"]').click();
+    cy.get('[data-cy="complete-and-continue"]').click();
+
     cy.get(
       '[data-cy="test-lehrgang-lp-circle-analyse-lc-rafael-fasel-wechselt-sein-auto"] > .cy-checkbox-checked'
     ).should("have.class", "cy-checkbox-checked");
     cy.get(
       '[data-cy="test-lehrgang-lp-circle-analyse-lc-fachcheck-fahrzeug"] > .cy-checkbox-checked'
     ).should("have.class", "cy-checkbox-checked");
+
+    cy.get(
+      '[data-cy="test-lehrgang-lp-circle-analyse-lu-fahrzeug"] > div'
+    ).should("have.class", "self-evaluation-success");
   });
 
   it("continue button works", () => {