diff --git a/src/components/LeaderboardComponents/Leaderboard.vue b/src/components/LeaderboardComponents/Leaderboard.vue
index 9003a25a4c37050a30eafc00cb1551c4885b0dc7..735ef4c014946080061da6e7c1e991b3b6a347eb 100644
--- a/src/components/LeaderboardComponents/Leaderboard.vue
+++ b/src/components/LeaderboardComponents/Leaderboard.vue
@@ -20,7 +20,7 @@
<tbody id="line">`</tbody>
<tbody v-if="!userInLeaderboard">
<tr></tr>
- <tr v-for="(entry, index) in leaderboardExtra" :key="entry.user.id" :class="{ 'is-user-5': entry.user.firstName === 'User' }">
+ <tr v-for="(entry, index) in leaderboardExtra" :key="entry.user.id" :class="{ 'is-user-5': entry.user.firstName === userStore.firstname }">
<td class="number">{{ entry.rank }}</td>
<td class="name" @click="navigateToUserProfile(entry.user.id)">{{ entry.user.firstName }}</td>
<td class="points">{{ entry.score }}</td>
diff --git a/src/components/LeaderboardComponents/__tests__/Leaderboard.spec.ts b/src/components/LeaderboardComponents/__tests__/Leaderboard.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1f069a058b885113e8e7f86f97834b561d90d2a9
--- /dev/null
+++ b/src/components/LeaderboardComponents/__tests__/Leaderboard.spec.ts
@@ -0,0 +1,66 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import { createPinia, setActivePinia } from 'pinia';
+import Leaderboard from '@/components/LeaderboardComponents/Leaderboard.vue';
+import { useUserInfoStore } from '@/stores/UserStore';
+import router from '@/router/index';
+
+describe('Leaderboard', () => {
+ let wrapper, store, mockRouter;
+
+ const leaderboard = [
+ { user: { id: 1, firstName: 'Alice', email: 'alice@example.com' }, rank: 1, score: 50 },
+ { user: { id: 2, firstName: 'Bob', email: 'bob@example.com' }, rank: 2, score: 45 }
+ ];
+
+ const leaderboardExtra = [
+ { user: { id: 3, firstName: 'Charlie', email: 'charlie@example.com' }, rank: 1, score: 40 }
+ ];
+
+ beforeEach(() => {
+ setActivePinia(createPinia());
+ store = useUserInfoStore();
+ store.$state = { email: 'alice@example.com' }; // Setting initial state
+ mockRouter = createRouter({
+ history: createMemoryHistory(),
+ routes: router.getRoutes(),
+ });
+
+ router.beforeEach((to, from, next) => {
+ const isAuthenticated = store.accessToken;
+ if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
+ next({ name: 'login' });
+ } else {
+ next();
+ }
+ });
+
+ wrapper = mount(Leaderboard, {
+ props: { leaderboard, leaderboardExtra },
+ global: {
+ plugins: [mockRouter],
+ stubs: ['router-link', 'router-view']
+ }
+ });
+ });
+
+ it('renders all entries from the leaderboard and leaderboardExtra props', () => {
+ const rows = wrapper.findAll('tbody > tr');
+ expect(rows.length).toBe(2);
+ });
+
+ it('correctly determines if the user is in the leaderboard', () => {
+ expect(wrapper.vm.userInLeaderboard).toBe(true);
+ });
+
+ it('shows the gold medal image only for the first entry', () => {
+ const medals = wrapper.findAll('.gold-medal');
+ expect(medals.length).toBe(1); // Only the first entry should have a gold medal
+ });
+
+ it('applies the is-user-5 class based on user firstName', () => {
+ store.$state.firstname = 'User'; // Change state to match the condition
+ expect(wrapper.find('.is-user-5').exists()).toBe(false); // Check if the class is applied
+ });
+});
diff --git a/src/components/UserProfile/UserProfileLayout.vue b/src/components/UserProfile/UserProfileLayout.vue
index 161c8b9550540e6122a65c8217937356dae6b23f..7036e347b7ad8398651125fc7a8e897c4ab5c76d 100644
--- a/src/components/UserProfile/UserProfileLayout.vue
+++ b/src/components/UserProfile/UserProfileLayout.vue
@@ -1,4 +1,5 @@
<script setup lang="ts">
+import { ref } from "vue";
import { useRouter } from "vue-router";
import { useUserInfoStore } from "../../stores/UserStore";
@@ -8,8 +9,15 @@ let cardTitles = ["Spain tour", "Food waste", "Coffee", "Concert", "New book", "
let points = 0;
let streak = 0;
+let firstname = ref("");
+let lastname = ref("");
+
+const router = useRouter();
+const userStore = useUserInfoStore();
+firstname.value = userStore.firstname;
+lastname.value = userStore.lastname;
+
-const router = useRouter()
const toRoadmap = () => {
router.push('/');
};
@@ -35,7 +43,7 @@ const toUpdateUserSettings = () => {
</button>
</div>
<div class="ms-3" style="margin-top: 130px;">
- <h1>Andy Horwitz</h1>
+ <h1>{{ firstname }} {{ lastname }}</h1>
</div>
</div>
<div class="p-4 text-black" style="background-color: #f8f9fa;">
diff --git a/src/components/UserProfile/__tests__/UserProfileLayout.spec.ts b/src/components/UserProfile/__tests__/UserProfileLayout.spec.ts
index bbe3d449d08693b9a13ca4ebd9a870e045d3f9c3..f3028b0cb27deeb0de90684578082eeb735fe6ea 100644
--- a/src/components/UserProfile/__tests__/UserProfileLayout.spec.ts
+++ b/src/components/UserProfile/__tests__/UserProfileLayout.spec.ts
@@ -1,47 +1,86 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, beforeEach } from 'vitest';
import { mount } from '@vue/test-utils';
-import DashboardComponent from '@/components/UserProfile/UserProfileLayout.vue'; // Update with your actual import
-
-// Correctly mocking 'vue-router'
-vi.mock('vue-router', async (importOriginal) => {
- const actual = await importOriginal(); // Import the actual vue-router module
- return {
- ...actual, // Spread all exports
- // Optionally override specific exports if needed
- };
-});
+import { createRouter, createMemoryHistory } from 'vue-router';
+import { createPinia, setActivePinia } from 'pinia';
+import { useUserInfoStore } from '@/stores/UserStore';
+import MyComponent from '@/components/UserProfile/UserProfileLayout.vue'; // Adjust path as needed
+import router from '@/router/index'; // Adjust path as needed
+import { access } from 'fs';
+
+describe('MyComponent and Router Tests', () => {
+ let store, mockRouter;
-describe('DashboardComponent', () => {
- // Now you can import and use createRouter and createWebHistory
- const { createRouter, createWebHistory } = require('vue-router');
+ beforeEach(() => {
+ // Create a fresh Pinia and Router instance before each test
+ setActivePinia(createPinia());
+ store = useUserInfoStore();
+ mockRouter = createRouter({
+ history: createMemoryHistory(),
+ routes: router.getRoutes(),
+ });
+ router.beforeEach((to, from, next) => {
+ const isAuthenticated = store.accessToken;
+ if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
+ next({ name: 'login' });
+ } else {
+ next();
+ }
+ });
- const router = createRouter({
- history: createWebHistory(),
- routes: [{ path: '/', name: 'home' }, { path: '/update-user', name: 'update-user' }]
});
- it('renders correctly', () => {
- const wrapper = mount(DashboardComponent, {
- global: {
- plugins: [router]
- }
+ describe('Component Rendering', () => {
+ it('renders MyComponent correctly with data from the store', () => {
+ // Mock user information
+ store.setUserInfo({ firstname: 'Jane', lastname: 'Doe', accessToken: 'thisIsATestToken' });
+
+ const wrapper = mount(MyComponent, {
+ global: {
+ plugins: [mockRouter],
+ },
+ });
+
+ // Check for text or elements that depend on user info
+ expect(wrapper.text()).toContain('Jane');
+ expect(wrapper.text()).toContain('Doe');
});
+ });
- // Check if the component renders
- expect(wrapper.find('.container').exists()).toBe(true);
- expect(wrapper.find('h1').text()).toBe('Andy Horwitz');
- expect(wrapper.findAll('.card').length).toBeGreaterThan(0); // Checks if any cards are rendered
+ describe('Navigation Guards', () => {
+ it('redirects an unauthenticated user to login when accessing a protected route', async () => {
+ // Simulate the user being unauthenticated
+ store.$patch({ accessToken: '' });
+
+ router.push('/profile');
+ await router.isReady();
+
+ expect(router.currentRoute.value.name).toBe('login');
+ });
+
+ it('allows an authenticated user to visit a protected route', async () => {
+ store.$patch({ accessToken: 'valid-token' }); // Token is present
+ mockRouter.push('/profile');
+ await mockRouter.isReady();
+ expect(mockRouter.currentRoute.value.name).toBe('profile');
+ });
});
+
- it('navigates to roadmap page', async () => {
- const wrapper = mount(DashboardComponent, {
- global: {
- plugins: [router]
- }
+ describe('UserStore Actions', () => {
+ it('updates user information correctly', () => {
+ store.setUserInfo({ firstname: 'John', lastname: 'Smith' });
+
+ expect(store.firstname).toBe('John');
+ expect(store.lastname).toBe('Smith');
});
- await router.isReady(); // Wait for router to be ready
- await wrapper.find('.stretched-link').trigger('click'); // Simulate clicking the link that calls toRoadmap
- expect(router.currentRoute.value.path).toBe('/');
+ it('clears user information correctly', () => {
+ store.setUserInfo({ firstname: 'John', lastname: 'Smith', accessToken: 'thisIsATestToken'});
+ store.clearUserInfo();
+
+ expect(store.firstname).toBe('');
+ expect(store.lastname).toBe('');
+ expect(store.accessToken).toBe('');
+ });
});
-});
\ No newline at end of file
+});