From 6283f12953392f0f5621bef18a2ba25c758431da Mon Sep 17 00:00:00 2001
From: VIktorGrev <viktog2210@gmail.com>
Date: Wed, 1 May 2024 11:41:13 +0200
Subject: [PATCH] test: Testing UserFriends
---
cypress/e2e/User/UserFriendsView.cy.ts | 44 +++++++++++++++++++
cypress/e2e/User/UserProfileView.cy.ts | 23 ++++++++++
.../UserProfile/UserProfileLayout.vue | 8 ++--
src/views/User/UserFriendsView.vue | 11 ++---
4 files changed, 77 insertions(+), 9 deletions(-)
create mode 100644 cypress/e2e/User/UserFriendsView.cy.ts
create mode 100644 cypress/e2e/User/UserProfileView.cy.ts
diff --git a/cypress/e2e/User/UserFriendsView.cy.ts b/cypress/e2e/User/UserFriendsView.cy.ts
new file mode 100644
index 0000000..2e8eec5
--- /dev/null
+++ b/cypress/e2e/User/UserFriendsView.cy.ts
@@ -0,0 +1,44 @@
+describe('Friend Management View', () => {
+ 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('/friends')
+ });
+
+ it('should display friend management UI elements', () => {
+ cy.contains('Dine venner')
+ cy.get('.container').within(() => {
+ cy.contains('+ Legg til venn')
+ })
+ })
+
+ it('should navigate between friend management sections', () => {
+ cy.wait(1000);
+ cy.get('[data-cy="navigateToFriend"]').first().click();
+ cy.wait(1000);
+ cy.url().should('include', '/profile');
+
+ })
+
+ it('should search and add friends', () => {
+ cy.contains('+ Legg til venn').click()
+ cy.get('.modal-title').should('contain', 'Legg til venn')
+ cy.get('input[type="search"]').type('TestUser1')
+ cy.contains('Søk').click()
+ cy.wait(1000);
+ cy.get('.people-nearby').within(() => {
+ cy.contains('TestUser1')
+ })
+ })
+
+ it('should display no friend requests when there is no friend requests', () => {
+ cy.contains('Venneforespørsler').click()
+ cy.get('.container').within(() => {
+ cy.contains('Ingen venneforespørsler')
+ })
+ })
+ })
+
\ No newline at end of file
diff --git a/cypress/e2e/User/UserProfileView.cy.ts b/cypress/e2e/User/UserProfileView.cy.ts
new file mode 100644
index 0000000..f29ecab
--- /dev/null
+++ b/cypress/e2e/User/UserProfileView.cy.ts
@@ -0,0 +1,23 @@
+describe('User Profile Page', () => {
+ 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('/profile')
+ });
+
+ it('displays user information', () => {
+ cy.get('[data-cy="firstname"]').should('contain.text', 'MrSlave');
+ cy.get('[data-cy="firstname"]').should('contain.text', 'Swift');
+ cy.get('[data-cy="points"]').should('contain.text', '253');
+ cy.get('[data-cy="streak"]').should('contain.text', '1026');
+ });
+
+ it('navigates to update user settings', () => {
+ cy.get('[data-cy="toUpdate"]').click();
+ cy.url().should('include', '/settings/profile');
+ });
+ });
+
\ No newline at end of file
diff --git a/src/components/UserProfile/UserProfileLayout.vue b/src/components/UserProfile/UserProfileLayout.vue
index e0371f2..5490502 100644
--- a/src/components/UserProfile/UserProfileLayout.vue
+++ b/src/components/UserProfile/UserProfileLayout.vue
@@ -50,23 +50,23 @@ const toUpdateUserSettings = () => {
<div class="ms-4 mt-5 d-flex flex-column" style="width: 150px;">
<img :src="imageUrl" alt="Generic placeholder image"
class="img-fluid img-thumbnail mt-4 mb-2" style="width: 150px; z-index: 1">
- <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary"
+ <button data-cy="toUpdate" type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary"
data-mdb-ripple-color="dark" style="z-index: 1;" id="toUpdate" @click="toUpdateUserSettings">
Edit profile
</button>
</div>
<div class="ms-3" style="margin-top: 130px;">
- <h1>{{ firstname }} {{ lastname }}</h1>
+ <h1 data-cy="firstname">{{ firstname }} {{ lastname }}</h1>
</div>
</div>
<div class="p-4 text-black" style="background-color: #f8f9fa;">
<div class="d-flex justify-content-end text-center py-1">
<div>
- <p class="mb-1 h2">253 <img src="@/assets/items/pigcoin.png" style="width: 4rem"></p>
+ <p class="mb-1 h2" data-cy="points">253 <img src="@/assets/items/pigcoin.png" style="width: 4rem"></p>
<p class="small text-muted mb-0">Points</p>
</div>
<div class="px-3">
- <p class="mb-1 h2">1026 <img src="@/assets/icons/fire.png" style="width: 4rem"></p>
+ <p class="mb-1 h2" data-cy="streak">1026 <img src="@/assets/icons/fire.png" style="width: 4rem"></p>
<p class="small text-muted mb-0">Streak</p>
</div>
</div>
diff --git a/src/views/User/UserFriendsView.vue b/src/views/User/UserFriendsView.vue
index 93bec23..25c115a 100644
--- a/src/views/User/UserFriendsView.vue
+++ b/src/views/User/UserFriendsView.vue
@@ -21,9 +21,9 @@
<img :src="'../src/assets/userprofile.png'" alt="">
</div>
</div>
- <h3><a href="#" class="btn stretched-link" id="profileName"
- @click="navigateToFriend(friend.id)">{{
- friend.firstName }}</a></h3>
+ <h3><router-link to="" data-cy="navigateToFriend" href="#" class="btn stretched-link"
+ id="profileName" @click="navigateToFriend(friend.id)">{{
+ friend.firstName }}</router-link></h3>
<div class="desc">{{ friend.firstName }} {{ friend.lastName }}</div>
<div class="contacts">
<a class="text removeFriend" data-bs-toggle="collapse"
@@ -91,11 +91,12 @@
</div>
<div class="col-md-7 col-sm-7">
<h5><a href="#" class="profile-link" @click="toUserProfile(user.id)">{{
- user.firstName }}</a>
+ user.firstName }}</a>
</h5>
</div>
<div class="col-md-3 col-sm-3">
- <button class="btn btn-primary pull-right" @click="addFriend(user.id)">Legg til venn</button>
+ <button class="btn btn-primary pull-right" @click="addFriend(user.id)">Legg
+ til venn</button>
</div>
</div>
</div>
--
GitLab