From 4d3b46de5908ebe6c711bfcc2c710fff46c2bae9 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Sun, 15 Oct 2023 21:41:37 +0200
Subject: [PATCH] Add cypress tests which check contents of learning path and
 circle page

---
 .../circlePage/LearningSequence.vue           |  8 ++++-
 .../LearningPathCircleColumn.vue              |  2 +-
 .../learningPathPage/LearningPathPathView.vue |  1 +
 cypress/e2e/circle.cy.js                      | 31 +++++++++++++++++++
 cypress/e2e/learningPath.cy.js                | 10 ++++++
 5 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/learningPath/circlePage/LearningSequence.vue b/client/src/pages/learningPath/circlePage/LearningSequence.vue
index f839dc9c..a56d06a8 100644
--- a/client/src/pages/learningPath/circlePage/LearningSequence.vue
+++ b/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">
diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathCircleColumn.vue b/client/src/pages/learningPath/learningPathPage/LearningPathCircleColumn.vue
index d1445311..1e1e3399 100644
--- a/client/src/pages/learningPath/learningPathPage/LearningPathCircleColumn.vue
+++ b/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">
diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathPathView.vue b/client/src/pages/learningPath/learningPathPage/LearningPathPathView.vue
index c8542e8f..6fa2e82c 100644
--- a/client/src/pages/learningPath/learningPathPage/LearningPathPathView.vue
+++ b/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>
diff --git a/cypress/e2e/circle.cy.js b/cypress/e2e/circle.cy.js
index 608b5e62..0decc8cd 100644
--- a/cypress/e2e/circle.cy.js
+++ b/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);
+  });
 });
diff --git a/cypress/e2e/learningPath.cy.js b/cypress/e2e/learningPath.cy.js
index 27f606ff..7f7914e2 100644
--- a/cypress/e2e/learningPath.cy.js
+++ b/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");
+  });
 });