@sproutsocial/seeds-react-duration 1.0.0

package/src/__tests__/features/displayUnits.test.ts

@@ -0,0 +1,548 @@
+import testDuration from "./testDuration";
+
+// this value should NOT round up the last digit when applicable (1m 29s = 1)
+const duration = 127769499; // 1d 11h 29m 29s 499ms
+
+// this value SHOULD round up the last digit when applicable (1m 30s = 2m)
+const roundingDuration = 131430500; // 1d 12h 30m 30s 500ms
+
+describe("When using display units...", () => {
+  describe("... it renders properly", () => {
+    testDuration(
+      duration,
+      {
+        displayUnits: {
+          days: true,
+          hours: true,
+          minutes: true,
+          seconds: true,
+          milliseconds: true,
+        },
+      },
+      { text: "1d 11h 29m 29s 499ms" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: {
+          hours: true,
+          minutes: true,
+          seconds: true,
+          milliseconds: true,
+        },
+      },
+      { text: "35h 29m 29s 499ms" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: {
+          days: true,
+          minutes: true,
+          seconds: true,
+          milliseconds: true,
+        },
+      },
+      { text: "1d 689m 29s 499ms" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: {
+          days: true,
+          hours: true,
+          seconds: true,
+          milliseconds: true,
+        },
+      },
+      { text: "1d 11h 1,769s 499ms" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: {
+          days: true,
+          hours: true,
+          minutes: true,
+          milliseconds: true,
+        },
+      },
+      { text: "1d 11h 29m 29,499ms" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: {
+          days: true,
+          hours: true,
+          minutes: true,
+          seconds: true,
+        },
+      },
+      { text: "1d 11h 29m 29s" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: { minutes: true, seconds: true, milliseconds: true },
+      },
+      { text: "2,129m 29s 499ms" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: { hours: true, seconds: true, milliseconds: true },
+      },
+      { text: "35h 1,769s 499ms" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: { hours: true, minutes: true, milliseconds: true },
+      },
+      { text: "35h 29m 29,499ms" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: { hours: true, minutes: true, seconds: true },
+      },
+      { text: "35h 29m 29s" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: { days: true, seconds: true, milliseconds: true },
+      },
+      { text: "1d 41,369s 499ms" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: { days: true, minutes: true, milliseconds: true },
+      },
+      { text: "1d 689m 29,499ms" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: { days: true, minutes: true, seconds: true },
+      },
+      { text: "1d 689m 29s" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: { days: true, hours: true, milliseconds: true },
+      },
+      { text: "1d 11h 1,769,499ms" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: { days: true, hours: true, seconds: true },
+      },
+      { text: "1d 11h 1,769s" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: { days: true, hours: true, minutes: true },
+      },
+      { text: "1d 11h 29m" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: {
+          seconds: true,
+          milliseconds: true,
+        },
+      },
+      { text: "127,769s 499ms" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: {
+          minutes: true,
+          milliseconds: true,
+        },
+      },
+      { text: "2,129m 29,499ms" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: {
+          minutes: true,
+          seconds: true,
+        },
+      },
+      { text: "2,129m 29s" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: {
+          hours: true,
+          milliseconds: true,
+        },
+      },
+      { text: "35h 1,769,499ms" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: {
+          hours: true,
+          seconds: true,
+        },
+      },
+      { text: "35h 1,769s" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: {
+          hours: true,
+          minutes: true,
+        },
+      },
+      { text: "35h 29m" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: {
+          days: true,
+          milliseconds: true,
+        },
+      },
+      { text: "1d 41,369,499ms" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: {
+          days: true,
+          seconds: true,
+        },
+      },
+      { text: "1d 41,369s" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: {
+          days: true,
+          minutes: true,
+        },
+      },
+      { text: "1d 689m" }
+    );
+    testDuration(
+      duration,
+      {
+        displayUnits: {
+          days: true,
+          hours: true,
+        },
+      },
+      { text: "1d 11h" }
+    );
+    testDuration(duration, { displayUnits: { days: true } }, { text: "1d" });
+    testDuration(duration, { displayUnits: { hours: true } }, { text: "35h" });
+    testDuration(
+      duration,
+      { displayUnits: { minutes: true } },
+      { text: "2,129m" }
+    );
+    testDuration(
+      duration,
+      { displayUnits: { seconds: true } },
+      { text: "127,769s" }
+    );
+    testDuration(
+      duration,
+      { displayUnits: { milliseconds: true } },
+      { text: "127,769,499ms" }
+    );
+    testDuration(duration, { displayUnits: {} }, { text: "1d 11h 29m 29s" });
+  });
+  describe("... it renders properly while rounding up the last digit", () => {
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: {
+          days: true,
+          hours: true,
+          minutes: true,
+          seconds: true,
+          milliseconds: true,
+        },
+      },
+      { text: "1d 12h 30m 30s 500ms" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: {
+          hours: true,
+          minutes: true,
+          seconds: true,
+          milliseconds: true,
+        },
+      },
+      { text: "36h 30m 30s 500ms" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: {
+          days: true,
+          minutes: true,
+          seconds: true,
+          milliseconds: true,
+        },
+      },
+      { text: "1d 750m 30s 500ms" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: {
+          days: true,
+          hours: true,
+          seconds: true,
+          milliseconds: true,
+        },
+      },
+      { text: "1d 12h 1,830s 500ms" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: {
+          days: true,
+          hours: true,
+          minutes: true,
+          milliseconds: true,
+        },
+      },
+      { text: "1d 12h 30m 30,500ms" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: {
+          days: true,
+          hours: true,
+          minutes: true,
+          seconds: true,
+        },
+      },
+      { text: "1d 12h 30m 31s" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: { minutes: true, seconds: true, milliseconds: true },
+      },
+      { text: "2,190m 30s 500ms" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: { hours: true, seconds: true, milliseconds: true },
+      },
+      { text: "36h 1,830s 500ms" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: { hours: true, minutes: true, milliseconds: true },
+      },
+      { text: "36h 30m 30,500ms" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: { hours: true, minutes: true, seconds: true },
+      },
+      { text: "36h 30m 31s" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: { days: true, seconds: true, milliseconds: true },
+      },
+      { text: "1d 45,030s 500ms" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: { days: true, minutes: true, milliseconds: true },
+      },
+      { text: "1d 750m 30,500ms" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: { days: true, minutes: true, seconds: true },
+      },
+      { text: "1d 750m 31s" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: { days: true, hours: true, milliseconds: true },
+      },
+      { text: "1d 12h 1,830,500ms" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: { days: true, hours: true, seconds: true },
+      },
+      { text: "1d 12h 1,831s" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: { days: true, hours: true, minutes: true },
+      },
+      { text: "1d 12h 31m" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: {
+          seconds: true,
+          milliseconds: true,
+        },
+      },
+      { text: "131,430s 500ms" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: {
+          minutes: true,
+          milliseconds: true,
+        },
+      },
+      { text: "2,190m 30,500ms" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: {
+          minutes: true,
+          seconds: true,
+        },
+      },
+      { text: "2,190m 31s" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: {
+          hours: true,
+          milliseconds: true,
+        },
+      },
+      { text: "36h 1,830,500ms" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: {
+          hours: true,
+          seconds: true,
+        },
+      },
+      { text: "36h 1,831s" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: {
+          hours: true,
+          minutes: true,
+        },
+      },
+      { text: "36h 31m" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: {
+          days: true,
+          milliseconds: true,
+        },
+      },
+      { text: "1d 45,030,500ms" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: {
+          days: true,
+          seconds: true,
+        },
+      },
+      { text: "1d 45,031s" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: {
+          days: true,
+          minutes: true,
+        },
+      },
+      { text: "1d 751m" }
+    );
+    testDuration(
+      roundingDuration,
+      {
+        displayUnits: {
+          days: true,
+          hours: true,
+        },
+      },
+      { text: "1d 13h" }
+    );
+    testDuration(
+      roundingDuration,
+      { displayUnits: { days: true } },
+      { text: "2d" }
+    );
+    testDuration(
+      roundingDuration,
+      { displayUnits: { hours: true } },
+      { text: "37h" }
+    );
+    testDuration(
+      roundingDuration,
+      { displayUnits: { minutes: true } },
+      { text: "2,191m" }
+    );
+    testDuration(
+      roundingDuration,
+      { displayUnits: { seconds: true } },
+      { text: "131,431s" }
+    );
+    testDuration(
+      roundingDuration,
+      { displayUnits: { milliseconds: true } },
+      { text: "131,430,500ms" }
+    );
+    testDuration(
+      roundingDuration,
+      { displayUnits: {} },
+      { text: "1d 12h 30m 31s" }
+    );
+  });
+});

