Feature: Mobile - Make translations reactive.

app/frontend/common/utils/i18n.ts

@@ -1,6 +1,7 @@
 // Copyright (C) 2012-2021 Zammad Foundation, https://zammad-foundation.org/
 
 import { TranslationMap, Translator } from '@common/utils/i18n/translator'
+import { reactive } from 'vue'
 
 export class I18N {
   private translator = new Translator()
@@ -14,7 +15,7 @@ export class I18N {
   }
 }
 
-export const i18n = new I18N()
+export const i18n = reactive(new I18N())
 
 declare module '@vue/runtime-core' {
   export interface ComponentCustomProperties {

app/frontend/tests/common/utils/i18n.spec.ts

@@ -1,6 +1,9 @@
 // Copyright (C) 2012-2021 Zammad Foundation, https://zammad-foundation.org/
 
 import { i18n } from '@common/utils/i18n'
+import CommonHelloWorld from '@common/components/common/CommonHelloWorld.vue'
+import { shallowMount } from '@vue/test-utils'
+import { nextTick } from 'vue'
 
 describe('i18n', () => {
   it('starts with empty state', () => {
@@ -11,6 +14,7 @@ describe('i18n', () => {
   it('translates known strings', () => {
     const map = new Map([
       ['yes', 'ja'],
+      ['Hello world!', 'Hallo Welt!'],
       [
         'String with 3 placeholders: %s %s %s',
         'Zeichenkette mit 3 Platzhaltern: %s %s %s',
@@ -26,4 +30,21 @@ describe('i18n', () => {
       'Zeichenkette mit 3 Platzhaltern: %s %s %s',
     )
   })
+
+  it('updates (reactive) translations automatically', async () => {
+    expect.assertions(2)
+    const msg = 'Hello world!'
+    const wrapper = shallowMount(CommonHelloWorld, {
+      props: { msg, show: true },
+      global: {
+        mocks: {
+          i18n,
+        },
+      },
+    })
+    expect(wrapper.text()).toMatch('Hallo Welt!')
+    i18n.setTranslationMap(new Map())
+    await nextTick()
+    expect(wrapper.text()).toMatch('Hello world!')
+  })
 })