test: add cases for date time utils (heyxyz#4282)

apps/web/src/components/Group/Details.tsx

@@ -158,7 +158,7 @@ const Details: FC<DetailsProps> = ({ group }) => {
             </MetaDetails>
           ) : null}
           <MetaDetails icon={<ClockIcon className="h-4 w-4" />}>
-            {formatDate(new Date(group.createdAt))}
+            {formatDate(group.createdAt)}
           </MetaDetails>
         </div>
       </div>

apps/web/src/components/Publication/FullPublication.tsx

@@ -43,9 +43,7 @@ const FullPublication: FC<FullPublicationProps> = ({ publication }) => {
               <PublicationBody publication={targetPublication} />
               <div className="flex items-center gap-x-3">
                 <div className="ld-text-gray-500 my-3 text-sm">
-                  <span>
-                    {formatDate(new Date(createdAt), 'hh:mm A · MMM D, YYYY')}
-                  </span>
+                  <span>{formatDate(createdAt, 'hh:mm A · MMM D, YYYY')}</span>
                   {publishedOn?.id ? (
                     <span> · Posted via {getAppName(publishedOn.id)}</span>
                   ) : null}

apps/web/src/components/Staff/Overview/EventsToday.tsx

@@ -52,7 +52,7 @@ const EventsToday: FC<EventsTodayProps> = ({ eventsToday }) => {
                 }
               ],
               labels: eventsToday.map((event) =>
-                formatDate(new Date(event.timestamp), 'hh:mm')
+                formatDate(event.timestamp, 'hh:mm')
               )
             }}
             options={{

apps/web/src/components/Staff/Overview/ImpressionsToday.tsx

@@ -52,7 +52,7 @@ const ImpressionsToday: FC<ImpressionsTodayProps> = ({ impressionsToday }) => {
                 }
               ],
               labels: impressionsToday.map((impression) =>
-                formatDate(new Date(impression.timestamp), 'hh:mm')
+                formatDate(impression.timestamp, 'hh:mm')
               )
             }}
             options={{

packages/lib/datetime/formatDate.spec.ts

@@ -0,0 +1,29 @@
+import { describe, expect, test } from 'vitest';
+
+import formatDate from './formatDate';
+
+describe('formatDate', () => {
+  test('should correctly format a given date in default format', () => {
+    const exampleDate = new Date('2023-12-01');
+    const result = formatDate(exampleDate);
+    const expectedResult = 'December 1, 2023';
+    expect(result).toBe(expectedResult);
+  });
+
+  test('should correctly format a given date in a custom format', () => {
+    const exampleDate = new Date('2023-12-01');
+    const result = formatDate(exampleDate, 'YYYY-MM-DD');
+    const expectedResult = '2023-12-01';
+    expect(result).toBe(expectedResult);
+  });
+
+  test('should correctly format the current date in default format', () => {
+    const result = formatDate(new Date());
+    const expectedResult = new Date().toLocaleDateString('en-US', {
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric'
+    });
+    expect(result).toBe(expectedResult);
+  });
+});

packages/lib/datetime/formatDate.ts

@@ -8,8 +8,8 @@ dayjs.extend(relativeTime);
  * @param date The date to format.
  * @returns A string in the application date format.
  */
-const formatDate = (date?: Date, format = 'MMMM D, YYYY') => {
-  return dayjs(date).format(format);
+const formatDate = (date: Date | string, format = 'MMMM D, YYYY') => {
+  return dayjs(new Date(date)).format(format);
 };
 
 export default formatDate;

packages/lib/datetime/formatRelativeOrAbsolute.spec.ts

@@ -0,0 +1,49 @@
+import dayjs from 'dayjs';
+import { describe, expect, test } from 'vitest';
+
+import formatRelativeOrAbsolute from './formatRelativeOrAbsolute';
+
+describe('formatRelativeOrAbsolute', () => {
+  test('should format a date a few seconds old as seconds', () => {
+    const now = new Date();
+    const fewSecondsAgo = new Date(now.getTime() - 10 * 1000);
+    const result = formatRelativeOrAbsolute(fewSecondsAgo);
+    expect(result).toBe('10s');
+  });
+
+  test('should format a date a few minutes old as minutes', () => {
+    const now = new Date();
+    const fewMinutesAgo = new Date(now.getTime() - 10 * 60 * 1000);
+    const result = formatRelativeOrAbsolute(fewMinutesAgo);
+    expect(result).toBe('10m');
+  });
+
+  test('should format a date a few hours old as hours', () => {
+    const now = new Date();
+    const fewHoursAgo = new Date(now.getTime() - 3 * 60 * 60 * 1000);
+    const result = formatRelativeOrAbsolute(fewHoursAgo);
+    expect(result).toBe('3h');
+  });
+
+  test('should format a date more than a day but less than a week old as days', () => {
+    const now = new Date();
+    const fourDaysAgo = new Date(now.getTime() - 4 * 24 * 60 * 60 * 1000);
+    const result = formatRelativeOrAbsolute(fourDaysAgo);
+    expect(result).toBe('4d');
+  });
+
+  test('should format a date older than a week but within the same year as MMM D', () => {
+    const now = new Date();
+    const lastYear = new Date(now.getFullYear() - 1, 11, 25);
+    const result = formatRelativeOrAbsolute(lastYear);
+    const expected = dayjs(lastYear).format('MMM D, YYYY');
+    expect(result).toBe(expected);
+  });
+
+  test('should format a date older than a week and in a different year as MMM D, YYYY', () => {
+    const olderDate = new Date(2020, 0, 1);
+    const result = formatRelativeOrAbsolute(olderDate);
+    const expected = dayjs(olderDate).format('MMM D, YYYY');
+    expect(result).toBe(expected);
+  });
+});

packages/lib/datetime/getNumberOfDaysFromDate.spec.ts

@@ -0,0 +1,45 @@
+import dayjs from 'dayjs';
+import { describe, expect, test } from 'vitest';
+
+import getNumberOfDaysFromDate from './getNumberOfDaysFromDate';
+
+describe('getNumberOfDaysFromDate', () => {
+  test('should return 0 for the current date', () => {
+    const currentDate = new Date();
+    const result = getNumberOfDaysFromDate(currentDate);
+    expect(result).toBe(0);
+  });
+
+  test('should return 1 for tomorrow', () => {
+    const tomorrow = dayjs().add(1, 'day').toDate();
+    const result = getNumberOfDaysFromDate(tomorrow);
+    expect(result).toBe(1);
+  });
+
+  test('should return -1 for yesterday', () => {
+    const yesterday = dayjs().subtract(1, 'day').toDate();
+    const result = getNumberOfDaysFromDate(yesterday);
+    expect(result).toBe(-1);
+  });
+
+  test('should return correct number of days for a future date', () => {
+    const futureDate = dayjs().add(5, 'day').toDate();
+    const result = getNumberOfDaysFromDate(futureDate);
+    expect(result).toBe(5);
+  });
+
+  test('should return correct number of days for a past date', () => {
+    const pastDate = dayjs().subtract(3, 'day').toDate();
+    const result = getNumberOfDaysFromDate(pastDate);
+    expect(result).toBe(-3);
+  });
+
+  test('should return correct number of days for a date in a different month/year', () => {
+    const differentMonthYear = new Date(2024, 0, 1); // January 1, 2024
+    const daysDifference = dayjs(differentMonthYear)
+      .startOf('day')
+      .diff(dayjs().startOf('day'), 'day');
+    const result = getNumberOfDaysFromDate(differentMonthYear);
+    expect(result).toBe(daysDifference);
+  });
+});

packages/lib/datetime/getTimeAddedNDay.spec.ts

@@ -0,0 +1,42 @@
+import dayjs from 'dayjs';
+import { describe, expect, test } from 'vitest';
+
+import getTimeAddedNDay from './getTimeAddedNDay';
+
+describe('getTimeAddedNDay', () => {
+  test('should add 0 days to the current date', () => {
+    const currentDateUTC = dayjs().utc().format();
+    const result = getTimeAddedNDay(0);
+    expect(result).toBe(currentDateUTC);
+  });
+
+  test('should add 1 day to the current date', () => {
+    const oneDayAddedUTC = dayjs().add(1, 'day').utc().format();
+    const result = getTimeAddedNDay(1);
+    expect(result).toBe(oneDayAddedUTC);
+  });
+
+  test('should add 5 days to the current date', () => {
+    const fiveDaysAddedUTC = dayjs().add(5, 'day').utc().format();
+    const result = getTimeAddedNDay(5);
+    expect(result).toBe(fiveDaysAddedUTC);
+  });
+
+  test('should subtract 1 day from the current date', () => {
+    const oneDaySubtractedUTC = dayjs().subtract(1, 'day').utc().format();
+    const result = getTimeAddedNDay(-1);
+    expect(result).toBe(oneDaySubtractedUTC);
+  });
+
+  test('should subtract 10 days from the current date', () => {
+    const tenDaysSubtractedUTC = dayjs().subtract(10, 'day').utc().format();
+    const result = getTimeAddedNDay(-10);
+    expect(result).toBe(tenDaysSubtractedUTC);
+  });
+
+  test('should add a large number of days to test leap years and month changes', () => {
+    const largeDaysAddedUTC = dayjs().add(400, 'day').utc().format();
+    const result = getTimeAddedNDay(400);
+    expect(result).toBe(largeDaysAddedUTC);
+  });
+});

packages/lib/datetime/getTimetoNow.spec.ts

@@ -0,0 +1,48 @@
+import dayjs from 'dayjs';
+import { describe, expect, test } from 'vitest';
+
+import getTimetoNow from './getTimetoNow';
+
+describe('getTimetoNow', () => {
+  test('should format a date a few seconds in the past', () => {
+    const fewSecondsAgo = dayjs().subtract(10, 'seconds').toDate();
+    const result = getTimetoNow(fewSecondsAgo);
+    expect(result).toBe('a few seconds');
+  });
+
+  test('should format a date a few minutes in the past', () => {
+    const fewMinutesAgo = dayjs().subtract(2, 'minutes').toDate();
+    const result = getTimetoNow(fewMinutesAgo);
+    expect(result).toBe('2 minutes');
+  });
+
+  test('should format a date a few hours in the past', () => {
+    const fewHoursAgo = dayjs().subtract(3, 'hours').toDate();
+    const result = getTimetoNow(fewHoursAgo);
+    expect(result).toBe('3 hours');
+  });
+
+  test('should format a date a few days in the past', () => {
+    const fewDaysAgo = dayjs().subtract(4, 'days').toDate();
+    const result = getTimetoNow(fewDaysAgo);
+    expect(result).toBe('4 days');
+  });
+
+  test('should format a date a few weeks in the past', () => {
+    const fewWeeksAgo = dayjs().subtract(3, 'weeks').toDate();
+    const result = getTimetoNow(fewWeeksAgo);
+    expect(result).toMatch(/days/); // The exact text may vary
+  });
+
+  test('should format a date a few months in the past', () => {
+    const fewMonthsAgo = dayjs().subtract(5, 'months').toDate();
+    const result = getTimetoNow(fewMonthsAgo);
+    expect(result).toMatch(/months/); // The exact text may vary
+  });
+
+  test('should format a date a few years in the past', () => {
+    const fewYearsAgo = dayjs().subtract(2, 'years').toDate();
+    const result = getTimetoNow(fewYearsAgo);
+    expect(result).toMatch(/years/); // The exact text may vary
+  });
+});