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: {
+    locale.textdomain('app');
+
+    locale.options.locale_data = {
       app: {
         '': {
           domain: 'app',
@@ -20,66 +18,45 @@ describe('Vue translate filter', () => {
         },
         [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,
+    const wrapper = mount(
+      {
         template: `
           <span>
             {{ __('${key}') }}
           </span>
         `,
-    }).$mount();
-
-    Vue.nextTick(() => {
-      expect(trimText(vm.$el.textContent)).toBe(translation);
+      },
+      { 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,
+    const wrapper = mount(
+      {
         template: `
           <span>
             {{ n__('${key}', 'plurals', 2) }}
           </span>
         `,
-    }).$mount();
-
-    Vue.nextTick(() => {
-      expect(trimText(vm.$el.textContent)).toBe(translationPlural);
+      },
+      { 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,
+    it('and n === 1', () => {
+      const wrapper = mount(
+        {
           template: `
             <span>
               {{ n__('${key}', '%d days', 1) }}
             </span>
           `,
-      }).$mount();
-
-      Vue.nextTick(() => {
-        expect(trimText(vm.$el.textContent)).toBe('1 singular translated');
+        },
+        { localVue },
+      );
 
-        done();
-      });
+      expect(wrapper.text()).toBe('1 singular translated');
     });
 
-    it('and n > 1', done => {
-      const vm = new Vue({
-        el,
+    it('and n > 1', () => {
+      const wrapper = mount(
+        {
           template: `
             <span>
               {{ n__('${key}', '%d days', 2) }}
             </span>
           `,
-      }).$mount();
-
-      Vue.nextTick(() => {
-        expect(trimText(vm.$el.textContent)).toBe('2 plural translated');
+        },
+        { localVue },
+      );
 
-        done();
-      });
+      expect(wrapper.text()).toBe('2 plural translated');
     });
   });
 
@@ -133,47 +106,43 @@ describe('Vue translate filter', () => {
       createTranslationMock(key, translation);
     });
 
-    it('and using two parameters', done => {
-      const vm = new Vue({
-        el,
+    it('and using two parameters', () => {
+      const wrapper = mount(
+        {
           template: `
             <span>
               {{ s__('Context', 'Foobar') }}
             </span>
           `,
-      }).$mount();
-
-      Vue.nextTick(() => {
-        expect(trimText(vm.$el.textContent)).toBe(expectation);
+        },
+        { localVue },
+      );
 
-        done();
-      });
+      expect(wrapper.text()).toBe(expectation);
     });
 
-    it('and using the pipe syntax', done => {
-      const vm = new Vue({
-        el,
+    it('and using the pipe syntax', () => {
+      const wrapper = mount(
+        {
           template: `
             <span>
               {{ s__('${key}') }}
             </span>
           `,
-      }).$mount();
-
-      Vue.nextTick(() => {
-        expect(trimText(vm.$el.textContent)).toBe(expectation);
+        },
+        { 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,
+    const wrapper = mount(
+      {
         template: `
           <span>
             {{ __(\`
@@ -182,22 +151,20 @@ describe('Vue translate filter', () => {
             \`) }}
           </span>
         `,
-    }).$mount();
-
-    Vue.nextTick(() => {
-      expect(trimText(vm.$el.textContent)).toBe(translation);
+      },
+      { localVue },
+    );
 
-      done();
-    });
+    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,
+    const wrapper = mount(
+      {
         template: `
           <span>
             {{ n__(
@@ -213,22 +180,20 @@ describe('Vue translate filter', () => {
             ) }}
           </span>
         `,
-    }).$mount();
-
-    Vue.nextTick(() => {
-      expect(trimText(vm.$el.textContent)).toBe(translation);
+      },
+      { localVue },
+    );
 
-      done();
-    });
+    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,
+    const wrapper = mount(
+      {
         template: `
           <span>
             {{ s__(
@@ -240,12 +205,10 @@ describe('Vue translate filter', () => {
             ) }}
           </span>
         `,
-    }).$mount();
-
-    Vue.nextTick(() => {
-      expect(trimText(vm.$el.textContent)).toBe(translation);
+      },
+      { localVue },
+    );
 
-      done();
-    });
+    expect(wrapper.text()).toBe(translation);
   });
 });