diff --git a/packages/x-components/src/x-modules/history-queries/components/__tests__/my-history.spec.ts b/packages/x-components/src/x-modules/history-queries/components/__tests__/my-history.spec.ts index ae17531a47..adb271b15e 100644 --- a/packages/x-components/src/x-modules/history-queries/components/__tests__/my-history.spec.ts +++ b/packages/x-components/src/x-modules/history-queries/components/__tests__/my-history.spec.ts @@ -119,8 +119,8 @@ describe('testing MyHistory component', () => { it('renders the date using the locale prop when there is no snippetConfig', async () => { const historyQueriesGroupedByDate = { - 'lunes, 18 de abril de 2022': [historyQueries[0], historyQueries[1]], - 'miércoles, 6 de abril de 2022': [historyQueries[2], historyQueries[3]], + 'Lunes, 18 de abril de 2022': [historyQueries[0], historyQueries[1]], + 'Miércoles, 6 de abril de 2022': [historyQueries[2], historyQueries[3]], } const locale = 'es' const { findAllInWrapper } = renderMyHistory({ @@ -215,6 +215,49 @@ describe('testing MyHistory component', () => { ) }) + it('should use uiLang from snippetConfig for date formatting', async () => { + const historyQueriesGroupedByDate = { + 'Lunes, 18 de abril de 2022': [historyQueries[0], historyQueries[1]], + 'Miércoles, 6 de abril de 2022': [historyQueries[2], historyQueries[3]], + } + const { findAllInWrapper } = renderMyHistory({ + historyQueries, + snippetConfig: { ...baseSnippetConfig, lang: 'en', uiLang: 'es' }, + }) + + await nextTick() + expectValidHistoryContent(historyQueriesGroupedByDate, findAllInWrapper, 'es') + }) + + it('should capitalize the first character of formatted dates', async () => { + const { findAllInWrapper } = renderMyHistory({ + historyQueries, + snippetConfig: { ...baseSnippetConfig, lang: 'es', uiLang: 'es' }, + }) + + await nextTick() + const historyWrappers = findAllInWrapper('my-history-item') + historyWrappers.forEach(wrapper => { + const dateText = wrapper.find(getDataTestSelector('my-history-date')).text() + // Check first character is uppercase + expect(dateText.charAt(0)).toBe(dateText.charAt(0).toUpperCase()) + }) + }) + + it('should fallback to lang when uiLang is not provided', async () => { + const historyQueriesGroupedByDate = { + 'Lunes, 18 de abril de 2022': [historyQueries[0], historyQueries[1]], + 'Miércoles, 6 de abril de 2022': [historyQueries[2], historyQueries[3]], + } + const { findAllInWrapper } = renderMyHistory({ + historyQueries, + snippetConfig: { ...baseSnippetConfig, lang: 'es' }, + }) + + await nextTick() + expectValidHistoryContent(historyQueriesGroupedByDate, findAllInWrapper, 'es') + }) + function expectValidHistoryContent( historyQueriesGroupedByDate: Record, findAllInWrapper: MyHistoryAPI['findAllInWrapper'], diff --git a/packages/x-components/src/x-modules/history-queries/components/my-history.vue b/packages/x-components/src/x-modules/history-queries/components/my-history.vue index b8cbb01c6b..2c6d6fcb48 100644 --- a/packages/x-components/src/x-modules/history-queries/components/my-history.vue +++ b/packages/x-components/src/x-modules/history-queries/components/my-history.vue @@ -130,7 +130,7 @@ export default defineComponent({ * @returns The locale to be used. * @internal */ - const usedLocale = computed(() => snippetConfig?.lang ?? props.locale) + const usedLocale = computed(() => snippetConfig?.uiLang ?? snippetConfig?.lang ?? props.locale) /** * Returns a record of history queries grouped by date. @@ -155,12 +155,13 @@ export default defineComponent({ */ const groupByDate = computed((): Dictionary => { return groupItemsBy(historyQueries.value as HistoryQueryType[], current => { - return new Date(current.timestamp).toLocaleDateString(usedLocale.value, { + const formatted = new Date(current.timestamp).toLocaleDateString(usedLocale.value, { day: 'numeric', weekday: 'long', month: 'long', year: 'numeric', }) + return formatted.charAt(0).toUpperCase() + formatted.slice(1) }) })