From 3189e1cb7f73106d5c190af4ac43970970d2097a Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Mon, 29 Aug 2022 14:10:55 +0200
Subject: [PATCH] Add cypress tests for learningPath view

---
 .../components/circle/LearningPathDiagram.vue | 10 ++++-
 .../src/components/ui/ItFullScreenModal.vue   |  1 +
 client/src/views/CircleView.vue               |  2 +-
 client/src/views/LearningPathView.vue         | 11 +++--
 client/src/views/LearningPathViewVertical.vue |  3 --
 cypress.config.js                             |  2 +
 cypress/e2e/learningPath.cy.js                | 40 +++++++++++++++++++
 7 files changed, 60 insertions(+), 9 deletions(-)
 create mode 100644 cypress/e2e/learningPath.cy.js

diff --git a/client/src/components/circle/LearningPathDiagram.vue b/client/src/components/circle/LearningPathDiagram.vue
index 2d4c6380..ab54cea5 100644
--- a/client/src/components/circle/LearningPathDiagram.vue
+++ b/client/src/components/circle/LearningPathDiagram.vue
@@ -1,7 +1,6 @@
 <script>
 import * as d3 from 'd3';
-import {useLearningPathStore} from '../../stores/learningPath';
-
+import { useLearningPathStore } from '../../stores/learningPath';
 
 export default {
   props: {
@@ -129,6 +128,13 @@ export default {
       .enter()
       .append('g')
       .attr('class', 'circle')
+      .attr('data-cy', (d) => {
+        if (this.vertical) {
+          return `circle-${d.slug}-vertical`;
+        } else {
+          return `circle-${d.slug}`
+        }
+      })
       .on('mouseover', function (d, i) {
         d3.select(this)
           .selectAll('.learningSegmentArc')
diff --git a/client/src/components/ui/ItFullScreenModal.vue b/client/src/components/ui/ItFullScreenModal.vue
index 8bed583b..22fbbf96 100644
--- a/client/src/components/ui/ItFullScreenModal.vue
+++ b/client/src/components/ui/ItFullScreenModal.vue
@@ -33,6 +33,7 @@ const closeModal = () => {
   <Transition mode="in-out">
     <div
       v-if="show"
+      data-cy="full-screen-modal"
       class="px-4 py-16 lg:px-16 lg:py-24 fixed top-0 overflow-y-scroll bg-white h-full w-full">
       <button
         type="button"
diff --git a/client/src/views/CircleView.vue b/client/src/views/CircleView.vue
index 5c924b4d..6acf0a3f 100644
--- a/client/src/views/CircleView.vue
+++ b/client/src/views/CircleView.vue
@@ -52,7 +52,7 @@ onMounted(async () => {
               <span class="inline">zurück zum Lernpfad</span>
             </router-link>
 
-            <h1 class="text-blue-dark text-7xl">
+            <h1 class="text-blue-dark text-7xl" data-cy="circle-title">
               {{ circleStore.circle?.title }}
             </h1>
 
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index 73db8158..ef4ca8ed 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -28,7 +28,7 @@ onMounted(async () => {
 
 <template>
   <div class="bg-gray-200" v-if="learningPathStore.learningPath">
-        <Teleport to="body">
+    <Teleport to="body">
       <LearningPathViewVertical
         :show="learningPathStore.page === 'OVERVIEW'"
         @closemodal="learningPathStore.page = 'INDEX'"
@@ -40,12 +40,17 @@ onMounted(async () => {
       <div class="flex flex-col h-max">
         <div class="bg-white py-8 flex flex-col">
           <div class="flex justify-end p-3">
-            <button class="flex items-center" @click="learningPathStore.page = 'OVERVIEW'">
+            <button
+              class="flex items-center"
+              @click="learningPathStore.page = 'OVERVIEW'"
+              data-cy="show-list-view"
+            >
               <it-icon-list/>
               Listen Ansicht anzeigen
             </button>
           </div>
-         <LearningPathDiagram class="max-w-[1680px] w-full" identifier="mainVisualization" v-bind:vertical="false"></LearningPathDiagram>
+          <LearningPathDiagram class="max-w-[1680px] w-full" identifier="mainVisualization"
+                               v-bind:vertical="false"></LearningPathDiagram>
         </div>
 
         <h1 data-cy="learning-path-title" class="m-12">{{ learningPathStore.learningPath.title }}</h1>
diff --git a/client/src/views/LearningPathViewVertical.vue b/client/src/views/LearningPathViewVertical.vue
index 5b2b335a..e515a298 100644
--- a/client/src/views/LearningPathViewVertical.vue
+++ b/client/src/views/LearningPathViewVertical.vue
@@ -1,14 +1,11 @@
 <script setup lang="ts">
 
 import * as log from 'loglevel';
-
-import {onMounted} from 'vue'
 import {useLearningPathStore} from '@/stores/learningPath';
 import {useUserStore} from '@/stores/user';
 
 import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue';
 import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue';
-import {Circle} from "@/services/circle";
 
 
 log.debug('LearningPathView created');
diff --git a/cypress.config.js b/cypress.config.js
index 64b1a5f4..81bc10c4 100644
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -3,6 +3,8 @@ const { defineConfig } = require('cypress')
 module.exports = defineConfig({
   watchForFileChanges: false,
   video: false,
+  viewportWidth: 1280,
+  viewportHeight: 720,
   retries: {
     runMode: 1,
     openMode: 0,
diff --git a/cypress/e2e/learningPath.cy.js b/cypress/e2e/learningPath.cy.js
new file mode 100644
index 00000000..450c9c21
--- /dev/null
+++ b/cypress/e2e/learningPath.cy.js
@@ -0,0 +1,40 @@
+import { login } from "./helpers";
+
+describe("learningPath", () => {
+  beforeEach(() => {
+    cy.manageCommand("cypress_reset");
+  });
+
+  it("can open learningPath page", () => {
+    login("admin", "test");
+    cy.visit("/learningpath/versicherungsvermittlerin");
+
+    cy.get('[data-cy="learning-path-title"]').should(
+      "contain",
+      "Versicherungsvermittler/in"
+    );
+  });
+
+  it("click on circle on learningPath page will open circle", () => {
+    login("admin", "test");
+    cy.visit("/learningpath/versicherungsvermittlerin");
+
+    cy.get('[data-cy="circle-analyse"]').click({ force: true });
+
+    cy.url().should("include", "/circle/analyse");
+    cy.get('[data-cy="circle-title"]').should("contain", "Analyse");
+  });
+
+  it("open listView and click on cirle will open circle", () => {
+    login("admin", "test");
+    cy.visit("/learningpath/versicherungsvermittlerin");
+
+    cy.get('[data-cy="show-list-view"]').click();
+    cy.get('[data-cy="full-screen-modal"]').should("be.visible");
+
+    cy.get('[data-cy="circle-analyse-vertical"]').click({ force: true });
+
+    cy.url().should("include", "/circle/analyse");
+    cy.get('[data-cy="circle-title"]').should("contain", "Analyse");
+  });
+});