From ce0d0902b3fb8b6b3bdde1a91fbb47bcf21b888c Mon Sep 17 00:00:00 2001
From: eemaanamir <eemaan.amir@gmail.com>
Date: Sun, 3 Nov 2024 23:05:01 +0500
Subject: [PATCH] test: added tests for reducers

---
 src/profile-v2/Certificates.jsx               |  11 +-
 src/profile-v2/ProfilePage.jsx                |  10 +-
 .../__snapshots__/ProfilePage.test.jsx.snap   |  32 ++--
 src/profile-v2/data/reducers.test.js          | 140 ++++++++++++++++++
 src/profile-v2/index.scss                     |   2 +-
 5 files changed, 177 insertions(+), 18 deletions(-)
 create mode 100644 src/profile-v2/data/reducers.test.js

diff --git a/src/profile-v2/Certificates.jsx b/src/profile-v2/Certificates.jsx
index 1813f7160..eabf6421d 100644
--- a/src/profile-v2/Certificates.jsx
+++ b/src/profile-v2/Certificates.jsx
@@ -23,7 +23,7 @@ const Certificates = ({
   const intl = useIntl();
 
   const renderCertificate = useCallback(({
-    certificateType, courseDisplayName, courseOrganization, modifiedDate, downloadUrl, courseId,
+    certificateType, courseDisplayName, courseOrganization, modifiedDate, downloadUrl, courseId, uuid,
   }) => {
     const certificateIllustration = (() => {
       switch (certificateType) {
@@ -86,6 +86,15 @@ const Certificates = ({
                 {intl.formatMessage(messages['profile.certificates.view.certificate'])}
               </Hyperlink>
             </div>
+            <p className="small mb-0 pt-3">
+              <FormattedMessage
+                id="profile.certificate.uuid"
+                defaultMessage="Credential ID {certificate_uuid}"
+                values={{
+                  certificate_uuid: uuid,
+                }}
+              />
+            </p>
           </div>
         </div>
       </div>
diff --git a/src/profile-v2/ProfilePage.jsx b/src/profile-v2/ProfilePage.jsx
index 9ca9083d3..4033c1266 100644
--- a/src/profile-v2/ProfilePage.jsx
+++ b/src/profile-v2/ProfilePage.jsx
@@ -77,7 +77,7 @@ const ProfilePage = ({ params, intl }) => {
     }
 
     return (
-      <Hyperlink className="btn btn-brand btn-rounded font-weight-normal" target="_blank" showLaunchIcon={false} destination={viewMyRecordsUrl}>
+      <Hyperlink className="btn btn-brand btn-rounded font-weight-normal px-4 py-0625rem text-nowrap" target="_blank" showLaunchIcon={false} destination={viewMyRecordsUrl}>
         {intl.formatMessage(messages['profile.viewMyRecords'])}
       </Hyperlink>
     );
@@ -107,11 +107,11 @@ const ProfilePage = ({ params, intl }) => {
     return (
       <>
         <div className="profile-page-bg-banner bg-primary d-md-block align-items-center px-75rem py-4rem h-100 w-100">
-          <div className="col container-fluid w-100 h-100 bg-white py-0 pl-25rem pr-0 rounded-75">
+          <div className="col container-fluid w-100 h-100 bg-white py-0 pl-25rem pr-25rem rounded-75">
             <div className="col h-100 w-100 py-4 px-0 justify-content-start g-15rem">
-              <div className="row-auto d-flex align-items-center h-100 w-100 justify-content-start g-15rem">
+              <div className="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem">
                 <ProfileAvatar
-                  className=""
+                  className="col p-0"
                   src={profileImage.src}
                   isDefault={profileImage.isDefault}
                   onSave={handleSaveProfilePhoto}
@@ -129,7 +129,7 @@ const ProfilePage = ({ params, intl }) => {
                     <CertificateCount count={courseCertificates.length} />
                   </div>
                 </div>
-                <div className="pr-25rem">
+                <div className="col-auto p-0">
                   {renderViewMyRecordsButton()}
                 </div>
               </div>
diff --git a/src/profile-v2/__snapshots__/ProfilePage.test.jsx.snap b/src/profile-v2/__snapshots__/ProfilePage.test.jsx.snap
index 2796a6200..c289482b4 100644
--- a/src/profile-v2/__snapshots__/ProfilePage.test.jsx.snap
+++ b/src/profile-v2/__snapshots__/ProfilePage.test.jsx.snap
@@ -35,13 +35,13 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
       class="profile-page-bg-banner bg-primary d-md-block align-items-center px-75rem py-4rem h-100 w-100"
     >
       <div
-        class="col container-fluid w-100 h-100 bg-white py-0 pl-25rem pr-0 rounded-75"
+        class="col container-fluid w-100 h-100 bg-white py-0 pl-25rem pr-25rem rounded-75"
       >
         <div
           class="col h-100 w-100 py-4 px-0 justify-content-start g-15rem"
         >
           <div
-            class="row-auto d-flex align-items-center h-100 w-100 justify-content-start g-15rem"
+            class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem"
           >
             <div
               class="profile-avatar-wrap position-relative"
@@ -100,10 +100,10 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
               </div>
             </div>
             <div
-              class="pr-25rem"
+              class="col-auto p-0"
             >
               <a
-                class="pgn__hyperlink default-link standalone-link btn btn-brand btn-rounded font-weight-normal"
+                class="pgn__hyperlink default-link standalone-link btn btn-brand btn-rounded font-weight-normal px-4 py-0625rem text-nowrap"
                 href="http://localhost:18150/records"
                 rel="noopener noreferrer"
                 target="_blank"
@@ -169,13 +169,13 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
       class="profile-page-bg-banner bg-primary d-md-block align-items-center px-75rem py-4rem h-100 w-100"
     >
       <div
-        class="col container-fluid w-100 h-100 bg-white py-0 pl-25rem pr-0 rounded-75"
+        class="col container-fluid w-100 h-100 bg-white py-0 pl-25rem pr-25rem rounded-75"
       >
         <div
           class="col h-100 w-100 py-4 px-0 justify-content-start g-15rem"
         >
           <div
-            class="row-auto d-flex align-items-center h-100 w-100 justify-content-start g-15rem"
+            class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem"
           >
             <div
               class="profile-avatar-wrap position-relative"
@@ -263,10 +263,10 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               </div>
             </div>
             <div
-              class="pr-25rem"
+              class="col-auto p-0"
             >
               <a
-                class="pgn__hyperlink default-link standalone-link btn btn-brand btn-rounded font-weight-normal"
+                class="pgn__hyperlink default-link standalone-link btn btn-brand btn-rounded font-weight-normal px-4 py-0625rem text-nowrap"
                 href="http://localhost:18150/records"
                 rel="noopener noreferrer"
                 target="_blank"
@@ -371,6 +371,11 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                       View Certificate
                     </a>
                   </div>
+                  <p
+                    class="small mb-0 pt-3"
+                  >
+                    Credential ID 
+                  </p>
                 </div>
               </div>
             </div>
@@ -391,13 +396,13 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
       class="profile-page-bg-banner bg-primary d-md-block align-items-center px-75rem py-4rem h-100 w-100"
     >
       <div
-        class="col container-fluid w-100 h-100 bg-white py-0 pl-25rem pr-0 rounded-75"
+        class="col container-fluid w-100 h-100 bg-white py-0 pl-25rem pr-25rem rounded-75"
       >
         <div
           class="col h-100 w-100 py-4 px-0 justify-content-start g-15rem"
         >
           <div
-            class="row-auto d-flex align-items-center h-100 w-100 justify-content-start g-15rem"
+            class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem"
           >
             <div
               class="profile-avatar-wrap position-relative"
@@ -485,7 +490,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
               </div>
             </div>
             <div
-              class="pr-25rem"
+              class="col-auto p-0"
             />
           </div>
           <div
@@ -584,6 +589,11 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                       View Certificate
                     </a>
                   </div>
+                  <p
+                    class="small mb-0 pt-3"
+                  >
+                    Credential ID 
+                  </p>
                 </div>
               </div>
             </div>
diff --git a/src/profile-v2/data/reducers.test.js b/src/profile-v2/data/reducers.test.js
new file mode 100644
index 000000000..49d5a1060
--- /dev/null
+++ b/src/profile-v2/data/reducers.test.js
@@ -0,0 +1,140 @@
+import profilePage, { initialState } from './reducers';
+import {
+  SAVE_PROFILE_PHOTO,
+  DELETE_PROFILE_PHOTO,
+  FETCH_PROFILE,
+} from './actions';
+
+describe('profilePage reducer', () => {
+  it('should return the initial state by default', () => {
+    expect(profilePage(undefined, {})).toEqual(initialState);
+  });
+
+  describe('FETCH_PROFILE actions', () => {
+    it('should handle FETCH_PROFILE.BEGIN', () => {
+      const action = { type: FETCH_PROFILE.BEGIN };
+      const expectedState = {
+        ...initialState,
+        // Uncomment isLoadingProfile: true if this functionality is required.
+      };
+      expect(profilePage(initialState, action)).toEqual(expectedState);
+    });
+
+    it('should handle FETCH_PROFILE.SUCCESS', () => {
+      const action = {
+        type: FETCH_PROFILE.SUCCESS,
+        account: { name: 'John Doe' },
+        preferences: { theme: 'dark' },
+        courseCertificates: ['cert1', 'cert2'],
+        isAuthenticatedUserProfile: true,
+      };
+      const expectedState = {
+        ...initialState,
+        account: action.account,
+        preferences: action.preferences,
+        courseCertificates: action.courseCertificates,
+        isLoadingProfile: false,
+        isAuthenticatedUserProfile: action.isAuthenticatedUserProfile,
+      };
+      expect(profilePage(initialState, action)).toEqual(expectedState);
+    });
+  });
+
+  describe('SAVE_PROFILE_PHOTO actions', () => {
+    it('should handle SAVE_PROFILE_PHOTO.BEGIN', () => {
+      const action = { type: SAVE_PROFILE_PHOTO.BEGIN };
+      const expectedState = {
+        ...initialState,
+        savePhotoState: 'pending',
+        errors: {},
+      };
+      expect(profilePage(initialState, action)).toEqual(expectedState);
+    });
+
+    it('should handle SAVE_PROFILE_PHOTO.SUCCESS', () => {
+      const action = {
+        type: SAVE_PROFILE_PHOTO.SUCCESS,
+        payload: { profileImage: 'new-image-url.jpg' },
+      };
+      const expectedState = {
+        ...initialState,
+        account: { ...initialState.account, profileImage: action.payload.profileImage },
+        savePhotoState: 'complete',
+        errors: {},
+      };
+      expect(profilePage(initialState, action)).toEqual(expectedState);
+    });
+
+    it('should handle SAVE_PROFILE_PHOTO.FAILURE', () => {
+      const action = {
+        type: SAVE_PROFILE_PHOTO.FAILURE,
+        payload: { error: 'Photo upload failed' },
+      };
+      const expectedState = {
+        ...initialState,
+        savePhotoState: 'error',
+        errors: { photo: action.payload.error },
+      };
+      expect(profilePage(initialState, action)).toEqual(expectedState);
+    });
+
+    it('should handle SAVE_PROFILE_PHOTO.RESET', () => {
+      const action = { type: SAVE_PROFILE_PHOTO.RESET };
+      const expectedState = {
+        ...initialState,
+        savePhotoState: null,
+        errors: {},
+      };
+      expect(profilePage(initialState, action)).toEqual(expectedState);
+    });
+  });
+
+  describe('DELETE_PROFILE_PHOTO actions', () => {
+    it('should handle DELETE_PROFILE_PHOTO.BEGIN', () => {
+      const action = { type: DELETE_PROFILE_PHOTO.BEGIN };
+      const expectedState = {
+        ...initialState,
+        savePhotoState: 'pending',
+        errors: {},
+      };
+      expect(profilePage(initialState, action)).toEqual(expectedState);
+    });
+
+    it('should handle DELETE_PROFILE_PHOTO.SUCCESS', () => {
+      const action = {
+        type: DELETE_PROFILE_PHOTO.SUCCESS,
+        payload: { profileImage: 'default-image-url.jpg' },
+      };
+      const expectedState = {
+        ...initialState,
+        account: { ...initialState.account, profileImage: action.payload.profileImage },
+        savePhotoState: 'complete',
+        errors: {},
+      };
+      expect(profilePage(initialState, action)).toEqual(expectedState);
+    });
+
+    it('should handle DELETE_PROFILE_PHOTO.FAILURE', () => {
+      const action = {
+        type: DELETE_PROFILE_PHOTO.FAILURE,
+        payload: { errors: { delete: 'Failed to delete photo' } },
+      };
+      const expectedState = {
+        ...initialState,
+        savePhotoState: 'error',
+        errors: { ...initialState.errors, delete: action.payload.errors.delete },
+      };
+      expect(profilePage(initialState, action)).toEqual(expectedState);
+    });
+
+    it('should handle DELETE_PROFILE_PHOTO.RESET', () => {
+      const action = { type: DELETE_PROFILE_PHOTO.RESET };
+      const expectedState = {
+        ...initialState,
+        savePhotoState: null,
+        errors: {},
+      };
+      expect(profilePage(initialState, action)).toEqual(expectedState);
+    });
+  });
+});
diff --git a/src/profile-v2/index.scss b/src/profile-v2/index.scss
index 5e366cde8..40ff565c7 100644
--- a/src/profile-v2/index.scss
+++ b/src/profile-v2/index.scss
@@ -132,7 +132,7 @@
       top: 1rem;
       right: 1rem;
       bottom: 0;
-      width: 13.5rem;
+      width: 15.15rem;
       opacity: .06;
       background-size: 90%;
       background-repeat: no-repeat;