Feature: Allow Single Object Upload Photo/video (#1444)

* Update OrgPost.tsx * Update OrgPost.test.tsx * Update en.json * Update fr.json * Update hi.json * Update sp.json * Update zh.json * Update en.json * Update fr.json * Update fr.json * Update fr.json * Update hi.json * Update sp.json * Update zh.json * Update OrgPost.test.tsx * Update OrgPost.tsx * Update OrgPost.test.tsx * Update OrgPostCard.tsx * Update OrgPost.tsx * Update OrgPost.test.tsx * Update en.json * Update fr.json * Update hi.json * Update sp.json * Update zh.json * Update OrgPost.test.tsx * Update OrgPost.test.tsx * Update public/locales/en.json Co-authored-by: Noble Mittal <[email protected]> * Update zh.json * Update sp.json * Update hi.json * Update fr.json * Update en.json --------- Co-authored-by: Noble Mittal <[email protected]>
PalisadoesFoundation · Jan 28, 2024 · e398810 · e398810
1 parent 83b1234
commit e398810
Show file tree

Hide file tree

Showing 8 changed files with 180 additions and 181 deletions.
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -318,10 +318,9 @@
     "postDetails": "Post Details",
     "postTitle1": "Write title of the post",
     "postTitle": "Title",
+    "addMedia": "Upload Media",
     "information": "Information",
     "information1": "Write information of the post",
-    "image": "Post Image",
-    "video": "Post Video",
     "addPost": "Add Post",
     "searchTitle": "Search By Title",
     "searchText": "Search By Text",
@@ -335,6 +334,7 @@
     "Latest": "Latest First",
     "sortPost": "Sort Post",
     "tag": " Your browser does not support the video tag",
+    "postCreatedSuccess": "Congratulations! You have Posted Something.",
     "pinPost": "Pin post"
   },
   "postNotFound": {

diff --git a/public/locales/fr.json b/public/locales/fr.json
@@ -159,7 +159,6 @@
     "manage": "Faire en sorte",
     "sampleOrganization": "Organisation d'exemple"
   },
-
   "paginationList": {
     "rowsPerPage": "lignes par page",
     "all": "Tout"
@@ -314,10 +313,9 @@
     "postDetails": "Détails de la publication",
     "postTitle1": "Écrire le titre de la publication",
     "postTitle": "Titre",
+    "addMedia": "Télécharger une photo ou une vidéo",
     "information": "Informations",
     "information1": "Écrire les informations de la publication",
-    "image": "Image de la publication",
-    "video": "Vidéo de la publication",
     "addPost": "Ajouter une publication",
     "searchTitle": "Rechercher par titre",
     "searchText": "Rechercher par texte",
@@ -331,6 +329,7 @@
     "Latest": "Les plus récentes d'abord",
     "sortPost": "Trier les publications",
     "tag": "Votre navigateur ne prend pas en charge la balise vidéo",
+    "postCreatedSuccess": "Félicitations ! Vous avez publié quelque chose.",
     "pinPost": "Épingler le message"
   },
   "postNotFound": {

diff --git a/public/locales/hi.json b/public/locales/hi.json
@@ -313,10 +313,9 @@
     "postDetails": "पोस्ट विवरण",
     "postTitle1": "पोस्ट का शीर्षक लिखें",
     "postTitle": "शीर्षक",
+    "addMedia": "फ़ोटो या वीडियो अपलोड करें",
     "information": "जानकारी",
     "information1": "पोस्ट की जानकारी लिखें",
-    "image": "पोस्ट छवि",
-    "video": "पोस्ट वीडियो",
     "addPost": "पोस्ट जोड़ें",
     "searchTitle": "शीर्षक से खोजें",
     "searchText": "टेक्स्ट से खोजें",
@@ -330,6 +329,7 @@
     "Latest": "सबसे नवीनतम पहले",
     "sortPost": "पोस्ट को क्रमित करें",
     "tag": "आपका ब्राउज़र वीडियो टैग का समर्थन नहीं करता",
+    "postCreatedSuccess": "बधाई हो! आपने कुछ पोस्ट किया है।",
     "pinPost": "पोस्ट को पिन करें"
   },
   "postNotFound": {

diff --git a/public/locales/sp.json b/public/locales/sp.json
@@ -313,10 +313,9 @@
     "postDetails": "Detalles de la Publicación",
     "postTitle1": "Escribir título de la publicación",
     "postTitle": "Título",
+    "addMedia": "Subir foto o video",
     "information": "Información",
     "information1": "Escribir información de la publicación",
-    "image": "Imagen de la Publicación",
-    "video": "Video de la Publicación",
     "addPost": "Agregar Publicación",
     "searchTitle": "Buscar por Título",
     "searchText": "Buscar por Texto",
@@ -330,6 +329,7 @@
     "Latest": "Más Recientes Primero",
     "sortPost": "Ordenar Publicaciones",
     "tag": "Su navegador no admite la etiqueta de video",
+    "postCreatedSuccess": "¡Felicidades! Has publicado algo.",
     "pinPost": "Fijar publicación"
   },
   "postNotFound": {
@@ -348,7 +348,6 @@
     "admin not found!": "Administrador no encontrado!",
     "roles not found!": "roles no encontrados!"
   },
