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