Create tests for fromNow function on statusAlerts.

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");
 	});
 });

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) }} |
+					<template v-if="item.timestamp !== item.createdAt">
+						{{ $t("common.labels.updateAt") }}
+						{{ formatDate(item.timestamp) }} |
+					</template>
 					{{ $t("common.labels.createAt") }}
-					{{ getCreatedDate(item.createdAt) }}
+					{{ formatDate(item.createdAt) }}
 				</v-list-item-subtitle>
 			</v-list-item-content>
 		</v-list-item>
@@ -46,7 +48,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import { printDateTime, fromNow } from "../../plugins/datetime";
+import { fromNow } from "../../plugins/datetime";
 import { mdiAlertCircle, mdiInformation } from "@mdi/js";
 import { StatusAlert } from "@/store/types/status-alert";
 
@@ -65,14 +67,11 @@ export default defineComponent({
 				: { icon: mdiInformation, color: "info" };
 		};
 
-		const getDate = (date: string) => {
-			return fromNow(date, true);
-		};
-		const getCreatedDate = (dateTime: string) => {
-			return printDateTime(dateTime);
+		const formatDate = (dateTime: string) => {
+			return fromNow(dateTime, true);
 		};
 
-		return { getIconTag, getDate, getCreatedDate };
+		return { getIconTag, formatDate };
 	},
 });
 </script>

src/plugins/datetime.js

@@ -237,17 +237,46 @@ 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
  * @param {boolean} isLocalTimeZone set true if input date is to be handled in local time zone instead of utc
  * @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");
 };
 
 /**

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", () => {