Fix layout distortion due to untruncated title description of events. (…

…PalisadoesFoundation#1049) * Fix layout distortion due to untruncated title description of events * Add test * add test for LeftDrawerEvent.tsx * fixed some tests * add test complete
kanhaiya04 · Nov 14, 2023 · db6eff9 · db6eff9
1 parent 30b4385
commit db6eff9
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 9 deletions.
diff --git 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.test.tsx b/src/components/EventListCard/EventListCard.test.tsx
@@ -301,4 +301,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(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <EventListCard
+            key="123"
+            id="1"
+            eventName={longEventName}
+            eventLocation="location"
+            eventDescription={longDescription}
+            regDate="19/03/2022"
+            regEndDate="26/03/2022"
+            startTime="02:00"
+            endTime="06:00"
+            allDay={true}
+            recurring={false}
+            isPublic={true}
+            isRegisterable={false}
+          />
+        </I18nextProvider>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    expect(longEventNameLength).toBeGreaterThan(100);
+    expect(longDescriptionLength).toBeGreaterThan(256);
+    expect(truncatedEventName).toContain('...');
+    expect(truncatedDescriptionName).toContain('...');
+    await wait();
+  });
 });
diff --git a/src/components/EventListCard/EventListCard.tsx b/src/components/EventListCard/EventListCard.tsx
@@ -150,7 +150,17 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {
         >
           <div className={styles.dispflex}>
             <h2>
-              {props.eventName ? <>{props.eventName}</> : <>Dogs Care</>}{' '}
+              {props.eventName ? (
+                <>
+                  {props.eventName.length > 150 ? (
+                    <>{props.eventName.substring(0, 150)}...</>
+                  ) : (
+                    <>{props.eventName}</>
+                  )}
+                </>
+              ) : (
+                <>Dogs Care</>
+              )}
             </h2>
           </div>
         </div>
@@ -172,7 +182,17 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {
               <p className={styles.preview}>
                 {t('eventTitle')}:{' '}
                 <span className={styles.view}>
-                  {props.eventName ? <>{props.eventName}</> : <>Dogs Care</>}{' '}
+                  {props.eventName ? (
+                    <>
+                      {props.eventName.length > 100 ? (
+                        <>{props.eventName.substring(0, 100)}...</>
+                      ) : (
+                        <>{props.eventName}</>
+                      )}
+                    </>
+                  ) : (
+                    <>Dogs Care</>
+                  )}
                 </span>
               </p>
               <p className={styles.preview}>
@@ -187,7 +207,11 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {
               </p>
               <p className={styles.preview}>
                 {t('description')}:{' '}
-                <span className={styles.view}>{props.eventDescription}</span>
+                <span className={styles.view}>
+                  {props.eventDescription && props.eventDescription.length > 256
+                    ? props.eventDescription.substring(0, 256) + '...'
+                    : props.eventDescription}
+                </span>
               </p>
               <p className={styles.preview}>
                 {t('on')}: <span className={styles.view}>{props.regDate}</span>

diff --git 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 = [
   {
@@ -184,4 +198,24 @@ describe('Testing Left Drawer component for the Event Dashboard', () => {
     expect(localStorage.clear).toHaveBeenCalled();
     expect(global.window.location.pathname).toBe('/');
   });
+  test('Testing substring functionality in event title and description', async () => {
+    localStorage.setItem('UserType', 'SUPERADMIN');
+    render(
+      <MockedProvider mocks={mocks}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <LeftDrawerEvent {...props2} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+    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) + '...';
+    const truncatedEventDescription = eventDescription.substring(0, 30) + '...';
+    expect(truncatedEventTitle).toContain('...');
+    expect(truncatedEventDescription).toContain('...');
+  });
 });
diff --git a/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx b/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx
@@ -84,8 +84,16 @@ const leftDrawerEvent = ({
               />
             </div>
             <div className={styles.profileText}>
-              <span className={styles.primaryText}>{event.title}</span>
-              <span className={styles.secondaryText}>{event.description}</span>
+              <span className={styles.primaryText}>
+                {event.title && event.title.length > 20
+                  ? event.title.substring(0, 20) + '...'
+                  : event.title}
+              </span>
+              <span className={styles.secondaryText}>
+                {event.description && event.description.length > 30
+                  ? event.description.substring(0, 30) + '...'
+                  : event.description}
+              </span>
             </div>
           </button>
         </div>

diff --git 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
@@ -80,7 +80,7 @@ const EventDashboard = (): JSX.Element => {
       setShowAddEventProjectModal={setShowAddEventProjectModal}
     >
       <Row>
-        <Col sm={3}>
+        <Col sm={4}>
           <div className={styles.sidebar}>
             <div className={styles.sidebarsticky}>
               {/* Side Bar - Static Information about the Event */}
@@ -110,7 +110,7 @@ const EventDashboard = (): JSX.Element => {
             </div>
           </div>
         </Col>
-        <Col sm={8} className="mt-sm-0 mt-5 ml-4 ml-sm-0">
+        <Col sm={6} className="mt-sm-0 mt-5 ml-4 ml-sm-0">
           {/* Main Screen Container */}
           <Container>
             <div className={styles.mainpageright}>