Add e2e test for "weiter gehts"-button

client/src/components/circle/LearningSequence.vue

@@ -1,37 +1,37 @@
 <script setup lang="ts">
-import ItCheckbox from '@/components/ui/ItCheckbox.vue';
+import ItCheckbox from '@/components/ui/ItCheckbox.vue'
-import type {LearningContent, LearningSequence} from '@/types';
+import type { LearningContent, LearningSequence } from '@/types'
-import {useCircleStore} from '@/stores/circle';
+import { useCircleStore } from '@/stores/circle'
-import {computed} from 'vue';
+import { computed } from 'vue'
 
 const props = defineProps<{
   learningSequence: LearningSequence
 }>()
 
-const circleStore = useCircleStore();
+const circleStore = useCircleStore()
 
 function toggleCompleted(learningContent: LearningContent) {
-  circleStore.markCompletion(learningContent, !learningContent.completed);
+  circleStore.markCompletion(learningContent, !learningContent.completed)
 }
 
 const someFinished = computed(() => {
   if (props.learningSequence && circleStore.circle) {
-    return circleStore.circle.someFinishedInLearningSequence(props.learningSequence.translation_key);
+    return circleStore.circle.someFinishedInLearningSequence(props.learningSequence.translation_key)
   }
 
-  return false;
+  return false
 })
 
 const allFinished = computed(() => {
   if (props.learningSequence && circleStore.circle) {
-    return circleStore.circle.allFinishedInLearningSequence(props.learningSequence.translation_key);
+    return circleStore.circle.allFinishedInLearningSequence(props.learningSequence.translation_key)
   }
 
-  return false;
+  return false
 })
 
 const learningSequenceBorderClass = computed(() => {
-  let result = [];
+  let result = []
   if (props.learningSequence && circleStore.circle) {
     if (allFinished.value) {
       result = ['border-l-4', 'border-l-green-500']
@@ -42,9 +42,8 @@ const learningSequenceBorderClass = computed(() => {
     }
   }
 
-  return result;
+  return result
-});
+})
-
 </script>
 
 <template>
@@ -57,15 +56,8 @@ const learningSequenceBorderClass = computed(() => {
       <div>{{ learningSequence.minutes }} Minuten</div>
     </div>
 
-    <div
+    <div class="bg-white px-4 lg:px-6 border border-gray-500" :class="learningSequenceBorderClass">
-      class="bg-white px-4 lg:px-6 border border-gray-500"
+      <div v-for="learningUnit in learningSequence.learningUnits" :key="learningUnit.id" class="pt-3 lg:pt-6">
-      :class="learningSequenceBorderClass"
-    >
-      <div
-        v-for="learningUnit in learningSequence.learningUnits"
-        :key="learningUnit.id"
-        class="pt-3 lg:pt-6"
-      >
         <div class="pb-3 lg:pg-6 flex gap-4 text-blue-900" v-if="learningUnit.title">
           <div class="font-semibold">{{ learningUnit.title }}</div>
           <div>{{ learningUnit.minutes }} Minuten</div>
@@ -79,48 +71,36 @@ const learningSequenceBorderClass = computed(() => {
           <ItCheckbox
             :modelValue="learningContent.completed"
             @click="toggleCompleted(learningContent)"
-            :data-cy="`lc-${learningContent.slug}`"
+            :data-cy="`${learningContent.slug}`"
           >
-            <span @click.stop="circleStore.openLearningContent(learningContent)">{{ learningContent.contents[0].type }}: {{ learningContent.title }}</span>
+            <span @click.stop="circleStore.openLearningContent(learningContent)"
+              >{{ learningContent.contents[0].type }}: {{ learningContent.title }}</span
+            >
           </ItCheckbox>
         </div>
 
-        <div
+        <div v-if="learningUnit.id" class="hover:cursor-pointer" @click="circleStore.openSelfEvaluation(learningUnit)">
-          v-if="learningUnit.id"
+          <div v-if="circleStore.calcSelfEvaluationStatus(learningUnit)" class="flex items-center gap-4 pb-3 lg:pb-6">
-          class="hover:cursor-pointer"
+            <it-icon-smiley-happy class="w-8 h-8 flex-none" />
-          @click="circleStore.openSelfEvaluation(learningUnit)"
-        >
-          <div
-            v-if="circleStore.calcSelfEvaluationStatus(learningUnit)"
-            class="flex items-center gap-4 pb-3 lg:pb-6"
-          >
-            <it-icon-smiley-happy class="w-8 h-8 flex-none"/>
             <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"
           >
-            <it-icon-smiley-thinking class="w-8 h-8 flex-none"/>
+            <it-icon-smiley-thinking class="w-8 h-8 flex-none" />
             <div>Selbsteinschätzung: Muss ich nochmals anschauen</div>
           </div>
-          <div
+          <div v-else class="flex items-center gap-4 pb-3 lg:pb-6">
-            v-else
+            <it-icon-smiley-neutral class="w-8 h-8 flex-none" />
-            class="flex items-center gap-4 pb-3 lg:pb-6"
-          >
-            <it-icon-smiley-neutral class="w-8 h-8 flex-none"/>
             <div>Selbsteinschätzung</div>
           </div>
         </div>
 
-        <hr v-if="!learningUnit.last" class="-mx-4 text-gray-500">
+        <hr v-if="!learningUnit.last" class="-mx-4 text-gray-500" />
-
       </div>
     </div>
   </div>
-
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

client/src/views/CircleView.vue

@@ -53,6 +53,7 @@ onMounted(async () => {
                 <router-link
                   :to="`/learn/${props.learningPathSlug}`"
                   class="btn-text inline-flex items-center px-3 py-4 font-normal"
+                  data-cy="back-to-learning-path-button"
                 >
                   <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
                   <span class="inline">zurück zum Lernpfad</span>

client/src/views/LearningPathView.vue

@@ -72,6 +72,7 @@ onMounted(async () => {
             <router-link
               class="mt-4 btn-blue"
               :to="`/learn/${learningPathStore.learningPath.slug}/${learningPathStore.learningPath.nextLearningContent.parentCircle.slug}`"
+              data-cy="continue-button"
               translate
             >
               Los geht's

cypress/e2e/learningPath.cy.js

@@ -37,4 +37,23 @@ describe("learningPath page", () => {
     cy.url().should("include", "/learn/versicherungsvermittlerin/analyse");
     cy.get('[data-cy="circle-title"]').should("contain", "Analyse");
   });
+
+  it("weiter gehts button will open next circle", () => {
+    login("admin", "test");
+    cy.visit("/learn/unit-test-lernpfad");
+
+    // first click will open first circle
+    cy.get('[data-cy="continue-button"]').click();
+    cy.get('[data-cy="circle-title"]').should("contain", "Basis");
+    cy.get('[data-cy="back-to-learning-path-button"]').click();
+
+    // mark a learning content in second circle
+    cy.get('[data-cy="circle-unit-test-circle"]').click({ force: true });
+    cy.get('[data-cy="lc-reiseversicherung-7"] > .cy-checkbox').click();
+    cy.get('[data-cy="back-to-learning-path-button"]').click();
+
+    // click on continue should go to unit-test-circle
+    cy.get('[data-cy="continue-button"]').click();
+    cy.get('[data-cy="circle-title"]').should("contain", "Unit-Test Circle");
+  });
 });