{
});
});
});
+
+describe('CSS Styling Tests', () => {
+ it('should style the search input and button correctly', async () => {
+ renderEventAttendance();
+ await wait();
+
+ const searchContainer = screen.getByTestId('searchByName').parentElement;
+ expect(searchContainer).toHaveClass(styles.input, 'me-3');
+
+ const searchInput = screen.getByTestId('searchByName');
+ expect(searchInput).toHaveClass('bg-white', 'border');
+
+ const searchButton = searchContainer?.querySelector('button');
+ expect(searchButton).toHaveClass(
+ 'position-absolute',
+ 'z-10',
+ 'bottom-0',
+ 'end-0',
+ 'h-100',
+ styles.regularBtn,
+ );
+ });
+
+ it('should style the statistics button correctly', async () => {
+ renderEventAttendance();
+ await wait();
+
+ const statsButton = screen.getByTestId('stats-modal');
+ expect(statsButton).toHaveClass('border-1', styles.regularBtn);
+ });
+
+ it('should style the filter and sort dropdowns correctly', async () => {
+ renderEventAttendance();
+ await wait();
+
+ const filterDropdown = screen.getByTestId('filter-dropdown');
+ expect(filterDropdown).toHaveClass(styles.dropdown, 'mx-4');
+ });
+
+ it('should style the table cells correctly', async () => {
+ renderEventAttendance();
+ await wait();
+
+ const headerCells = screen.getAllByRole('columnheader');
+ headerCells.forEach((cell) => {
+ expect(cell).toHaveClass(styles.customcell);
+ });
+ });
+
+ it('should style the table container with proper spacing', async () => {
+ renderEventAttendance();
+ await wait();
+
+ const tableContainer = screen.getByRole('grid').parentElement;
+ expect(tableContainer).toHaveClass('mt-3');
+ });
+
+ it('should style the header controls container correctly', async () => {
+ renderEventAttendance();
+ await wait();
+
+ const controlsContainer = screen.getByTestId('stats-modal').parentElement;
+ expect(controlsContainer).toHaveClass(
+ 'd-flex',
+ 'justify-content-between',
+ 'align-items-center',
+ 'mb-3',
+ );
+
+ const rightControls = controlsContainer?.querySelector(
+ '.d-flex.align-items-center',
+ );
+ expect(rightControls).not.toBeNull();
+ expect(rightControls).toBeInTheDocument();
+ });
+});
diff --git a/src/components/EventManagement/EventAttendance/EventAttendance.tsx b/src/components/EventManagement/EventAttendance/EventAttendance.tsx
index 3f3f140497..b67ba22f69 100644
--- a/src/components/EventManagement/EventAttendance/EventAttendance.tsx
+++ b/src/components/EventManagement/EventAttendance/EventAttendance.tsx
@@ -54,8 +54,7 @@ function EventAttendance(): JSX.Element {
const nameB = `${b.firstName} ${b.lastName}`.toLowerCase();
return sortOrder === 'ascending'
? nameA.localeCompare(nameB)
- : /*istanbul ignore next*/
- nameB.localeCompare(nameA);
+ : nameB.localeCompare(nameA);
});
};
@@ -68,8 +67,7 @@ function EventAttendance(): JSX.Element {
const isSameYear = attendeeDate.getFullYear() === now.getFullYear();
return filteringBy === 'This Month'
? isSameYear && attendeeDate.getMonth() === now.getMonth()
- : /*istanbul ignore next*/
- isSameYear;
+ : isSameYear;
});
};
@@ -138,7 +136,6 @@ function EventAttendance(): JSX.Element {
}, [eventId, getEventAttendees]);
if (loading) return
{t('loading')}
;
- /*istanbul ignore next*/
if (error) return
{error.message}
;
return (
@@ -152,7 +149,7 @@ function EventAttendance(): JSX.Element {
/>
-
+
-
-
+
+
@@ -137,25 +137,25 @@ function EventRegistrants(): JSX.Element {
{t('registrant')}
{t('registeredAt')}
{t('createdAt')}
{t('addRegistrant')}
diff --git a/src/screens/EventManagement/EventManagement.tsx b/src/screens/EventManagement/EventManagement.tsx
index 21c23c5bb3..33bc04f4f5 100644
--- a/src/screens/EventManagement/EventManagement.tsx
+++ b/src/screens/EventManagement/EventManagement.tsx
@@ -10,6 +10,7 @@ import { IoMdStats, IoIosHand } from 'react-icons/io';
import EventAgendaItemsIcon from 'assets/svgs/agenda-items.svg?react';
import { useTranslation } from 'react-i18next';
import { Button, Dropdown } from 'react-bootstrap';
+import styles from '../../style/app.module.css';
import EventDashboard from 'components/EventManagement/Dashboard/EventDashboard';
import OrganizationActionItems from 'screens/OrganizationActionItems/OrganizationActionItems';
@@ -134,16 +135,15 @@ const EventManagement = (): JSX.Element => {
icon: React.ReactNode;
}): JSX.Element => {
const selected = tab === value;
- const variant = selected ? 'success' : 'light';
+ const variant = selected ? 'secondary' : 'light';
const translatedText = t(value);
const className = selected
- ? 'px-4 d-flex align-items-center rounded-3 shadow-sm'
+ ? `px-4 d-flex align-items-center rounded-3 shadow-sm ${styles.createButton}`
: 'text-secondary bg-white px-4 d-flex align-items-center rounded-3 shadow-sm';
const props = {
variant,
className,
- style: { height: '2.5rem' },
onClick: () => setTab(value),
'data-testid': `${value}Btn`,
};
@@ -221,19 +221,28 @@ const EventManagement = (): JSX.Element => {
switch (tab) {
case 'dashboard':
return (
-
+
);
case 'registrants':
return (
-
+
);
case 'attendance':
return (
-
+
);
@@ -257,13 +266,19 @@ const EventManagement = (): JSX.Element => {
);
case 'agendas':
return (
-
+
);
case 'statistics':
return (
-
+
Statistics
);
diff --git a/src/screens/EventVolunteers/Requests/Requests.spec.tsx b/src/screens/EventVolunteers/Requests/Requests.spec.tsx
index e51e28ab3f..cd15a20188 100644
--- a/src/screens/EventVolunteers/Requests/Requests.spec.tsx
+++ b/src/screens/EventVolunteers/Requests/Requests.spec.tsx
@@ -28,6 +28,7 @@ import {
} from './Requests.mocks';
import { toast } from 'react-toastify';
import { vi } from 'vitest';
+import styles from '../../../style/app.module.css';
vi.mock('react-toastify', () => ({
toast: {
@@ -235,3 +236,69 @@ describe('Testing Requests Screen', () => {
});
});
});
+
+describe('Requests Component Styling', () => {
+ const renderComponent = (): RenderResult => {
+ return render(
+
+
+
+
+
+
+ } />
+
+
+
+
+
+ ,
+ );
+ };
+
+ beforeAll(() => {
+ vi.mock('react-router-dom', async () => ({
+ ...(await vi.importActual('react-router-dom')),
+ useParams: () => ({ orgId: 'orgId', eventId: 'eventId' }),
+ }));
+ });
+
+ it('should apply correct styles to the container', async () => {
+ renderComponent();
+ const container = await screen.findByTestId('searchBy');
+ expect(container.parentElement).toHaveClass(styles.input);
+ });
+
+ it('should apply correct styles to the search button', async () => {
+ renderComponent();
+ const searchButton = await screen.findByTestId('searchBtn');
+ expect(searchButton).toHaveClass(styles.regularBtn);
+ expect(searchButton).toHaveStyle({
+ marginBottom: '10px',
+ });
+ });
+
+ it('should apply correct styles to volunteer images', async () => {
+ renderComponent();
+ const volunteerImages = await screen.findAllByTestId('volunteer_image');
+ volunteerImages.forEach((image) => {
+ expect(image).toHaveClass(styles.TableImages);
+ });
+ });
+
+ it('should apply correct styles to avatar container', async () => {
+ renderComponent();
+ const avatarContainers = document.querySelectorAll(
+ `.${styles.avatarContainer}`,
+ );
+ avatarContainers.forEach((container) => {
+ expect(container).toBeInTheDocument();
+ });
+ });
+
+ it('should apply correct styles to the input fields', async () => {
+ renderComponent();
+ const input = await screen.findByTestId('searchBy');
+ expect(input).toHaveClass(styles.inputFields);
+ });
+});
diff --git a/src/screens/EventVolunteers/Requests/Requests.tsx b/src/screens/EventVolunteers/Requests/Requests.tsx
index d8efd92a90..902e09e585 100644
--- a/src/screens/EventVolunteers/Requests/Requests.tsx
+++ b/src/screens/EventVolunteers/Requests/Requests.tsx
@@ -271,7 +271,7 @@ function requests(): JSX.Element {
/>