From 1a11cc331cd907cc2bcad393861e9011d930199c Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Fri, 23 Feb 2024 16:22:55 +0530
Subject: [PATCH] add e2e test cases for account/identity and profile edit
 pages

---
 .../e2e/account/account-identity-page.cy.js   | 166 ++++++++++++++++++
 .../e2e/account/edit_profile-page.cy.js       | 121 +++++++++++++
 jam-ui/cypress/support/commands.js            |   1 +
 jam-ui/src/components/page/JKEditProfile.js   |  14 +-
 jam-ui/src/components/profile/JKEditEmail.js  |   4 +-
 .../src/components/profile/JKEditPassword.js  |   8 +-
 .../profile/JKProfileAvatarUpload.js          |   6 +-
 jam-ui/src/i18n/locales/en/account.json       |   2 +-
 8 files changed, 310 insertions(+), 12 deletions(-)
 create mode 100644 jam-ui/cypress/e2e/account/account-identity-page.cy.js
 create mode 100644 jam-ui/cypress/e2e/account/edit_profile-page.cy.js

diff --git a/jam-ui/cypress/e2e/account/account-identity-page.cy.js b/jam-ui/cypress/e2e/account/account-identity-page.cy.js
new file mode 100644
index 000000000..e3321c8ca
--- /dev/null
+++ b/jam-ui/cypress/e2e/account/account-identity-page.cy.js
@@ -0,0 +1,166 @@
+/// <reference types="cypress" />
+
+import makeFakeUser from '../../factories/user';
+
+describe('Change Current Email/Password Feature', () => {
+  beforeEach(() => {
+    // Log in to the application or navigate to the account page
+    // where the change email feature is available
+    const currentUser = makeFakeUser({
+      email: 'sam@example.com'
+    });
+    cy.stubAuthenticate({ ...currentUser });
+    cy.visit('/account/identity');
+  });
+
+  describe('Email update', () => {
+    it('should display the current email address', () => {
+      // Assert that the current email address is displayed
+      cy.get('[data-testid=edit_email_form]').within($form => {
+        cy.get('input#new_email[placeholder="sam@example.com"]');
+      });
+    });
+
+    it('shows validation error if no data is entered', () => {
+      // Assert that an error message is displayed
+      cy.get('[data-testid=edit_email_form]').within($form => {
+        cy.get('[data-testid=email_submit]').click();
+        cy.contains('Current password is required');
+        cy.contains('New Email is required');
+      });
+    });
+
+    it('shows validation error if new email is invalid', () => {
+      cy.get('[data-testid=edit_email_form]').within($form => {
+        // Enter the current password
+        cy.get('input#current_password').type('password');
+        // Enter an invalid email address in the input field
+        cy.get('input#new_email').type('invalidemail');
+
+        cy.get('[data-testid=email_submit]').click();
+        // Assert that an error message is displayed
+        cy.contains('Email is invalid');
+      });
+    });
+
+    it('reveal password', () => {
+      cy.get('[data-testid=edit_email_form]').within($form => {
+        // Click on the reveal password button
+        cy.get('.input-group-append').click();
+        // Assert that the password is revealed
+        cy.get('input#current_password').should('have.attr', 'type', 'text');
+      });
+    });
+
+    describe('when the user submits the form', () => {
+      beforeEach(() => {
+        cy.intercept('POST', /\S+\/users\S+/, {
+          statusCode: 200
+        }).as('updateEmail');
+      });
+
+      it('should update the email address', () => {
+        cy.get('[data-testid=edit_email_form]').within($form => {
+          // Enter the current password
+          cy.get('input#current_password').type('password');
+          // Enter the new email address
+          cy.get('input#new_email').type('samsam@example.com');
+
+          // Submit the form
+          cy.get('[data-testid=email_submit]').click();
+        });
+
+        // Assert that the email address is updated
+        cy.contains('A confirmation email has been sent to your email address');
+      });
+    });
+  });
+
+  describe('Password update', () => {
+    it('shows validation error if no data is entered', () => {
+      // Assert that an error message is displayed
+      cy.get('[data-testid=edit_password_form]').within($form => {
+        cy.get('[data-testid=password_submit]').click();
+        cy.contains('Current password is required');
+        cy.contains('New password is required');
+      });
+    });
+    
+    it('reveal password', () => {
+      cy.get('[data-testid=edit_password_form]').within($form => {
+        // Click on the reveal password button
+        cy.get('.current-password-reveal').click();
+        // Assert that the password is revealed
+        cy.get('input#current_password').should('have.attr', 'type', 'text');
+
+        // Click on the reveal password button
+        cy.get('.new-password-reveal').click();
+        // Assert that the password is revealed
+        cy.get('input#new_password').should('have.attr', 'type', 'text');
+      });
+    });
+
+    describe('Submit form with errors', () => {
+      beforeEach(() => {
+        cy.intercept('POST', /\S+\/users\S+\/set_password/, {
+          statusCode: 422,
+          body: {
+            errors: {
+              password: ['is too short']
+            }
+          }
+        }).as('updatePassword');
+      });
+
+      it('shows validation error if new password is invalid', () => {
+        cy.get('[data-testid=edit_password_form]').within($form => {
+          // Enter the current password
+          cy.get('input#current_password').type('password');
+          // Enter an invalid new password
+          cy.get('input#new_password').type('short');
+  
+          cy.get('[data-testid=password_submit]').click();
+          // Assert that an error message is displayed
+          cy.contains('New Password is too short');
+        });
+      });
+    });
+    
+    describe('Submit with valid data', () => {
+      beforeEach(() => {
+        cy.intercept('POST', /\S+\/users\S+\/set_password/, {
+          statusCode: 200
+        }).as('updatePassword');
+      });
+
+      it('should update the password', () => {
+        cy.get('[data-testid=edit_password_form]').within($form => {
+          // Enter the current password
+          cy.get('input#current_password').type('password');
+          // Enter the new password
+          cy.get('input#new_password').type('newpassword');
+
+          // Submit the form
+          cy.get('[data-testid=password_submit]').click();
+        });
+
+        // Assert that the password is updated
+        cy.contains('password has been successfully updated');
+      });
+    })
+    
+    describe('Forgot password', () => {
+      beforeEach(() => {
+        cy.intercept('POST', /\S+\/users\S+\/request_reset_password/, {
+          statusCode: 200
+        }).as('forgotPassword');
+      });
+
+      it('sends forgot password email', () => {
+        cy.get('[data-testid=forgot_password]').click();
+        cy.contains('A password reset email has been sent to your email');
+      });
+    })
+    
+  });
+});
diff --git a/jam-ui/cypress/e2e/account/edit_profile-page.cy.js b/jam-ui/cypress/e2e/account/edit_profile-page.cy.js
new file mode 100644
index 000000000..c8b44f09c
--- /dev/null
+++ b/jam-ui/cypress/e2e/account/edit_profile-page.cy.js
@@ -0,0 +1,121 @@
+/// <reference types="cypress" />
+
+import makeFakeUser from '../../factories/user';
+
+describe('Profile update', () => {
+  beforeEach(() => {
+    // Log in to the application or navigate to the account page
+    // where the change email feature is available
+    const currentUser = makeFakeUser();
+    cy.stubAuthenticate({ ...currentUser });
+    cy.intercept('GET', /\S+\/users\/\S+\/profile/, {
+      statusCode: 200,
+      body:  {
+        first_name: 'David',
+        last_name: 'Wilson',
+        name: 'David Wilson',
+        city: 'Barstow',
+        state: 'CA',
+        country: 'US',
+        location: 'Barstow, CA',
+        photo_url: null,
+        biography:
+          'This is the musician biography. It is a long form text.',
+        virtual_band: true,
+        virtual_band_commitment: 2,
+        traditional_band: false,
+        traditional_band_commitment: null,
+        traditional_band_touring: false,
+        paid_sessions: true,
+        paid_sessions_hourly_rate: 19900,
+        paid_sessions_daily_rate: 200000,
+        free_sessions: true,
+        cowriting: true,
+        cowriting_purpose: 2,
+        subscribe_email: true,
+        genres: [
+          {
+            genre_id: 'asian',
+            player_type: 'JamRuby::User',
+            genre_type: 'profile'
+          },
+          {
+            genre_id: 'blues',
+            player_type: 'JamRuby::User',
+            genre_type: 'profile'
+          },
+          {
+            genre_id: 'dance',
+            player_type: 'JamRuby::User',
+            genre_type: 'profile'
+          }
+        ],
+        instruments: [
+          {
+            description: 'Acoustic Guitar',
+            proficiency_level: 3,
+            priority: 0,
+            instrument_id: 'acoustic guitar'
+          },
+          {
+            description: 'Bass Guitar',
+            proficiency_level: 3,
+            priority: 2,
+            instrument_id: 'bass guitar'
+          },
+          {
+            description: 'Violin',
+            proficiency_level: 1,
+            priority: 0,
+            instrument_id: 'violin'
+          },
+          {
+            description: 'Banjo',
+            proficiency_level: 1,
+            priority: 1,
+            instrument_id: 'banjo'
+          }
+        ],
+      }
+    }).as('getProfile');
+
+   
+
+    cy.visit('/profile');
+  });
+
+  it('should render the profile form with persisted data', () => {
+    // Assert that the profile form is rendered
+    cy.get('[data-testid=edit_profile_form]').within($form => {
+      cy.get('[data-testid=firstName]').should('have.value', 'David');
+      cy.get('[data-testid=lastName]').should('have.value', 'Wilson');
+      cy.get("[data-testid=biography]").should('contain', 'This is the musician biography. It is a long form text');
+    
+      cy.get('[data-testid=subscribeEmail]').should('be.checked');
+      cy.get('[data-testid=virtualBand]').should('be.checked');
+      cy.get('[data-testid=traditionalBand]').should('not.be.checked');
+      cy.get('[data-testid=cowriting]').should('be.checked');
+      cy.get('[data-testid=instruments] input:checked').should('have.length', 4);
+      cy.get('[data-testid=genres] input:checked').should('have.length', 3);
+    } );
+  });
+
+  it('should update the profile', () => {
+    // Update the profile form
+
+    cy.get('[data-testid=edit_profile_form]').within($form => {
+      // Update the first name
+      cy.get('[data-testid=firstName]').clear().type('Seth');
+      // Update the last name
+      cy.get('[data-testid=lastName]').clear().type('Call');
+
+      cy.wait(2000); 
+    });
+
+    cy.reload();
+
+    cy.get('[data-testid=firstName]').should('have.value', 'Seth');
+
+  });
+
+});
diff --git a/jam-ui/cypress/support/commands.js b/jam-ui/cypress/support/commands.js
index a9ff6d67c..2cb0626f7 100644
--- a/jam-ui/cypress/support/commands.js
+++ b/jam-ui/cypress/support/commands.js
@@ -31,6 +31,7 @@ Cypress.Commands.add('stubAuthenticate', (attrs = {}) => {
     first_name: 'Peter',
     last_name: 'Pan',
     name: 'Peter Pan',
+    email: 'peter@example.com',
     photo_url: ''
   }
   const currentUserAtrs = {...defaultAttrs, ...attrs}
diff --git a/jam-ui/src/components/page/JKEditProfile.js b/jam-ui/src/components/page/JKEditProfile.js
index d44026110..798f2516d 100644
--- a/jam-ui/src/components/page/JKEditProfile.js
+++ b/jam-ui/src/components/page/JKEditProfile.js
@@ -381,7 +381,7 @@ function JKEditProfile() {
       <Card>
         <FalconCardHeader title={t('page_title', { ns: 'profile' })} titleClass="font-weight-bold" />
         <CardBody className="pt-3" style={{ backgroundColor: '#edf2f9' }}>
-          <Form>
+          <Form data-testid="edit_profile_form">
             <Row>
               <Col>
                 <Card>
@@ -398,6 +398,7 @@ function JKEditProfile() {
                             control={control}
                             render={({ field: { onChange, value } }) => (
                               <Input
+                                data-testid="firstName"
                                 value={value}
                                 onChange={e => {
                                   onChange(e);
@@ -416,6 +417,7 @@ function JKEditProfile() {
                             control={control}
                             render={({ field: { onChange, value } }) => (
                               <Input
+                                data-testid="lastName"
                                 value={value}
                                 onChange={e => {
                                   onChange(e);
@@ -457,6 +459,7 @@ function JKEditProfile() {
                                 const country = countries.find(country => country.countrycode === value);
                                 return (
                                   <Select
+                                    data-testid="countrySelect"
                                     value={{ value: country.countrycode, label: country.countryname }}
                                     onChange={handleCountryChange}
                                     options={countries.map(country => {
@@ -520,6 +523,7 @@ function JKEditProfile() {
                         control={control}
                         render={({ field: { onChange, value } }) => (
                           <Input
+                            data-testid="biography"
                             style={{ height: 200 }}
                             type="textarea"
                             value={value}
@@ -537,6 +541,7 @@ function JKEditProfile() {
                         control={control}
                         render={({ field: { onChange, value } }) => (
                           <Input
+                            data-testid="subscribeEmail"
                             checked={value}
                             type="checkbox"
                             onChange={e => {
@@ -564,6 +569,7 @@ function JKEditProfile() {
                         control={control}
                         render={({ field: { onChange, value } }) => (
                           <Input
+                            data-testid="virtualBand"
                             checked={value}
                             onChange={e => {
                               onChange(e);
@@ -583,6 +589,7 @@ function JKEditProfile() {
                         control={control}
                         render={({ field: { onChange, value } }) => (
                           <Input
+                            data-testid="traditionalBand"
                             checked={value}
                             onChange={e => {
                               onChange(e);
@@ -602,6 +609,7 @@ function JKEditProfile() {
                         control={control}
                         render={({ field: { onChange, value } }) => (
                           <Input
+                            data-testid="cowriting"
                             checked={value}
                             onChange={e => {
                               onChange(e);
@@ -623,7 +631,7 @@ function JKEditProfile() {
                   <CardHeader>
                     <h5>{t('instruments')}</h5>
                   </CardHeader>
-                  <CardBody className="bg-light" style={{ overflowY: 'scroll', height: 300 }}>
+                  <CardBody data-testid="instruments" className="bg-light" style={{ overflowY: 'scroll', height: 300 }}>
                     <FormGroup check>
                       {instrumentsInitialLoadingDone &&
                         musicInstruments.map((musicInstrument, index) => {
@@ -666,7 +674,7 @@ function JKEditProfile() {
                   <CardHeader>
                     <h5>{t('genres')}</h5>
                   </CardHeader>
-                  <CardBody className="bg-light" style={{ overflowY: 'scroll', height: 300 }}>
+                  <CardBody data-testid="genres" className="bg-light" style={{ overflowY: 'scroll', height: 300 }}>
                     <FormGroup check>
                       {genreInitialLoadingDone &&
                         genres.map((genre, index) => {
diff --git a/jam-ui/src/components/profile/JKEditEmail.js b/jam-ui/src/components/profile/JKEditEmail.js
index 3338c3101..b90c941ef 100644
--- a/jam-ui/src/components/profile/JKEditEmail.js
+++ b/jam-ui/src/components/profile/JKEditEmail.js
@@ -93,7 +93,7 @@ const JKEditEmail = ({setAlert, toggleAlert}) => {
           {t('identity.email_form.help_text')}
         </small>
 
-        <Form className="mt-2" onSubmit={handleSubmit(onSubmitEmail)}>
+        <Form novalidate="novalidate" className="mt-2" onSubmit={handleSubmit(onSubmitEmail)} data-testid="edit_email_form">
           <FormGroup>
             <Label for="current_password">{t('identity.email_form.current_password')}</Label>
             <Controller
@@ -149,7 +149,7 @@ const JKEditEmail = ({setAlert, toggleAlert}) => {
             {errors.new_email && <div className="text-danger"><small>{errors.new_email.message}</small></div>}
           </FormGroup>
           <div className='d-flex align-content-center justify-content-start'>
-            <input type="submit" className="btn btn-primary" value={t('identity.email_form.submit')} disabled={submitting} />
+            <input type="submit" formnovalidate className="btn btn-primary" value={t('identity.email_form.submit')} disabled={submitting} data-testid="email_submit" />
             <span className='ml-2'>
               { submitting && <FontAwesomeIcon icon="spinner" />}
             </span>
diff --git a/jam-ui/src/components/profile/JKEditPassword.js b/jam-ui/src/components/profile/JKEditPassword.js
index 0faec81cf..c2f94307e 100644
--- a/jam-ui/src/components/profile/JKEditPassword.js
+++ b/jam-ui/src/components/profile/JKEditPassword.js
@@ -98,7 +98,7 @@ const JKEditPassword = ({ setAlert, toggleAlert }) => {
           {t('identity.password_form.help_text')}
         </small>
 
-        <Form className="mt-2" onSubmit={handleSubmit(onSubmitPassword)}>
+        <Form className="mt-2" onSubmit={handleSubmit(onSubmitPassword)} data-testid="edit_password_form">
           <FormGroup>
             <Label for="current_password"> {t('identity.password_form.current_password')}</Label>
             <Controller
@@ -116,6 +116,7 @@ const JKEditPassword = ({ setAlert, toggleAlert }) => {
                   />
                   <InputGroupAddon
                     addonType="append"
+                    className="current-password-reveal"
                     onClick={() => {
                       setShowPassword(!showPassword);
                     }}
@@ -151,6 +152,7 @@ const JKEditPassword = ({ setAlert, toggleAlert }) => {
                   />
                   <InputGroupAddon
                     addonType="append"
+                    className='new-password-reveal'
                     onClick={() => {
                       setShowNewPassword(!showNewPassword);
                     }}
@@ -169,13 +171,13 @@ const JKEditPassword = ({ setAlert, toggleAlert }) => {
             )}
           </FormGroup>
           <div className="d-flex align-content-center justify-content-start">
-            <input type="submit" className="btn btn-primary" value={t('identity.password_form.submit')} disabled={submitting} />
+            <input type="submit" className="btn btn-primary" value={t('identity.password_form.submit')} disabled={submitting} data-testid="password_submit" />
             <span className="ml-2">{submitting && <FontAwesomeIcon icon="spinner" />}</span>
           </div>
         </Form>
         <div className="mt-2">
           <small>
-            {t('identity.password_form.forgot_password.help_text_p1')} <a href="#" onClick={requestResetPassword}>{t('identity.password_form.forgot_password.click_here')}</a> {t('identity.password_form.forgot_password.help_text_p2')}
+            {t('identity.password_form.forgot_password.help_text_p1')} <a href="#" data-testid="forgot_password" onClick={requestResetPassword}>{t('identity.password_form.forgot_password.click_here')}</a> {t('identity.password_form.forgot_password.help_text_p2')}
           </small>
         </div>
       </CardBody>
diff --git a/jam-ui/src/components/profile/JKProfileAvatarUpload.js b/jam-ui/src/components/profile/JKProfileAvatarUpload.js
index 650e934d9..c1cc2bc3e 100644
--- a/jam-ui/src/components/profile/JKProfileAvatarUpload.js
+++ b/jam-ui/src/components/profile/JKProfileAvatarUpload.js
@@ -14,9 +14,9 @@ const JKProfileAvatarUpload = ({show, toggle}) => {
   useEffect(() => {
     if(currentUser) {
       console.log(currentUser.photo_url);
-      getUserDetails(currentUser.id).then(response => {
-        console.log('_userDetails', response);
-      });
+      // getUserDetails(currentUser.id).then(response => {
+      //   console.log('_userDetails', response);
+      // });
     }
   }, [currentUser]);
 
diff --git a/jam-ui/src/i18n/locales/en/account.json b/jam-ui/src/i18n/locales/en/account.json
index 99ce0c134..a3791c522 100644
--- a/jam-ui/src/i18n/locales/en/account.json
+++ b/jam-ui/src/i18n/locales/en/account.json
@@ -35,7 +35,7 @@
       "submit": "Save Password",
       "validations": {
         "new_password": {
-          "required": "New Password is required",
+          "required": "New password is required",
           "pattern": "Password must be at least 8 characters long"
         },
         "current_password": {