Migrate translate_spec to Jest

Migrate vue_shared/translate_spec to Jest and use VTU

spec/javascripts/vue_shared/translate_spec.js → spec/frontend/vue_shared/translate_spec.js

-import Vue from 'vue';
-import Jed from 'jed';
-
-import { trimText } from 'spec/helpers/text_helper';
+import { mount, createLocalVue } from '@vue/test-utils';
 import locale from '~/locale';
 import Translate from '~/vue_shared/translate';
 
-describe('Vue translate filter', () => {
-  let el;
+const localVue = createLocalVue();
+localVue.use(Translate);
 
+describe('Vue translate filter', () => {
   const createTranslationMock = (key, ...translations) => {
-    const fakeLocale = new Jed({
-      domain: 'app',
-      locale_data: {
-        app: {
-          '': {
-            domain: 'app',
-            lang: 'vo',
-            plural_forms: 'nplurals=2; plural=(n != 1);',
-          },
-          [key]: translations,
+    locale.textdomain('app');
+
+    locale.options.locale_data = {
+      app: {
+        '': {
+          domain: 'app',
+          lang: 'vo',
+          plural_forms: 'nplurals=2; plural=(n != 1);',
         },
+        [key]: translations,
       },
-    });
-
-    // eslint-disable-next-line no-underscore-dangle
-    locale.__Rewire__('locale', fakeLocale);
+    };
   };
 
-  afterEach(() => {
-    // eslint-disable-next-line no-underscore-dangle
-    locale.__ResetDependency__('locale');
-  });
-
-  beforeEach(() => {
-    Vue.use(Translate);
-
-    el = document.createElement('div');
-
-    document.body.appendChild(el);
-  });
-
-  it('translate singular text (`__`)', done => {
+  it('translate singular text (`__`)', () => {
     const key = 'singular';
     const translation = 'singular_translated';
     createTranslationMock(key, translation);
 
-    const vm = new Vue({
-      el,
-      template: `
-        <span>
-          {{ __('${key}') }}
-        </span>
-      `,
-    }).$mount();
-
-    Vue.nextTick(() => {
-      expect(trimText(vm.$el.textContent)).toBe(translation);
+    const wrapper = mount(
+      {
+        template: `
+          <span>
+            {{ __('${key}') }}
+          </span>
+        `,
+      },
+      { localVue },
+    );
 
-      done();
-    });
+    expect(wrapper.text()).toBe(translation);
   });
 
-  it('translate plural text (`n__`) without any substituting text', done => {
+  it('translate plural text (`n__`) without any substituting text', () => {
     const key = 'plural';
     const translationPlural = 'plural_multiple translation';
     createTranslationMock(key, 'plural_singular translation', translationPlural);
 
-    const vm = new Vue({
-      el,
-      template: `
-        <span>
-          {{ n__('${key}', 'plurals', 2) }}
-        </span>
-      `,
-    }).$mount();
-
-    Vue.nextTick(() => {
-      expect(trimText(vm.$el.textContent)).toBe(translationPlural);
+    const wrapper = mount(
+      {
+        template: `
+          <span>
+            {{ n__('${key}', 'plurals', 2) }}
+          </span>
+        `,
+      },
+      { localVue },
+    );
 
-      done();
-    });
+    expect(wrapper.text()).toBe(translationPlural);
   });
 
   describe('translate plural text (`n__`) with substituting %d', () => {
@@ -89,38 +66,34 @@ describe('Vue translate filter', () => {
       createTranslationMock(key, '%d singular translated', '%d plural translated');
     });
 
-    it('and n === 1', done => {
-      const vm = new Vue({
-        el,
-        template: `
-        <span>
-          {{ n__('${key}', '%d days', 1) }}
-        </span>
-      `,
-      }).$mount();
-
-      Vue.nextTick(() => {
-        expect(trimText(vm.$el.textContent)).toBe('1 singular translated');
+    it('and n === 1', () => {
+      const wrapper = mount(
+        {
+          template: `
+            <span>
+              {{ n__('${key}', '%d days', 1) }}
+            </span>
+          `,
+        },
+        { localVue },
+      );
 
-        done();
-      });
+      expect(wrapper.text()).toBe('1 singular translated');
     });
 
-    it('and n > 1', done => {
-      const vm = new Vue({
-        el,
-        template: `
-        <span>
-          {{ n__('${key}', '%d days', 2) }}
-        </span>
-      `,
-      }).$mount();
-
-      Vue.nextTick(() => {
-        expect(trimText(vm.$el.textContent)).toBe('2 plural translated');
+    it('and n > 1', () => {
+      const wrapper = mount(
+        {
+          template: `
+            <span>
+              {{ n__('${key}', '%d days', 2) }}
+            </span>
+          `,
+        },
+        { localVue },
+      );
 
-        done();
-      });
+      expect(wrapper.text()).toBe('2 plural translated');
     });
   });
 
@@ -133,119 +106,109 @@ describe('Vue translate filter', () => {
       createTranslationMock(key, translation);
     });
 
-    it('and using two parameters', done => {
-      const vm = new Vue({
-        el,
-        template: `
-        <span>
-          {{ s__('Context', 'Foobar') }}
-        </span>
-      `,
-      }).$mount();
-
-      Vue.nextTick(() => {
-        expect(trimText(vm.$el.textContent)).toBe(expectation);
+    it('and using two parameters', () => {
+      const wrapper = mount(
+        {
+          template: `
+            <span>
+              {{ s__('Context', 'Foobar') }}
+            </span>
+          `,
+        },
+        { localVue },
+      );
 
-        done();
-      });
+      expect(wrapper.text()).toBe(expectation);
     });
 
-    it('and using the pipe syntax', done => {
-      const vm = new Vue({
-        el,
-        template: `
-        <span>
-          {{ s__('${key}') }}
-        </span>
-      `,
-      }).$mount();
-
-      Vue.nextTick(() => {
-        expect(trimText(vm.$el.textContent)).toBe(expectation);
+    it('and using the pipe syntax', () => {
+      const wrapper = mount(
+        {
+          template: `
+            <span>
+              {{ s__('${key}') }}
+            </span>
+          `,
+        },
+        { localVue },
+      );
 
-        done();
-      });
+      expect(wrapper.text()).toBe(expectation);
     });
   });
 
-  it('translate multi line text', done => {
+  it('translate multi line text', () => {
     const translation = 'multiline string translated';
     createTranslationMock('multiline string', translation);
 
-    const vm = new Vue({
-      el,
-      template: `
-        <span>
-          {{ __(\`
-          multiline
-          string
-          \`) }}
-        </span>
-      `,
-    }).$mount();
-
-    Vue.nextTick(() => {
-      expect(trimText(vm.$el.textContent)).toBe(translation);
-
-      done();
-    });
+    const wrapper = mount(
+      {
+        template: `
+          <span>
+            {{ __(\`
+            multiline
+            string
+            \`) }}
+          </span>
+        `,
+      },
+      { localVue },
+    );
+
+    expect(wrapper.text()).toBe(translation);
   });
 
-  it('translate pluralized multi line text', done => {
+  it('translate pluralized multi line text', () => {
     const translation = 'multiline string plural';
 
     createTranslationMock('multiline string', 'multiline string singular', translation);
 
-    const vm = new Vue({
-      el,
-      template: `
-        <span>
-          {{ n__(
-          \`
-          multiline
-          string
-          \`,
-          \`
-          multiline
-          strings
-          \`,
-          2
-          ) }}
-        </span>
-      `,
-    }).$mount();
-
-    Vue.nextTick(() => {
-      expect(trimText(vm.$el.textContent)).toBe(translation);
-
-      done();
-    });
+    const wrapper = mount(
+      {
+        template: `
+          <span>
+            {{ n__(
+            \`
+            multiline
+            string
+            \`,
+            \`
+            multiline
+            strings
+            \`,
+            2
+            ) }}
+          </span>
+        `,
+      },
+      { localVue },
+    );
+
+    expect(wrapper.text()).toBe(translation);
   });
 
-  it('translate pluralized multi line text with context', done => {
+  it('translate pluralized multi line text with context', () => {
     const translation = 'multiline string with context';
 
     createTranslationMock('Context| multiline string', translation);
 
-    const vm = new Vue({
-      el,
-      template: `
-        <span>
-          {{ s__(
-          \`
-          Context|
-          multiline
-          string
-          \`
-          ) }}
-        </span>
-      `,
-    }).$mount();
-
-    Vue.nextTick(() => {
-      expect(trimText(vm.$el.textContent)).toBe(translation);
-
-      done();
-    });
+    const wrapper = mount(
+      {
+        template: `
+          <span>
+            {{ s__(
+            \`
+            Context|
+            multiline
+            string
+            \`
+            ) }}
+          </span>
+        `,
+      },
+      { localVue },
+    );
+
+    expect(wrapper.text()).toBe(translation);
   });
 });