package/src/__tests__/features/invalid.test.ts

@@ -0,0 +1,32 @@
+import { EM_DASH } from "../../constants";
+import testDuration from "./testDuration";
+
+describe("When using an invalid value...", () => {
+  describe("... it renders a dash", () => {
+    testDuration(
+      undefined,
+      { invalidMillisecondsLabel: "Not available" },
+      { text: EM_DASH, label: "Not available" }
+    );
+    testDuration(
+      null,
+      { invalidMillisecondsLabel: "Not available" },
+      { text: EM_DASH, label: "Not available" }
+    );
+    testDuration(
+      NaN,
+      { invalidMillisecondsLabel: "Not available" },
+      { text: EM_DASH, label: "Not available" }
+    );
+    testDuration(
+      Infinity,
+      { invalidMillisecondsLabel: "Not available" },
+      { text: EM_DASH, label: "Not available" }
+    );
+    testDuration(
+      -Infinity,
+      { invalidMillisecondsLabel: "Not available" },
+      { text: EM_DASH, label: "Not available" }
+    );
+  });
+});

package/src/__tests__/features/locale.test.ts

@@ -0,0 +1,87 @@
+import testDuration from "./testDuration";
+
+describe("When using a locale...", () => {
+  describe("... it should use the proper punctuation and spacing", () => {
+    testDuration(90061001, { locale: "en-US" }, { text: "1d 1h 1m 1s" });
+    testDuration(180122002, { locale: "en-US" }, { text: "2d 2h 2m 2s" });
+    testDuration(90061001, { locale: "es-LA" }, { text: "1d 1h 1min 1s" });
+    testDuration(180122002, { locale: "es-LA" }, { text: "2d 2h 2min 2s" });
+    testDuration(90061001, { locale: "fr-FR" }, { text: "1j 1h 1min 1s" });
+    testDuration(180122002, { locale: "fr-FR" }, { text: "2j 2h 2min 2s" });
+    testDuration(90061001, { locale: "it-IT" }, { text: "1g 1h 1min 1s" });
+    testDuration(180122002, { locale: "it-IT" }, { text: "2gg 2h 2min 2s" });
+    testDuration(
+      90061001,
+      { locale: "pt-BR" },
+      { text: "1 dia 1 h 1 min 1 s" }
+    );
+    testDuration(
+      180122002,
+      { locale: "pt-BR" },
+      { text: "2 dias 2 h 2 min 2 s" }
+    );
+  });
+
+  describe("... it should work with display", () => {
+    const options = { display: "long" };
+
+    testDuration(
+      90061001,
+      { ...options, locale: "en-US" },
+      { text: "1 day 1 hour 1 minute 1 second" }
+    );
+    testDuration(
+      180122002,
+      { ...options, locale: "en-US" },
+      { text: "2 days 2 hours 2 minutes 2 seconds" }
+    );
+    testDuration(
+      90061001,
+      { ...options, locale: "es-LA" },
+      { text: "1 día 1 hora 1 minuto 1 segundo" }
+    );
+    testDuration(
+      180122002,
+      { ...options, locale: "es-LA" },
+      { text: "2 días 2 horas 2 minutos 2 segundos" }
+    );
+    testDuration(
+      90061001,
+      { ...options, locale: "fr-FR" },
+      {
+        text: "1 jour 1 heure 1 minute 1 seconde",
+        // see this article as to why the \xa0 is needed: https://stackoverflow.com/a/66409196
+        format: "1\xa0jour 1\xa0heure 1 minute 1\xa0seconde",
+      }
+    );
+    testDuration(
+      180122002,
+      { ...options, locale: "fr-FR" },
+      {
+        text: "2 jours 2 heures 2 minutes 2 secondes",
+        // see this article as to why the \xa0 is needed: https://stackoverflow.com/a/66409196
+        format: "2\xa0jours 2\xa0heures 2 minutes 2\xa0secondes",
+      }
+    );
+    testDuration(
+      90061001,
+      { ...options, locale: "it-IT" },
+      { text: "1 giorno 1 ora 1 minuto 1 secondo" }
+    );
+    testDuration(
+      180122002,
+      { ...options, locale: "it-IT" },
+      { text: "2 giorni 2 ore 2 minuti 2 secondi" }
+    );
+    testDuration(
+      90061001,
+      { ...options, locale: "pt-BR" },
+      { text: "1 dia 1 hora 1 minuto 1 segundo" }
+    );
+    testDuration(
+      180122002,
+      { ...options, locale: "pt-BR" },
+      { text: "2 dias 2 horas 2 minutos 2 segundos" }
+    );
+  });
+});