diff --git a/src/GraphQl/Queries/Queries.ts b/src/GraphQl/Queries/Queries.ts index 2aca0568fd..76db5206c2 100644 --- a/src/GraphQl/Queries/Queries.ts +++ b/src/GraphQl/Queries/Queries.ts @@ -593,7 +593,7 @@ export const ORGANIZATION_POST_CONNECTION_LIST = gql` _id firstName lastName - image + email } createdAt likeCount diff --git a/src/components/UserPortal/PostCard/PostCard.test.tsx b/src/components/UserPortal/PostCard/PostCard.test.tsx index 4e7d2a2ae4..e12326d102 100644 --- a/src/components/UserPortal/PostCard/PostCard.test.tsx +++ b/src/components/UserPortal/PostCard/PostCard.test.tsx @@ -1,387 +1,68 @@ import React from 'react'; +import { render, screen, fireEvent } from '@testing-library/react'; import { MockedProvider } from '@apollo/react-testing'; -import { act, render, screen } from '@testing-library/react'; import { I18nextProvider } from 'react-i18next'; import { Provider } from 'react-redux'; import { BrowserRouter } from 'react-router-dom'; import { store } from 'state/store'; import i18nForTest from 'utils/i18nForTest'; -import { StaticMockLink } from 'utils/StaticMockLink'; - import PostCard from './PostCard'; -import userEvent from '@testing-library/user-event'; -import { - CREATE_COMMENT_POST, - LIKE_POST, - UNLIKE_POST, -} from 'GraphQl/Mutations/mutations'; -const MOCKS = [ - { - request: { - query: LIKE_POST, - variables: { - postId: '', - }, - result: { - data: { - likePost: { - _id: '', - }, - }, - }, - }, - }, - { - request: { - query: UNLIKE_POST, - variables: { - post: '', - }, - result: { - data: { - unlikePost: { - _id: '', - }, - }, - }, - }, - }, - { - request: { - query: CREATE_COMMENT_POST, - variables: { - postId: '1', - comment: 'testComment', - }, - result: { - data: { - createComment: { - _id: '64ef885bca85de60ebe0f304', - creator: { - _id: '63d6064458fce20ee25c3bf7', - firstName: 'Noble', - lastName: 'Mittal', - email: 'test@gmail.com', - __typename: 'User', - }, - likeCount: 0, - likedBy: [], - text: 'testComment', - __typename: 'Comment', - }, - }, - }, +describe('PostCard compoenent', () => { + const cardProps = { + id: '', + creator: { + firstName: 'test', + lastName: 'user', + email: 'test@user.com', + image: '', + id: '1', }, - }, -]; - -async function wait(ms = 100): Promise { - await act(() => { - return new Promise((resolve) => { - setTimeout(resolve, ms); - }); + image: '', + video: '', + text: 'This is post test text', + title: 'This is post test title', + createdAt: 1647398400000, + }; + test('Render post card with the correct content.', () => { + render( + + + + + + + + + + ); + const userFirstName = screen.getByTestId('creator-name'); + expect(userFirstName).toBeInTheDocument(); + const postText = screen.getByText('This is post test text'); + expect(postText).toBeInTheDocument(); + const postTitle = screen.getByText('This is post test title'); + expect(postTitle).toBeInTheDocument(); + expect(screen.getByText('16 March 2022')).toBeInTheDocument(); }); -} + test('opens menu when three dots button is clicked', () => { + render( + + + + + + + + + + ); -const link = new StaticMockLink(MOCKS, true); + fireEvent.click(screen.getByTestId('three-dots-button')); -describe('Testing PostCard Component [User Portal]', () => { - // test('Component should be rendered properly', async () => { - // const cardProps = { - // id: '', - // creator: { - // firstName: 'test', - // lastName: 'user', - // email: 'test@user.com', - // id: '1', - // }, - // image: '', - // video: '', - // text: 'This is post test text', - // title: 'This is post test title', - // likeCount: 1, - // commentCount: 1, - // comments: [ - // { - // _id: '64eb13beca85de60ebe0ed0e', - // creator: { - // _id: '63d6064458fce20ee25c3bf7', - // firstName: 'Noble', - // lastName: 'Mittal', - // email: 'test@gmail.com', - // __typename: 'User', - // }, - // likeCount: 0, - // likedBy: [], - // text: 'First comment from Talawa user portal.', - // __typename: 'Comment', - // }, - // ], - // likedBy: [ - // { - // firstName: '', - // lastName: '', - // id: '2', - // }, - // ], - // }; - // render( - // - // - // - // - // {/* */} - // - // - // - // - // ); - // await wait(); - // }); - // test('Component should be rendered properly if user has liked the post', async () => { - // const beforeUserId = localStorage.getItem('userId'); - // localStorage.setItem('userId', '2'); - // const cardProps = { - // id: '', - // creator: { - // firstName: 'test', - // lastName: 'user', - // email: 'test@user.com', - // id: '1', - // }, - // image: '', - // video: '', - // text: 'This is post test text', - // title: 'This is post test title', - // likeCount: 1, - // commentCount: 0, - // comments: [], - // likedBy: [ - // { - // firstName: 'test', - // lastName: 'user', - // id: '2', - // }, - // ], - // }; - // render( - // - // - // - // - // - // - // - // - // - // ); - // await wait(); - // if (beforeUserId) { - // localStorage.setItem('userId', beforeUserId); - // } - // }); - // test('Component should be rendered properly if user unlikes a post', async () => { - // const beforeUserId = localStorage.getItem('userId'); - // localStorage.setItem('userId', '2'); - // const cardProps = { - // id: '', - // creator: { - // firstName: 'test', - // lastName: 'user', - // email: 'test@user.com', - // id: '1', - // }, - // image: '', - // video: '', - // text: 'This is post test text', - // title: 'This is post test title', - // likeCount: 1, - // commentCount: 0, - // comments: [], - // likedBy: [ - // { - // firstName: 'test', - // lastName: 'user', - // id: '2', - // }, - // ], - // }; - // render( - // - // - // - // - // - // - // - // - // - // ); - // await wait(); - // userEvent.click(screen.getByTestId('likePostBtn')); - // if (beforeUserId) { - // localStorage.setItem('userId', beforeUserId); - // } - // }); - // test('Component should be rendered properly if user likes a post', async () => { - // const beforeUserId = localStorage.getItem('userId'); - // localStorage.setItem('userId', '2'); - // const cardProps = { - // id: '', - // creator: { - // firstName: 'test', - // lastName: 'user', - // email: 'test@user.com', - // id: '1', - // }, - // image: '', - // video: '', - // text: 'This is post test text', - // title: 'This is post test title', - // likeCount: 1, - // commentCount: 0, - // comments: [], - // likedBy: [ - // { - // firstName: 'test', - // lastName: 'user', - // id: '1', - // }, - // ], - // }; - // render( - // - // - // - // - // - // - // - // - // - // ); - // await wait(); - // userEvent.click(screen.getByTestId('likePostBtn')); - // if (beforeUserId) { - // localStorage.setItem('userId', beforeUserId); - // } - // }); - // test('Component should be rendered properly if post image is defined', async () => { - // const cardProps = { - // id: '', - // creator: { - // firstName: 'test', - // lastName: 'user', - // email: 'test@user.com', - // id: '1', - // }, - // image: 'testImage', - // video: '', - // text: 'This is post test text', - // title: 'This is post test title', - // likeCount: 1, - // commentCount: 0, - // comments: [], - // likedBy: [ - // { - // firstName: 'test', - // lastName: 'user', - // id: '1', - // }, - // ], - // }; - // render( - // - // - // - // - // - // - // - // - // - // ); - // await wait(); - // }); - // test('Comment is created successfully after create comment button is clicked.', async () => { - // const cardProps = { - // id: '1', - // creator: { - // firstName: 'test', - // lastName: 'user', - // email: 'test@user.com', - // id: '1', - // }, - // image: 'testImage', - // video: '', - // text: 'This is post test text', - // title: 'This is post test title', - // likeCount: 1, - // commentCount: 0, - // comments: [], - // likedBy: [ - // { - // firstName: 'test', - // lastName: 'user', - // id: '1', - // }, - // ], - // }; - // render( - // - // - // - // - // - // - // - // - // - // ); - // const randomComment = 'testComment'; - // userEvent.click(screen.getByTestId('showCommentsBtn')); - // userEvent.type(screen.getByTestId('commentInput'), randomComment); - // userEvent.click(screen.getByTestId('createCommentBtn')); - // await wait(); - // }); - // test('Comment modal pops when show comments button is clicked.', async () => { - // const cardProps = { - // id: '', - // creator: { - // firstName: 'test', - // lastName: 'user', - // email: 'test@user.com', - // id: '1', - // }, - // image: 'testImage', - // video: '', - // text: 'This is post test text', - // title: 'This is post test title', - // likeCount: 1, - // commentCount: 0, - // comments: [], - // likedBy: [ - // { - // firstName: 'test', - // lastName: 'user', - // id: '1', - // }, - // ], - // }; - // render( - // - // - // - // - // - // - // - // - // - // ); - // await wait(); - // userEvent.click(screen.getByTestId('showCommentsBtn')); - // expect(screen.findAllByText('Comments')).not.toBeNull(); - // }); + expect(screen.getByText('Edit')).toBeInTheDocument(); + expect(screen.getByText('Delete')).toBeInTheDocument(); + expect(screen.getByText('Report')).toBeInTheDocument(); + expect(screen.getByText('Pin Post')).toBeInTheDocument(); + expect(screen.getByText('Share')).toBeInTheDocument(); + }); }); diff --git a/src/components/UserPortal/PostCard/PostCard.tsx b/src/components/UserPortal/PostCard/PostCard.tsx index 1cc76f4543..a7f3186326 100644 --- a/src/components/UserPortal/PostCard/PostCard.tsx +++ b/src/components/UserPortal/PostCard/PostCard.tsx @@ -9,7 +9,6 @@ import { ReactComponent as ReportIcon } from 'assets/svgs/report.svg'; import { ReactComponent as SharePostIcon } from 'assets/svgs/sharePost.svg'; import styles from './PostCard.module.css'; -import { NumericLiteral } from 'typescript'; interface InterfacePostCardProps { id: string; creator: { @@ -56,7 +55,7 @@ export default function postCard(props: InterfacePostCardProps): JSX.Element {
)} - + {props.creator.firstName} {props.creator.lastName} @@ -64,7 +63,11 @@ export default function postCard(props: InterfacePostCardProps): JSX.Element { - {isMenuOpen && ( @@ -102,7 +105,9 @@ export default function postCard(props: InterfacePostCardProps): JSX.Element { Posted On: {formatDate(props.createdAt)} - {props.text} + + {props.text} +
diff --git a/src/screens/UserPortal/Home/Home.test.tsx b/src/screens/UserPortal/Home/Home.test.tsx index 105714cfc8..a6b88ef8da 100644 --- a/src/screens/UserPortal/Home/Home.test.tsx +++ b/src/screens/UserPortal/Home/Home.test.tsx @@ -2,19 +2,17 @@ import React from 'react'; import { act, render, screen } from '@testing-library/react'; import { MockedProvider } from '@apollo/react-testing'; import { I18nextProvider } from 'react-i18next'; - import { ORGANIZATION_POST_CONNECTION_LIST } from 'GraphQl/Queries/Queries'; import { BrowserRouter } from 'react-router-dom'; import { Provider } from 'react-redux'; import { store } from 'state/store'; -import i18nForTest from 'utils/i18nForTest'; import { StaticMockLink } from 'utils/StaticMockLink'; -import Home from './Home'; -import userEvent from '@testing-library/user-event'; -import * as getOrganizationId from 'utils/getOrganizationId'; import { CREATE_POST_MUTATION } from 'GraphQl/Mutations/mutations'; -import { toast } from 'react-toastify'; +import * as getOrganizationId from 'utils/getOrganizationId'; +import i18nForTest from 'utils/i18nForTest'; +import userEvent from '@testing-library/user-event'; import dayjs from 'dayjs'; +import Home from './Home'; jest.mock('react-toastify', () => ({ toast: { @@ -47,6 +45,7 @@ const MOCKS = [ firstName: 'Aditya', lastName: 'Shelke', email: 'adidacreator1@gmail.com', + image: '', }, createdAt: dayjs(new Date()).add(1, 'day'), likeCount: 0, @@ -190,14 +189,7 @@ describe('Testing Home Screen [User Portal]', () => { expect(getOrganizationIdSpy).toHaveBeenCalled(); }); - - test('Screen should be rendered properly when user types on the Post Input', async () => { - const getOrganizationIdSpy = jest - .spyOn(getOrganizationId, 'default') - .mockImplementation(() => { - return ''; - }); - + test('Should render the main heading', async () => { render( @@ -212,21 +204,11 @@ describe('Testing Home Screen [User Portal]', () => { await wait(); - expect(getOrganizationIdSpy).toHaveBeenCalled(); - - const randomPostInput = 'This is a test'; - userEvent.type(screen.getByTestId('postInput'), randomPostInput); - - expect(screen.queryByText(randomPostInput)).toBeInTheDocument(); + const mainHeading = screen.getByText('POSTS'); + expect(mainHeading).toBeInTheDocument(); }); - test('Error toast should be visible when user tries to create a post with an empty body', async () => { - const getOrganizationIdSpy = jest - .spyOn(getOrganizationId, 'default') - .mockImplementation(() => { - return ''; - }); - + test('Should render the sub heading', async () => { render( @@ -241,22 +223,11 @@ describe('Testing Home Screen [User Portal]', () => { await wait(); - expect(getOrganizationIdSpy).toHaveBeenCalled(); - - userEvent.click(screen.getByTestId('postAction')); - - expect(toast.error).toBeCalledWith( - "Can't create a post with an empty body." - ); + const mainHeading = screen.getByText('Feed'); + expect(mainHeading).toBeInTheDocument(); }); - test('Info toast should be visible when user tries to create a post with a valid body', async () => { - const getOrganizationIdSpy = jest - .spyOn(getOrganizationId, 'default') - .mockImplementation(() => { - return ''; - }); - + test('Should display "Start a Post" text', async () => { render( @@ -271,15 +242,27 @@ describe('Testing Home Screen [User Portal]', () => { await wait(); - expect(getOrganizationIdSpy).toHaveBeenCalled(); + const startPostText = screen.getByText('Start a Post'); + expect(startPostText).toBeInTheDocument(); + }); - const randomPostInput = 'This is a test'; - userEvent.type(screen.getByTestId('postInput'), randomPostInput); - expect(screen.queryByText(randomPostInput)).toBeInTheDocument(); + test('Should update postContent state on input change', async () => { + render( + + + + + + + + + + ); - userEvent.click(screen.getByTestId('postAction')); + await wait(); - expect(toast.error).not.toBeCalledWith(); - expect(toast.info).toBeCalledWith('Processing your post. Please wait.'); + const postInput = screen.getByTestId('postInput'); + userEvent.type(postInput, 'Testing post content'); + expect(postInput).toHaveValue('Testing post content'); }); }); diff --git a/src/screens/UserPortal/Home/Home.tsx b/src/screens/UserPortal/Home/Home.tsx index df873c79c8..5dc9f6db71 100644 --- a/src/screens/UserPortal/Home/Home.tsx +++ b/src/screens/UserPortal/Home/Home.tsx @@ -1,16 +1,13 @@ -import React, { useRef, ReactElement, useEffect } from 'react'; +import React, { useRef, useEffect } from 'react'; import type { ChangeEvent } from 'react'; -import { Button, Card, Form, InputGroup, Modal } from 'react-bootstrap'; +import { Button, Card } from 'react-bootstrap'; import styles from './Home.module.css'; import UserSidebar from 'components/UserPortal/UserSidebar/UserSidebar'; import OrganizationNavbar from 'components/UserPortal/OrganizationNavbar/OrganizationNavbar'; import convertToBase64 from 'utils/convertToBase64'; import getOrganizationId from 'utils/getOrganizationId'; import { useMutation, useQuery } from '@apollo/client'; -import { - ADVERTISEMENTS_GET, - ORGANIZATION_POST_CONNECTION_LIST, -} from 'GraphQl/Queries/Queries'; +import { ORGANIZATION_POST_CONNECTION_LIST } from 'GraphQl/Queries/Queries'; import { CREATE_POST_MUTATION } from 'GraphQl/Mutations/mutations'; import { toast } from 'react-toastify'; import { errorHandler } from 'utils/errorHandler'; @@ -78,7 +75,6 @@ export default function home(): JSX.Element { const [posts, setPosts] = React.useState([]); const [postContent, setPostContent] = React.useState(''); const [postImage, setPostImage] = React.useState(''); - const [adContent, setAdContent] = React.useState([]); const [hasPinnedPost, setHasPinnedPost] = React.useState(false); useEffect(() => { @@ -106,13 +102,6 @@ export default function home(): JSX.Element { currentPage: 'home', }; - const { - data: promotedPostsData, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - refetch: _promotedPostsRefetch, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - loading: promotedPostsLoading, - } = useQuery(ADVERTISEMENTS_GET); const { data, refetch, @@ -122,8 +111,6 @@ export default function home(): JSX.Element { }); const [create] = useMutation(CREATE_POST_MUTATION); - console.log('Posts is getting logged.'); - console.log(posts); const handlePost = async (): Promise => { try { @@ -160,11 +147,6 @@ export default function home(): JSX.Element { } }, [data]); - React.useEffect(() => { - if (promotedPostsData) { - setAdContent(promotedPostsData.getAdvertisements); - } - }, [data]); return ( <> @@ -199,6 +181,7 @@ export default function home(): JSX.Element { @@ -219,7 +202,11 @@ export default function home(): JSX.Element { Loading... ) : ( -
+
{posts .filter((post) => post.pinned === true) .map((post: any) => { @@ -281,6 +268,7 @@ export default function home(): JSX.Element {