test: add e2e tests for navigating menu bar

cypress/e2e/BasePage/BasePageView.cy.ts

+describe('BasePage test', () => {
+  beforeEach(() => {
+    cy.visit('/login');
+    cy.get('#emailInput input').type('user@example.com');
+    cy.get('#passwordInput input').type('John1');
+    cy.get('form').submit();
+    cy.wait(1000);
+    cy.visit('/')
+  });
+
+  it('uses menu to visit leaderboard', () => {
+    cy.get('[data-cy="menu"]').get('[data-cy="leaderboard"]').click();
+    cy.url().should('include', '/leaderboard');
+  });
+
+  it('uses menu to visit news', () => {
+    cy.get('[data-cy="menu"]').get('[data-cy="news"]').click();
+    cy.url().should('include', '/news');
+  });
+
+  it('uses menu to visit store', () => {
+    cy.get('[data-cy="menu"]').get('[data-cy="store"]').click();
+    cy.url().should('include', '/shop');
+  });
+
+  it('uses menu to visit roadmap', () => {
+    cy.get('[data-cy="menu"]').get('[data-cy="savingGoals"]').click();
+    cy.url().should('include', '/roadmap');
+  });
+
+  it('uses menu to visit user profile', () => {
+    cy.get('[data-cy="menu"]').get('[data-cy="user"]').click();
+    cy.get('[data-cy="profile"]').click();
+    cy.url().should('include', '/profile');
+  });
+
+  it('uses menu to visit budget', () => {
+    cy.get('[data-cy="menu"]').get('[data-cy="user"]').click();
+    cy.get('[data-cy="budget"]').click();
+    cy.url().should('include', '/budget');
+  });
+
+  it('uses menu to visit friends', () => {
+    cy.get('[data-cy="menu"]').get('[data-cy="user"]').click();
+    cy.get('[data-cy="friends"]').click();
+    cy.url().should('include', '/friends');
+  });
+
+  it('uses menu to visit settings', () => {
+    cy.get('[data-cy="menu"]').get('[data-cy="user"]').click();
+    cy.get('[data-cy="settings"]').click();
+    cy.url().should('include', '/settings');
+  });
+
+  it('uses menu to visit feedback', () => {
+    cy.get('[data-cy="menu"]').get('[data-cy="user"]').click();
+    cy.get('[data-cy="feedback"]').click();
+    cy.url().should('include', '/feedback');
+  });
+
+  it('uses menu to log out', () => {
+    cy.get('[data-cy="menu"]').get('[data-cy="user"]').click();
+    cy.get('[data-testid="logout"]').click();
+    cy.wait(1000);
+    cy.url().should('include', '/login');
+  });
+})
\ No newline at end of file

src/components/BaseComponents/Menu.vue

@@ -13,37 +13,47 @@
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
                 <ul class="navbar-nav ms-auto mb-2 mb-lg-0 ui-menu">
                     <li class="nav-item">
-                      <router-link class="nav-link text-white" :to="toSavingGoals()"><img
+                      <router-link data-cy="savingGoals" class="nav-link text-white"
+                                   :to="toSavingGoals()"><img
                                 src="@/assets/icons/saving.svg">Saving goals</router-link>
                     </li>
                     <li class="nav-item">
-                      <router-link class="nav-link text-white" :to="toLeaderboard()"><img
+                      <router-link data-cy="leaderboard" class="nav-link text-white"
+                                   :to="toLeaderboard()"><img
                                 src="@/assets/icons/leaderboard.svg">Leaderboard</router-link>
                     </li>
                     <li class="nav-item">
-                      <router-link class="nav-link text-white" :to="toNews()"><img
+                      <router-link data-cy="news" class="nav-link text-white" :to="toNews()"><img
                           src="@/assets/icons/newsletter.svg">News</router-link>
                     </li>
                     <li class="nav-item">
-                      <router-link class="nav-link text-white" :to="toStore()"><img
+                      <router-link data-cy="store" class="nav-link text-white" :to="toStore()"><img
                           src="@/assets/icons/storefront.svg">Store</router-link>
                     </li>
                     <li v-if="userStore.isLoggedIn" class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle username-text text-white " href="#" role="button"
+                        <a data-cy="user"
+                           class="nav-link dropdown-toggle username-text text-white "
+                           href="#" role="button"
                             data-bs-toggle="dropdown" aria-expanded="false">
                             <img src="@/assets/icons/person.svg">{{ useUserInfoStore().firstname}}
                         </a>
                         <ul class="dropdown-menu dropdown-username-content">
-                            <li><router-link class="dropdown-item text-white dropdown-username-link" :to="toUserProfile()"><img
+                            <li><router-link data-cy="profile"
+                              class="dropdown-item text-white dropdown-username-link" :to="toUserProfile()"><img
                                   src="@/assets/icons/person.svg">User Profile</router-link></li>
-                            <li><router-link class="dropdown-item text-white dropdown-username-link" :to="toBudget()"><img>Budget</router-link></li>
-                            <li><router-link class="dropdown-item text-white dropdown-username-link" :to="toFriends()"><img
+                            <li><router-link data-cy="budget"
+                              class="dropdown-item text-white dropdown-username-link" :to="toBudget()"><img>Budget</router-link></li>
+                            <li><router-link data-cy="friends"
+                              class="dropdown-item text-white dropdown-username-link" :to="toFriends()"><img
                                 src="@/assets/icons/friends.svg">Friends</router-link></li>
-                            <li><router-link class="dropdown-item text-white dropdown-username-link" :to="toSetting()"><img
+                            <li><router-link data-cy="settings"
+                              class="dropdown-item text-white dropdown-username-link" :to="toSetting()"><img
                                 src="@/assets/icons/settings.svg">Settings</router-link></li>
-                            <li><router-link class="dropdown-item text-white dropdown-username-link" :to="toFeedback()"><img
+                            <li><router-link data-cy="feedback"
+                              class="dropdown-item text-white dropdown-username-link" :to="toFeedback()"><img
                                 src="@/assets/icons/feedback.svg">Feedback</router-link></li>
-                            <li><router-link class="dropdown-item text-white dropdown-username-link" :to="toSetting()"><img
+                            <li><router-link data-cy="admin"
+                              class="dropdown-item text-white dropdown-username-link" :to="toSetting()"><img
                                 src="@/assets/icons/admin.svg">Admin</router-link></li>
                             <li><a data-testid="logout" class="dropdown-item text-white dropdown-username-link" ref="#" @click="toLogout()"><img
                                 src="@/assets/icons/logout.svg">Log out</a></li>

src/views/BasePageView.vue

@@ -7,7 +7,7 @@ import FooterAlternative from "@/components/BaseComponents/FooterAlternative.vue
 
 <template>
   
-    <Menu></Menu>
+    <Menu data-cy="menu"></Menu>
     <div style="display: flex; flex-direction: row;">
       <img v-for="item in 7" src="@/assets/coca.webp" style="width: 100%; height: 100px; margin: 5px; border-radius: 1rem;" alt="picture">
     </div>