From 8ae669c8d463069fc6ab9114093da5c18658e011 Mon Sep 17 00:00:00 2001 From: Michael Linares Date: Sun, 8 Oct 2023 23:04:42 +0200 Subject: [PATCH 1/3] Fix datetime bug. --- src/components/topbar/StatusAlerts.unit.ts | 48 +++++++++++++++++----- src/components/topbar/StatusAlerts.vue | 20 ++++----- src/plugins/datetime.js | 25 ++++++++++- src/plugins/datetime.unit.js | 8 ++++ 4 files changed, 77 insertions(+), 24 deletions(-) diff --git a/src/components/topbar/StatusAlerts.unit.ts b/src/components/topbar/StatusAlerts.unit.ts index b9087a413b..2308084cfe 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 dayjs from "dayjs"; const testProps = { statusAlerts: mockStatusAlerts, @@ -59,18 +60,43 @@ describe("@/components/topbar/StatusAlerts", () => { }); }); -describe("getCreatedDate", () => { - it("should be getCreatedDate function on the template", () => { - const wrapper = getWrapper(testProps); - const expectedDate = "05.05.2023 12:34"; - const alertElement = wrapper.find(".alert-date"); - expect(alertElement.element.innerHTML).toContain(expectedDate); +describe("formatDate", () => { + const wrapper = getWrapper(testProps); + it("returns 'a few seconds ago' for seconds difference", () => { + const pastDate = dayjs.utc().subtract(30, "seconds").toISOString(); + const expectedDate = "a few seconds ago"; + expect(wrapper.vm.formatDate(pastDate)).toEqual(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); + it("returns correct format for hours difference", () => { + const pastDate = dayjs.utc().subtract(5, "hours").toISOString(); + const expectedDate = "5 hours ago"; + expect(wrapper.vm.formatDate(pastDate)).toEqual(expectedDate); + }); + + it("returns European format after 7 days", () => { + const pastDate = dayjs.utc().subtract(8, "days").toISOString(); + const expectedDate = dayjs.utc(pastDate).format("DD.MM.YYYY"); + expect(wrapper.vm.formatDate(pastDate)).toEqual(expectedDate); + }); +}); +describe("formatDate", () => { + const wrapper = getWrapper(testProps); + it("returns 'a few seconds ago' for seconds difference", () => { + const pastDate = dayjs.utc().subtract(30, "seconds").toISOString(); + const expectedDate = "a few seconds ago"; + expect(wrapper.vm.formatDate(pastDate)).toEqual(expectedDate); + }); + + it("returns correct format for hours difference", () => { + const pastDate = dayjs.utc().subtract(5, "hours").toISOString(); + const expectedDate = "5 hours ago"; + expect(wrapper.vm.formatDate(pastDate)).toEqual(expectedDate); + }); + + it("returns European format after 7 days", () => { + const pastDate = dayjs.utc().subtract(8, "days").toISOString(); + const expectedDate = dayjs.utc(pastDate).format("DD.MM.YYYY"); + expect(wrapper.vm.formatDate(pastDate)).toEqual(expectedDate); }); }); diff --git a/src/components/topbar/StatusAlerts.vue b/src/components/topbar/StatusAlerts.vue index c9acbd6063..5573915396 100644 --- a/src/components/topbar/StatusAlerts.vue +++ b/src/components/topbar/StatusAlerts.vue @@ -34,10 +34,11 @@ 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) }} + + {{ $t("common.labels.createAt") }} {{ formatDate(item.createdAt) }} @@ -46,7 +47,7 @@ diff --git a/src/plugins/datetime.js b/src/plugins/datetime.js index 44289abc1c..bde50c4765 100644 --- a/src/plugins/datetime.js +++ b/src/plugins/datetime.js @@ -239,6 +239,11 @@ export const createInputDateTime = (date) => { ]; }; +export const setDayjsLocale = () => { + const locale = authModule.getLocale || "de"; + dayjs.locale(locale); +}; + /** * Returns date difference to current local time * @param {String} date @@ -252,6 +257,23 @@ export const fromNow = (date, isLocalTimeZone) => { return fromUTC(date).fromNow(); }; +export const formatDateForAlerts = (date, isLocalTimeZone = false) => { + const time = isLocalTimeZone ? dayjs(date) : dayjs.tz(date, "UTC"); + const current = isLocalTimeZone ? dayjs() : dayjs.utc(); + + setDayjsLocale(); + + const totalDaysDiff = Math.abs(current.diff(time, "day")); + const MAX_DAYS_BEFORE_SHOWING_FULL_DATE = 7; + + if (totalDaysDiff < MAX_DAYS_BEFORE_SHOWING_FULL_DATE) { + // If it is less than 7 days, we use fromNow + return fromNow(date, isLocalTimeZone); + } else { + // If it is 7 days or more, we return in European format. + return time.format("DD.MM.YYYY"); + } +}; /** * Returns future date difference to current local time * @param {String} date @@ -289,6 +311,5 @@ export default ({ app, store }) => { initDefaultTimezone(app, store); setDefaultFormats(app); - const locale = authModule.getLocale || "de"; - dayjs.locale(locale); + setDayjsLocale(); }; diff --git a/src/plugins/datetime.unit.js b/src/plugins/datetime.unit.js index 66e0060075..5a47baa896 100644 --- a/src/plugins/datetime.unit.js +++ b/src/plugins/datetime.unit.js @@ -3,6 +3,7 @@ import { currentDate, fromInputDateTime, fromNow, + formatDateForAlerts, fromNowToFuture, createInputDateTime, inputRangeDate, @@ -154,6 +155,13 @@ describe("@/plugins/datetime", () => { expect(result).toBe("in 7 days"); }); + it("formatDateForAlerts", () => { + const sevenDaysAgo = dayjs().subtract(7, "days"); + const expectedDate = sevenDaysAgo.format("DD.MM.YYYY"); + const result = formatDateForAlerts(sevenDaysAgo); + expect(result).toBe(expectedDate); + }); + it("fromNowToFuture", () => { const past = dateUTC.toISOString(); const future = dateNow.add(230, "minute").toISOString(); From bde700b7a877afa168ecb52c92bf521b481e4bf2 Mon Sep 17 00:00:00 2001 From: Michael Linares Date: Sun, 15 Oct 2023 19:09:18 +0200 Subject: [PATCH 2/3] Added tests unit for formatDate. --- src/components/topbar/StatusAlerts.unit.ts | 37 ++++------------------ src/plugins/datetime.js | 11 ++++--- src/plugins/datetime.unit.js | 11 ++++++- 3 files changed, 22 insertions(+), 37 deletions(-) diff --git a/src/components/topbar/StatusAlerts.unit.ts b/src/components/topbar/StatusAlerts.unit.ts index 2308084cfe..d1f2214a73 100644 --- a/src/components/topbar/StatusAlerts.unit.ts +++ b/src/components/topbar/StatusAlerts.unit.ts @@ -5,6 +5,7 @@ import { mockStatusAlerts } from "@@/tests/test-utils/mockStatusAlerts"; import Vue from "vue"; import createComponentMocks from "@@/tests/test-utils/componentMocks"; import dayjs from "dayjs"; +import { formatDateForAlerts } from "@/plugins/datetime"; const testProps = { statusAlerts: mockStatusAlerts, @@ -62,38 +63,12 @@ describe("@/components/topbar/StatusAlerts", () => { describe("formatDate", () => { const wrapper = getWrapper(testProps); - it("returns 'a few seconds ago' for seconds difference", () => { - const pastDate = dayjs.utc().subtract(30, "seconds").toISOString(); - const expectedDate = "a few seconds ago"; - expect(wrapper.vm.formatDate(pastDate)).toEqual(expectedDate); - }); - - it("returns correct format for hours difference", () => { - const pastDate = dayjs.utc().subtract(5, "hours").toISOString(); - const expectedDate = "5 hours ago"; - expect(wrapper.vm.formatDate(pastDate)).toEqual(expectedDate); - }); - - it("returns European format after 7 days", () => { - const pastDate = dayjs.utc().subtract(8, "days").toISOString(); - const expectedDate = dayjs.utc(pastDate).format("DD.MM.YYYY"); - expect(wrapper.vm.formatDate(pastDate)).toEqual(expectedDate); + it("returns 'vor ein paar Sekunden' for seconds difference", () => { + const fewSecondsAgo = dayjs().subtract(30, "seconds"); + const expectedOutput = "vor ein paar Sekunden"; + const result = formatDateForAlerts(fewSecondsAgo); + expect(result).toBe(expectedOutput); }); -}); -describe("formatDate", () => { - const wrapper = getWrapper(testProps); - it("returns 'a few seconds ago' for seconds difference", () => { - const pastDate = dayjs.utc().subtract(30, "seconds").toISOString(); - const expectedDate = "a few seconds ago"; - expect(wrapper.vm.formatDate(pastDate)).toEqual(expectedDate); - }); - - it("returns correct format for hours difference", () => { - const pastDate = dayjs.utc().subtract(5, "hours").toISOString(); - const expectedDate = "5 hours ago"; - expect(wrapper.vm.formatDate(pastDate)).toEqual(expectedDate); - }); - it("returns European format after 7 days", () => { const pastDate = dayjs.utc().subtract(8, "days").toISOString(); const expectedDate = dayjs.utc(pastDate).format("DD.MM.YYYY"); diff --git a/src/plugins/datetime.js b/src/plugins/datetime.js index bde50c4765..b8b54e1213 100644 --- a/src/plugins/datetime.js +++ b/src/plugins/datetime.js @@ -239,11 +239,6 @@ export const createInputDateTime = (date) => { ]; }; -export const setDayjsLocale = () => { - const locale = authModule.getLocale || "de"; - dayjs.locale(locale); -}; - /** * Returns date difference to current local time * @param {String} date @@ -274,6 +269,12 @@ export const formatDateForAlerts = (date, isLocalTimeZone = false) => { return time.format("DD.MM.YYYY"); } }; + +export const setDayjsLocale = () => { + const locale = authModule?.getLocale || "de"; + dayjs.locale(locale); +}; + /** * Returns future date difference to current local time * @param {String} date diff --git a/src/plugins/datetime.unit.js b/src/plugins/datetime.unit.js index 5a47baa896..9f00d88262 100644 --- a/src/plugins/datetime.unit.js +++ b/src/plugins/datetime.unit.js @@ -24,7 +24,16 @@ import timezone from "dayjs/plugin/timezone"; import relativeTime from "dayjs/plugin/relativeTime"; import customParseFormat from "dayjs/plugin/customParseFormat"; import setupStores from "../../tests/test-utils/setupStores"; -import AuthModule from "@/store/auth"; +// import AuthModule from "@/store/auth"; +import { authModule } from "@/store"; + +jest.mock("@/store", () => ({ + authModule: { + get getLocale() { + return "en"; + }, + }, +})); dayjs.extend(customParseFormat); dayjs.extend(utc); From ae50eec50f169da414216ca355b4543dfd2bab59 Mon Sep 17 00:00:00 2001 From: Michael Linares Date: Mon, 16 Oct 2023 16:25:32 +0200 Subject: [PATCH 3/3] Remove jest mocking authModule. --- src/plugins/datetime.unit.js | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/plugins/datetime.unit.js b/src/plugins/datetime.unit.js index 9f00d88262..5a47baa896 100644 --- a/src/plugins/datetime.unit.js +++ b/src/plugins/datetime.unit.js @@ -24,16 +24,7 @@ import timezone from "dayjs/plugin/timezone"; import relativeTime from "dayjs/plugin/relativeTime"; import customParseFormat from "dayjs/plugin/customParseFormat"; import setupStores from "../../tests/test-utils/setupStores"; -// import AuthModule from "@/store/auth"; -import { authModule } from "@/store"; - -jest.mock("@/store", () => ({ - authModule: { - get getLocale() { - return "en"; - }, - }, -})); +import AuthModule from "@/store/auth"; dayjs.extend(customParseFormat); dayjs.extend(utc);