test: Adding test to leaderboard

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>

src/components/LeaderboardComponents/__tests__/Leaderboard.spec.ts

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

src/components/UserProfile/UserProfileLayout.vue

 <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;">

src/components/UserProfile/__tests__/UserProfileLayout.spec.ts

-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