Skip to content

Commit

Permalink
Merge branch 'develop' into feat/websocketurl
Browse files Browse the repository at this point in the history
  • Loading branch information
@adithyanotfound
adithyanotfound authored Nov 3, 2024
2 parents a604965 + e670a8b commit d38549a
Showing 1 changed file with 142 additions and 28 deletions.
170 changes: 142 additions & 28 deletions src/components/UserPortal/UserSidebar/UserSidebar.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import type { RenderResult } from '@testing-library/react';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';

import styles from './UserSidebar.module.css';
import {
USER_DETAILS,
USER_JOINED_ORGANIZATIONS,
Expand All @@ -15,6 +15,7 @@ import i18nForTest from 'utils/i18nForTest';
import { StaticMockLink } from 'utils/StaticMockLink';
import UserSidebar from './UserSidebar';
import useLocalStorage from 'utils/useLocalstorage';
import userEvent from '@testing-library/user-event';

const { setItem } = useLocalStorage();

Expand Down Expand Up @@ -363,40 +364,57 @@ const renderUserSidebar = (
);
};

describe('Testing UserSidebar Component [User Portal]', () => {
describe('UserSidebar Component Tests in User Portal', () => {
beforeEach(() => {
jest.clearAllMocks();
});

test('Component should be rendered properly', async () => {
test('UserSidebar component renders correctly with user data present', async () => {
await act(async () => {
renderUserSidebar('properId', link);
await wait();
});
expect(screen.getByText('Talawa User Portal')).toBeInTheDocument();
});

test('Component should be rendered properly when userImage is present', async () => {
test('Displays the logo and title text of the User Portal', async () => {
await act(async () => {
renderUserSidebar('imagePresent', link);
renderUserSidebar('properId', link);
await wait();
});
expect(screen.getByText('Talawa User Portal')).toBeInTheDocument();
expect(screen.getByTestId('leftDrawerContainer')).toBeVisible();
});

test('Component should be rendered properly when organizationImage is present', async () => {
test('UserSidebar renders correctly when joinedOrganizations list is empty', async () => {
await act(async () => {
renderUserSidebar('orgEmpty', link);
await wait();
});
expect(screen.getByText('My Organizations')).toBeInTheDocument();
});

test('Renders UserSidebar component with organization image when present', async () => {
await act(async () => {
renderUserSidebar('imagePresent', link);
await wait();
});
expect(screen.getByText('Settings')).toBeInTheDocument();
});

test('Component should be rendered properly when joinedOrganizations list is empty', async () => {
test('User profile data renders with all expected navigation links visible', async () => {
await act(async () => {
renderUserSidebar('orgEmpty', link);
renderUserSidebar('properId', link);
await wait();
});

const expectedLinks = ['My Organizations', 'Settings', 'Chat'];
expectedLinks.forEach((link) => {
expect(screen.getByText(link)).toBeInTheDocument();
});
});

test('Testing Drawer when the screen size is less than or equal to 820px', async () => {
test('UserSidebar renders correctly on smaller screens and toggles drawer visibility', async () => {
await act(async () => {
resizeWindow(800);
render(
Expand All @@ -411,28 +429,124 @@ describe('Testing UserSidebar Component [User Portal]', () => {
</MockedProvider>,
);
});
expect(screen.getByText('My Organizations')).toBeInTheDocument();
expect(screen.getByText('Settings')).toBeInTheDocument();
expect(screen.getByText('Talawa User Portal')).toBeInTheDocument();
const settingsBtn = screen.getByText('Settings');
const orgsBtn = screen.getByTestId('orgsBtn');
act(() => orgsBtn.click());
expect(props.setHideDrawer).toHaveBeenCalledWith(true);
});

const orgsBtn = screen.getAllByTestId(/orgsBtn/i);
test('Active route button style changes correctly upon click', async () => {
await act(async () => {
renderUserSidebar('properId', link);
await wait();
});

act(() => {
orgsBtn[0].click();
const orgsBtn = screen.getByTestId('orgsBtn');
const settingsBtn = screen.getByTestId('settingsBtn');

fireEvent.click(orgsBtn);
expect(orgsBtn).toHaveClass('text-white btn btn-success');
fireEvent.click(settingsBtn);
expect(settingsBtn).toHaveClass('text-white btn btn-success');
});

test('Translation hook displays expected text in UserSidebar', async () => {
await act(async () => {
renderUserSidebar('properId', link);
await wait();
});
expect(
screen.getByText(i18nForTest.t('common:settings')),
).toBeInTheDocument();
});

test('handleLinkClick function closes the sidebar on mobile view when a link is clicked', async () => {
resizeWindow(800);
await act(async () => {
renderUserSidebar('properId', link);
await wait();
});
await waitFor(() =>
expect(
orgsBtn[0].className.includes('text-white btn btn-success'),
).toBeTruthy(),
);
act(() => {
settingsBtn.click();
const chatBtn = screen.getByTestId('chatBtn');
fireEvent.click(chatBtn);
expect(props.setHideDrawer).toHaveBeenCalledWith(true);
});

describe('UserSidebar Drawer Visibility Tests on Smaller Screens', () => {
beforeEach(() => {
jest.clearAllMocks();
});

test('Clicking a link closes the drawer when window width is 820px or less', () => {
act(() => {
window.innerWidth = 820;
window.dispatchEvent(new Event('resize'));
});

render(
<MockedProvider addTypename={false}>
<BrowserRouter>
<Provider store={store}>
<I18nextProvider i18n={i18nForTest}>
<UserSidebar {...props} />
</I18nextProvider>
</Provider>
</BrowserRouter>
</MockedProvider>,
);

const linkElement = screen.getByText('My Organizations'); // Adjust text if different
fireEvent.click(linkElement);

expect(props.setHideDrawer).toHaveBeenCalledWith(true);
});

describe('UserSidebar Drawer State Tests', () => {
test('Drawer visibility changes based on hideDrawer prop', () => {
const { rerender } = render(
<MockedProvider addTypename={false}>
<BrowserRouter>
<Provider store={store}>
<I18nextProvider i18n={i18nForTest}>
<UserSidebar {...props} hideDrawer={null} />
</I18nextProvider>
</Provider>
</BrowserRouter>
</MockedProvider>,
);

expect(screen.getByTestId('leftDrawerContainer')).toHaveClass(
styles.hideElemByDefault,
);

rerender(
<MockedProvider addTypename={false}>
<BrowserRouter>
<Provider store={store}>
<I18nextProvider i18n={i18nForTest}>
<UserSidebar {...props} hideDrawer={true} />
</I18nextProvider>
</Provider>
</BrowserRouter>
</MockedProvider>,
);
expect(screen.getByTestId('leftDrawerContainer')).toHaveClass(
styles.inactiveDrawer,
);

rerender(
<MockedProvider addTypename={false}>
<BrowserRouter>
<Provider store={store}>
<I18nextProvider i18n={i18nForTest}>
<UserSidebar {...props} hideDrawer={false} />
</I18nextProvider>
</Provider>
</BrowserRouter>
</MockedProvider>,
);
expect(screen.getByTestId('leftDrawerContainer')).toHaveClass(
styles.activeDrawer,
);
});
});
await waitFor(() =>
expect(
settingsBtn.className.includes('text-white btn btn-success'),
).toBeTruthy(),
);
});
});

0 comments on commit d38549a

Please sign in to comment.