Merge branch 'test/e2e' into 'main'

Test/e2e

See merge request !70

cypress/e2e/NotFoundView.cy.ts

+describe('NotFound 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('/')
+  })
+  it('redirects user when page is not found, then go home', () => {
+    cy.visit('/non-existent-page')
+    cy.get('[data-cy="404-error"]').should('exist')
+    cy.get('[data-cy="to-home"]').click()
+    cy.url().should('include', '/')
+  })
+
+})
\ No newline at end of file

cypress/e2e/Settings/SettingsAccountView.cy.ts

+describe('SettingsAccount 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('/settings/account')
+    cy.wait(1000)
+  });
+
+  it('updates email of user', () => {
+    cy.get('[data-cy="email-input"]').find('[data-cy="bi-input"]')
+    .should('have.value','user@example.com')
+    cy.get('[data-cy="email-input"]').find('[data-cy="bi-input"]').clear()
+    cy.get('[data-cy="email-input"]').find('[data-cy="bi-input"]').type('NewEmailforUser@NewExample.com')
+    cy.get('[data-cy="change-email-btn"]').click()
+    cy.wait(1000)
+    cy.get('[data-cy="change-email-msg-confirm"]').should('include.text', 'Email updated successfully!')
+
+    cy.get('[data-cy="menu"]').get('[data-cy="user"]').click();
+    cy.get('[data-testid="logout"]').click();
+
+    cy.get('#emailInput input').type('NewEmailforUser@NewExample.com');
+    cy.get('#passwordInput input').type('John1');
+    cy.get('form').submit();
+    cy.wait(1000);
+    cy.visit('/settings/account')
+    cy.wait(1000)
+
+    cy.get('[data-cy="email-input"]').find('[data-cy="bi-input"]').clear()
+    cy.get('[data-cy="email-input"]').find('[data-cy="bi-input"]').type('user@example.com')
+    cy.get('[data-cy="change-email-btn"]').click()
+  })
+})
\ No newline at end of file

cypress/e2e/Settings/SettingsBankView.cy.ts

+describe('SettingsBank 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('/settings/bank')
+    cy.wait(1000)
+  });
+
+  it('updates spendings account of user', () => {
+    cy.get('[data-cy="spending-account-input"]').find('[data-cy="bi-input"]').clear()
+    cy.get('[data-cy="spending-account-input"]').find('[data-cy="bi-input"]').type('12073650567');
+    cy.get('[data-cy="update-spending-btn"]').click()
+  })
+
+  it('updates savings account of user', () => {
+    cy.get('[data-cy="savings-account-input"]').find('[data-cy="bi-input"]').clear()
+    cy.get('[data-cy="savings-account-input"]').find('[data-cy="bi-input"]').type('12061174077');
+    cy.get('[data-cy="update-savings-btn"]').click()
+  })
+
+
+})
\ No newline at end of file

cypress/e2e/Settings/SettingsProfileView.cy.ts

+describe('SettingsProfile 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('/settings/profile')
+    cy.wait(1000)
+  });
+
+  it('updates first and last name', () => {
+    cy.get('[data-cy="first-name"]').find('[data-cy="bi-input"]').should('have.value','User')
+    cy.get('[data-cy="last-name"]').find('[data-cy="bi-input"]').should( 'have.value','User')
+    cy.get('[data-cy="first-name"]').find('[data-cy="bi-input"]').clear()
+    cy.get('[data-cy="first-name"]').find('[data-cy="bi-input"]').type('NewFirstName')
+    cy.get('[data-cy="last-name"]').find('[data-cy="bi-input"]').clear()
+    cy.get('[data-cy="last-name"]').find('[data-cy="bi-input"]').type('NewLastName')
+
+    cy.get('[data-cy="profile-submit-btn"]').click()
+    cy.get('[data-cy="menu"]').get('[data-cy="user"]').should('include.text', 'NewFirstName')
+    //update the user back to its original state
+    cy.get('[data-cy="first-name"]').find('[data-cy="bi-input"]').clear()
+    cy.get('[data-cy="first-name"]').find('[data-cy="bi-input"]').type('User')
+    cy.get('[data-cy="last-name"]').find('[data-cy="bi-input"]').clear()
+    cy.get('[data-cy="last-name"]').find('[data-cy="bi-input"]').type('User')
+    cy.get('[data-cy="profile-submit-btn"]').click()
+  })
+})
\ No newline at end of file

