From 5247b6061b0f99773785c376c0161fcb2f5cf19c Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Thu, 21 Sep 2023 15:47:39 +0200
Subject: [PATCH 1/4] chore: navigation tests (desktop)

---
 .../components/header/CoursePreviewBar.vue    |  4 +-
 .../components/header/MainNavigationBar.vue   |  4 +
 cypress/e2e/navigation.cy.js                  | 78 +++++++++++++++++++
 cypress/e2e/preview.cy.js                     | 23 ------
 4 files changed, 85 insertions(+), 24 deletions(-)
 create mode 100644 cypress/e2e/navigation.cy.js
 delete mode 100644 cypress/e2e/preview.cy.js

diff --git a/client/src/components/header/CoursePreviewBar.vue b/client/src/components/header/CoursePreviewBar.vue
index b12ef2fd..f0d92383 100644
--- a/client/src/components/header/CoursePreviewBar.vue
+++ b/client/src/components/header/CoursePreviewBar.vue
@@ -23,6 +23,7 @@ const { t } = useTranslation();
 
           <div class="flex space-x-8">
             <router-link
+              data-cy="preview-learn-path-link"
               :to="courseSession.learning_path_url"
               class="preview-nav-item"
               :class="{ 'preview-nav-item--active': inLearningPath() }"
@@ -31,6 +32,7 @@ const { t } = useTranslation();
             </router-link>
 
             <router-link
+              data-cy="preview-competence-profile-link"
               :to="getCompetenceBaseUrl(courseSession)"
               class="preview-nav-item"
               :class="{ 'preview-nav-item--active': inCompetenceProfile() }"
