From 846ebeaafb266c959ba3afead2d1a9754d209400 Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Wed, 17 Apr 2024 10:43:15 -0700 Subject: [PATCH 1/2] fix(NcDateTime): Respect language Signed-off-by: Christopher Ng --- src/composables/useFormatDateTime.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/composables/useFormatDateTime.ts b/src/composables/useFormatDateTime.ts index 1158a1497f..3ca694bb31 100644 --- a/src/composables/useFormatDateTime.ts +++ b/src/composables/useFormatDateTime.ts @@ -20,7 +20,7 @@ * */ -import { getCanonicalLocale } from '@nextcloud/l10n' +import { getCanonicalLocale, getLanguage } from '@nextcloud/l10n' import { computed, onUnmounted, ref, onMounted, watch, unref, type Ref } from 'vue' import { t } from '../l10n.js' @@ -48,7 +48,7 @@ interface FormatDateOptions { type MaybeRef = T | Ref /** - * Composable for formatting time stamps using current users locale + * Composable for formatting time stamps using current users locale and language * * @param {Date | number | import('vue').Ref | import('vue').Ref} timestamp Current timestamp * @param {object} opts Optional options @@ -87,7 +87,7 @@ export function useFormatDateTime( /** Time string formatted for main text */ const formattedTime = computed(() => { if (wrappedOptions.value.relativeTime !== false) { - const formatter = new Intl.RelativeTimeFormat(getCanonicalLocale(), { numeric: 'auto', style: wrappedOptions.value.relativeTime }) + const formatter = new Intl.RelativeTimeFormat(getLanguage(), { numeric: 'auto', style: wrappedOptions.value.relativeTime }) const diff = date.value.getTime() - currentTime.value const seconds = diff / 1000 From 4f57f6d120082d39f81993e824ed404ba8e71f0c Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Fri, 19 Apr 2024 10:29:48 -0700 Subject: [PATCH 2/2] test(NcDateTime): Works with different languages Signed-off-by: Christopher Ng --- .../components/NcDateTime/NcDateTime.spec.js | 27 ++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/tests/unit/components/NcDateTime/NcDateTime.spec.js b/tests/unit/components/NcDateTime/NcDateTime.spec.js index 0cd58f1200..8df30d29a4 100644 --- a/tests/unit/components/NcDateTime/NcDateTime.spec.js +++ b/tests/unit/components/NcDateTime/NcDateTime.spec.js @@ -84,7 +84,7 @@ describe('NcDateTime.vue', () => { /** * Use German locale as it uses a different date format than English */ - it('', () => { + it('Works with absolute timestamps', () => { const time = Date.UTC(2023, 5, 23, 14, 30) jest.setSystemTime(time) const wrapper = mount(NcDateTime, { @@ -98,6 +98,31 @@ describe('NcDateTime.vue', () => { }) }) + describe('Work with different languages', () => { + beforeAll(() => { + // mock the language + document.documentElement.lang = 'de' + }) + afterAll(() => { + // revert mock + document.documentElement.lang = 'en' + }) + + it('Works with relative timestamps', () => { + const now = Date.UTC(2023, 5, 24, 14, 0) + jest.setSystemTime(now) + + const yesterday = Date.UTC(2023, 5, 23, 13, 59) + const wrapper = mount(NcDateTime, { + propsData: { + timestamp: yesterday, + }, + }) + + expect(wrapper.text()).toMatch('gestern') + }) + }) + describe('Shows relative time', () => { it('works with currentTime == timestamp', () => { const time = Date.UTC(2023, 5, 23, 14, 30)