diff --git a/public/images/svg/attendees.svg b/public/images/svg/attendees.svg index 3864a85b7e..cc1d4faa7e 100644 --- a/public/images/svg/attendees.svg +++ b/public/images/svg/attendees.svg @@ -1,4 +1,4 @@ - - + + diff --git a/public/images/svg/feedback.svg b/public/images/svg/feedback.svg index 649e84a1c9..06e403e8d9 100644 --- a/public/images/svg/feedback.svg +++ b/public/images/svg/feedback.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/public/images/svg/options-outline.svg b/public/images/svg/options-outline.svg index 939935eb11..4e02112f22 100644 --- a/public/images/svg/options-outline.svg +++ b/public/images/svg/options-outline.svg @@ -4,8 +4,8 @@ viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg"> - - - - + + + + diff --git a/public/images/svg/organization.svg b/public/images/svg/organization.svg index 9bed28f87e..bc58c97ded 100644 --- a/public/images/svg/organization.svg +++ b/public/images/svg/organization.svg @@ -5,12 +5,12 @@ fill="none" xmlns="http://www.w3.org/2000/svg"> - - + + - + \ No newline at end of file diff --git a/src/components/CheckIn/CheckInWrapper.spec.tsx b/src/components/CheckIn/CheckInWrapper.spec.tsx index 06b2695f88..ec689356e0 100644 --- a/src/components/CheckIn/CheckInWrapper.spec.tsx +++ b/src/components/CheckIn/CheckInWrapper.spec.tsx @@ -66,3 +66,78 @@ describe('Testing CheckIn Wrapper', () => { ); }); }); + +describe('CSS Styling Tests', () => { + const props = { + eventId: 'event123', + }; + + it('should have the correct button styling classes', () => { + render( + + + + + + + + + + + + , + ); + const button = screen.getByLabelText('checkInRegistrants'); + expect(button).toHaveClass('border-1'); + expect(button).toHaveClass('bg-white'); + expect(button).toHaveClass('mt-4'); + expect(button).toHaveClass('text-success'); + expect(button.className).toMatch(/createButton[^ ]*/); + }); + + it('should apply margin-top spacing to the button', () => { + render( + + + + + + + + + + + + , + ); + const button = screen.getByLabelText('checkInRegistrants'); + const styles = window.getComputedStyle(button); + expect(button).toHaveClass('mt-4'); + expect(styles.marginTop).not.toBe('0px'); + }); + + it('should maintain proper button layout with image and text', () => { + render( + + + + + + + + + + + + , + ); + const button = screen.getByLabelText('checkInRegistrants'); + const image = screen.getByAltText('Sort'); + expect(button).toContainElement(image); + expect(button).toHaveTextContent('Check In Registrants'); + expect( + button.innerHTML.indexOf('Sort') < + button.innerHTML.indexOf('Check In Registrants'), + ).toBe(true); + }); +}); diff --git a/src/components/CheckIn/CheckInWrapper.tsx b/src/components/CheckIn/CheckInWrapper.tsx index 7b35ce1483..34b91b2eeb 100644 --- a/src/components/CheckIn/CheckInWrapper.tsx +++ b/src/components/CheckIn/CheckInWrapper.tsx @@ -21,7 +21,7 @@ export const CheckInWrapper = ({ eventId }: PropType): JSX.Element => { <> diff --git a/src/components/EventManagement/EventRegistrant/EventRegistrants.spec.tsx b/src/components/EventManagement/EventRegistrant/EventRegistrants.spec.tsx index 828362706a..900ae79a38 100644 --- a/src/components/EventManagement/EventRegistrant/EventRegistrants.spec.tsx +++ b/src/components/EventManagement/EventRegistrant/EventRegistrants.spec.tsx @@ -13,6 +13,7 @@ import { REGISTRANTS_MOCKS } from './Registrations.mocks'; import { MOCKS as ATTENDEES_MOCKS } from '../EventAttendance/Attendance.mocks'; import { vi } from 'vitest'; import { EVENT_REGISTRANTS, EVENT_ATTENDEES } from 'GraphQl/Queries/Queries'; +import styles from '../../../style/app.module.css'; const COMBINED_MOCKS = [...REGISTRANTS_MOCKS, ...ATTENDEES_MOCKS]; @@ -261,4 +262,76 @@ describe('Event Registrants Component', () => { 'N/A', ); }); + + test('Filter button has correct styling classes', () => { + render( + + + + + + + + + , + ); + const filterButton = screen.getByTestId('filter-button'); + expect(filterButton).toHaveClass('border-1'); + expect(filterButton).toHaveClass('mx-4'); + expect(filterButton).toHaveClass('mt-4'); + expect(filterButton).toHaveClass(styles.createButton); + }); + + test('Table container has correct styling', () => { + render( + + + + + + + + + , + ); + const tableContainer = screen.getByRole('grid').closest('.mt-4'); + expect(tableContainer).toHaveClass('mt-4'); + expect(tableContainer).toHaveClass(styles.tableHead); + }); + + test('Table cells have custom cell styling', () => { + render( + + + + + + + + + , + ); + const headerCells = screen.getAllByRole('columnheader'); + headerCells.forEach((cell) => { + expect(cell).toHaveClass(styles.customcell); + }); + }); + + test('Table has correct ARIA attributes', () => { + render( + + + + + + + + + , + ); + const table = screen.getByRole('grid'); + const firstHeaderCell = screen.getByTestId('table-header-serial'); + expect(table).toHaveAttribute('aria-label'); + expect(firstHeaderCell).toHaveAttribute('aria-sort', 'none'); + }); }); diff --git a/src/components/EventManagement/EventRegistrant/EventRegistrants.tsx b/src/components/EventManagement/EventRegistrant/EventRegistrants.tsx index d6488025ac..fce782bd4d 100644 --- a/src/components/EventManagement/EventRegistrant/EventRegistrants.tsx +++ b/src/components/EventManagement/EventRegistrant/EventRegistrants.tsx @@ -112,7 +112,7 @@ function EventRegistrants(): JSX.Element { )}