@@ -46,7 +48,7 @@ const { t } = useTranslation();
 
 <style lang="postcss" scoped>
 .preview-nav-item {
-  @apply inline-flex items-center border-b-4 border-transparent px-1 pt-1 text-black hover:text-gray-800;
+  @apply inline-flex items-center border-b-4 border-transparent px-1 pt-1 text-black hover:text-gray-900 focus:text-black;
 }
 
 .preview-nav-item--active {
diff --git a/client/src/components/header/MainNavigationBar.vue b/client/src/components/header/MainNavigationBar.vue
index 8e03c8b1..b44191c8 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/client/src/components/header/MainNavigationBar.vue
@@ -109,6 +109,7 @@ onMounted(() => {
                 <div class="hidden space-x-8 lg:flex">
                   <template v-if="courseSessionsStore.currentCourseSessionHasCockpit">
                     <router-link
+                      data-cy="navigation-cockpit-link"
                       :to="`${courseSessionsStore.currentCourseSession.course_url}/cockpit`"
                       class="nav-item"
                       :class="{ 'nav-item--active': inCockpit() }"
@@ -117,6 +118,7 @@ onMounted(() => {
                     </router-link>
 
                     <router-link
+                      data-cy="navigation-preview-link"
                       :to="courseSessionsStore.currentCourseSession.learning_path_url"
                       target="_blank"
                       class="nav-item"
@@ -129,6 +131,7 @@ onMounted(() => {
                   </template>
                   <template v-else>
                     <router-link
+                      data-cy="navigation-learning-path-link"
                       :to="courseSessionsStore.currentCourseSession.learning_path_url"
                       class="nav-item"
                       :class="{ 'nav-item--active': inLearningPath() }"
@@ -137,6 +140,7 @@ onMounted(() => {
                     </router-link>
 
                     <router-link
+                      data-cy="navigation-competence-profile-link"
                       :to="
                         getCompetenceBaseUrl(courseSessionsStore.currentCourseSession)
                       "
diff --git a/cypress/e2e/navigation.cy.js b/cypress/e2e/navigation.cy.js
new file mode 100644
index 00000000..ef41120b
--- /dev/null
+++ b/cypress/e2e/navigation.cy.js
@@ -0,0 +1,78 @@
+import {login} from "./helpers";
+
+describe("Navigation tests", () => {
+    beforeEach(() => {
+        cy.manageCommand("cypress_reset");
+    });
+
+    describe("Desktop view", () => {
+        beforeEach(() => {
+            cy.viewport(1280, 720);
+        });
+
+        describe("Expert / Trainer", () => {
+            beforeEach(() => {
+                login("test-trainer1@example.com", "test");
+            });
+
+            it("should show course preview on learn", () => {
+                cy.visit("/course/test-lehrgang/learn/");
+                cy.get('[data-cy="course-preview-bar"]').should("exist");
+            })
+
+            it("should show course preview on competence", () => {
+                cy.visit("/course/test-lehrgang/competence/");
+                cy.get('[data-cy="course-preview-bar"]').should("exist");
+
+            });
+
+            it("should have correct course preview navigation", () => {
+                cy.visit("/course/test-lehrgang/learn/");
+
+                it("should have see correct navigation", () => {
+                    cy.get('[data-cy="preview-learn-path-link"]').should('have.attr', 'href').and('eq', '/course/test-lehrgang/cockpit');
+                    cy.get('[data-cy="preview-competence-profile-link""]').should('have.attr', 'href').and('eq', '/course/test-lehrgang/learn');
+                })
+            })
+
+            it("should have correct expert navigation", () => {
+                // when course session is selected -> cockpit
+                cy.visit("/course/test-lehrgang/cockpit");
+
+                cy.get('[data-cy="navigation-cockpit-link"]').should('have.attr', 'href').and('eq', '/course/test-lehrgang/cockpit');
+                cy.get('[data-cy="navigation-preview-link"]').should('have.attr', 'href').and('eq', '/course/test-lehrgang/learn');
+
+                cy.get('[data-cy="navigation-learning-path-link"]').should("not.exist")
+                cy.get('[data-cy="navigation-competence-profile-link"]').should("not.exist")
+            });
+        });
+
+        describe("Participant", () => {
+            beforeEach(() => {
+                login("test-student1@example.com", "test");
+            });
+
+            it("should not show course preview on learn path", () => {
+                cy.visit("/course/test-lehrgang/learn");
+                cy.get('[data-cy="course-preview-bar"]').should("not.exist");
+            });
+
+            it("should not show course preview on learn path", () => {
+                cy.visit("/course/test-lehrgang/comptence");
+                cy.get('[data-cy="course-preview-bar"]').should("not.exist");
+            });
+
+            it("should have see correct navigation", () => {
+                // when course session is selected -> learn
+                cy.visit("/course/test-lehrgang/learn");
+
+                cy.get('[data-cy="navigation-competence-profile-link"]').should('have.attr', 'href').and('eq', '/course/test-lehrgang/competence');
+                cy.get('[data-cy="navigation-learning-path-link"]').should('have.attr', 'href').and('eq', '/course/test-lehrgang/learn');
+
+                cy.get('[data-cy="navigation-cockpit-link"]').should("not.exist")
+                cy.get('[data-cy="navigation-preview-lin"]').should("not.exist")
+            });
+        });
+    });
+});
+
diff --git a/cypress/e2e/preview.cy.js b/cypress/e2e/preview.cy.js
deleted file mode 100644
index 202a7a67..00000000
--- a/cypress/e2e/preview.cy.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import {login} from "./helpers";
-
-describe("preview.cy.js", () => {
-  beforeEach(() => {
-    cy.manageCommand("cypress_reset");
-  });
-
-  it("Student does not see preview", () => {
-    login("test-student1@example.com", "test");
-    cy.visit("/course/test-lehrgang/learn/fahrzeug");
-    cy.get('[data-cy="course-preview-bar"]').should("not.exist");
-  });
-
-  it("Trainer sees preview exclusively on course", () => {
-    login("test-trainer1@example.com", "test");
-
-    cy.visit("/");
-    cy.get('[data-cy="course-preview-bar"]').should("not.exist");
-
-    cy.visit("/course/test-lehrgang/learn/fahrzeug");
-    cy.get('[data-cy="course-preview-bar"]').should("exist");
-  });
-});

From d87f922decdc21bf5910a497544aef96b00b43be Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Thu, 21 Sep 2023 15:56:44 +0200
Subject: [PATCH 2/4] chore: make tests a bit easier to read

---
 cypress/e2e/navigation.cy.js | 66 ++++++++++++++++--------------------
 1 file changed, 30 insertions(+), 36 deletions(-)

diff --git a/cypress/e2e/navigation.cy.js b/cypress/e2e/navigation.cy.js
index ef41120b..45ab25d3 100644
--- a/cypress/e2e/navigation.cy.js
+++ b/cypress/e2e/navigation.cy.js
@@ -1,5 +1,17 @@
 import {login} from "./helpers";
 
+const BASE_URL = "/course/test-lehrgang";
+const EXPERT_LOGIN = ["test-trainer1@example.com", "test"];
+const PARTICIPANT_LOGIN = ["test-student1@example.com", "test"];
+
+const visitCoursePage = (subPath) => {
+    cy.visit(`${BASE_URL}/${subPath}`);
+}
+
+const checkNavigationLink = (dataCy, expectedLink) => {
+    cy.get(`[data-cy="${dataCy}"]`).should('have.attr', 'href').and('eq', `${BASE_URL}/${expectedLink}`);
+}
+
 describe("Navigation tests", () => {
     beforeEach(() => {
         cy.manageCommand("cypress_reset");
@@ -12,67 +24,49 @@ describe("Navigation tests", () => {
 
         describe("Expert / Trainer", () => {
             beforeEach(() => {
-                login("test-trainer1@example.com", "test");
+                login(...EXPERT_LOGIN);
             });
 
             it("should show course preview on learn", () => {
-                cy.visit("/course/test-lehrgang/learn/");
+                visitCoursePage("learn");
                 cy.get('[data-cy="course-preview-bar"]').should("exist");
-            })
+            });
 
             it("should show course preview on competence", () => {
-                cy.visit("/course/test-lehrgang/competence/");
+                visitCoursePage("competence");
                 cy.get('[data-cy="course-preview-bar"]').should("exist");
-
             });
 
             it("should have correct course preview navigation", () => {
-                cy.visit("/course/test-lehrgang/learn/");
-
-                it("should have see correct navigation", () => {
-                    cy.get('[data-cy="preview-learn-path-link"]').should('have.attr', 'href').and('eq', '/course/test-lehrgang/cockpit');
-                    cy.get('[data-cy="preview-competence-profile-link""]').should('have.attr', 'href').and('eq', '/course/test-lehrgang/learn');
-                })
-            })
+                visitCoursePage("learn");
+                checkNavigationLink("preview-learn-path-link", "cockpit");
+                checkNavigationLink("preview-competence-profile-link", "learn");
+            });
 
             it("should have correct expert navigation", () => {
-                // when course session is selected -> cockpit
-                cy.visit("/course/test-lehrgang/cockpit");
-
-                cy.get('[data-cy="navigation-cockpit-link"]').should('have.attr', 'href').and('eq', '/course/test-lehrgang/cockpit');
-                cy.get('[data-cy="navigation-preview-link"]').should('have.attr', 'href').and('eq', '/course/test-lehrgang/learn');
-
-                cy.get('[data-cy="navigation-learning-path-link"]').should("not.exist")
-                cy.get('[data-cy="navigation-competence-profile-link"]').should("not.exist")
+                visitCoursePage("cockpit");
+                checkNavigationLink("navigation-cockpit-link", "cockpit");
+                checkNavigationLink("navigation-preview-link", "learn");
             });
         });
 
         describe("Participant", () => {
             beforeEach(() => {
-                login("test-student1@example.com", "test");
+                login(...PARTICIPANT_LOGIN);
             });
 
             it("should not show course preview on learn path", () => {
-                cy.visit("/course/test-lehrgang/learn");
+                visitCoursePage("learn");
                 cy.get('[data-cy="course-preview-bar"]').should("not.exist");
             });
 
-            it("should not show course preview on learn path", () => {
-                cy.visit("/course/test-lehrgang/comptence");
-                cy.get('[data-cy="course-preview-bar"]').should("not.exist");
-            });
-
-            it("should have see correct navigation", () => {
-                // when course session is selected -> learn
-                cy.visit("/course/test-lehrgang/learn");
-
-                cy.get('[data-cy="navigation-competence-profile-link"]').should('have.attr', 'href').and('eq', '/course/test-lehrgang/competence');
-                cy.get('[data-cy="navigation-learning-path-link"]').should('have.attr', 'href').and('eq', '/course/test-lehrgang/learn');
-
-                cy.get('[data-cy="navigation-cockpit-link"]').should("not.exist")
-                cy.get('[data-cy="navigation-preview-lin"]').should("not.exist")
+            it("should have correct navigation", () => {
+                visitCoursePage("learn");
+                checkNavigationLink("navigation-competence-profile-link", "competence");
+                checkNavigationLink("navigation-learning-path-link", "learn");
             });
         });
     });
 });
 
+

From dbe74f754bc719635a4676eb72d8c6589952d365 Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Thu, 21 Sep 2023 16:24:11 +0200
Subject: [PATCH 3/4] chore: more tests for mobile navigation

---
 .../components/header/MainNavigationBar.vue   |  6 +-
 client/src/components/header/MobileMenu.vue   | 20 ++++-
 cypress/e2e/helpers.js                        | 27 ++++---
 cypress/e2e/navigation.cy.js                  | 80 +++++++++++--------
 cypress/e2e/preview.cy.js                     | 45 +++++++++++
 5 files changed, 130 insertions(+), 48 deletions(-)
 create mode 100644 cypress/e2e/preview.cy.js

diff --git a/client/src/components/header/MainNavigationBar.vue b/client/src/components/header/MainNavigationBar.vue
index b44191c8..09de45af 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/client/src/components/header/MainNavigationBar.vue
@@ -77,7 +77,11 @@ onMounted(() => {
           <div class="relative flex h-16 justify-between">
             <div class="absolute inset-y-0 left-0 flex items-center lg:hidden">
               <!-- Mobile menu button -->
-              <div class="flex" @click="state.showMobileNavigationMenu = true">
+              <div
+                data-cy="navigation-mobile-menu-button"
+                class="flex"
+                @click="state.showMobileNavigationMenu = true"
+              >
                 <button
                   type="button"
                   class="h-8 w-8 text-white hover:text-sky-500 focus:text-sky-500 focus:outline-none"
diff --git a/client/src/components/header/MobileMenu.vue b/client/src/components/header/MobileMenu.vue
index ed7583cd..63bd914e 100644
--- a/client/src/components/header/MobileMenu.vue
+++ b/client/src/components/header/MobileMenu.vue
@@ -58,24 +58,36 @@ const courseSessionsStore = useCourseSessionsStore();
             <ul class="mt-6">
               <template v-if="courseSessionsStore.currentCourseSessionHasCockpit">
                 <li class="mb-6">
-                  <button @click="clickLink(`${courseSession.course_url}/cockpit`)">
+                  <button
+                    data-cy="navigation-mobile-cockpit-link"
+                    @click="clickLink(`${courseSession.course_url}/cockpit`)"
+                  >
                     {{ $t("cockpit.title") }}
                   </button>
                 </li>
                 <li class="mb-6">
-                  <button @click="clickLink(courseSession.learning_path_url)">
+                  <button
+                    data-cy="navigation-mobile-preview-link"
+                    @click="clickLink(courseSession.learning_path_url)"
+                  >
                     {{ $t("a.VorschauTeilnehmer") }}
                   </button>
                 </li>
               </template>
               <template v-else>
                 <li class="mb-6">
-                  <button @click="clickLink(courseSession.learning_path_url)">
+                  <button
+                    data-cy="navigation-mobile-learning-path-link"
+                    @click="clickLink(courseSession.learning_path_url)"
+                  >
                     {{ $t("general.learningPath") }}
                   </button>
                 </li>
                 <li class="mb-6">
-                  <button @click="clickLink(getCompetenceBaseUrl(courseSession))">
+                  <button
+                    data-cy="navigation-mobile-competence-profile-link"
+                    @click="clickLink(getCompetenceBaseUrl(courseSession))"
+                  >
                     {{ $t("competences.title") }}
                   </button>
                 </li>
diff --git a/cypress/e2e/helpers.js b/cypress/e2e/helpers.js
index 6e807279..7bc5ccd2 100644
--- a/cypress/e2e/helpers.js
+++ b/cypress/e2e/helpers.js
@@ -1,14 +1,23 @@
 export const login = (username, password) => {
-  cy.request({
-    method: "POST",
-    url: "/api/core/login/",
-    body: { username, password },
-  });
+    cy.request({
+        method: "POST", url: "/api/core/login/", body: {username, password},
+    });
 };
 
 export const logout = () => {
-  cy.request({
-    method: "POST",
-    url: "/api/core/logout/",
-  });
+    cy.request({
+        method: "POST", url: "/api/core/logout/",
+    });
 };
+
+export const BASE_URL = "/course/test-lehrgang";
+export const EXPERT_LOGIN = ["test-trainer1@example.com", "test"];
+export const PARTICIPANT_LOGIN = ["test-student1@example.com", "test"];
+
+export const visitCoursePage = (subPath) => {
+    cy.visit(`${BASE_URL}/${subPath}`);
+}
+
+export const checkNavigationLink = (dataCy, expectedLink) => {
+    cy.get(`[data-cy="${dataCy}"]`).should('have.attr', 'href').and('eq', `${BASE_URL}/${expectedLink}`);
+}
diff --git a/cypress/e2e/navigation.cy.js b/cypress/e2e/navigation.cy.js
index 45ab25d3..536732f1 100644
--- a/cypress/e2e/navigation.cy.js
+++ b/cypress/e2e/navigation.cy.js
@@ -1,15 +1,7 @@
-import {login} from "./helpers";
+import {checkNavigationLink, EXPERT_LOGIN, login, PARTICIPANT_LOGIN, visitCoursePage} from "./helpers";
 
-const BASE_URL = "/course/test-lehrgang";
-const EXPERT_LOGIN = ["test-trainer1@example.com", "test"];
-const PARTICIPANT_LOGIN = ["test-student1@example.com", "test"];
-
-const visitCoursePage = (subPath) => {
-    cy.visit(`${BASE_URL}/${subPath}`);
-}
-
-const checkNavigationLink = (dataCy, expectedLink) => {
-    cy.get(`[data-cy="${dataCy}"]`).should('have.attr', 'href').and('eq', `${BASE_URL}/${expectedLink}`);
+const openMobileNavigation = () => {
+    cy.get('[data-cy="navigation-mobile-menu-button"]').click();
 }
 
 describe("Navigation tests", () => {
@@ -25,48 +17,68 @@ describe("Navigation tests", () => {
         describe("Expert / Trainer", () => {
             beforeEach(() => {
                 login(...EXPERT_LOGIN);
-            });
-
-            it("should show course preview on learn", () => {
-                visitCoursePage("learn");
-                cy.get('[data-cy="course-preview-bar"]').should("exist");
-            });
-
-            it("should show course preview on competence", () => {
-                visitCoursePage("competence");
-                cy.get('[data-cy="course-preview-bar"]').should("exist");
-            });
-
-            it("should have correct course preview navigation", () => {
-                visitCoursePage("learn");
-                checkNavigationLink("preview-learn-path-link", "cockpit");
-                checkNavigationLink("preview-competence-profile-link", "learn");
+                visitCoursePage("cockpit");
             });
 
             it("should have correct expert navigation", () => {
-                visitCoursePage("cockpit");
                 checkNavigationLink("navigation-cockpit-link", "cockpit");
                 checkNavigationLink("navigation-preview-link", "learn");
+
+                cy.get('[data-cy="navigation-competence-profile-link"]').should("not.exist");
+                cy.get('[data-cy="navigation-learning-path-link"]').should("not.exist");
             });
         });
 
         describe("Participant", () => {
             beforeEach(() => {
                 login(...PARTICIPANT_LOGIN);
-            });
-
-            it("should not show course preview on learn path", () => {
                 visitCoursePage("learn");
-                cy.get('[data-cy="course-preview-bar"]').should("not.exist");
             });
 
             it("should have correct navigation", () => {
-                visitCoursePage("learn");
                 checkNavigationLink("navigation-competence-profile-link", "competence");
                 checkNavigationLink("navigation-learning-path-link", "learn");
+
+                cy.get('[data-cy="navigation-cockpit-link"]').should("not.exist");
+                cy.get('[data-cy="navigation-preview-link"]').should("not.exist");
             });
         });
     });
+
+    describe("Mobile view", () => {
+        beforeEach(() => {
+            cy.viewport(375, 667);
+        });
+
+        describe("Expert / Trainer", () => {
+            beforeEach(() => {
+                login(...EXPERT_LOGIN);
+                visitCoursePage("cockpit");
+                openMobileNavigation();
+            });
+
+            it("should have correct expert navigation", () => {
+                cy.get('[data-cy="navigation-mobile-cockpit-link"]').should("exist");
+                cy.get('[data-cy="navigation-mobile-preview-link"]').should("exist");
+                cy.get('[data-cy="navigation-mobile-competence-profile-link"]').should("not.exist");
+                cy.get('[data-cy="navigation-mobile-learning-path-link"]').should("not.exist");
+            })
+        })
+
+        describe("Participant", () => {
+            beforeEach(() => {
+                login(...PARTICIPANT_LOGIN);
+                visitCoursePage("learn");
+                openMobileNavigation();
+            });
+
+            it("should have correct navigation", () => {
+                cy.get('[data-cy="navigation-mobile-cockpit-link"]').should("not.exist");
+                cy.get('[data-cy="navigation-mobile-preview-link"]').should("not.exist");
+                cy.get('[data-cy="navigation-mobile-competence-profile-link"]').should("exist");
+                cy.get('[data-cy="navigation-mobile-learning-path-link"]').should("exist");
+            });
+        });
+    })
 });
 
-
diff --git a/cypress/e2e/preview.cy.js b/cypress/e2e/preview.cy.js
new file mode 100644
index 00000000..68688d25
--- /dev/null
+++ b/cypress/e2e/preview.cy.js
@@ -0,0 +1,45 @@
+import {checkNavigationLink, login, PARTICIPANT_LOGIN, visitCoursePage} from "./helpers";
+
+describe("Preview Bar", () => {
+    beforeEach(() => {
+        cy.manageCommand("cypress_reset");
+    })
+
+    describe("Expert / Trainer", () => {
+        beforeEach(() => {
+            login("test-trainer1@example.com", "test");
+        });
+
+        it("should show course preview on learn", () => {
+            visitCoursePage("learn");
+            cy.get('[data-cy="course-preview-bar"]').should("exist");
+        });
+
+        it("should show course preview on competence", () => {
+            visitCoursePage("competence");
+            cy.get('[data-cy="course-preview-bar"]').should("exist");
+        });
+
+        it("should have correct course preview navigation", () => {
+            visitCoursePage("learn");
+            checkNavigationLink("preview-learn-path-link", "learn");
+            checkNavigationLink("preview-competence-profile-link", "competence");
+        });
+    });
+
+    describe("Participant", () => {
+        before(() => {
+            login(...PARTICIPANT_LOGIN);
+        });
+
+        it("should not show course preview on learn path", () => {
+            visitCoursePage("learn");
+            cy.get('[data-cy="course-preview-bar"]').should("not.exist");
+        });
+
+        it("should not show course preview on competence", () => {
+            visitCoursePage("competence");
+            cy.get('[data-cy="course-preview-bar"]').should("not.exist");
+        });
+    })
+});

From d646454ae9a0124db1b0e326d642aa5fe15c5212 Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Thu, 28 Sep 2023 09:43:03 +0200
Subject: [PATCH 4/4] fix: use file name in cypress tests

---
 cypress/e2e/navigation.cy.js | 130 +++++++++++++++++------------------
 cypress/e2e/preview.cy.js    |  74 ++++++++++----------
 2 files changed, 102 insertions(+), 102 deletions(-)

diff --git a/cypress/e2e/navigation.cy.js b/cypress/e2e/navigation.cy.js
index 536732f1..67ae3eb6 100644
--- a/cypress/e2e/navigation.cy.js
+++ b/cypress/e2e/navigation.cy.js
@@ -1,84 +1,84 @@
 import {checkNavigationLink, EXPERT_LOGIN, login, PARTICIPANT_LOGIN, visitCoursePage} from "./helpers";
 
 const openMobileNavigation = () => {
-    cy.get('[data-cy="navigation-mobile-menu-button"]').click();
+  cy.get('[data-cy="navigation-mobile-menu-button"]').click();
 }
 
-describe("Navigation tests", () => {
+describe("navigation.cy.js", () => {
+  beforeEach(() => {
+    cy.manageCommand("cypress_reset");
+  });
+
+  describe("Desktop view", () => {
     beforeEach(() => {
-        cy.manageCommand("cypress_reset");
+      cy.viewport(1280, 720);
     });
 
-    describe("Desktop view", () => {
-        beforeEach(() => {
-            cy.viewport(1280, 720);
-        });
+    describe("Expert / Trainer", () => {
+      beforeEach(() => {
+        login(...EXPERT_LOGIN);
+        visitCoursePage("cockpit");
+      });
 
-        describe("Expert / Trainer", () => {
-            beforeEach(() => {
-                login(...EXPERT_LOGIN);
-                visitCoursePage("cockpit");
-            });
+      it("should have correct expert navigation", () => {
+        checkNavigationLink("navigation-cockpit-link", "cockpit");
+        checkNavigationLink("navigation-preview-link", "learn");
 
-            it("should have correct expert navigation", () => {
-                checkNavigationLink("navigation-cockpit-link", "cockpit");
-                checkNavigationLink("navigation-preview-link", "learn");
-
-                cy.get('[data-cy="navigation-competence-profile-link"]').should("not.exist");
-                cy.get('[data-cy="navigation-learning-path-link"]').should("not.exist");
-            });
-        });
-
-        describe("Participant", () => {
-            beforeEach(() => {
-                login(...PARTICIPANT_LOGIN);
-                visitCoursePage("learn");
-            });
-
-            it("should have correct navigation", () => {
-                checkNavigationLink("navigation-competence-profile-link", "competence");
-                checkNavigationLink("navigation-learning-path-link", "learn");
-
-                cy.get('[data-cy="navigation-cockpit-link"]').should("not.exist");
-                cy.get('[data-cy="navigation-preview-link"]').should("not.exist");
-            });
-        });
+        cy.get('[data-cy="navigation-competence-profile-link"]').should("not.exist");
+        cy.get('[data-cy="navigation-learning-path-link"]').should("not.exist");
+      });
     });
 
-    describe("Mobile view", () => {
-        beforeEach(() => {
-            cy.viewport(375, 667);
-        });
+    describe("Participant", () => {
+      beforeEach(() => {
+        login(...PARTICIPANT_LOGIN);
+        visitCoursePage("learn");
+      });
 
-        describe("Expert / Trainer", () => {
-            beforeEach(() => {
-                login(...EXPERT_LOGIN);
-                visitCoursePage("cockpit");
-                openMobileNavigation();
-            });
+      it("should have correct navigation", () => {
+        checkNavigationLink("navigation-competence-profile-link", "competence");
+        checkNavigationLink("navigation-learning-path-link", "learn");
 
-            it("should have correct expert navigation", () => {
-                cy.get('[data-cy="navigation-mobile-cockpit-link"]').should("exist");
-                cy.get('[data-cy="navigation-mobile-preview-link"]').should("exist");
-                cy.get('[data-cy="navigation-mobile-competence-profile-link"]').should("not.exist");
-                cy.get('[data-cy="navigation-mobile-learning-path-link"]').should("not.exist");
-            })
-        })
+        cy.get('[data-cy="navigation-cockpit-link"]').should("not.exist");
+        cy.get('[data-cy="navigation-preview-link"]').should("not.exist");
+      });
+    });
+  });
 
-        describe("Participant", () => {
-            beforeEach(() => {
-                login(...PARTICIPANT_LOGIN);
-                visitCoursePage("learn");
-                openMobileNavigation();
-            });
+  describe("Mobile view", () => {
+    beforeEach(() => {
+      cy.viewport(375, 667);
+    });
 
-            it("should have correct navigation", () => {
-                cy.get('[data-cy="navigation-mobile-cockpit-link"]').should("not.exist");
-                cy.get('[data-cy="navigation-mobile-preview-link"]').should("not.exist");
-                cy.get('[data-cy="navigation-mobile-competence-profile-link"]').should("exist");
-                cy.get('[data-cy="navigation-mobile-learning-path-link"]').should("exist");
-            });
-        });
+    describe("Expert / Trainer", () => {
+      beforeEach(() => {
+        login(...EXPERT_LOGIN);
+        visitCoursePage("cockpit");
+        openMobileNavigation();
+      });
+
+      it("should have correct expert navigation", () => {
+        cy.get('[data-cy="navigation-mobile-cockpit-link"]').should("exist");
+        cy.get('[data-cy="navigation-mobile-preview-link"]').should("exist");
+        cy.get('[data-cy="navigation-mobile-competence-profile-link"]').should("not.exist");
+        cy.get('[data-cy="navigation-mobile-learning-path-link"]').should("not.exist");
+      })
     })
+
+    describe("Participant", () => {
+      beforeEach(() => {
+        login(...PARTICIPANT_LOGIN);
+        visitCoursePage("learn");
+        openMobileNavigation();
+      });
+
+      it("should have correct navigation", () => {
+        cy.get('[data-cy="navigation-mobile-cockpit-link"]').should("not.exist");
+        cy.get('[data-cy="navigation-mobile-preview-link"]').should("not.exist");
+        cy.get('[data-cy="navigation-mobile-competence-profile-link"]').should("exist");
+        cy.get('[data-cy="navigation-mobile-learning-path-link"]').should("exist");
+      });
+    });
+  })
 });
 
diff --git a/cypress/e2e/preview.cy.js b/cypress/e2e/preview.cy.js
index 68688d25..e1628f3f 100644
--- a/cypress/e2e/preview.cy.js
+++ b/cypress/e2e/preview.cy.js
@@ -1,45 +1,45 @@
 import {checkNavigationLink, login, PARTICIPANT_LOGIN, visitCoursePage} from "./helpers";
 
-describe("Preview Bar", () => {
+describe("preview.cy.js", () => {
+  beforeEach(() => {
+    cy.manageCommand("cypress_reset");
+  })
+
+  describe("Expert / Trainer", () => {
     beforeEach(() => {
-        cy.manageCommand("cypress_reset");
-    })
-
-    describe("Expert / Trainer", () => {
-        beforeEach(() => {
-            login("test-trainer1@example.com", "test");
-        });
-
-        it("should show course preview on learn", () => {
-            visitCoursePage("learn");
-            cy.get('[data-cy="course-preview-bar"]').should("exist");
-        });
-
-        it("should show course preview on competence", () => {
-            visitCoursePage("competence");
-            cy.get('[data-cy="course-preview-bar"]').should("exist");
-        });
-
-        it("should have correct course preview navigation", () => {
-            visitCoursePage("learn");
-            checkNavigationLink("preview-learn-path-link", "learn");
-            checkNavigationLink("preview-competence-profile-link", "competence");
-        });
+      login("test-trainer1@example.com", "test");
     });
 
-    describe("Participant", () => {
-        before(() => {
-            login(...PARTICIPANT_LOGIN);
-        });
+    it("should show course preview on learn", () => {
+      visitCoursePage("learn");
+      cy.get('[data-cy="course-preview-bar"]').should("exist");
+    });
 
-        it("should not show course preview on learn path", () => {
-            visitCoursePage("learn");
-            cy.get('[data-cy="course-preview-bar"]').should("not.exist");
-        });
+    it("should show course preview on competence", () => {
+      visitCoursePage("competence");
+      cy.get('[data-cy="course-preview-bar"]').should("exist");
+    });
 
-        it("should not show course preview on competence", () => {
-            visitCoursePage("competence");
-            cy.get('[data-cy="course-preview-bar"]').should("not.exist");
-        });
-    })
+    it("should have correct course preview navigation", () => {
+      visitCoursePage("learn");
+      checkNavigationLink("preview-learn-path-link", "learn");
+      checkNavigationLink("preview-competence-profile-link", "competence");
+    });
+  });
+
+  describe("Participant", () => {
+    before(() => {
+      login(...PARTICIPANT_LOGIN);
+    });
+
+    it("should not show course preview on learn path", () => {
+      visitCoursePage("learn");
+      cy.get('[data-cy="course-preview-bar"]').should("not.exist");
+    });
+
+    it("should not show course preview on competence", () => {
+      visitCoursePage("competence");
+      cy.get('[data-cy="course-preview-bar"]').should("not.exist");
+    });
+  })
 });