Add cypress tests for learningPath view

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')

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"

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>
 

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>

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');

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,

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");
+  });
+});