Merge pull request #10 from panter/fixes/inline-translations

fix: don't ignore the i18n tag if not i18nOptions are specified
panter · Oct 19, 2017 · a0d6f83 · a0d6f83
2 parents 6b2dd0f + 0b31bf5
commit a0d6f83
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 54 deletions.
diff --git a/src/install.js b/src/install.js
@@ -68,6 +68,8 @@ export function install(_Vue) {
           this._i18nOptions = { lng, namespaces: namespacesToLoad, keyPrefix };
         } else if (options.parent && options.parent._i18nOptions) {
           this._i18nOptions = options.parent._i18nOptions;
+        } else if (options.__i18n) {
+          this._i18nOptions = { namespaces: namespacesToLoad };
         }
 
         const languages = Object.keys(inlineTranslations);

diff --git a/test/unit/component.test.js b/test/unit/component.test.js
@@ -120,73 +120,118 @@ describe('Components namespaces', () => {
 
 
 describe('Component inline translation', () => {
-  const i18next1 = i18next.createInstance();
-  let vueI18Next;
-  let vm;
-  beforeEach((done) => {
-    i18next1.init({
-      lng: 'en',
-      resources: {
-        en: {
-          translation: { hello: 'Hello' },
+  describe('only with the i18n tag', () => {
+    const i18next1 = i18next.createInstance();
+    let vueI18Next;
+    let vm;
+    beforeEach((done) => {
+      i18next1.init({
+        lng: 'en',
+        resources: {
+          en: {},
         },
-        de: {
-          translation: { hello: 'Hallo' },
+      });
+      vueI18Next = new VueI18Next(i18next1);
+
+      const el = document.createElement('div');
+      vm = new Vue({
+        i18n: vueI18Next,
+        __i18n: [
+          JSON.stringify({
+            en: { yesNo: { yes: 'Yes', maybe: 'Maybe' } },
+          }),
+          JSON.stringify({
+            en: { yesNo: { no: 'No', maybe: 'Maybe?' } },
+          })],
+        render(h) {
+          return h('div', {}, [
+            h('p', { ref: 'yesNoYes' }, [this.$t('yesNo.yes')]),
+            h('p', { ref: 'yesNoMaybe' }, [this.$t('yesNo.maybe')]),
+            h('p', { ref: 'yesNoNo' }, [this.$t('yesNo.no')]),
+          ]);
         },
-      },
+      }).$mount(el);
+
+
+      vm.$nextTick(done);
     });
-    vueI18Next = new VueI18Next(i18next1);
 
-    const el = document.createElement('div');
-    vm = new Vue({
-      i18n: vueI18Next,
-      i18nOptions: {
-        messages: {
+    it('should use the translation in the tag', async () => {
+      expect(vm.$refs.yesNoYes.textContent).to.equal('Yes');
+      expect(vm.$refs.yesNoMaybe.textContent).to.equal('Maybe?');
+      expect(vm.$refs.yesNoNo.textContent).to.equal('No');
+    });
+  });
+
+  describe('full options', () => {
+    const i18next1 = i18next.createInstance();
+    let vueI18Next;
+    let vm;
+    beforeEach((done) => {
+      i18next1.init({
+        lng: 'en',
+        resources: {
           en: {
-            hello: 'Hello!',
-            welcome: 'Welcome!',
-            yesNo: {
-              no: 'No!',
+            translation: { hello: 'Hello' },
+          },
+          de: {
+            translation: { hello: 'Hallo' },
+          },
+        },
+      });
+      vueI18Next = new VueI18Next(i18next1);
+
+      const el = document.createElement('div');
+      vm = new Vue({
+        i18n: vueI18Next,
+        i18nOptions: {
+          messages: {
+            en: {
+              hello: 'Hello!',
+              welcome: 'Welcome!',
+              yesNo: {
+                no: 'No!',
+              },
             },
           },
         },
-      },
-      __i18n: [
-        JSON.stringify({
-          en: { yesNo: { yes: 'Yes', maybe: 'Maybe' } },
-        }),
-        JSON.stringify({
-          en: { yesNo: { no: 'No', maybe: 'Maybe?' } },
-        })],
-      render(h) {
-        return h('div', {}, [
-          h('p', { ref: 'welcome' }, [this.$t('welcome')]),
-          h('p', { ref: 'hello' }, [this.$t('hello')]),
-          h('p', { ref: 'yesNoYes' }, [this.$t('yesNo.yes')]),
-          h('p', { ref: 'yesNoMaybe' }, [this.$t('yesNo.maybe')]),
-          h('p', { ref: 'yesNoNo' }, [this.$t('yesNo.no')]),
-        ]);
-      },
-    }).$mount(el);
+        __i18n: [
+          JSON.stringify({
+            en: { yesNo: { yes: 'Yes', maybe: 'Maybe' } },
+          }),
+          JSON.stringify({
+            en: { yesNo: { no: 'No', maybe: 'Maybe?' } },
+          })],
+        render(h) {
+          return h('div', {}, [
+            h('p', { ref: 'welcome' }, [this.$t('welcome')]),
+            h('p', { ref: 'hello' }, [this.$t('hello')]),
+            h('p', { ref: 'yesNoYes' }, [this.$t('yesNo.yes')]),
+            h('p', { ref: 'yesNoMaybe' }, [this.$t('yesNo.maybe')]),
+            h('p', { ref: 'yesNoNo' }, [this.$t('yesNo.no')]),
+          ]);
+        },
+      }).$mount(el);
 
 
-    vm.$nextTick(done);
-  });
+      vm.$nextTick(done);
+    });
 
-  it('should use the inline translation if no other is found', async () => {
-    const root = vm.$refs.welcome;
-    expect(root.textContent).to.equal('Welcome!');
-  });
+    it('should use the inline translation if no other is found', async () => {
+      const root = vm.$refs.welcome;
+      expect(root.textContent).to.equal('Welcome!');
+    });
 
-  it('should use the inline translation only if none other is found', async () => {
-    const root = vm.$refs.hello;
-    expect(root.textContent).to.equal('Hello');
-  });
+    it('should use the inline translation only if none other is found', async () => {
+      const root = vm.$refs.hello;
+      expect(root.textContent).to.equal('Hello');
+    });
 
-  it('should use the __i18n options', async () => {
-    expect(vm.$refs.yesNoYes.textContent).to.equal('Yes');
-    expect(vm.$refs.yesNoMaybe.textContent).to.equal('Maybe?');
-    expect(vm.$refs.yesNoNo.textContent).to.equal('No!');
+    it('should use the __i18n options', async () => {
+      expect(vm.$refs.yesNoYes.textContent).to.equal('Yes');
+      expect(vm.$refs.yesNoMaybe.textContent).to.equal('Maybe?');
+      expect(vm.$refs.yesNoNo.textContent).to.equal('No!');
+    });
   });
 });