From e774882dc24ece7bae9509492617591aa029886c Mon Sep 17 00:00:00 2001 From: hustlernik Date: Wed, 15 Jan 2025 11:04:49 +0530 Subject: [PATCH 01/10] ui fix --- .../EventCalendar/EventCalendar.tsx | 27 +-- src/components/EventCalendar/EventHeader.tsx | 41 +++-- src/components/EventCalendar/constants.js | 10 +- .../HolidayCards/HolidayCard.module.css | 12 -- src/components/HolidayCards/HolidayCard.tsx | 4 +- src/screens/UserPortal/Events/Events.tsx | 2 +- src/style/app.module.css | 160 +++++++++++++----- 7 files changed, 168 insertions(+), 88 deletions(-) diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx index c9048eb552..d2747c117d 100644 --- a/src/components/EventCalendar/EventCalendar.tsx +++ b/src/components/EventCalendar/EventCalendar.tsx @@ -198,11 +198,11 @@ const Calendar: React.FC = ({ } }; - const handleTodayButton = (): void => { - setCurrentYear(today.getFullYear()); - setCurrentMonth(today.getMonth()); - setCurrentDate(today.getDate()); - }; + // const handleTodayButton = (): void => { + // setCurrentYear(today.getFullYear()); + // setCurrentMonth(today.getMonth()); + // setCurrentDate(today.getDate()); + // }; const timezoneString = `UTC${ new Date().getTimezoneOffset() > 0 ? '-' : '+' @@ -348,7 +348,7 @@ const Calendar: React.FC = ({ {months[parseInt(holiday.date.slice(0, 2), 10) - 1]}{' '} {holiday.date.slice(3)} - {holiday.name} + {holiday.name} ))} @@ -357,21 +357,21 @@ const Calendar: React.FC = ({

Events

