[FIX] Events Page Violates The Figma Style Guide (#3280)

* ui fix * ui fix * code coverage disable statement removed * code coverage disable statement removed * code coverage disable statement remove * code coverage statement remove * fix * fix test * test fix * fix failing test
PalisadoesFoundation · Jan 15, 2025 · 33e7cd1 · 33e7cd1
1 parent 2490b2e
commit 33e7cd1
Show file tree

Hide file tree

Showing 9 changed files with 253 additions and 126 deletions.
diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx
@@ -348,7 +348,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
                     {months[parseInt(holiday.date.slice(0, 2), 10) - 1]}{' '}
                     {holiday.date.slice(3)}
                   </span>
-                  <span>{holiday.name}</span>
+                  <span className={styles.holiday_name}>{holiday.name}</span>
                 </li>
               ))}
             </ul>
@@ -357,21 +357,15 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
           <div className={styles.events_card} role="region" aria-label="Events">
             <h3 className={styles.card_title}>Events</h3>
             <div className={styles.legend}>
-              <div className={styles.list_container}>
-                <span className={styles.holidayIndicator}></span>
-                <span className={styles.holidayText}>Holidays</span>
-              </div>
               <div className={styles.eventsLegend}>
                 <span className={styles.organizationIndicator}></span>
                 <span className={styles.legendText}>
                   Events Created by Organization
                 </span>
               </div>
-              <div className={styles.eventsLegend}>
-                <span className={styles.userEvents__color}></span>
-                <span className={styles.legendText}>
-                  Events Created by User
-                </span>
+              <div className={styles.list_container_holidays}>
+                <span className={styles.holidayIndicator}></span>
+                <span className={styles.holidayText}>Holidays</span>
               </div>
             </div>
           </div>
