// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ import { defineComponent, nextTick } from 'vue' import { renderComponent } from '#tests/support/components/index.ts' import { i18n } from '#shared/i18n.ts' const Example = defineComponent({ name: 'Example', props: { text: { type: String, required: true, }, }, data: () => ({ i18n }), template: '
{{ i18n.t(text) }}
', }) const populateTranslationMap = () => { const map = new Map([ ['yes', 'ja'], ['Hello world!', 'Hallo Welt!'], ['The second component.', 'Die zweite Komponente.'], [ 'String with 3 placeholders: %s %s %s', 'Zeichenkette mit 3 Platzhaltern: %s %s %s', ], ['FORMAT_DATE', 'dd/mm/yyyy'], ['FORMAT_DATETIME', 'dd/mm/yyyy HH:MM:SS'], ]) i18n.setTranslationMap(map) } describe('i18n', () => { afterEach(() => { i18n.setTranslationMap(new Map()) }) it('starts with empty state', () => { expect(i18n.t('unknown string')).toBe('unknown string') expect(i18n.t('yes')).toBe('yes') }) describe('i18n populated', () => { beforeEach(() => { populateTranslationMap() }) it('translates known strings', () => { expect(i18n.t('yes')).toBe('ja') }) it('handles placeholders correctly', () => { // No arguments. expect(i18n.t('String with 3 placeholders: %s %s %s')).toBe( 'Zeichenkette mit 3 Platzhaltern: %s %s %s', ) }) it('translates dates', () => { expect(i18n.date('2021-04-09T10:11:12Z')).toBe('09/04/2021') expect(i18n.dateTime('2021-04-09T10:11:12Z')).toBe('09/04/2021 10:11:12') expect(i18n.relativeDateTime(new Date().toISOString())).toBe('just now') }) it('updates (reactive) translations automatically', async () => { const { container } = renderComponent(Example, { props: { text: 'Hello world!', }, global: { mocks: { i18n, }, }, }) expect(container).toHaveTextContent('Hallo Welt!') i18n.setTranslationMap(new Map()) await nextTick() expect(container).toHaveTextContent('Hello world!') }) }) })