Feature: Allow for a single object upload for posts

public/locales/en.json

@@ -288,6 +288,7 @@
     "postDetails": "Post Details",
     "postTitle1": "Write title of the post",
     "postTitle": "Title",
+    "addMedia": "Upload Photo or Video",
     "information": "Information",
     "information1": "Write information of the post",
     "image": "Post Image",

src/components/OrgPostCard/OrgPostCard.tsx

@@ -235,7 +235,7 @@ export default function OrgPostCard(
 
   return (
     <>
-      <div className="col-xl-4 col-lg-4 col-md-6">
+      <div className="col-xl-4 col-lg-4 col-md-6" data-testid="post-item">
         <div
           className={styles.cards}
           onClick={handleCardClick}

src/screens/OrgPost/OrgPost.test.tsx

@@ -14,7 +14,6 @@ import { CREATE_POST_MUTATION } from 'GraphQl/Mutations/mutations';
 import i18nForTest from 'utils/i18nForTest';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import { ToastContainer } from 'react-toastify';
-import { debug } from 'jest-preview';
 
 const MOCKS = [
   {
@@ -46,7 +45,7 @@ const MOCKS = [
               likeCount: 0,
               commentCount: 0,
               comments: [],
-              pinned: false,
+              pinned: true,
               likedBy: [],
             },
             {
@@ -68,6 +67,44 @@ const MOCKS = [
               likedBy: [],
               comments: [],
             },
+            {
+              _id: '6411e54835d7ba2344a78e30',
+              title: 'posttwo',
+              text: 'Tis is the post two',
+              imageUrl: null,
+              videoUrl: null,
+              createdAt: '2023-08-24T09:26:56.524+00:00',
+              creator: {
+                _id: '640d98d9eb6a743d75341067',
+                firstName: 'Aditya',
+                lastName: 'Shelke',
+                email: '[email protected]',
+              },
+              likeCount: 0,
+              commentCount: 0,
+              pinned: true,
+              likedBy: [],
+              comments: [],
+            },
+            {
+              _id: '6411e54835d7ba2344a78e31',
+              title: 'posttwo',
+              text: 'Tis is the post two',
+              imageUrl: null,
+              videoUrl: null,
+              createdAt: '2023-08-24T09:26:56.524+00:00',
+              creator: {
+                _id: '640d98d9eb6a743d75341067',
+                firstName: 'Aditya',
+                lastName: 'Shelke',
+                email: '[email protected]',
+              },
+              likeCount: 0,
+              commentCount: 0,
+              pinned: false,
+              likedBy: [],
+              comments: [],
+            },
           ],
         },
       },
@@ -145,7 +182,7 @@ describe('Organisation Post Page', () => {
       },
       likeCount: 0,
       commentCount: 0,
-      pinned: false,
+      pinned: true,
       likedBy: [],
       comments: [],
     });
@@ -171,14 +208,8 @@ describe('Organisation Post Page', () => {
     userEvent.type(screen.getByTestId('modalTitle'), formData.posttitle);
 
     userEvent.type(screen.getByTestId('modalinfo'), formData.postinfo);
-    userEvent.upload(
-      screen.getByTestId('organisationImage'),
-      formData.postImage
-    );
-    userEvent.upload(
-      screen.getByTestId('organisationImage'),
-      formData.postVideo
-    );
+    userEvent.upload(screen.getByTestId('addMediaField'), formData.postImage);
+    userEvent.upload(screen.getByTestId('addMediaField'), formData.postVideo);
 
     userEvent.click(screen.getByTestId('createPostBtn'));
 
@@ -207,7 +238,7 @@ describe('Organisation Post Page', () => {
       });
     }
     await debounceWait();
-    userEvent.type(screen.getByPlaceholderText(/Search By/i), 'postone');
+    userEvent.type(screen.getByPlaceholderText(/Search By/i), 'postone{enter}');
     await debounceWait();
     const sortDropdown = screen.getByTestId('sort');
     userEvent.click(sortDropdown);
@@ -362,18 +393,24 @@ describe('Organisation Post Page', () => {
     fireEvent.change(postInfoTextarea, {
       target: { value: 'Test post information' },
     });
-    const file = new File(['image content'], 'image.png', {
+
+    // Simulate uploading an image
+    const imageFile = new File(['image content'], 'image.png', {
       type: 'image/png',
     });
-    const input = screen.getByTestId('organisationImage');
-    userEvent.upload(input, file);
+    const imageInput = screen.getByTestId('addMediaField');
+    userEvent.upload(imageInput, imageFile);
 
-    await screen.findByAltText('Post Image Preview');
-    expect(screen.getByAltText('Post Image Preview')).toBeInTheDocument();
+    // Check if the image is displayed
+    const imagePreview = await screen.findByAltText('Post Image Preview');
+    expect(imagePreview).toBeInTheDocument();
 
-    const createPostBtn = screen.getByTestId('createPostBtn');
-    fireEvent.click(createPostBtn);
-    debug();
+    // Check if the close button for the image works
+    const closeButton = screen.getByTestId('mediaCloseButton');
+    fireEvent.click(closeButton);
+
+    // Check if the image is removed from the preview
+    expect(imagePreview).not.toBeInTheDocument();
   }, 15000);
 
   test('Modal opens and closes', async () => {
@@ -398,7 +435,7 @@ describe('Organisation Post Page', () => {
     const modalTitle = screen.getByTestId('modalOrganizationHeader');
     expect(modalTitle).toBeInTheDocument();
 
-    const closeButton = screen.getByTestId('closeOrganizationModal');
+    const closeButton = screen.getByTestId(/closeModalBtn/i);
     userEvent.click(closeButton);
 
     await wait();
@@ -426,8 +463,6 @@ describe('Organisation Post Page', () => {
     // Check if input fields and buttons are present
     expect(screen.getByTestId('modalTitle')).toBeInTheDocument();
     expect(screen.getByTestId('modalinfo')).toBeInTheDocument();
-    expect(screen.getByTestId('organisationImage')).toBeInTheDocument();
-    expect(screen.getByTestId('organisationVideo')).toBeInTheDocument();
     expect(screen.getByTestId('createPostBtn')).toBeInTheDocument();
   });
 
@@ -488,13 +523,13 @@ describe('Organisation Post Page', () => {
     const file = new File(['image content'], 'image.png', {
       type: 'image/png',
     });
-    const input = screen.getByTestId('organisationImage');
+    const input = screen.getByTestId('addMediaField');
     userEvent.upload(input, file);
 
     await screen.findByAltText('Post Image Preview');
     expect(screen.getByAltText('Post Image Preview')).toBeInTheDocument();
 
-    const closeButton = screen.getByTestId('closePreview');
+    const closeButton = screen.getByTestId('mediaCloseButton');
     fireEvent.click(closeButton);
   }, 15000);
   test('Create post, preview image, and close preview', async () => {
@@ -528,21 +563,71 @@ describe('Organisation Post Page', () => {
         type: 'video/mp4',
       });
 
-      const videoInput = screen.getByTestId('organisationVideo');
-      fireEvent.change(videoInput, {
-        target: {
-          files: [videoFile],
-        },
-      });
+      userEvent.upload(screen.getByTestId('addMediaField'), videoFile);
 
       // Check if the video is displayed
       const videoPreview = await screen.findByTestId('videoPreview');
       expect(videoPreview).toBeInTheDocument();
 
       // Check if the close button for the video works
-      const closeVideoPreviewButton = screen.getByTestId('videoclosebutton');
+      const closeVideoPreviewButton = screen.getByTestId('mediaCloseButton');
       fireEvent.click(closeVideoPreviewButton);
       expect(videoPreview).not.toBeInTheDocument();
     });
   });
+  test('Sorting posts by pinned status', async () => {
+    // Mocked data representing posts with different pinned statuses
+    const mockedPosts = [
+      {
+        _id: '1',
+        title: 'Post 1',
+        pinned: true,
+      },
+      {
+        _id: '2',
+        title: 'Post 2',
+        pinned: false,
+      },
+      {
+        _id: '3',
+        title: 'Post 3',
+        pinned: true,
+      },
+      {
+        _id: '4',
+        title: 'Post 4',
+        pinned: true,
+      },
+    ];
+
+    // Render the OrgPost component and pass the mocked data to it
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <OrgPost />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    const sortedPosts = screen.getAllByTestId('post-item');
+
+    // Assert that the posts are sorted correctly
+    expect(sortedPosts).toHaveLength(mockedPosts.length);
+    expect(sortedPosts[0]).toHaveTextContent(
+      'postoneThis is the first po... Aditya Shelke'
+    );
+    expect(sortedPosts[1]).toHaveTextContent(
+      'posttwoTis is the post two Aditya Shelke'
+    );
+    expect(sortedPosts[2]).toHaveTextContent(
+      'posttwoTis is the post two Aditya Shelke'
+    );
+  });
 });