Commit 10f20692 authored by Mark Florian's avatar Mark Florian

Merge branch 'himkp-jest-translate' into 'master'

Migrate translate_spec to Jest

See merge request gitlab-org/gitlab!33993
parents 6f565753 24e66b72
import Vue from 'vue'; import { mount, createLocalVue } from '@vue/test-utils';
import Jed from 'jed';
import { trimText } from 'spec/helpers/text_helper';
import locale from '~/locale'; import locale from '~/locale';
import Translate from '~/vue_shared/translate'; import Translate from '~/vue_shared/translate';
describe('Vue translate filter', () => { const localVue = createLocalVue();
let el; localVue.use(Translate);
describe('Vue translate filter', () => {
const createTranslationMock = (key, ...translations) => { const createTranslationMock = (key, ...translations) => {
const fakeLocale = new Jed({ locale.textdomain('app');
domain: 'app',
locale_data: { locale.options.locale_data = {
app: { app: {
'': { '': {
domain: 'app', domain: 'app',
lang: 'vo', lang: 'vo',
plural_forms: 'nplurals=2; plural=(n != 1);', plural_forms: 'nplurals=2; plural=(n != 1);',
},
[key]: translations,
}, },
[key]: translations,
}, },
}); };
// eslint-disable-next-line no-underscore-dangle
locale.__Rewire__('locale', fakeLocale);
}; };
afterEach(() => { it('translate singular text (`__`)', () => {
// 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 => {
const key = 'singular'; const key = 'singular';
const translation = 'singular_translated'; const translation = 'singular_translated';
createTranslationMock(key, translation); createTranslationMock(key, translation);
const vm = new Vue({ const wrapper = mount(
el, {
template: ` template: `
<span> <span>
{{ __('${key}') }} {{ __('${key}') }}
</span> </span>
`, `,
}).$mount(); },
{ localVue },
Vue.nextTick(() => { );
expect(trimText(vm.$el.textContent)).toBe(translation);
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 key = 'plural';
const translationPlural = 'plural_multiple translation'; const translationPlural = 'plural_multiple translation';
createTranslationMock(key, 'plural_singular translation', translationPlural); createTranslationMock(key, 'plural_singular translation', translationPlural);
const vm = new Vue({ const wrapper = mount(
el, {
template: ` template: `
<span> <span>
{{ n__('${key}', 'plurals', 2) }} {{ n__('${key}', 'plurals', 2) }}
</span> </span>
`, `,
}).$mount(); },
{ localVue },
Vue.nextTick(() => { );
expect(trimText(vm.$el.textContent)).toBe(translationPlural);
done(); expect(wrapper.text()).toBe(translationPlural);
});
}); });
describe('translate plural text (`n__`) with substituting %d', () => { describe('translate plural text (`n__`) with substituting %d', () => {
...@@ -89,38 +66,34 @@ describe('Vue translate filter', () => { ...@@ -89,38 +66,34 @@ describe('Vue translate filter', () => {
createTranslationMock(key, '%d singular translated', '%d plural translated'); createTranslationMock(key, '%d singular translated', '%d plural translated');
}); });
it('and n === 1', done => { it('and n === 1', () => {
const vm = new Vue({ const wrapper = mount(
el, {
template: ` template: `
<span> <span>
{{ n__('${key}', '%d days', 1) }} {{ n__('${key}', '%d days', 1) }}
</span> </span>
`, `,
}).$mount(); },
{ localVue },
Vue.nextTick(() => { );
expect(trimText(vm.$el.textContent)).toBe('1 singular translated');
done(); expect(wrapper.text()).toBe('1 singular translated');
});
}); });
it('and n > 1', done => { it('and n > 1', () => {
const vm = new Vue({ const wrapper = mount(
el, {
template: ` template: `
<span> <span>
{{ n__('${key}', '%d days', 2) }} {{ n__('${key}', '%d days', 2) }}
</span> </span>
`, `,
}).$mount(); },
{ localVue },
Vue.nextTick(() => { );
expect(trimText(vm.$el.textContent)).toBe('2 plural translated');
done(); expect(wrapper.text()).toBe('2 plural translated');
});
}); });
}); });
...@@ -133,119 +106,109 @@ describe('Vue translate filter', () => { ...@@ -133,119 +106,109 @@ describe('Vue translate filter', () => {
createTranslationMock(key, translation); createTranslationMock(key, translation);
}); });
it('and using two parameters', done => { it('and using two parameters', () => {
const vm = new Vue({ const wrapper = mount(
el, {
template: ` template: `
<span> <span>
{{ s__('Context', 'Foobar') }} {{ s__('Context', 'Foobar') }}
</span> </span>
`, `,
}).$mount(); },
{ localVue },
Vue.nextTick(() => { );
expect(trimText(vm.$el.textContent)).toBe(expectation);
done(); expect(wrapper.text()).toBe(expectation);
});
}); });
it('and using the pipe syntax', done => { it('and using the pipe syntax', () => {
const vm = new Vue({ const wrapper = mount(
el, {
template: ` template: `
<span> <span>
{{ s__('${key}') }} {{ s__('${key}') }}
</span> </span>
`, `,
}).$mount(); },
{ localVue },
Vue.nextTick(() => { );
expect(trimText(vm.$el.textContent)).toBe(expectation);
done(); expect(wrapper.text()).toBe(expectation);
});
}); });
}); });
it('translate multi line text', done => { it('translate multi line text', () => {
const translation = 'multiline string translated'; const translation = 'multiline string translated';
createTranslationMock('multiline string', translation); createTranslationMock('multiline string', translation);
const vm = new Vue({ const wrapper = mount(
el, {
template: ` template: `
<span> <span>
{{ __(\` {{ __(\`
multiline multiline
string string
\`) }} \`) }}
</span> </span>
`, `,
}).$mount(); },
{ localVue },
Vue.nextTick(() => { );
expect(trimText(vm.$el.textContent)).toBe(translation);
expect(wrapper.text()).toBe(translation);
done();
});
}); });
it('translate pluralized multi line text', done => { it('translate pluralized multi line text', () => {
const translation = 'multiline string plural'; const translation = 'multiline string plural';
createTranslationMock('multiline string', 'multiline string singular', translation); createTranslationMock('multiline string', 'multiline string singular', translation);
const vm = new Vue({ const wrapper = mount(
el, {
template: ` template: `
<span> <span>
{{ n__( {{ n__(
\` \`
multiline multiline
string string
\`, \`,
\` \`
multiline multiline
strings strings
\`, \`,
2 2
) }} ) }}
</span> </span>
`, `,
}).$mount(); },
{ localVue },
Vue.nextTick(() => { );
expect(trimText(vm.$el.textContent)).toBe(translation);
expect(wrapper.text()).toBe(translation);
done();
});
}); });
it('translate pluralized multi line text with context', done => { it('translate pluralized multi line text with context', () => {
const translation = 'multiline string with context'; const translation = 'multiline string with context';
createTranslationMock('Context| multiline string', translation); createTranslationMock('Context| multiline string', translation);
const vm = new Vue({ const wrapper = mount(
el, {
template: ` template: `
<span> <span>
{{ s__( {{ s__(
\` \`
Context| Context|
multiline multiline
string string
\` \`
) }} ) }}
</span> </span>
`, `,
}).$mount(); },
{ localVue },
Vue.nextTick(() => { );
expect(trimText(vm.$el.textContent)).toBe(translation);
expect(wrapper.text()).toBe(translation);
done();
});
}); });
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment