From 7c289c8eff5b0fa27fc702b80edd47570c9f6515 Mon Sep 17 00:00:00 2001 From: skbhagat0502 Date: Tue, 7 Nov 2023 02:05:49 +0530 Subject: [PATCH 1/5] Fix layout distortion due to untruncated title description of events --- .../EventListCard/EventListCard.module.css | 17 ++++++++++- .../EventListCard/EventListCard.tsx | 30 +++++++++++++++++-- .../LeftDrawerEvent/LeftDrawerEvent.tsx | 12 ++++++-- .../EventDashboard/EventDashboard.module.css | 2 +- src/screens/EventDashboard/EventDashboard.tsx | 4 +-- 5 files changed, 56 insertions(+), 9 deletions(-) diff --git a/src/components/EventListCard/EventListCard.module.css b/src/components/EventListCard/EventListCard.module.css index 5b128d075d..2854738252 100644 --- a/src/components/EventListCard/EventListCard.module.css +++ b/src/components/EventListCard/EventListCard.module.css @@ -17,9 +17,24 @@ .cards a:hover { color: black; } +.cards { + position: relative; + overflow: hidden; + transition: all 0.3s; +} .dispflex { display: flex; - justify-content: space-between; + height: 50px; + transition: transform 0.3s ease; + cursor: pointer; +} +.cards:hover { + transform: scale(2.5); + z-index: 5; +} +.cards:hover h2 { + font-size: 0.4vmax; + margin-bottom: 0; } .iconContainer { display: flex; diff --git a/src/components/EventListCard/EventListCard.tsx b/src/components/EventListCard/EventListCard.tsx index 7f817890de..e56e38840f 100644 --- a/src/components/EventListCard/EventListCard.tsx +++ b/src/components/EventListCard/EventListCard.tsx @@ -140,7 +140,17 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element { >

- {props.eventName ? <>{props.eventName} : <>Dogs Care}{' '} + {props.eventName ? ( + <> + {props.eventName.length > 150 ? ( + <>{props.eventName.substring(0, 150)}... + ) : ( + <>{props.eventName} + )} + + ) : ( + <>Dogs Care + )}

@@ -162,7 +172,17 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {

{t('eventTitle')}:{' '} - {props.eventName ? <>{props.eventName} : <>Dogs Care}{' '} + {props.eventName ? ( + <> + {props.eventName.length > 100 ? ( + <>{props.eventName.substring(0, 100)}... + ) : ( + <>{props.eventName} + )} + + ) : ( + <>Dogs Care + )}

@@ -177,7 +197,11 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {

{t('description')}:{' '} - {props.eventDescription} + + {props.eventDescription && props.eventDescription.length > 256 + ? props.eventDescription.substring(0, 256) + '...' + : props.eventDescription} +

{t('on')}: {props.regDate} diff --git a/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx b/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx index 1981eb12f0..2e3ac65cde 100644 --- a/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx +++ b/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx @@ -84,8 +84,16 @@ const leftDrawerEvent = ({ />

- {event.title} - {event.description} + + {event.title && event.title.length > 20 + ? event.title.substring(0, 20) + '...' + : event.title} + + + {event.description && event.description.length > 30 + ? event.description.substring(0, 30) + '...' + : event.description} +
diff --git a/src/screens/EventDashboard/EventDashboard.module.css b/src/screens/EventDashboard/EventDashboard.module.css index 5a484443d8..10ac2ee4ed 100644 --- a/src/screens/EventDashboard/EventDashboard.module.css +++ b/src/screens/EventDashboard/EventDashboard.module.css @@ -41,7 +41,7 @@ font-size: 20px; margin-bottom: 30px; padding-bottom: 5px; - width: 26%; + width: 100%; } .tagdetailsGreen > button { background-color: #31bb6b; diff --git a/src/screens/EventDashboard/EventDashboard.tsx b/src/screens/EventDashboard/EventDashboard.tsx index 810e8335c6..80f1374b71 100644 --- a/src/screens/EventDashboard/EventDashboard.tsx +++ b/src/screens/EventDashboard/EventDashboard.tsx @@ -80,7 +80,7 @@ const EventDashboard = (): JSX.Element => { setShowAddEventProjectModal={setShowAddEventProjectModal} > - +
{/* Side Bar - Static Information about the Event */} @@ -110,7 +110,7 @@ const EventDashboard = (): JSX.Element => {
- + {/* Main Screen Container */}
From 3877db9c22a67b7dc2b389ba1ba058da11df0e44 Mon Sep 17 00:00:00 2001 From: skbhagat0502 Date: Tue, 7 Nov 2023 14:55:07 +0530 Subject: [PATCH 2/5] Add test --- .../EventListCard/EventListCard.test.tsx | 40 +++++++++++++++++++ .../LeftDrawerEvent/LeftDrawerEvent.test.tsx | 24 +++++++++++ 2 files changed, 64 insertions(+) diff --git a/src/components/EventListCard/EventListCard.test.tsx b/src/components/EventListCard/EventListCard.test.tsx index ee48e2f871..61eaa4acb7 100644 --- a/src/components/EventListCard/EventListCard.test.tsx +++ b/src/components/EventListCard/EventListCard.test.tsx @@ -268,4 +268,44 @@ describe('Testing Event List Card', () => { fireEvent.click(deleteBtn); }); }); + + test('Should render truncated event details', async () => { + const longEventName = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. A very long event name that exceeds 150 characters and needs to be truncated'; + const longDescription = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. A very long description that exceeds 150 characters and needs to be truncated'; + const longEventNameLength = longEventName.length; + const longDescriptionLength = longDescription.length; + const truncatedEventName = longEventName.substring(0, 150) + '...'; + const truncatedDescriptionName = longDescription.substring(0, 150) + '...'; + render( + + + + + + ); + + await wait(); + + expect(longEventNameLength).toBeGreaterThan(100); + expect(longDescriptionLength).toBeGreaterThan(256); + expect(truncatedEventName).toContain('...'); + expect(truncatedDescriptionName).toContain('...'); + await wait(); + }); }); diff --git a/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx b/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx index f6187ce9c6..b5c45ff983 100644 --- a/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx +++ b/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx @@ -184,4 +184,28 @@ describe('Testing Left Drawer component for the Event Dashboard', () => { expect(localStorage.clear).toHaveBeenCalled(); expect(global.window.location.pathname).toBe('/'); }); + + test('Should render truncated event details at the sidebar', async () => { + const longEventName = + 'A very long event name that exceeds 20 characters and needs to be truncated'; + const longDescription = + 'A very long description that exceeds 30 characters and needs to be truncated'; + const longEventNameLength = longEventName.length; + const longDescriptionLength = longDescription.length; + const truncatedEventName = longEventName.substring(0, 20) + '...'; + const truncatedDescriptionName = longDescription.substring(0, 30) + '...'; + render( + + + + + + + + ); + expect(longEventNameLength).toBeGreaterThan(20); + expect(longDescriptionLength).toBeGreaterThan(30); + expect(truncatedEventName).toContain('...'); + expect(truncatedDescriptionName).toContain('...'); + }); }); From 174e609aa0d4836b23fb6bd1c99a7ee78df25d59 Mon Sep 17 00:00:00 2001 From: skbhagat0502 Date: Tue, 7 Nov 2023 15:36:49 +0530 Subject: [PATCH 3/5] add test for LeftDrawerEvent.tsx --- .../LeftDrawerEvent/LeftDrawerEvent.test.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx b/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx index b5c45ff983..e15e91dfab 100644 --- a/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx +++ b/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx @@ -203,9 +203,11 @@ describe('Testing Left Drawer component for the Event Dashboard', () => { ); - expect(longEventNameLength).toBeGreaterThan(20); - expect(longDescriptionLength).toBeGreaterThan(30); - expect(truncatedEventName).toContain('...'); - expect(truncatedDescriptionName).toContain('...'); + await waitFor(() => { + expect(longEventNameLength).toBeGreaterThan(20); + expect(longDescriptionLength).toBeGreaterThan(30); + expect(truncatedEventName).toContain('...'); + expect(truncatedDescriptionName).toContain('...'); + }); }); }); From 9bf8cb01578b7a7d59fa2a7ae7071a6ab830b8f4 Mon Sep 17 00:00:00 2001 From: skbhagat0502 Date: Tue, 7 Nov 2023 17:04:35 +0530 Subject: [PATCH 4/5] fixed some tests --- .../LeftDrawerEvent/LeftDrawerEvent.test.tsx | 25 +++++++------------ 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx b/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx index e15e91dfab..ea4b1a5cdb 100644 --- a/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx +++ b/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx @@ -184,16 +184,8 @@ describe('Testing Left Drawer component for the Event Dashboard', () => { expect(localStorage.clear).toHaveBeenCalled(); expect(global.window.location.pathname).toBe('/'); }); - - test('Should render truncated event details at the sidebar', async () => { - const longEventName = - 'A very long event name that exceeds 20 characters and needs to be truncated'; - const longDescription = - 'A very long description that exceeds 30 characters and needs to be truncated'; - const longEventNameLength = longEventName.length; - const longDescriptionLength = longDescription.length; - const truncatedEventName = longEventName.substring(0, 20) + '...'; - const truncatedDescriptionName = longDescription.substring(0, 30) + '...'; + test('Testing substring functionality in event title and description', async () => { + localStorage.setItem('UserType', 'SUPERADMIN'); render( @@ -203,11 +195,12 @@ describe('Testing Left Drawer component for the Event Dashboard', () => { ); - await waitFor(() => { - expect(longEventNameLength).toBeGreaterThan(20); - expect(longDescriptionLength).toBeGreaterThan(30); - expect(truncatedEventName).toContain('...'); - expect(truncatedDescriptionName).toContain('...'); - }); + const eventTitle = 'This is a long event title that will be truncated'; + const truncatedEventTitle = eventTitle.substring(0, 20) + '...'; + expect(truncatedEventTitle).toContain('...'); + const eventDescription = + 'This is a long event description that will be truncated'; + const truncatedEventDescription = eventDescription.substring(0, 30) + '...'; + expect(truncatedEventDescription).toContain('...'); }); }); From f38b863773a9a10b64d1308412329bb8a61f6f95 Mon Sep 17 00:00:00 2001 From: skbhagat0502 Date: Tue, 7 Nov 2023 18:24:19 +0530 Subject: [PATCH 5/5] add test complete --- .../LeftDrawerEvent/LeftDrawerEvent.test.tsx | 25 +++++++++++++++---- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx b/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx index ea4b1a5cdb..0fabcd2c55 100644 --- a/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx +++ b/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx @@ -25,6 +25,20 @@ const props: InterfaceLeftDrawerProps = { setHideDrawer: jest.fn(), setShowAddEventProjectModal: jest.fn(), }; +const props2: InterfaceLeftDrawerProps = { + event: { + _id: 'testEvent', + title: 'This is a very long event title that exceeds 20 characters', + description: + 'This is a very long event description that exceeds 30 characters. It contains more details about the event.', + organization: { + _id: 'Test Organization', + }, + }, + hideDrawer: false, + setHideDrawer: jest.fn(), + setShowAddEventProjectModal: jest.fn(), +}; const mocks = [ { @@ -190,17 +204,18 @@ describe('Testing Left Drawer component for the Event Dashboard', () => { - + ); - const eventTitle = 'This is a long event title that will be truncated'; + const eventTitle = props2.event.title; + expect(eventTitle.length).toBeGreaterThan(20); + const eventDescription = props2.event.description; + expect(eventDescription.length).toBeGreaterThan(30); const truncatedEventTitle = eventTitle.substring(0, 20) + '...'; - expect(truncatedEventTitle).toContain('...'); - const eventDescription = - 'This is a long event description that will be truncated'; const truncatedEventDescription = eventDescription.substring(0, 30) + '...'; + expect(truncatedEventTitle).toContain('...'); expect(truncatedEventDescription).toContain('...'); }); });