cypress/e2e/Settings/SettingsSecurityView.cy.ts

+describe('SettingsSecurity 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('/settings/security')
+    cy.wait(1000)
+  });
+
+  it('updates password of user', () => {
+    cy.get('[data-cy="old-password-input"]').find('[data-cy="bi-input"]').clear()
+    cy.get('[data-cy="old-password-input"]').find('[data-cy="bi-input"]').type('John1')
+
+    cy.get('[data-cy="new-password-input"]').find('[data-cy="bi-input"]').clear()
+    cy.get('[data-cy="new-password-input"]').find('[data-cy="bi-input"]').type('NewJohn1Password')
+
+    cy.get('[data-cy="confirm-password-input"]').find('[data-cy="bi-input"]').clear()
+    cy.get('[data-cy="confirm-password-input"]').find('[data-cy="bi-input"]').type('NewJohn1Password')
+    cy.get('[data-cy="update-password-btn"]').click()
+
+    cy.get('[data-cy="menu"]').get('[data-cy="user"]').click();
+    cy.get('[data-testid="logout"]').click();
+
+    // reset all changes made to the user
+    cy.get('#emailInput input').type('user@example.com');
+    cy.get('#passwordInput input').type('NewJohn1Password');
+    cy.get('form').submit();
+    cy.wait(1000);
+    cy.visit('/settings/security')
+    cy.wait(1000)
+
+    cy.get('[data-cy="old-password-input"]').find('[data-cy="bi-input"]').clear()
+    cy.get('[data-cy="old-password-input"]').find('[data-cy="bi-input"]').type('NewJohn1Password')
+
+    cy.get('[data-cy="new-password-input"]').find('[data-cy="bi-input"]').clear()
+    cy.get('[data-cy="new-password-input"]').find('[data-cy="bi-input"]').type('John1')
+
+    cy.get('[data-cy="confirm-password-input"]').find('[data-cy="bi-input"]').clear()
+    cy.get('[data-cy="confirm-password-input"]').find('[data-cy="bi-input"]').type('John1')
+    cy.get('[data-cy="update-password-btn"]').click()
+
+
+  })
+})
\ No newline at end of file

cypress/e2e/User/UserFriendsView.cy.ts

+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

cypress/e2e/User/UserProfileView.cy.ts

+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

cypress/e2e/example.cy.ts

-// https://on.cypress.io/api
-
-describe('My First Test', () => {
-  it('visits the app root url', () => {
-    cy.visit('/')
-    cy.contains('h1', 'You did it!')
-  })
-})

cypress/fixtures/example.json

-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

src/components/InputFields/BaseInput.vue

