test(NcDateTimePicker): add snapshot tests for localized formatting

Signed-off-by: Oleksandr Dzhychko <hey@oleks.dev>

Author: odzhychko

src/components/NcDateTimePicker/NcDateTimePicker.vue

@@ -293,6 +293,7 @@ import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
 import NcTimezonePicker from '../NcTimezonePicker/NcTimezonePicker.vue'
 import { t } from '../../l10n.ts'
 import NcButton from '../NcButton/index.ts'
+import { getDateFormat, getDateRangeFormat, getDateTimeFormat, getDateTimeRangeFormat, getMonthFormat, getTimeFormat, getTimeRangeFormat, getYearFormat } from './format.ts'
 import useDateFnsLocale from './useDateFnsLocale.ts'
 
 type LibraryFormatOptions = VueDatePickerProps['format']
@@ -557,23 +558,23 @@ const realFormat = computed<LibraryFormatOptions>(() => {
 		return 'RR-II'
 	}
 
-	let formatter: Intl.DateTimeFormat | undefined
-	if (props.type === 'date' || props.type === 'date-range') {
-		formatter = new Intl.DateTimeFormat(realLocale, { dateStyle: 'medium' })
-	} else if (props.type === 'time' || props.type === 'time-range') {
-		formatter = new Intl.DateTimeFormat(realLocale, { timeStyle: 'short' })
-	} else if (props.type === 'datetime' || props.type === 'datetime-range') {
-		formatter = new Intl.DateTimeFormat(realLocale, { dateStyle: 'medium', timeStyle: 'short' })
-	} else if (props.type === 'month') {
-		formatter = new Intl.DateTimeFormat(realLocale, { year: 'numeric', month: '2-digit' })
-	} else if (props.type === 'year') {
-		formatter = new Intl.DateTimeFormat(realLocale, { year: 'numeric' })
-	}
-
-	if (formatter) {
-		return (input: Date | [Date, Date]) => Array.isArray(input)
-			? formatter.formatRange(input[0], input[1])
-			: formatter.format(input)
+	switch (props.type) {
+		case 'date':
+			return getDateFormat(realLocale)
+		case 'date-range':
+			return getDateRangeFormat(realLocale)
+		case 'time':
+			return getTimeFormat(realLocale)
+		case 'time-range':
+			return getTimeRangeFormat(realLocale)
+		case 'datetime':
+			return getDateTimeFormat(realLocale)
+		case 'datetime-range':
+			return getDateTimeRangeFormat(realLocale)
+		case 'month':
+			return getMonthFormat(realLocale)
+		case 'year':
+			return getYearFormat(realLocale)
 	}
 
 	// fallback to default formatting

src/components/NcDateTimePicker/format.ts

@@ -0,0 +1,64 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+type DateFormat = ((date: Date) => string)
+type DateRangeFormat = ((dates: Date[]) => string)
+type LocaleCode = string
+
+export function getDateFormat(locale: LocaleCode): DateFormat {
+	const formatter = new Intl.DateTimeFormat(locale, { dateStyle: 'medium' })
+	return (date) => {
+		return formatter.format(date)
+	}
+}
+
+export function getDateRangeFormat(locale: LocaleCode): DateRangeFormat {
+	const formatter = new Intl.DateTimeFormat(locale, { dateStyle: 'medium' })
+	return (dates) => {
+		return formatter.formatRange(dates[0], dates[1])
+	}
+}
+
+export function getTimeFormat(locale: LocaleCode): DateFormat {
+	const formatter = new Intl.DateTimeFormat(locale, { timeStyle: 'short' })
+	return (date) => {
+		return formatter.format(date)
+	}
+}
+
+export function getTimeRangeFormat(locale: LocaleCode): DateRangeFormat {
+	const formatter = new Intl.DateTimeFormat(locale, { timeStyle: 'short' })
+	return (dates) => {
+		return formatter.formatRange(dates[0], dates[1])
+	}
+}
+
+export function getDateTimeFormat(locale: LocaleCode): DateFormat {
+	const formatter = new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'short' })
+	return (date) => {
+		return formatter.format(date)
+	}
+}
+
+export function getDateTimeRangeFormat(locale: LocaleCode): DateRangeFormat {
+	const formatter = new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'short' })
+	return (dates) => {
+		return formatter.formatRange(dates[0], dates[1])
+	}
+}
+
+export function getMonthFormat(locale: LocaleCode): DateFormat {
+	const formatter = new Intl.DateTimeFormat(locale, { year: 'numeric', month: '2-digit' })
+	return (date) => {
+		return formatter.format(date)
+	}
+}
+
+export function getYearFormat(locale: LocaleCode): DateFormat {
+	const formatter = new Intl.DateTimeFormat(locale, { year: 'numeric' })
+	return (date) => {
+		return formatter.format(date)
+	}
+}

tests/component/components/NcDateTimePicker/FormattingSnapshot.story.vue

@@ -0,0 +1,42 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<pre>{{ snapshotString }}</pre>
+</template>
+
+<script setup lang="ts">
+import { getDateFormat, getDateRangeFormat, getDateTimeFormat, getDateTimeRangeFormat, getMonthFormat, getTimeFormat, getTimeRangeFormat, getYearFormat } from '../../../../src/components/NcDateTimePicker/format.ts'
+import allLocales from './allLocales.ts'
+
+const date = new Date(2000, 0, 2, 3, 4)
+const dateRange = [new Date(2000, 0, 1), new Date(2000, 0, 7)]
+const timeRange = [new Date(2000, 0, 1, 2, 3), new Date(2000, 0, 1, 8, 9)]
+const dateTimeRange = [new Date(2000, 0, 1, 2, 3), new Date(2000, 0, 7, 8, 9)]
+
+const snapshot = {
+
+}
+
+for (const locale of allLocales) {
+	const localeCode = locale.code.replaceAll('_', '-')
+	if (Intl.DateTimeFormat.supportedLocalesOf([localeCode]).length === 0) {
+		continue
+	}
+	snapshot[localeCode] = {
+		localeName: locale.name,
+		date: getDateFormat(localeCode)(date),
+		dateRange: getDateRangeFormat(localeCode)(dateRange),
+		time: getTimeFormat(localeCode)(date),
+		timeRange: getTimeRangeFormat(localeCode)(timeRange),
+		dateTime: getDateTimeFormat(localeCode)(date),
+		dateTimeRange: getDateTimeRangeFormat(localeCode)(dateTimeRange),
+		month: getMonthFormat(localeCode)(date),
+		year: getYearFormat(localeCode)(date),
+	}
+}
+
+const snapshotString = JSON.stringify(snapshot, null, 2)
+</script>

…nent/components/NcDateTimePicker.spec.ts …cDateTimePicker/NcDateTimePicker.spec.tstests/component/components/NcDateTimePicker.spec.ts renamed to tests/component/components/NcDateTimePicker/NcDateTimePicker.spec.ts tests/component/components/NcDateTimePicker.spec.ts renamed to tests/component/components/NcDateTimePicker/NcDateTimePicker.spec.ts

@@ -4,7 +4,7 @@
  */
 
 import { expect, test } from '@playwright/experimental-ct-vue'
-import NcDateTimePicker from '../../../src/components/NcDateTimePicker/NcDateTimePicker.vue'
+import NcDateTimePicker from '../../../../src/components/NcDateTimePicker/NcDateTimePicker.vue'
 
 test('aria-label set on input element', async ({ mount, page }) => {
 	await mount(NcDateTimePicker, {