add tests and tweak

src/features/labels/Ago.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it } from "vitest";
+
+import { formatRelative } from "./Ago";
+
+describe("formatRelative Function", () => {
+  const currentTime = {
+    date: new Date(),
+    expected: {
+      ultrashort: "<1s",
+      short: "<1s",
+      verbose: "now",
+    },
+  };
+
+  const oneMonthAgo = {
+    date: (() => {
+      const date = new Date();
+      date.setMonth(date.getMonth() - 1);
+      return date;
+    })(),
+    expected: {
+      ultrashort: "1mo",
+      short: "1mo",
+      verbose: "1 month",
+    },
+  };
+
+  const oneYearTwoMonthsAgo = {
+    date: (() => {
+      const date = new Date();
+      date.setFullYear(date.getFullYear() - 1);
+      date.setMonth(date.getMonth() - 2);
+      return date;
+    })(),
+    expected: {
+      ultrashort: "1.2y",
+      short: "1y 2mo",
+      verbose: "1 year, 2 months",
+    },
+  };
+
+  const fortyFiveMinutesAgo = {
+    date: (() => {
+      const date = new Date();
+      date.setMinutes(date.getMinutes() - 45);
+      return date;
+    })(),
+    expected: {
+      ultrashort: "45m",
+      short: "45m",
+      verbose: "45 minutes",
+    },
+  };
+
+  const fortyFiveMinutesFiftyNineSecondsAgo = {
+    date: (() => {
+      const date = new Date();
+      date.setMinutes(date.getMinutes() - 45);
+      date.setSeconds(date.getSeconds() - 59);
+      return date;
+    })(),
+    expected: {
+      ultrashort: "45m",
+      short: "45m",
+      verbose: "45 minutes, 59 seconds",
+    },
+  };
+
+  const oneYearAgo = {
+    date: (() => {
+      const date = new Date();
+      date.setFullYear(date.getFullYear() - 1);
+      return date;
+    })(),
+    expected: {
+      ultrashort: "1y",
+      short: "1y",
+      verbose: "1 year",
+    },
+  };
+
+  const tenDaysAgo = {
+    date: (() => {
+      const date = new Date();
+      date.setDate(date.getDate() - 10);
+      return date;
+    })(),
+    expected: {
+      ultrashort: "10d",
+      short: "10d",
+      verbose: "10 days",
+    },
+  };
+
+  const testCases = [
+    { name: "current time", ...currentTime },
+    { name: "one month ago", ...oneMonthAgo },
+    { name: "one year and two months ago", ...oneYearTwoMonthsAgo },
+    { name: "forty-five minutes ago", ...fortyFiveMinutesAgo },
+    {
+      name: "forty-five minutes and fifty-nine seconds ago",
+      ...fortyFiveMinutesFiftyNineSecondsAgo,
+    },
+    { name: "one year ago", ...oneYearAgo },
+    { name: "ten days ago", ...tenDaysAgo },
+  ];
+
+  testCases.forEach(({ name, date, expected }) => {
+    it(`should format ${name} correctly in ultrashort format`, () => {
+      const result = formatRelative(date, "ultrashort");
+      expect(result).toBe(expected.ultrashort);
+    });
+
+    it(`should format ${name} correctly in short format`, () => {
+      const result = formatRelative(date, "short");
+      expect(result).toBe(expected.short);
+    });
+
+    it(`should format ${name} correctly in verbose format`, () => {
+      const result = formatRelative(date, "verbose");
+      expect(result).toBe(expected.verbose);
+    });
+  });
+});

src/features/labels/Ago.tsx

@@ -29,7 +29,7 @@ export function formatRelative(
     case "verbose": {
       distance = formatDuration(duration, {
         delimiter: ", ",
-        format: ["years", "months", "days"],
+        format: getFormatVerbose(duration),
       });
       break;
     }
@@ -66,7 +66,9 @@ export function formatRelative(
   return distance;
 }
 
-function getFormatShort(duration: Duration): (keyof Duration)[] {
+function getFormatShort(
+  duration: Duration,
+): [keyof Duration, ...(keyof Duration)[]] {
   if (duration.years) return ["years", "months"];
   if (duration.months) return ["months"];
   if (duration.days) return ["days"];
@@ -77,7 +79,15 @@ function getFormatShort(duration: Duration): (keyof Duration)[] {
 }
 
 function getFormatUltrashort(duration: Duration): (keyof Duration)[] {
-  if (duration.years) return ["years"];
+  return [getFormatShort(duration)[0]];
+}
+
+function getFormatVerbose(duration: Duration): (keyof Duration)[] {
+  if (duration.years) return ["years", "months"];
+  if (duration.months) return ["months", "days"];
+  if (duration.days) return ["days", "hours"];
+  if (duration.hours) return ["hours", "minutes"];
+  if (duration.minutes) return ["minutes", "seconds"];
 
-  return getFormatShort(duration);
+  return ["years", "months", "days", "hours", "minutes", "seconds"];
 }

src/features/labels/Edited.tsx

@@ -24,8 +24,8 @@ export default function Edited({ item, showDate, className }: EditedProps) {
     if (!edited) return;
     if (!showDate) return;
 
-    const createdLabel = formatRelative(item.counts.published);
-    const editedLabel = formatRelative(edited);
+    const createdLabel = formatRelative(new Date(item.counts.published));
+    const editedLabel = formatRelative(new Date(edited));
 
     if (createdLabel === editedLabel) return;
 
@@ -42,7 +42,7 @@ export default function Edited({ item, showDate, className }: EditedProps) {
     const date = new Date(edited);
 
     present({
-      header: `Edited ${formatRelative(edited)} Ago`,
+      header: `Edited ${formatRelative(date)} Ago`,
       message: `Last edited on ${date.toDateString()} at ${date.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })}`,
       buttons: ["OK"],
     });