@@ -53,7 +53,7 @@ const onInputEvent = (event: any) => {
 
 <template>
   <div>
-    <label :for="inputId">{{ label }}</label>
+    <label :for="inputId" data-cy="bi-label">{{ label }}</label>
     <input :value="modelValue"
            @input="onInputEvent"
            :type="type"
@@ -63,9 +63,10 @@ const onInputEvent = (event: any) => {
            :min="min"
            :pattern="pattern"
            :required="required"
+           data-cy="bi-input"
     />
-    <div class="valid-feedback">{{ validMessage }}</div>
-    <div class="invalid-feedback" id="invalid">{{ invalidMessage }}</div>
+    <div data-cy="bi-valid-msg" class="valid-feedback">{{ validMessage }}</div>
+    <div data-cy="bi-invalid-msg" class="invalid-feedback" id="invalid">{{ invalidMessage }}</div>
   </div>
 </template>
 

src/components/UserProfile/UserProfileLayout.vue

@@ -66,25 +66,27 @@ const toUpdateUserSettings = () => {
         <div class="card">
           <div class="rounded-top text-white d-flex flex-row bg-primary" style="height:200px;">
             <div class="ms-4 mt-5 d-flex flex-column" style="width: 150px;">
+
               <img :src="imageUrl" alt="Generisk plassholderbilde" 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">
                 Rediger profil
               </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">Poeng</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>

src/views/NotFoundView.vue

@@ -5,13 +5,13 @@
                 <div class="error-template text-center">
                     <h1>
                         Oi!</h1>
-                    <h2>
+                    <h2 data-cy="404-error">
                         404 Ikke funnet</h2>
                     <div class="error-details">
                         Beklager, det har oppstått en feil. Forespurt side ikke funnet!
                     </div>
                     <div class="error-actions">
-                        <Button1 button-text="Ta meg hjem" @click="home" />
+                        <Button1 data-cy="to-home" button-text="Ta meg hjem" @click="home" />
                     </div>
                 </div>
             </div>

src/views/Settings/SettingsAccountView.vue

@@ -55,14 +55,16 @@ onMounted(() => {
       <hr>
       <form  @submit.prevent="handleSubmit">
           <div class="form-group">
-              <BaseInput :model-value="emailRef" @input-change-event="handleEmailInputEvent" id="emailInput-change"
+              <BaseInput data-cy="email-input" :model-value="emailRef"
+                         @input-change-event="handleEmailInputEvent" id="emailInput-change"
                   input-id="email-new" type="email" label="E-post" placeholder="Skriv inn din e-post"
                   invalid-message="Ugyldig e-post"/>
           </div>
-          <p class="text-danger">{{ errorMsg }}</p>
-          <p class="text-success">{{ confirmationMsg }}</p>
+          <p data-cy="change-email-msg-error" class="text-danger">{{ errorMsg }}</p>
+          <p data-cy="change-email-msg-confirm" class="text-success">{{ confirmationMsg }}</p>
           <br>
-          <button type="submit" class="btn btn-primary">Endre Informasjon</button>
+          <button data-cy="change-email-btn" type="submit" class="btn btn-primary">Endre
+            Informasjon</button>
           <hr>
           <div class="form-group">
               <label class="d-block text-danger">Slett Bruker</label>

src/views/Settings/SettingsBankView.vue

@@ -4,22 +4,26 @@
         <hr>
         <form @submit.prevent="handleSpendingSubmit">
             <div class="form-group">
-                <BaseInput :model-value="spendingAccount" @input-change-event="handleSpendingInputEvent" id="firstNameInputChange" input-id="first-name-new"
+                <BaseInput data-cy="spending-account-input" :model-value="spendingAccount"
+                            @input-change-event="handleSpendingInputEvent" id="firstNameInputChange" input-id="first-name-new"
                     type="Number" label="Brukskonto" placeholder="Skriv inn din brukskonto"
                     invalid-message="Vennligst skriv inn din brukskonto" />
             </div>
             <br>
-            <button type="submit" class="btn btn-primary">Oppdater brukskonto</button>
+            <button data-cy="update-spending-btn" type="submit" class="btn btn-primary">Oppdater
+              brukskonto</button>
         </form>
         <br>
         <form @submit.prevent="handleSavingSubmit">
             <div class="form-group">
-                <BaseInput :model-value="savingsAccount" @input-change-event="handleSavingInputEvent" id="firstNameInputChange" input-id="first-name-new" type="Number"
+                <BaseInput data-cy="savings-account-input" :model-value="savingsAccount"
+                           @input-change-event="handleSavingInputEvent" id="firstNameInputChange" input-id="first-name-new" type="Number"
                     label="Sparekonto" placeholder="Skriv inn din sparekonto"
                     invalid-message="Vennligst skriv inn din sparekonto" />
             </div>
             <br>
-            <button type="submit" class="btn btn-primary">Oppdater sparekonto</button>
+            <button data-cy="update-savings-btn" type="submit" class="btn btn-primary">Oppdater
+              sparekonto</button>
         </form>
         <hr>
         <div class="form-group mb-0">

src/views/Settings/SettingsProfileView.vue

@@ -114,18 +114,23 @@ onMounted(() => {
         </div>
       </div>
       <div class="form-group">
-        <BaseInput :model-value="firstNameRef" @input-change-event="handleFirstNameInputEvent" id="firstNameInputChange"
-          input-id="first-name-new" type="text" label="Fornavn" placeholder="Skriv inn ditt fornavn"
-          invalid-message="Vennligst skriv inn ditt fornavn" />
+        <BaseInput data-cy="first-name" :model-value="firstNameRef"
+                   @input-change-event="handleFirstNameInputEvent" id="firstNameInputChange"
+                   input-id="first-name-new" type="text" label="Fornavn" placeholder="Skriv inn ditt fornavn"
+                   invalid-message="Vennligst skriv inn ditt fornavn" />
       </div>
       <br>
       <div class="form-group">
-        <BaseInput :model-value="surnameRef" @input-change-event="handleSurnameInputEvent" id="surnameInput-change"
-          input-id="surname-new" type="text" label="Etternavn" placeholder="Skriv inn ditt etternavn"
-          invalid-message="Vennligst skriv inn ditt etternavn" />
+        <BaseInput data-cy="last-name" :model-value="surnameRef"
+                   @input-change-event="handleSurnameInputEvent"
+                    id="surnameInput-change"
+                   input-id="surname-new" type="text" label="Etternavn"
+                   placeholder="Skriv inn ditt etternavn"
+                   invalid-message="Vennligst skriv inn ditt etternavn" />
       </div>
       <br>
-      <button type="submit" class="btn btn-primary">Oppdater profil</button>
+      <button data-cy="profile-submit-btn" type="submit" class="btn btn-primary">Oppdater
+        profil</button>
     </form>
   </div>
 </template>

src/views/Settings/SettingsSecurityView.vue

@@ -5,23 +5,28 @@
         <form @submit.prevent="handleSubmit" novalidate>
             <div class="form-group">
                 <label class="d-block">Endre passord</label>
-                <BaseInput :model-value="oldPasswordRef" @input-change-event="handleOldPasswordInputEvent"
+                <BaseInput data-cy="old-password-input" :model-value="oldPasswordRef"
+                            @input-change-event="handleOldPasswordInputEvent"
                     id="passwordInput-change" input-id="password-old" type="password"
                     pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}" label="Gammelt passord" placeholder="Skriv inn passord"
                     invalid-message="Passordet må være mellom 4 og 16 tegn og inneholde en stor bokstav, en liten bokstav og et tall" />
 
-                <BaseInput :model-value="newPasswordRef" @input-change-event="handleNewPasswordInputEvent"
+                <BaseInput data-cy="new-password-input" :model-value="newPasswordRef"
+                            @input-change-event="handleNewPasswordInputEvent"
                     id="passwordInput-change" input-id="password-new" type="password"
                     pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}" label="Nytt passord" placeholder="Skriv inn passord"
                     invalid-message="Passordet må være mellom 4 og 16 tegn og inneholde en stor bokstav, en liten bokstav og et tall" />
 
-                <BaseInput :model-value="confirmPasswordRef" @input-change-event="handleConfirmPasswordInputEvent"
+                <BaseInput data-cy="confirm-password-input" :model-value="confirmPasswordRef"
+                            @input-change-event="handleConfirmPasswordInputEvent"
                     id="passwordInput-change" input-id="password-confirm" type="password"
                     pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}" label="Bekreft nytt passord" placeholder="Skriv inn passord"
                     invalid-message="Passordet må være mellom 4 og 16 tegn og inneholde en stor bokstav, en liten bokstav og et tall" />
             </div>
-            <button type="submit" class="btn btn-primary">Oppdater passord</button>
-            <button type="reset" class="btn btn-light">Tilbakestill endringer</button>
+            <button data-cy="update-password-btn" type="submit" class="btn btn-primary">Oppdater
+              passord</button>
+            <button data-cy="reset-fields-btn" type="reset" class="btn btn-light">Tilbakestill
+              endringer</button>
         </form>
         <hr>
     </div>

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>