-
- - Holidays -
Events Created by Organization
-
+ {/*
Events Created by User +
*/} +
+ + Holidays
@@ -547,15 +547,16 @@ const Calendar: React.FC = ({ > -
+ {/*
-
+
*/}
)}
diff --git a/src/components/EventCalendar/EventHeader.tsx b/src/components/EventCalendar/EventHeader.tsx index d8f949ca97..607c3e31fe 100644 --- a/src/components/EventCalendar/EventHeader.tsx +++ b/src/components/EventCalendar/EventHeader.tsx @@ -1,9 +1,11 @@ import React, { useState } from 'react'; import { Button, Dropdown, Form } from 'react-bootstrap'; -import { Search } from '@mui/icons-material'; +import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined'; +import AddIcon from '@mui/icons-material/Add'; import styles from '../../style/app.module.css'; import { ViewType } from '../../screens/OrganizationEvents/OrganizationEvents'; import { useTranslation } from 'react-i18next'; +// import { FaWeight } from 'react-icons/fa'; /** * Props for the EventHeader component. @@ -34,7 +36,10 @@ function eventHeader({ }); return ( -
+
-
+ {/*
*/}
- +
+ +
diff --git a/src/components/EventCalendar/constants.js b/src/components/EventCalendar/constants.js index f2b770426c..3cacad758a 100644 --- a/src/components/EventCalendar/constants.js +++ b/src/components/EventCalendar/constants.js @@ -13,7 +13,15 @@ export const holidays = [ }, { name: 'Christmas Day', date: '12-25', month: 'December' }, // December 25th ]; -export const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; +export const weekdays = [ + 'Sunday', + 'Monday', + 'Tuesday', + 'Wednesday', + 'Thursday', + 'Friday', + 'Saturday', +]; export const months = [ 'January', 'February', diff --git a/src/components/HolidayCards/HolidayCard.module.css b/src/components/HolidayCards/HolidayCard.module.css index c7686ab870..e69de29bb2 100644 --- a/src/components/HolidayCards/HolidayCard.module.css +++ b/src/components/HolidayCards/HolidayCard.module.css @@ -1,12 +0,0 @@ -.card { - background-color: #b4dcb7; - font-size: 14px; - font-weight: 400; - display: flex; - padding: 8px 4px; - border-radius: 5px; - margin-bottom: 4px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} diff --git a/src/components/HolidayCards/HolidayCard.tsx b/src/components/HolidayCards/HolidayCard.tsx index 56ac86405d..f1c4d435f3 100644 --- a/src/components/HolidayCards/HolidayCard.tsx +++ b/src/components/HolidayCards/HolidayCard.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styles from './HolidayCard.module.css'; +import styles from './../../style/app.module.css'; // Props for the HolidayCard component interface InterfaceHolidayList { @@ -14,7 +14,7 @@ interface InterfaceHolidayList { */ const HolidayCard = (props: InterfaceHolidayList): JSX.Element => { /*istanbul ignore next*/ - return
{props?.holidayName}
; + return
{props?.holidayName}
; }; export default HolidayCard; diff --git a/src/screens/UserPortal/Events/Events.tsx b/src/screens/UserPortal/Events/Events.tsx index a6862c0a73..966163bbd9 100644 --- a/src/screens/UserPortal/Events/Events.tsx +++ b/src/screens/UserPortal/Events/Events.tsx @@ -222,7 +222,7 @@ export default function events(): JSX.Element { return ( <>
-
+
Date: Wed, 15 Jan 2025 11:59:24 +0530 Subject: [PATCH 02/10] ui fix --- src/components/HolidayCards/HolidayCard.module.css | 0 src/style/app.module.css | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) delete mode 100644 src/components/HolidayCards/HolidayCard.module.css diff --git a/src/components/HolidayCards/HolidayCard.module.css b/src/components/HolidayCards/HolidayCard.module.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/style/app.module.css b/src/style/app.module.css index 85a2ecbaa9..d1f57348f5 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -5590,7 +5590,7 @@ button[data-testid='createPostBtn'] { right: auto; overflow: auto; padding: 10px 4px 0px 4px; - background-color: var(--black-shadow-color); + background-color: var(--white-color); border: 1px solid var(--grey-border); border-radius: 5px; margin: 5px; From c99af0f31929b30c4c738d805c952f2926c713bf Mon Sep 17 00:00:00 2001 From: hustlernik Date: Wed, 15 Jan 2025 12:17:48 +0530 Subject: [PATCH 03/10] code coverage disable statement removed --- src/screens/UserPortal/Events/Events.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/screens/UserPortal/Events/Events.tsx b/src/screens/UserPortal/Events/Events.tsx index 966163bbd9..128aa768dd 100644 --- a/src/screens/UserPortal/Events/Events.tsx +++ b/src/screens/UserPortal/Events/Events.tsx @@ -121,8 +121,6 @@ export default function events(): JSX.Element { createChat: createChatCheck, }, }); - - /* istanbul ignore next */ if (createEventData) { toast.success(t('eventCreated') as string); refetch(); @@ -188,7 +186,6 @@ export default function events(): JSX.Element { }; // Update the list of events when the data from the query changes - /* istanbul ignore next */ React.useEffect(() => { if (data) { setEvents(data.eventsByOrganizationConnection); @@ -200,7 +197,6 @@ export default function events(): JSX.Element { * * @returns Void. */ - /* istanbul ignore next */ const showInviteModal = (): void => { setCreateEventmodalisOpen(true); }; @@ -211,9 +207,7 @@ export default function events(): JSX.Element { * @param item - The view type to set, or null to reset. * @returns Void. */ - /* istanbul ignore next */ const handleChangeView = (item: string | null): void => { - /*istanbul ignore next*/ if (item) { setViewType(item as ViewType); } From e4e91a7cd7e06147255c9d16605916176f8ae63a Mon Sep 17 00:00:00 2001 From: hustlernik Date: Wed, 15 Jan 2025 12:21:39 +0530 Subject: [PATCH 04/10] code coverage disable statement removed --- src/components/HolidayCards/HolidayCard.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/HolidayCards/HolidayCard.tsx b/src/components/HolidayCards/HolidayCard.tsx index f1c4d435f3..c956194f86 100644 --- a/src/components/HolidayCards/HolidayCard.tsx +++ b/src/components/HolidayCards/HolidayCard.tsx @@ -13,7 +13,6 @@ interface InterfaceHolidayList { * @returns JSX element representing a card with the holiday name. */ const HolidayCard = (props: InterfaceHolidayList): JSX.Element => { - /*istanbul ignore next*/ return
{props?.holidayName}
; }; From 9215fbf640c290a4f3b2a95194712ff815cfab1c Mon Sep 17 00:00:00 2001 From: hustlernik Date: Wed, 15 Jan 2025 13:03:31 +0530 Subject: [PATCH 05/10] code coverage disable statement remove --- src/screens/UserPortal/Events/Events.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/screens/UserPortal/Events/Events.tsx b/src/screens/UserPortal/Events/Events.tsx index 128aa768dd..be80069216 100644 --- a/src/screens/UserPortal/Events/Events.tsx +++ b/src/screens/UserPortal/Events/Events.tsx @@ -135,7 +135,6 @@ export default function events(): JSX.Element { setCreateEventmodalisOpen(false); } catch (error: unknown) { console.error('create event error', error); - /* istanbul ignore next */ errorHandler(t, error); } }; From 25ec7012feac5fbc47ce2bba716896b1e0f7baf0 Mon Sep 17 00:00:00 2001 From: hustlernik Date: Wed, 15 Jan 2025 13:06:51 +0530 Subject: [PATCH 06/10] code coverage statement remove --- src/screens/UserPortal/Events/Events.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/screens/UserPortal/Events/Events.tsx b/src/screens/UserPortal/Events/Events.tsx index be80069216..2e3cadedc3 100644 --- a/src/screens/UserPortal/Events/Events.tsx +++ b/src/screens/UserPortal/Events/Events.tsx @@ -144,7 +144,6 @@ export default function events(): JSX.Element { * * @returns Void. */ - /* istanbul ignore next */ const toggleCreateEventModal = (): void => setCreateEventmodalisOpen(!createEventModal); From 26fcd03ae975f57812356311e82f37b9f6252944 Mon Sep 17 00:00:00 2001 From: hustlernik Date: Wed, 15 Jan 2025 13:26:03 +0530 Subject: [PATCH 07/10] fix --- .../HolidayCards/HolidayCard.spec.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/components/HolidayCards/HolidayCard.spec.tsx diff --git a/src/components/HolidayCards/HolidayCard.spec.tsx b/src/components/HolidayCards/HolidayCard.spec.tsx new file mode 100644 index 0000000000..e577f5864d --- /dev/null +++ b/src/components/HolidayCards/HolidayCard.spec.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { vi, describe, it, expect } from 'vitest'; +import HolidayCard from './HolidayCard'; + +// Mock styles for testing +vi.mock('./../../style/app.module.css', () => ({ + default: {}, + holidayCard: 'holidayCard', +})); + +describe('HolidayCard Component', () => { + it('renders correctly with the given holiday name', () => { + const holidayName = 'Christmas'; + + render(); + + // Assert that the holiday name is displayed + const cardElement = screen.getByText(holidayName); + expect(cardElement).toBeInTheDocument(); + }); +}); From c0e0005b80f7a8c580348473c56c18fc4e9e8950 Mon Sep 17 00:00:00 2001 From: hustlernik Date: Wed, 15 Jan 2025 14:10:46 +0530 Subject: [PATCH 08/10] fix test --- .../EventCalendar/EventCalendar.tsx | 6 ---- .../HolidayCards/HolidayCard.spec.tsx | 16 +++++++++-- src/components/HolidayCards/HolidayCard.tsx | 6 +++- src/style/app.module.css | 28 ------------------- 4 files changed, 18 insertions(+), 38 deletions(-) diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx index e8e2a600cc..89a92d12b9 100644 --- a/src/components/EventCalendar/EventCalendar.tsx +++ b/src/components/EventCalendar/EventCalendar.tsx @@ -363,12 +363,6 @@ const Calendar: React.FC = ({ Events Created by Organization
- {/*
- - - Events Created by User - -
*/}
Holidays diff --git a/src/components/HolidayCards/HolidayCard.spec.tsx b/src/components/HolidayCards/HolidayCard.spec.tsx index e577f5864d..076180391d 100644 --- a/src/components/HolidayCards/HolidayCard.spec.tsx +++ b/src/components/HolidayCards/HolidayCard.spec.tsx @@ -12,11 +12,21 @@ vi.mock('./../../style/app.module.css', () => ({ describe('HolidayCard Component', () => { it('renders correctly with the given holiday name', () => { const holidayName = 'Christmas'; - render(); - - // Assert that the holiday name is displayed const cardElement = screen.getByText(holidayName); expect(cardElement).toBeInTheDocument(); }); + + it('handles empty holiday name gracefully', () => { + render(); + const cardElement = screen.getByTestId('holiday-card'); + expect(cardElement).toBeInTheDocument(); + }); + + it('handles long holiday names appropriately', () => { + const longName = 'Very Long Holiday Name That Might Cause Wrapping Issues'; + render(); + const cardElement = screen.getByText(longName); + expect(cardElement).toBeInTheDocument(); + }); }); diff --git a/src/components/HolidayCards/HolidayCard.tsx b/src/components/HolidayCards/HolidayCard.tsx index c956194f86..5bcc9f95f5 100644 --- a/src/components/HolidayCards/HolidayCard.tsx +++ b/src/components/HolidayCards/HolidayCard.tsx @@ -13,7 +13,11 @@ interface InterfaceHolidayList { * @returns JSX element representing a card with the holiday name. */ const HolidayCard = (props: InterfaceHolidayList): JSX.Element => { - return
{props?.holidayName}
; + return ( +
+ {props?.holidayName} +
+ ); }; export default HolidayCard; diff --git a/src/style/app.module.css b/src/style/app.module.css index d1f57348f5..04b4481a35 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -5811,34 +5811,6 @@ button[data-testid='createPostBtn'] { } */ } -@media (max-width: 520px) { - .calendar__header { - display: flex; - flex-direction: column; - align-items: stretch; - gap: 10px; - } - - .space { - display: block !important; - text-align: center; - } - - .space > * { - width: 100%; - margin-bottom: 10px; - } - - /* .input { - width: 100%; - } - - .createButton { - margin: 0 auto; - width: 100%; - } */ -} - /* EventListCardModals.tsx */ .dispflexEventListCardModals { From 5ca7439d87586ac5d3aede7eb0b05aff6cead930 Mon Sep 17 00:00:00 2001 From: hustlernik Date: Wed, 15 Jan 2025 19:33:22 +0530 Subject: [PATCH 09/10] test fix --- .../HolidayCards/HolidayCard.spec.tsx | 57 ++++++++++++------- 1 file changed, 38 insertions(+), 19 deletions(-) diff --git a/src/components/HolidayCards/HolidayCard.spec.tsx b/src/components/HolidayCards/HolidayCard.spec.tsx index 076180391d..cb865a267b 100644 --- a/src/components/HolidayCards/HolidayCard.spec.tsx +++ b/src/components/HolidayCards/HolidayCard.spec.tsx @@ -1,32 +1,51 @@ import React from 'react'; +import { describe, test, expect } from 'vitest'; import { render, screen } from '@testing-library/react'; -import { vi, describe, it, expect } from 'vitest'; import HolidayCard from './HolidayCard'; - -// Mock styles for testing -vi.mock('./../../style/app.module.css', () => ({ - default: {}, - holidayCard: 'holidayCard', -})); +import styles from './../../style/app.module.css'; describe('HolidayCard Component', () => { - it('renders correctly with the given holiday name', () => { - const holidayName = 'Christmas'; - render(); - const cardElement = screen.getByText(holidayName); - expect(cardElement).toBeInTheDocument(); + test('renders without crashing', () => { + render(); + expect(screen.getByTestId('holiday-card')).toBeDefined(); + }); + + test('displays the provided holiday name', () => { + const testHolidayName = 'New Year'; + render(); + + const cardElement = screen.getByTestId('holiday-card'); + expect(cardElement.textContent).toBe(testHolidayName); }); - it('handles empty holiday name gracefully', () => { + test('applies the correct CSS class', () => { + render(); + + const cardElement = screen.getByTestId('holiday-card'); + expect(cardElement.className).toBe(styles.holidayCard); + }); + + test('handles empty holiday name', () => { render(); + const cardElement = screen.getByTestId('holiday-card'); - expect(cardElement).toBeInTheDocument(); + expect(cardElement.textContent).toBe(''); }); - it('handles long holiday names appropriately', () => { - const longName = 'Very Long Holiday Name That Might Cause Wrapping Issues'; - render(); - const cardElement = screen.getByText(longName); - expect(cardElement).toBeInTheDocument(); + test('handles long holiday names', () => { + const longHolidayName = 'International Talk Like a Pirate Day Celebration'; + render(); + + const cardElement = screen.getByTestId('holiday-card'); + expect(cardElement.textContent).toBe(longHolidayName); + }); + + // TypeScript compile-time tests + test('TypeScript props validation', () => { + // @ts-expect-error - Testing TypeScript validation for missing required prop + render(); + + // @ts-expect-error - Testing TypeScript validation for wrong prop type + render(); }); }); From 6e1f485049a9539ad24c2c1ca8beabd9bddaa39d Mon Sep 17 00:00:00 2001 From: hustlernik Date: Wed, 15 Jan 2025 20:52:12 +0530 Subject: [PATCH 10/10] fix failing test --- .../EventCalendar/EventCalendar.tsx | 69 ++++++++++--------- src/screens/UserPortal/Events/Events.spec.tsx | 2 +- src/style/app.module.css | 7 ++ 3 files changed, 43 insertions(+), 35 deletions(-) diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx index 89a92d12b9..01426ca047 100644 --- a/src/components/EventCalendar/EventCalendar.tsx +++ b/src/components/EventCalendar/EventCalendar.tsx @@ -198,11 +198,11 @@ const Calendar: React.FC = ({ } }; - // const handleTodayButton = (): void => { - // setCurrentYear(today.getFullYear()); - // setCurrentMonth(today.getMonth()); - // setCurrentDate(today.getDate()); - // }; + const handleTodayButton = (): void => { + setCurrentYear(today.getFullYear()); + setCurrentMonth(today.getMonth()); + setCurrentDate(today.getDate()); + }; const timezoneString = `UTC${ new Date().getTimezoneOffset() > 0 ? '-' : '+' @@ -513,44 +513,45 @@ const Calendar: React.FC = ({
{viewType != ViewType.YEAR && (
- +
+ -
- {viewType == ViewType.DAY ? `${currentDate}` : ``} {currentYear}{' '} -
{months[currentMonth]}
+
+ {viewType == ViewType.DAY ? `${currentDate}` : ``} {currentYear}{' '} +
{months[currentMonth]}
+
+
- - {/*
+
-
*/} +
)}
diff --git a/src/screens/UserPortal/Events/Events.spec.tsx b/src/screens/UserPortal/Events/Events.spec.tsx index 0e49402019..86d257a937 100644 --- a/src/screens/UserPortal/Events/Events.spec.tsx +++ b/src/screens/UserPortal/Events/Events.spec.tsx @@ -650,7 +650,7 @@ describe('Testing Events Screen [User Portal]', () => { const calenderView = 'Calendar View'; expect(screen.queryAllByText(calenderView)).not.toBeNull(); - expect(screen.getByText('Sun')).toBeInTheDocument(); + expect(screen.getByText('Sunday')).toBeInTheDocument(); }); it('Testing DatePicker and TimePicker', async () => { diff --git a/src/style/app.module.css b/src/style/app.module.css index 04b4481a35..fea01199a5 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -5426,9 +5426,16 @@ button[data-testid='createPostBtn'] { .calendar__header { display: flex; align-items: center; + justify-content: space-between; + margin-right: 50px; /* margin: 2rem 10px 0px 10px; */ } +.calender_month { + display: flex; + align-items: center; +} + .calendar__header_month { margin: 0.5rem; color: var(--grey-dark);