feat(i18n): added setLocale function

logaretm · Jul 23, 2020 · b5a1849 · b5a1849
1 parent af88502
commit b5a1849
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 2 deletions.
diff --git a/packages/i18n/src/index.ts b/packages/i18n/src/index.ts
@@ -76,4 +76,11 @@ function localize(locale: string | RootI18nDictionary, dictionary?: PartialI18nD
   return generateMessage;
 }
 
-export { localize };
+/**
+ * Sets the locale
+ */
+function setLocale(locale: string) {
+  DICTIONARY.locale = locale;
+}
+
+export { localize, setLocale };
diff --git a/packages/i18n/tests/index.spec.ts b/packages/i18n/tests/index.spec.ts
@@ -1,7 +1,7 @@
 import flushPromises from 'flush-promises';
 import { defineRule, configure } from '@vee-validate/core';
 import { required } from '@vee-validate/rules';
-import { localize } from '@vee-validate/i18n';
+import { localize, setLocale } from '@vee-validate/i18n';
 import { mountWithHoc, setValue } from '../../core/tests/helpers';
 
 defineRule('required', required);
@@ -126,3 +126,45 @@ test('falls back to the default message if rule without message exists', async (
 
   expect(error.textContent).toContain('field is not valid');
 });
+
+test('can switch between locales with setLocale', async () => {
+  configure({
+    generateMessage: localize({
+      en: {
+        messages: {
+          required: 'This field is required',
+        },
+      },
+      ar: {
+        messages: {
+          required: 'هذا الحقل مطلوب',
+        },
+      },
+    }),
+  });
+
+  setLocale('en');
+
+  const wrapper = mountWithHoc({
+    template: `
+      <div>
+        <Field name="field" immediate rules="required" v-slot="{ field, errors }">
+          <input v-bind="field" type="text">
+          <span id="error">{{ errors[0] }}</span>
+        </Field>
+      </div>
+    `,
+  });
+
+  const error = wrapper.$el.querySelector('#error');
+
+  // flush the pending validation.
+  await flushPromises();
+
+  expect(error.textContent).toContain('This field is required');
+  setLocale('ar');
+  setValue(wrapper.$el.querySelector('input'), '');
+
+  await flushPromises();
+  expect(error.textContent).toContain('هذا الحقل مطلوب');
+});