@@ -519,34 +513,36 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
     <div className={styles.calendar}>
       {viewType != ViewType.YEAR && (
         <div className={styles.calendar__header}>
-          <Button
-            variant="outlined"
-            className={styles.buttonEventCalendar}
-            onClick={
-              viewType == ViewType.DAY ? handlePrevDate : handlePrevMonth
-            }
-            data-testid="prevmonthordate"
-          >
-            <ChevronLeft />
-          </Button>
+          <div className={styles.calender_month}>
+            <Button
+              variant="outlined"
+              className={styles.buttonEventCalendar}
+              onClick={
+                viewType == ViewType.DAY ? handlePrevDate : handlePrevMonth
+              }
+              data-testid="prevmonthordate"
+            >
+              <ChevronLeft />
+            </Button>
 
-          <div
-            className={styles.calendar__header_month}
-            data-testid="current-date"
-          >
-            {viewType == ViewType.DAY ? `${currentDate}` : ``} {currentYear}{' '}
-            <div>{months[currentMonth]}</div>
+            <div
+              className={styles.calendar__header_month}
+              data-testid="current-date"
+            >
+              {viewType == ViewType.DAY ? `${currentDate}` : ``} {currentYear}{' '}
+              <div>{months[currentMonth]}</div>
+            </div>
+            <Button
+              variant="outlined"
+              className={styles.buttonEventCalendar}
+              onClick={
+                viewType == ViewType.DAY ? handleNextDate : handleNextMonth
+              }
+              data-testid="nextmonthordate"
+            >
+              <ChevronRight />
+            </Button>
           </div>
-          <Button
-            variant="outlined"
-            className={styles.buttonEventCalendar}
-            onClick={
-              viewType == ViewType.DAY ? handleNextDate : handleNextMonth
-            }
-            data-testid="nextmonthordate"
-          >
-            <ChevronRight />
-          </Button>
           <div>
             <Button
               className={styles.editButton}

diff --git a/src/components/EventCalendar/EventHeader.tsx b/src/components/EventCalendar/EventHeader.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Button, 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';
@@ -35,7 +36,10 @@ function eventHeader({
   });
 
   return (
-    <div className={styles.calendarEventHeader}>
+    <div
+      className={styles.calendarEventHeader}
+      data-testid="calendarEventHeader"
+    >
       <div className={styles.calendar__header}>
         <div className={styles.input}>
           <Form.Control
@@ -57,12 +61,13 @@ function eventHeader({
           />
           <Button
             className={styles.searchButton}
+            data-testid="searchButton"
             style={{ marginBottom: '10px' }}
           >
-            <Search />
+            <SearchOutlinedIcon />
           </Button>
         </div>
-        <div className={styles.flex_grow}></div>
+        {/* <div className={styles.flex_grow}></div> */}
         <div className={styles.space}>
           <SortingButton
             title={t('viewType')}
@@ -88,14 +93,25 @@ function eventHeader({
             className={styles.dropdown}
             buttonLabel={t('eventType')}
           />
-          <Button
-            variant="success"
-            className={styles.dropdown}
-            onClick={showInviteModal}
-            data-testid="createEventModalBtn"
-          >
-            Create Event
-          </Button>
+          <div className={styles.selectTypeEventHeader}>
+            <Button
+              variant="success"
+              className={styles.dropdown}
+              onClick={showInviteModal}
+              data-testid="createEventModalBtn"
+            >
+              <div className="">
+                <AddIcon
+                  sx={{
+                    fontSize: '25px',
+                    marginBottom: '2px',
+                    marginRight: '2px',
+                  }}
+                />
+                <span>Create</span>
+              </div>
+            </Button>
+          </div>
         </div>
       </div>
     </div>

diff --git 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
diff --git a/src/components/HolidayCards/HolidayCard.spec.tsx b/src/components/HolidayCards/HolidayCard.spec.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { describe, test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import HolidayCard from './HolidayCard';
+import styles from './../../style/app.module.css';
+
+describe('HolidayCard Component', () => {
+  test('renders without crashing', () => {
+    render(<HolidayCard holidayName="Christmas" />);
+    expect(screen.getByTestId('holiday-card')).toBeDefined();
+  });
+
+  test('displays the provided holiday name', () => {
+    const testHolidayName = 'New Year';
+    render(<HolidayCard holidayName={testHolidayName} />);
+
+    const cardElement = screen.getByTestId('holiday-card');
+    expect(cardElement.textContent).toBe(testHolidayName);
+  });
+
+  test('applies the correct CSS class', () => {
+    render(<HolidayCard holidayName="Easter" />);
+
+    const cardElement = screen.getByTestId('holiday-card');
+    expect(cardElement.className).toBe(styles.holidayCard);
+  });
+
+  test('handles empty holiday name', () => {
+    render(<HolidayCard holidayName="" />);
+
+    const cardElement = screen.getByTestId('holiday-card');
+    expect(cardElement.textContent).toBe('');
+  });
+
+  test('handles long holiday names', () => {
+    const longHolidayName = 'International Talk Like a Pirate Day Celebration';
+    render(<HolidayCard holidayName={longHolidayName} />);
+
+    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(<HolidayCard />);
+
+    // @ts-expect-error - Testing TypeScript validation for wrong prop type
+    render(<HolidayCard holidayName={123} />);
+  });
+});
diff --git 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 {
@@ -13,8 +13,11 @@ interface InterfaceHolidayList {
  * @returns JSX element representing a card with the holiday name.
  */
 const HolidayCard = (props: InterfaceHolidayList): JSX.Element => {
-  /*istanbul ignore next*/
-  return <div className={styles.card}>{props?.holidayName}</div>;
+  return (
+    <div className={styles.holidayCard} data-testid="holiday-card">
+      {props?.holidayName}
+    </div>
+  );
 };
 
 export default HolidayCard;
diff --git 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/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();
@@ -137,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);
     }
   };
@@ -147,7 +144,6 @@ export default function events(): JSX.Element {
    *
    * @returns Void.
    */
-  /* istanbul ignore next */
   const toggleCreateEventModal = (): void =>
     setCreateEventmodalisOpen(!createEventModal);
 
@@ -188,7 +184,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 +195,6 @@ export default function events(): JSX.Element {
    *
    * @returns Void.
    */
-  /* istanbul ignore next */
   const showInviteModal = (): void => {
     setCreateEventmodalisOpen(true);
   };
@@ -211,9 +205,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);
     }
@@ -222,7 +214,7 @@ export default function events(): JSX.Element {
   return (
     <>
       <div className={`d-flex flex-row`}>
-        <div className={`${styles.mainContainer}`}>
+        <div className={`${styles.mainContainerEvent}`}>
           <EventHeader
             viewType={viewType}
             showInviteModal={showInviteModal}