diff --git a/cypress/e2e/LeaderboardView.cy.ts b/cypress/e2e/LeaderboardView.cy.ts new file mode 100644 index 0000000000000000000000000000000000000000..cf4eb93ae22801101d7beded40ef13f1b5531cf8 --- /dev/null +++ b/cypress/e2e/LeaderboardView.cy.ts @@ -0,0 +1,57 @@ +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.wait(5000) + 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); + }) + + it('redirects to profile-page when clicking user', () => { + cy.get('[data-cy="total-points-board"]') + .find('[data-cy="top-leaderboard-tablerow"]') + .first() + .within(() => { + cy.get('td:nth-child(2)').click(); + }) + cy.wait(1000); + cy.url().should('include', '/profile/15'); + }) + +}) \ No newline at end of file diff --git a/src/components/LeaderboardComponents/Leaderboard.vue b/src/components/LeaderboardComponents/Leaderboard.vue index 4b1006543b6a7526b3d91805e416c499b8fc765c..dd15584596e312a0a686a493c6ee2197d9751724 100644 --- a/src/components/LeaderboardComponents/Leaderboard.vue +++ b/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> diff --git a/src/views/LeaderboardView.vue b/src/views/LeaderboardView.vue index f67a36c231f896006f6aae3dc265e052970f2a7d..4ee1a7f492350983ac7a2d13c202a529da703aa8 100644 --- a/src/views/LeaderboardView.vue +++ b/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>