-
   "orgPostCard": {
     "author": "Autor",
     "imageURL": "URL de la Imagen",
@@ -713,7 +712,6 @@
     "selectContact": "Seleccione un contacto para iniciar una conversación",
     "sendMessage": "Enviar mensaje"
   },
-
   "orgProfileField": {
     "loading": "Cargando..",
     "noCustomField": "No hay campos personalizados disponibles",

diff --git a/public/locales/zh.json b/public/locales/zh.json
@@ -313,10 +313,9 @@
     "postDetails": "帖子详情",
     "postTitle1": "填写帖子标题",
     "postTitle": "标题",
+    "addMedia": "上传照片或视频",
     "information": "信息",
     "information1": "填写帖子信息",
-    "image": "帖子图片",
-    "video": "帖子视频",
     "addPost": "添加帖子",
     "searchTitle": "按标题搜索",
     "searchText": "按文本搜索",
@@ -330,6 +329,7 @@
     "Latest": "最新的优先",
     "sortPost": "排序帖子",
     "tag": "您的浏览器不支持视频标签",
+    "postCreatedSuccess": "恭喜！您已经发布了一些内容。",
     "pinPost": "针柱"
   },
   "postNotFound": {

diff --git a/src/components/OrgPostCard/OrgPostCard.tsx b/src/components/OrgPostCard/OrgPostCard.tsx
@@ -234,7 +234,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}

diff --git a/src/screens/OrgPost/OrgPost.test.tsx b/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 = [
   {
@@ -209,14 +208,10 @@ 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.upload(screen.getByTestId('addMediaField'), formData.postImage);
+    userEvent.upload(screen.getByTestId('addMediaField'), formData.postVideo);
     userEvent.click(screen.getByTestId('pinPost'));
     expect(screen.getByTestId('pinPost')).toBeChecked();
 
@@ -247,9 +242,7 @@ describe('Organisation Post Page', () => {
       });
     }
     await debounceWait();
-    const searchBtn = screen.getByTestId('searchBtn');
     userEvent.type(screen.getByPlaceholderText(/Search By/i), 'postone{enter}');
-    userEvent.click(searchBtn);
     await debounceWait();
     const sortDropdown = screen.getByTestId('sort');
     userEvent.click(sortDropdown);
@@ -404,18 +397,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 () => {
@@ -440,7 +439,7 @@ describe('Organisation Post Page', () => {
     const modalTitle = screen.getByTestId('modalOrganizationHeader');
     expect(modalTitle).toBeInTheDocument();
 
-    const closeButton = screen.getByTestId('closeOrganizationModal');
+    const closeButton = screen.getByTestId(/modalOrganizationHeader/i);
     userEvent.click(closeButton);
 
     await wait();
@@ -468,8 +467,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();
   });
 
@@ -530,13 +527,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 () => {
@@ -570,21 +567,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'
+    );
+  });
 });