diff --git a/cypress.config.ts b/cypress.config.ts
index f80530a2a66e24534ac18223b7603fd3d0206f49..e7662e1eef97ffff84557d58d19242b20e07975b 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -3,6 +3,8 @@ import { defineConfig } from 'cypress'
export default defineConfig({
e2e: {
specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
- baseUrl: 'http://localhost:5173'
+ baseUrl: 'http://localhost:5173',
+ viewportHeight: 1080,
+ viewportWidth: 1920,
}
})
diff --git a/cypress/e2e/BasePage/BasePageView.cy.ts b/cypress/e2e/BasePage/BasePageView.cy.ts
new file mode 100644
index 0000000000000000000000000000000000000000..223d228f2edf3c22bb88cdd7d22bbbc7fcc49b37
--- /dev/null
+++ b/cypress/e2e/BasePage/BasePageView.cy.ts
@@ -0,0 +1,67 @@
+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
diff --git a/src/components/BaseComponents/Menu.vue b/src/components/BaseComponents/Menu.vue
index 684401a0f7cbaa18876f98aa8270f79b392311f5..625f3e57917b86aaac6a3a2bc0ee6fc0950c36e6 100644
--- a/src/components/BaseComponents/Menu.vue
+++ b/src/components/BaseComponents/Menu.vue
@@ -1,7 +1,7 @@
<template>
<nav id="navBar" class="navbar navbar-expand-xl">
<div class="container-fluid">
- <router-link class="navbar-brand" id="home" :to="toSavingGoals()">
+ <router-link class="navbar-brand" id="home" :to="toSavingGoals()">
<img id="logoImg" src="/src/assets/Sparesti-logo.png" alt="Sparesti-logo" width="60">
<span id="logo" class="text-white">Sparesti</span>
</router-link>
@@ -13,45 +13,52 @@
<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
- src="@/assets/icons/newsletter.svg">News</router-link>
+ <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
- src="@/assets/icons/storefront.svg">Store</router-link>
+ <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="useUserInfoStore().profileImage ? 'http://localhost:8080/api/images/' + useUserInfoStore().profileImage : 'src/assets/userprofile.png'"
style="width: 50px; border: 2px solid black; border-radius: 50%">{{
useUserInfoStore().firstname }}
</a>
<ul class="dropdown-menu dropdown-username-content">
- <li><router-link 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 src="@/assets/icons/friends.svg">Friends</router-link></li>
- <li><router-link 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 src="@/assets/icons/feedback.svg">Feedback</router-link>
- </li>
- <li><router-link 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>
+ <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 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 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 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 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>
</ul>
</li>
<li v-else class="nav-item">
diff --git a/src/views/BasePageView.vue b/src/views/BasePageView.vue
index a7c413d9119d42fff2df1e83612e3cdf2e19f4c1..b3c26b6bf62ed02c0d70b7a1e0708d1d3a77d1a5 100644
--- a/src/views/BasePageView.vue
+++ b/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>