Merged in chore/navigation-tests (pull request #206)

Adds E2E tests for navigation (desktop/mobile) and preview

Approved-by: Daniel Egger

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 {

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"
@@ -109,6 +113,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 +122,7 @@ onMounted(() => {
                     </router-link>
 
                     <router-link
+                      data-cy="navigation-preview-link"
                       :to="courseSessionsStore.currentCourseSession.learning_path_url"
                       target="_blank"
                       class="nav-item"
@@ -129,6 +135,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 +144,7 @@ onMounted(() => {
                     </router-link>
 
                     <router-link
+                      data-cy="navigation-competence-profile-link"
                       :to="
                         getCompetenceBaseUrl(courseSessionsStore.currentCourseSession)
                       "

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>

cypress/e2e/helpers.js

@@ -1,14 +1,23 @@
 export const login = (username, password) => {
-  cy.request({
+    cy.request({
-    method: "POST",
+        method: "POST", url: "/api/core/login/", body: {username, password},
-    url: "/api/core/login/",
+    });
-    body: { username, password },
-  });
 };
 
 export const logout = () => {
-  cy.request({
+    cy.request({
-    method: "POST",
+        method: "POST", url: "/api/core/logout/",
-    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}`);
+}

cypress/e2e/navigation.cy.js

@@ -0,0 +1,84 @@
+import {checkNavigationLink, EXPERT_LOGIN, login, PARTICIPANT_LOGIN, visitCoursePage} from "./helpers";
+
+const openMobileNavigation = () => {
+  cy.get('[data-cy="navigation-mobile-menu-button"]').click();
+}
+
+describe("navigation.cy.js", () => {
+  beforeEach(() => {
+    cy.manageCommand("cypress_reset");
+  });
+
+  describe("Desktop view", () => {
+    beforeEach(() => {
+      cy.viewport(1280, 720);
+    });
+
+    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");
+
+        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");
+      });
+    });
+  });
+
+  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");
+      });
+    });
+  })
+});
+

cypress/e2e/preview.cy.js

@@ -1,23 +1,45 @@
-import {login} from "./helpers";
+import {checkNavigationLink, login, PARTICIPANT_LOGIN, visitCoursePage} from "./helpers";
 
 describe("preview.cy.js", () => {
   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");
+    });
   });
 
-  it("Student does not see preview", () => {
+  describe("Participant", () => {
-    login("test-student1@example.com", "test");
+    before(() => {
-    cy.visit("/course/test-lehrgang/learn/fahrzeug");
+      login(...PARTICIPANT_LOGIN);
-    cy.get('[data-cy="course-preview-bar"]').should("not.exist");
+    });
-  });
 
-  it("Trainer sees preview exclusively on course", () => {
+    it("should not show course preview on learn path", () => {
-    login("test-trainer1@example.com", "test");
+      visitCoursePage("learn");
+      cy.get('[data-cy="course-preview-bar"]').should("not.exist");
+    });
 
-    cy.visit("/");
+    it("should not show course preview on competence", () => {
-    cy.get('[data-cy="course-preview-bar"]').should("not.exist");
+      visitCoursePage("competence");
-
+      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");
+  })
-  });
 });