test: add e2e test for loading leaderboard

cypress/e2e/LeaderboardView.cy.ts

+describe("Leaderboard 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('/leaderboard')
+  });
+
+  it('loads global leaderboards', () => {
+    cy.get('[data-cy="total-points-board"]')
+    .find('[data-cy="top-leaderboard-tablerow"]')
+    .should('have.length', 10);
+
+    cy.get('[data-cy="total-points-board"]')
+    .find('[data-cy="surrounding-user-leaderboard-tablerow"]')
+    .should('have.length', 4);
+
+    cy.get('[data-cy="current-points-board"]')
+    .find('[data-cy="top-leaderboard-tablerow"]')
+    .should('have.length', 10);
+
+    cy.get('[data-cy="streak-board"]')
+    .find('[data-cy="top-leaderboard-tablerow"]')
+    .should('have.length', 10);
+  })
+
+  it('loads friends leaderboards', () => {
+    cy.get('[data-cy="friends-leaderboard-btn"]').click()
+
+    cy.get('[data-cy="total-points-board"]')
+    .find('[data-cy="top-leaderboard-tablerow"]')
+    .should('have.length', 3);
+
+    cy.get('[data-cy="current-points-board"]')
+    .find('[data-cy="top-leaderboard-tablerow"]')
+    .should('have.length', 3);
+
+    cy.get('[data-cy="streak-board"]')
+    .find('[data-cy="top-leaderboard-tablerow"]')
+    .should('have.length', 3);
+  })
+
+})
\ No newline at end of file

src/components/LeaderboardComponents/Leaderboard.vue

@@ -2,8 +2,10 @@
   <div id="leaderboard">
     <div class="ribbon"></div>
     <table>
-      <tbody>
-        <tr v-for="(entry, index) in leaderboard" :key="entry.user?.id" :class="{ 'is-user-5': entry.user?.id === userStore.id }">
+      <tbody data-cy="top-leaderboard-table">
+        <tr data-cy="top-leaderboard-tablerow" v-for="(entry, index) in leaderboard"
+            :key="entry.user?.id" :class="{ 'is-user-5':
+        entry.user?.id === userStore.id }">
           <td class="number">{{ entry.rank }}</td>
           <td class="name" @click="navigateToUserProfile(entry.user?.id ?? 0)">{{ entry.user?.firstName }}</td>
           <td class="points" v-if="index === 0">
@@ -18,9 +20,11 @@
         </tr>
       </tbody>
       <tbody id="line">`</tbody>
-      <tbody v-if="!userInLeaderboard">
+      <tbody data-cy="surrounding-user-leaderboard-table" v-if="!userInLeaderboard">
         <tr></tr>
-        <tr v-for="(entry, index) in leaderboardExtra" :key="entry.user?.id" :class="{ 'is-user-5': entry.user?.id === userStore.id }">
+        <tr data-cy="surrounding-user-leaderboard-tablerow" v-for="(entry, index) in
+        leaderboardExtra" :key="entry.user?.id" :class="{
+          'is-user-5': entry.user?.id === userStore.id }">
           <td class="number">{{ entry.rank }}</td>
           <td class="name" @click="navigateToUserProfile(entry.user?.id ?? 0)">{{ entry.user?.firstName }}</td>
           <td class="points">{{ entry.score }}</td>

src/views/LeaderboardView.vue

@@ -11,22 +11,27 @@
                     <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
                     <label class="btn btn-outline-primary" for="vbtn-radio1" @click="global"><img src="@/assets/globe.png" style="width: 60px" alt="globus"> Global</label>
                     <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
-                    <label class="btn btn-outline-primary" for="vbtn-radio2" @click="friends"><img src="@/assets/friends.png" style="width: 60px" alt="venner"> Venner</label>
+                    <label data-cy="friends-leaderboard-btn" class="btn btn-outline-primary"
+                           for="vbtn-radio2"
+                            @click="friends"><img src="@/assets/friends.png" style="width: 60px" alt="venner"> Venner</label>
                 </div>
             </div>
         </div>
         <main>
             <div id="leaderboard">
                 <h1><img src="@/assets/items/pigcoin.png" style="width: 2rem" alt="pig coin"> Totale poeng</h1>
-                <Leaderboard :leaderboard="pointsLeaderboardData" :leaderboardExtra="pointsLeaderboardDataExtra" @navigateToUserProfile="navigateToUserProfile" />
+                <Leaderboard data-cy="total-points-board" :leaderboard="pointsLeaderboardData"
+                              :leaderboardExtra="pointsLeaderboardDataExtra" @navigateToUserProfile="navigateToUserProfile" />
             </div>
             <div id="leaderboard">
                 <h1><img src="@/assets/icons/fire.png" style="width: 2rem" alt="ild"> Nåværende rekke</h1>
-                <Leaderboard :leaderboard="currentLeaderboardData" :leaderboardExtra="currentLeaderboardDataExtra" @navigateToUserProfile="navigateToUserProfile" />
+                <Leaderboard data-cy="current-points-board" :leaderboard="currentLeaderboardData"
+                              :leaderboardExtra="currentLeaderboardDataExtra" @navigateToUserProfile="navigateToUserProfile" />
             </div>
             <div id="leaderboard">
                 <h1><img src="@/assets/icons/fire.png" style="width: 2rem" alt="ild"> Høyeste rekke</h1>
-                <Leaderboard :leaderboard="streakLeaderboardData" :leaderboardExtra="streakLeaderboardDataExtra" @navigateToUserProfile="navigateToUserProfile" />
+                <Leaderboard data-cy="streak-board" :leaderboard="streakLeaderboardData"
+                              :leaderboardExtra="streakLeaderboardDataExtra" @navigateToUserProfile="navigateToUserProfile" />
             </div>
         </main>
     </div>