diff --git a/src/screens/UserPortal/Organizations/Organizations.spec.tsx b/src/screens/UserPortal/Organizations/Organizations.spec.tsx index 0aafba3b55..8c97968e35 100644 --- a/src/screens/UserPortal/Organizations/Organizations.spec.tsx +++ b/src/screens/UserPortal/Organizations/Organizations.spec.tsx @@ -320,7 +320,65 @@ const MOCKS = [ }, }, ]; +// Error mocks +const ERROR_MOCKS = [ + { + request: { + query: USER_ORGANIZATION_CONNECTION, + variables: { filter: '' }, + }, + error: new Error('Failed to fetch organizations'), + }, + { + request: { + query: USER_JOINED_ORGANIZATIONS, + variables: { id: getItem('userId') }, + }, + error: new Error('Failed to fetch joined organizations'), + }, +]; +// Empty data mocks +const EMPTY_MOCKS = [ + { + request: { + query: USER_ORGANIZATION_CONNECTION, + variables: { filter: '' }, + }, + result: { + data: { + organizationsConnection: [], + }, + }, + }, + { + request: { + query: USER_JOINED_ORGANIZATIONS, + variables: { id: getItem('userId') }, + }, + result: { + data: { + users: [], + }, + }, + }, +]; + +// Loading state mock +const LOADING_MOCKS = [ + { + request: { + query: USER_ORGANIZATION_CONNECTION, + variables: { filter: '' }, + }, + result: { + data: { + organizationsConnection: [], + }, + }, + delay: 2000, // Simulates loading state + }, +]; /** * Custom Mock Link for handling static GraphQL mocks. */ @@ -591,4 +649,101 @@ describe('Testing Organizations Screen [User Portal]', () => { const searchInput = screen.getByPlaceholderText('Search Organization'); expect(searchInput).toBeInTheDocument(); }); + // New test cases + test('handles pagination changes correctly', async () => { + render( + + + + + + + + + , + ); + + await wait(); + const rowsPerPageSelect = screen.getByTestId('table-pagination'); + fireEvent.change(rowsPerPageSelect, { target: { value: '10' } }); + expect(screen.getByText('10')).toBeInTheDocument(); + + const nextPageButton = screen.getByLabelText('Go to next page'); + fireEvent.click(nextPageButton); + }); + + test('handles loading state correctly', async () => { + const loadingLink = new StaticMockLink(LOADING_MOCKS, true); + render( + + + + + + + + + , + ); + + expect(screen.getByText('Loading...')).toBeInTheDocument(); + }); + + test('handles empty state correctly', async () => { + const emptyLink = new StaticMockLink(EMPTY_MOCKS, true); + render( + + + + + + + + + , + ); + + await wait(); + expect(screen.getByText('nothingToShow')).toBeInTheDocument(); + }); + + test('handles error state correctly', async () => { + const errorLink = new StaticMockLink(ERROR_MOCKS, true); + render( + + + + + + + + + , + ); + + await wait(); + expect( + screen.getByText('Failed to fetch organizations'), + ).toBeInTheDocument(); + }); + + test('handles window resize events correctly', async () => { + render( + + + + + + + + + , + ); + + await wait(); + resizeWindow(1000); + expect(screen.getByTestId('closeMenu')).toBeInTheDocument(); + resizeWindow(800); + expect(screen.getByTestId('openMenu')).toBeInTheDocument(); + }); }); diff --git a/src/screens/UserPortal/Organizations/Organizations.tsx b/src/screens/UserPortal/Organizations/Organizations.tsx index 59f5500d02..76f3283342 100644 --- a/src/screens/UserPortal/Organizations/Organizations.tsx +++ b/src/screens/UserPortal/Organizations/Organizations.tsx @@ -139,7 +139,6 @@ export default function organizations(): JSX.Element { * @param _event - The event triggering the page change. * @param newPage - The new page number. */ - /* istanbul ignore next */ const handleChangePage = ( _event: React.MouseEvent | null, newPage: number, @@ -152,12 +151,10 @@ export default function organizations(): JSX.Element { * * @param event - The event triggering the change. */ - /* istanbul ignore next */ const handleChangeRowsPerPage = ( event: React.ChangeEvent, ): void => { const newRowsPerPage = event.target.value; - setRowsPerPage(parseInt(newRowsPerPage, 10)); setPage(0); }; @@ -202,7 +199,6 @@ export default function organizations(): JSX.Element { /** * Updates the list of organizations based on query results and selected mode. */ - /* istanbul ignore next */ useEffect(() => { if (data) { const organizations = data.organizationsConnection.map( @@ -226,52 +222,42 @@ export default function organizations(): JSX.Element { ); setOrganizations(organizations); } - }, [data]); + }, [data, userId]); /** * Updates the list of organizations based on the selected mode and query results. */ - /* istanbul ignore next */ useEffect(() => { - if (mode === 0) { - if (data) { - const organizations = data.organizationsConnection.map( - (organization: InterfaceOrganization) => { - let membershipRequestStatus = ''; - if ( - organization.members.find( - (member: { _id: string }) => member._id === userId, - ) + if (mode === 0 && data) { + const organizations = data.organizationsConnection.map( + (organization: InterfaceOrganization) => { + let membershipRequestStatus = ''; + if ( + organization.members.find( + (member: { _id: string }) => member._id === userId, ) - membershipRequestStatus = 'accepted'; - else if ( - organization.membershipRequests.find( - (request: { user: { _id: string } }) => - request.user._id === userId, - ) + ) + membershipRequestStatus = 'accepted'; + else if ( + organization.membershipRequests.find( + (request: { user: { _id: string } }) => + request.user._id === userId, ) - membershipRequestStatus = 'pending'; - return { ...organization, membershipRequestStatus }; - }, - ); - setOrganizations(organizations); - } - } else if (mode === 1) { - if (joinedOrganizationsData && joinedOrganizationsData.users.length > 0) { - const organizations = - joinedOrganizationsData.users[0]?.user?.joinedOrganizations || []; - setOrganizations(organizations); - } - } else if (mode === 2) { - if ( - createdOrganizationsData && - createdOrganizationsData.users.length > 0 - ) { - const organizations = - createdOrganizationsData.users[0]?.appUserProfile - ?.createdOrganizations || []; - setOrganizations(organizations); - } + ) + membershipRequestStatus = 'pending'; + return { ...organization, membershipRequestStatus }; + }, + ); + setOrganizations(organizations); + } else if (mode === 1 && joinedOrganizationsData?.users?.length > 0) { + const organizations = + joinedOrganizationsData.users[0]?.user?.joinedOrganizations || []; + setOrganizations(organizations); + } else if (mode === 2 && createdOrganizationsData?.users?.length > 0) { + const organizations = + createdOrganizationsData.users[0]?.appUserProfile + ?.createdOrganizations || []; + setOrganizations(organizations); } }, [mode, data, joinedOrganizationsData, createdOrganizationsData, userId]);