[next] fix(NcDateTime): Respect language

src/composables/useFormatDateTime.ts

@@ -21,7 +21,7 @@
  */
 
 import type { MaybeRef } from 'vue'
-import { getCanonicalLocale } from '@nextcloud/l10n'
+import { getCanonicalLocale, getLanguage } from '@nextcloud/l10n'
 import { computed, onUnmounted, ref, toValue, watchEffect } from 'vue'
 import { t } from '../l10n.js'
 
@@ -47,7 +47,7 @@ interface FormatDateOptions {
 }
 
 /**
- * Composable for formatting time stamps using current users locale
+ * Composable for formatting time stamps using current users locale and language
  *
  * @param {import('vue').MaybeRef<Date | number>} timestamp Current timestamp
  * @param {object} opts Optional options
@@ -86,7 +86,7 @@ export function useFormatDateTime(
 	/** Time string formatted for main text */
 	const formattedTime = computed<string>(() => {
 		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

tests/unit/components/NcDateTime/NcDateTime.spec.js

@@ -85,7 +85,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)
 			vi.setSystemTime(time)
 			const wrapper = mount(NcDateTime, {
@@ -99,6 +99,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)
+			vi.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)