From 35e629f64cee2ed00d0ce8d9f75848cbdcbaf50a Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Tue, 9 May 2023 14:22:53 +0200
Subject: [PATCH] Add navigation cypress tests

---
 .../components/ui/ItNavigationProgress.vue    |  3 +++
 cypress/e2e/assignments.cy.js                 | 20 +++++++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/client/src/components/ui/ItNavigationProgress.vue b/client/src/components/ui/ItNavigationProgress.vue
index 3e87483e..ebd9e595 100644
--- a/client/src/components/ui/ItNavigationProgress.vue
+++ b/client/src/components/ui/ItNavigationProgress.vue
@@ -65,6 +65,7 @@ function calcStepIndex(step: number) {
       v-if="props.startBadgeText"
       class="inline-flex h-7 items-center justify-center whitespace-nowrap rounded-3xl px-3 text-sm"
       :class="startBadgeClasses"
+      data-cy="nav-progress-step-start"
     >
       <router-link v-if="props.baseUrl" :to="`${props.baseUrl}?${props.queryParam}=0`">
         {{ props.startBadgeText }}
@@ -79,6 +80,7 @@ function calcStepIndex(step: number) {
       <div
         class="inline-flex h-7 w-7 items-center justify-center rounded-full px-3 py-1 text-sm"
         :class="getPillClasses(step)"
+        :data-cy="`nav-progress-step-${calcStepIndex(step)}`"
       >
         <router-link
           v-if="props.baseUrl"
@@ -94,6 +96,7 @@ function calcStepIndex(step: number) {
       v-if="endBadgeText"
       class="inline-flex h-7 items-center justify-center whitespace-nowrap rounded-3xl px-3 text-sm"
       :class="endBadgeClasses"
+      data-cy="nav-progress-end"
     >
       <router-link
         v-if="props.baseUrl"
diff --git a/cypress/e2e/assignments.cy.js b/cypress/e2e/assignments.cy.js
index a669224e..bc6ffd06 100644
--- a/cypress/e2e/assignments.cy.js
+++ b/cypress/e2e/assignments.cy.js
@@ -23,10 +23,10 @@ describe("student test", () => {
       "Teilaufgabe 1: Beispiel einer Versicherungspolice finden"
     );
 
-    // 2 Steps forward, 1 step backwards
-    for (let i = 0; i !== 2; i++) {
-      cy.learningContentMultiLayoutNextStep();
-    }
+    cy.learningContentMultiLayoutNextStep();
+    cy.learningContentMultiLayoutNextStep();
+    cy.testLearningContentTitle("Teilaufgabe 3: Aktuelle Versicherung");
+
     cy.learningContentMultiLayoutPreviousStep();
 
     cy.testLearningContentTitle(
@@ -66,4 +66,16 @@ describe("student test", () => {
       "Hallovelo"
     );
   });
+
+  it("can visit sub step directly via url", () => {
+    cy.visit(
+      "/course/test-lehrgang/learn/fahrzeug/überprüfen-einer-motorfahrzeug-versicherungspolice?page=3"
+    );
+    cy.testLearningContentTitle("Teilaufgabe 3: Aktuelle Versicherung");
+  });
+
+  it("can visit sub step by clicking navigation bar", () => {
+    cy.get('[data-cy="nav-progress-step-4"]').click();
+    cy.testLearningContentTitle("Teilaufgabe 4: Deine Empfehlungen");
+  });
 });