Add cypress tests which check contents of learning path and circle page

client/src/pages/learningPath/circlePage/LearningSequence.vue

@@ -132,7 +132,11 @@ function checkboxIconUncheckedTailwindClass(lc: LearningContent) {
 </script>
 
 <template>
-  <div :id="learningSequence.slug" class="learning-sequence mb-8">
+  <div
+    :id="learningSequence.slug"
+    class="learning-sequence mb-8"
+    data-cy="lp-learning-sequence"
+  >
     <div class="mb-2 flex items-center gap-4 text-blue-900">
       <component :is="learningSequence.icon" v-if="showIcon(learningSequence.icon)" />
       <h3 class="text-large font-semibold">
@@ -146,6 +150,7 @@ function checkboxIconUncheckedTailwindClass(lc: LearningContent) {
     <ol class="border bg-white px-4 lg:px-6" :class="learningSequenceBorderClass">
       <li
         v-for="learningUnit in learningSequence.learning_units"
+        data-cy="lp-learning-unit"
         :id="learningUnit.slug"
         :key="learningUnit.id"
         class="pt-3 lg:pt-6"
@@ -165,6 +170,7 @@ function checkboxIconUncheckedTailwindClass(lc: LearningContent) {
           <li
             v-for="learningContent in learningUnit.learning_contents"
             :key="learningContent.id"
+            data-cy="lp-learning-content"
           >
             <div class="pb-6">
               <div class="flex items-center gap-4">

client/src/pages/learningPath/learningPathPage/LearningPathCircleColumn.vue

@@ -46,7 +46,7 @@ watch(
   <router-link
     :to="overrideCircleUrl ? overrideCircleUrl : props.circle.frontend_url"
     :data-cy="`circle-${props.circle.title}`"
-    class="flex flex-col items-center pb-6"
+    class="cy-lp-circle flex flex-col items-center pb-6"
   >
     <div ref="circleElement" class="flex flex-row items-center pb-2">
       <div class="w-12">

client/src/pages/learningPath/learningPathPage/LearningPathPathView.vue

@@ -55,6 +55,7 @@ const scrollLearnPathDiagram = (offset: number) => {
         <p
           :id="`topic-${topic.slug}`"
           class="inline-block h-12 self-start px-4 font-bold text-gray-800"
+          data-cy="lp-topic"
         >
           {{ topic.title }}
         </p>

cypress/e2e/circle.cy.js

@@ -87,4 +87,35 @@ describe("circle.cy.js", () => {
     cy.get('[data-cy="close-learning-content"]').click();
     cy.get('[data-cy="circle-title"]').should("contain", "Fahrzeug");
   });
+
+  it("checks number of sequences and contents", () => {
+    cy.get('[data-cy="lp-learning-sequence"]').should("have.length", 3);
+    cy.get('[data-cy="lp-learning-sequence"]')
+      .first()
+      .should("contain", "Vorbereitung");
+    cy.get('[data-cy="lp-learning-sequence"]')
+      .eq(1)
+      .should("contain", "Training");
+    cy.get('[data-cy="lp-learning-sequence"]')
+      .last()
+      .should("contain", "Transfer");
+
+    cy.get('[data-cy="lp-learning-content"]').should("have.length", 10);
+    cy.get('[data-cy="lp-learning-content"]')
+      .first()
+      .should("contain", "Verschaffe dir einen Überblick");
+    cy.get('[data-cy="lp-learning-content"]')
+      .eq(4)
+      .should("contain", "Präsenzkurs Fahrzeug");
+    cy.get('[data-cy="lp-learning-content"]')
+      .eq(7)
+      .should("contain", "Reflexion");
+    cy.get('[data-cy="lp-learning-content"]')
+      .last()
+      .should("contain", "Feedback");
+
+    cy.visit("/course/test-lehrgang/learn/reisen");
+    cy.get('[data-cy="lp-learning-sequence"]').should("have.length", 3);
+    cy.get('[data-cy="lp-learning-content"]').should("have.length", 7);
+  });
 });

cypress/e2e/learningPath.cy.js

@@ -52,4 +52,14 @@ describe("learningPath.cy.js", () => {
       .click();
     cy.get('[data-cy="circle-title"]').should("contain", "Reisen");
   });
+
+  it("checks contents", () => {
+    cy.get('[data-cy="lp-topic"]').should("have.length", 2);
+    cy.get('[data-cy="lp-topic"]').first().should("contain", "Circle ÜK");
+    cy.get('[data-cy="lp-topic"]').eq(1).should("contain", "Circle VV");
+
+    cy.get(".cy-lp-circle").should("have.length", 2);
+    cy.get(".cy-lp-circle").first().should("contain", "Fahrzeug");
+    cy.get(".cy-lp-circle").eq(1).should("contain", "Reisen");
+  });
 });