From 882e7b5226ed4c69de7cd571b6d1da5f6abf8fb7 Mon Sep 17 00:00:00 2001 From: Michael Linares Date: Fri, 22 Sep 2023 13:33:00 +0200 Subject: [PATCH] Create tests for fromNow function on statusAlerts. --- src/components/topbar/StatusAlerts.unit.ts | 16 +++++----- src/components/topbar/StatusAlerts.vue | 19 ++++++------ src/plugins/datetime.js | 35 ++++++++++++++++++++-- src/plugins/datetime.unit.js | 26 ++++++++++++++-- 4 files changed, 73 insertions(+), 23 deletions(-) diff --git a/src/components/topbar/StatusAlerts.unit.ts b/src/components/topbar/StatusAlerts.unit.ts index b9087a413bb..5b732ec6771 100644 --- a/src/components/topbar/StatusAlerts.unit.ts +++ b/src/components/topbar/StatusAlerts.unit.ts @@ -4,6 +4,7 @@ import setupStores from "@@/tests/test-utils/setupStores"; import { mockStatusAlerts } from "@@/tests/test-utils/mockStatusAlerts"; import Vue from "vue"; import createComponentMocks from "@@/tests/test-utils/componentMocks"; +import { fromNow } from "@/plugins/datetime"; const testProps = { statusAlerts: mockStatusAlerts, @@ -59,18 +60,19 @@ describe("@/components/topbar/StatusAlerts", () => { }); }); -describe("getCreatedDate", () => { - it("should be getCreatedDate function on the template", () => { +describe("formatDate", () => { + it("should be formatDate function on the template", () => { const wrapper = getWrapper(testProps); - const expectedDate = "05.05.2023 12:34"; + const expectedDate = "05.05.2023"; const alertElement = wrapper.find(".alert-date"); expect(alertElement.element.innerHTML).toContain(expectedDate); }); it("should returns expected result", () => { - const wrapper = getWrapper(testProps); - const expectedDate = "05.05.2023 12:34"; - const dateTime = "May 5, 2023 12:34 PM"; - expect(wrapper.vm.getCreatedDate(dateTime)).toEqual(expectedDate); + jest + .useFakeTimers("modern") + .setSystemTime(new Date("2023-09-14T10:37:38.730234")); + const result = fromNow("2023-09-12T10:37:38.730234", true); + expect(result).toEqual("2 days ago"); }); }); diff --git a/src/components/topbar/StatusAlerts.vue b/src/components/topbar/StatusAlerts.vue index c9acbd60638..45a7ce1ca93 100644 --- a/src/components/topbar/StatusAlerts.vue +++ b/src/components/topbar/StatusAlerts.vue @@ -34,10 +34,12 @@ class="text-left text-caption d-flex flex-row alert-date text--secondary mt-0 mt-2" :data-testid="`alert-date-${index}`" > - {{ $t("common.labels.updateAt") }} - {{ getDate(item.timestamp) }} | + {{ $t("common.labels.createAt") }} - {{ getCreatedDate(item.createdAt) }} + {{ formatDate(item.createdAt) }} @@ -46,7 +48,7 @@ diff --git a/src/plugins/datetime.js b/src/plugins/datetime.js index 66680fa7107..f4e33e63006 100644 --- a/src/plugins/datetime.js +++ b/src/plugins/datetime.js @@ -237,6 +237,14 @@ export const createInputDateTime = (date) => { ]; }; +const getPlural = (count, singular, plural) => { + return count === 1 ? singular : plural; +}; + +const MINUTES_IN_HOUR = 60; +const HOURS_IN_DAY = 24; +const MAX_DAYS_BEFORE_SHOWING_FULL_DATE = 7; + /** * Returns date difference to current local time * @param {String} date @@ -244,10 +252,31 @@ export const createInputDateTime = (date) => { * @return {String} Date difference based on current timezone */ export const fromNow = (date, isLocalTimeZone) => { - if (isLocalTimeZone == true) { - return dayjs(date).fromNow(); + const time = isLocalTimeZone ? dayjs(date) : dayjs.tz(date, "UTC"); + const current = isLocalTimeZone ? dayjs() : dayjs.utc(); + + const totalMinutesDiff = Math.abs(current.diff(time, "minute")); + + if (totalMinutesDiff < MINUTES_IN_HOUR) { + const minuteWord = getPlural(totalMinutesDiff, "minute", "minutes"); + return `${totalMinutesDiff} ${minuteWord} ago`; + } + + const totalHoursDiff = Math.abs(current.diff(time, "hour")); + + if (totalHoursDiff < HOURS_IN_DAY) { + const hourWord = getPlural(totalHoursDiff, "hour", "hours"); + return `${totalHoursDiff} ${hourWord} ago`; + } + + const totalDaysDiff = Math.abs(current.diff(time, "day")); + + if (totalDaysDiff < MAX_DAYS_BEFORE_SHOWING_FULL_DATE) { + const dayWord = getPlural(totalDaysDiff, "day", "days"); + return `${totalDaysDiff} ${dayWord} ago`; } - return fromUTC(date).fromNow(); + + return time.format("DD.MM.YYYY"); }; /** diff --git a/src/plugins/datetime.unit.js b/src/plugins/datetime.unit.js index 66e00600750..c11cd1a5abe 100644 --- a/src/plugins/datetime.unit.js +++ b/src/plugins/datetime.unit.js @@ -149,9 +149,29 @@ describe("@/plugins/datetime", () => { expect(result3).toBe(dateNow.clone().format("YYYY-MM-DD")); }); - it("fromNow", () => { - const result = fromNow(dateNow.clone().add(7, "days")); - expect(result).toBe("in 7 days"); + // FROM Now + it("should return minutes difference", () => { + jest + .useFakeTimers("modern") + .setSystemTime(new Date("2023-09-14T10:22:38.730234")); // this line sets a permanent fake time + const result = fromNow("2023-09-14T10:07:38.730234", true); + expect(result).toBe("15 minutes ago"); + }); + + it("should return hours difference", () => { + jest + .useFakeTimers("modern") + .setSystemTime(new Date("2023-09-14T10:37:38.730234")); + const result = fromNow("2023-09-14T06:37:38.730234", true); + expect(result).toBe("4 hours ago"); + }); + + it("should return days difference", () => { + jest + .useFakeTimers("modern") + .setSystemTime(new Date("2023-09-14T10:37:38.730234")); + const result = fromNow("2023-09-12T10:37:38.730234", true); + expect(result).toBe("2 days ago"); }); it("fromNowToFuture", () => {