Fixes PalisadoesFoundation#1514 added the test for the PostCard and H…

…ome.tsx
gauravsingh94 · Mar 17, 2024 · c58c62e · c58c62e
1 parent 15c726c
commit c58c62e
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 86 deletions.
diff --git a/src/components/UserPortal/PostCard/PostCard.test.tsx b/src/components/UserPortal/PostCard/PostCard.test.tsx
@@ -24,6 +24,20 @@ describe('PostCard compoenent', () => {
     title: 'This is post test title',
     createdAt: 1647398400000,
   };
+  const postWithImage = {
+    id: '1',
+    creator: {
+      firstName: 'John',
+      lastName: 'Doe',
+      image: '',
+      id: '1',
+    },
+    image: 'https://example.com/image.jpg',
+    video: '',
+    text: 'Lorem ipsum dolor sit amet',
+    title: 'Example Post',
+    createdAt: 1626166078000,
+  };
   test('Render post card with the correct content.', () => {
     render(
       <MockedProvider addTypename={false}>
@@ -65,4 +79,21 @@ describe('PostCard compoenent', () => {
     expect(screen.getByText('Pin Post')).toBeInTheDocument();
     expect(screen.getByText('Share')).toBeInTheDocument();
   });
+
+  test('Renders image if the image prop is provided', async () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PostCard {...postWithImage} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    const Image = screen.getByRole('img');
+    expect(Image).toBeInTheDocument();
+    expect(Image).toHaveAttribute('src', postWithImage.image);
+  });
 });
diff --git a/src/components/UserPortal/PostCard/PostCard.tsx b/src/components/UserPortal/PostCard/PostCard.tsx
@@ -48,7 +48,8 @@ export default function postCard(props: InterfacePostCardProps): JSX.Element {
               <img
                 src={props.creator.image}
                 className={`${styles.profile}`}
-              ></img>
+                alt="postImage"
+              />
             )}
             {!props.creator.image && (
               <div className={`${styles.profileNotPresent}`}></div>

diff --git a/src/screens/UserPortal/Home/Home.test.tsx b/src/screens/UserPortal/Home/Home.test.tsx
@@ -52,7 +52,7 @@ const MOCKS = [
               commentCount: 0,
               comments: [],
               likedBy: [],
-              pinned: false,
+              pinned: true,
             },
             {
               _id: '6411e54835d7ba2344a78e29',
@@ -266,7 +266,7 @@ describe('Testing Home Screen [User Portal]', () => {
     expect(postInput).toHaveValue('Testing post content');
   });
 
-  test('Scroll right button should be in document for pinned posts.', async () => {
+  test('Should scroll the carousel right on the" click', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -278,10 +278,18 @@ describe('Testing Home Screen [User Portal]', () => {
         </BrowserRouter>
       </MockedProvider>,
     );
-
     await wait();
-
-    const scrollRightButton = screen.getByTestId('scrollRightButton');
+    const carousel = screen.getByTestId('carousel');
+    expect(carousel).toBeInTheDocument();
+    const scrollRightButton = screen.getByRole('button', {
+      name: 'Scroll Right',
+    });
     expect(scrollRightButton).toBeInTheDocument();
+    expect(carousel.scrollLeft).toBe(0);
+    act(() => {
+      userEvent.click(scrollRightButton);
+    });
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    expect(carousel.scrollLeft).toBeGreaterThan(0);
   });
 });
diff --git a/src/screens/UserPortal/Home/Home.tsx b/src/screens/UserPortal/Home/Home.tsx
@@ -85,11 +85,8 @@ export default function home(): JSX.Element {
   const carouselRef = useRef<HTMLDivElement>(null);
 
   const handleScrollRight = (): void => {
-    if (carouselRef.current) {
-      (carouselRef.current as any).scrollBy({
-        left: 300, // Adjust this value to change the scroll amount
-        behavior: 'smooth',
-      });
+    if (carouselRef.current instanceof HTMLElement) {
+      carouselRef.current.scrollLeft += 300;
     }
   };
 
@@ -210,43 +207,6 @@ export default function home(): JSX.Element {
               {posts
                 .filter((post) => post.pinned === true)
                 .map((post: any) => {
-                  const allLikes: any = [];
-                  post.likedBy.forEach((value: any) => {
-                    const singleLike = {
-                      firstName: value.firstName,
-                      lastName: value.lastName,
-                      id: value._id,
-                    };
-                    allLikes.push(singleLike);
-                  });
-
-                  const postComments: any = [];
-                  post.comments.forEach((value: any) => {
-                    const commentLikes: any = [];
-
-                    value.likedBy.forEach((commentLike: any) => {
-                      const singleLike = {
-                        id: commentLike._id,
-                      };
-                      commentLikes.push(singleLike);
-                    });
-
-                    const singleCommnet: any = {
-                      id: value._id,
-                      creator: {
-                        firstName: value.creator.firstName,
-                        lastName: value.creator.lastName,
-                        id: value.creator._id,
-                        image: value.creator.image,
-                      },
-                      likeCount: value.likeCount,
-                      likedBy: commentLikes,
-                      text: value.text,
-                    };
-
-                    postComments.push(singleCommnet);
-                  });
-
                   const cardProps: InterfacePostCardProps = {
                     id: post._id,
                     creator: {
@@ -268,7 +228,7 @@ export default function home(): JSX.Element {
                 <Button
                   className={`${styles.rightScrollButton}`}
                   onClick={handleScrollRight}
-                  data-testid="scrollRightButton"
+                  aria-label="Scroll Right"
                 >
                   <RightScrollIcon />
                 </Button>
@@ -281,43 +241,6 @@ export default function home(): JSX.Element {
             {posts
               .filter((post) => post.pinned === false)
               .map((post: any) => {
-                const allLikes: any = [];
-                post.likedBy.forEach((value: any) => {
-                  const singleLike = {
-                    firstName: value.firstName,
-                    lastName: value.lastName,
-                    id: value._id,
-                  };
-                  allLikes.push(singleLike);
-                });
-
-                const postComments: any = [];
-                post.comments.forEach((value: any) => {
-                  const commentLikes: any = [];
-
-                  value.likedBy.forEach((commentLike: any) => {
-                    const singleLike = {
-                      id: commentLike._id,
-                    };
-                    commentLikes.push(singleLike);
-                  });
-
-                  const singleCommnet: any = {
-                    id: value._id,
-                    creator: {
-                      firstName: value.creator.firstName,
-                      lastName: value.creator.lastName,
-                      id: value.creator._id,
-                      image: value.creator.image,
-                    },
-                    likeCount: value.likeCount,
-                    likedBy: commentLikes,
-                    text: value.text,
-                  };
-
-                  postComments.push(singleCommnet);
-                });
-
                 const cardProps: InterfacePostCardProps = {
                   id: post._id,
                   creator: {