From b7eb88e4d54142a43a49e2819c0650a9d28d0e68 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Wed, 14 Sep 2022 15:51:08 +0200
Subject: [PATCH] Cypress tests

---
 .../src/components/circle/LearningContent.vue |  4 +--
 .../components/circle/LearningSequence.vue    |  1 +
 client/src/views/LearningPathView.vue         |  2 +-
 cypress/e2e/circle.cy.js                      | 30 ++++++++++++++++++-
 cypress/e2e/learningPath.cy.js                |  8 +++--
 5 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/client/src/components/circle/LearningContent.vue b/client/src/components/circle/LearningContent.vue
index ca8f64f1..8757ef6e 100644
--- a/client/src/components/circle/LearningContent.vue
+++ b/client/src/components/circle/LearningContent.vue
@@ -27,14 +27,14 @@ const block = computed(() => {
       <button
         type="button"
         class="btn-text inline-flex items-center px-3 py-2 font-normal"
-        data-cy="close-learnng-content"
+        data-cy="close-learning-content"
         @click="circleStore.closeLearningContent()"
       >
         <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
         <span class="hidden lg:inline">zurück zum Circle</span>
       </button>
 
-      <h1 class="text-xl hidden lg:block">{{ learningContent?.title }}</h1>
+      <h1 class="text-xl hidden lg:block" data-cy="ln-title">{{ learningContent?.title }}</h1>
 
       <button
         type="button"
diff --git a/client/src/components/circle/LearningSequence.vue b/client/src/components/circle/LearningSequence.vue
index b9aa9ac9..a809023e 100644
--- a/client/src/components/circle/LearningSequence.vue
+++ b/client/src/components/circle/LearningSequence.vue
@@ -101,6 +101,7 @@ const learningSequenceBorderClass = computed(() => {
           <button
             v-if="learningContent.translation_key === continueTranslationKeyTuple[0]"
             class="btn-blue -my-4"
+            data-cy="ls-continue-button"
             @click.stop="circleStore.openLearningContent(learningContent)"
           >
             <span v-if="continueTranslationKeyTuple[1]"> Los geht's </span>
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index 8174db86..902856ba 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -89,7 +89,7 @@ const createContinueUrl = (learningPath: LearningPath) => {
             <router-link
               class="mt-4 btn-blue"
               :to="createContinueUrl(learningPathStore.learningPath)[0]"
-              data-cy="continue-button"
+              data-cy="lp-continue-button"
               translate
             >
               <span v-if="createContinueUrl(learningPathStore.learningPath)[1]"> Los geht's </span>
diff --git a/cypress/e2e/circle.cy.js b/cypress/e2e/circle.cy.js
index 676975a6..93804a98 100644
--- a/cypress/e2e/circle.cy.js
+++ b/cypress/e2e/circle.cy.js
@@ -39,7 +39,7 @@ describe("circle page", () => {
     cy.get('[data-cy="complete-and-continue"]').click();
     cy.get('[data-cy="complete-and-continue"]').click();
 
-    cy.get('[data-cy="close-learnng-content"]').click();
+    cy.get('[data-cy="close-learning-content"]').click();
 
     cy.get(
       '[data-cy="versicherungsvermittlerin-circle-analyse-lc-ermittlung-des-kundenbedarfs"] > .cy-checkbox-checked'
@@ -51,4 +51,32 @@ describe("circle page", () => {
       '[data-cy="versicherungsvermittlerin-circle-analyse-lc-kundenbedürfnisse-erkennen"] > .cy-checkbox-checked'
     ).should("have.class", "cy-checkbox-checked");
   });
+
+  it("continue button works", () => {
+    cy.get('[data-cy="ls-continue-button"]').should("contain", "Los geht's");
+    cy.get('[data-cy="ls-continue-button"]').click();
+
+    cy.get('[data-cy="ln-title"]').should(
+      "contain",
+      'Einleitung Circle "Analyse"'
+    );
+    cy.get('[data-cy="complete-and-continue"]').click();
+
+    cy.get('[data-cy="ls-continue-button"]').should("contain", "Weiter geht's");
+    cy.get('[data-cy="ls-continue-button"]').click();
+    cy.get('[data-cy="ln-title"]').should(
+      "contain",
+      "Ermittlung des Kundenbedarfs"
+    );
+  });
+
+  it("can open learning content by url", () => {
+    cy.visit(
+      "/learn/versicherungsvermittlerin/analyse/ermittlung-des-kundenbedarfs"
+    );
+    cy.get('[data-cy="ln-title"]').should(
+      "contain",
+      "Ermittlung des Kundenbedarfs"
+    );
+  });
 });
diff --git a/cypress/e2e/learningPath.cy.js b/cypress/e2e/learningPath.cy.js
index 3e393166..10594182 100644
--- a/cypress/e2e/learningPath.cy.js
+++ b/cypress/e2e/learningPath.cy.js
@@ -25,7 +25,7 @@ describe("learningPath page", () => {
     cy.get('[data-cy="circle-title"]').should("contain", "Analyse");
   });
 
-  it("open listView and click on cirle will open circle", () => {
+  it("open listView and click on circle will open circle", () => {
     login("admin", "test");
     cy.visit("/learn/versicherungsvermittlerin");
 
@@ -43,7 +43,8 @@ describe("learningPath page", () => {
     cy.visit("/learn/unit-test-lernpfad");
 
     // first click will open first circle
-    cy.get('[data-cy="continue-button"]').click();
+    cy.get('[data-cy="lp-continue-button"]').should("contain", "Los geht's");
+    cy.get('[data-cy="lp-continue-button"]').click();
     cy.get('[data-cy="circle-title"]').should("contain", "Basis");
     cy.get('[data-cy="back-to-learning-path-button"]').click();
 
@@ -55,7 +56,8 @@ describe("learningPath page", () => {
     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="lp-continue-button"]').should("contain", "Weiter geht's");
+    cy.get('[data-cy="lp-continue-button"]').click();
     cy.get('[data-cy="circle-title"]').should("contain", "Unit-Test Circle");
   });
 });