diff options
Diffstat (limited to 'spec/javascripts/vue_shared/translate_spec.js')
| -rw-r--r-- | spec/javascripts/vue_shared/translate_spec.js | 213 |
1 files changed, 187 insertions, 26 deletions
diff --git a/spec/javascripts/vue_shared/translate_spec.js b/spec/javascripts/vue_shared/translate_spec.js index cbb3cbdff46..adb5ff682f0 100644 --- a/spec/javascripts/vue_shared/translate_spec.js +++ b/spec/javascripts/vue_shared/translate_spec.js @@ -1,88 +1,249 @@ import Vue from 'vue'; -import Translate from '~/vue_shared/translate'; +import Jed from 'jed'; -Vue.use(Translate); +import locale from '~/locale'; +import Translate from '~/vue_shared/translate'; +import { trimText } from 'spec/helpers/vue_component_helper'; describe('Vue translate filter', () => { let el; + 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, + }, + }, + }); + + // 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 single text', (done) => { - const comp = new Vue({ + it('translate singular text (`__`)', done => { + 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); + + done(); + }); + }); + + it('translate plural text (`n__`) without any substituting text', done => { + const key = 'plural'; + const translationPlural = 'plural_multiple translation'; + createTranslationMock(key, 'plural_singular translation', translationPlural); + + const vm = new Vue({ el, template: ` <span> - {{ __('testing') }} + {{ n__('${key}', 'plurals', 2) }} </span> `, }).$mount(); Vue.nextTick(() => { - expect( - comp.$el.textContent.trim(), - ).toBe('testing'); + expect(trimText(vm.$el.textContent)).toBe(translationPlural); done(); }); }); - it('translate plural text with single count', (done) => { - const comp = new Vue({ + describe('translate plural text (`n__`) with substituting %d', () => { + const key = '%d day'; + + beforeEach(() => { + 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'); + + done(); + }); + }); + + 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'); + + done(); + }); + }); + }); + + describe('translates text with context `s__`', () => { + const key = 'Context|Foobar'; + const translation = 'Context|Foobar translated'; + const expectation = 'Foobar translated'; + + beforeEach(() => { + 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); + + done(); + }); + }); + + 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); + + done(); + }); + }); + }); + + it('translate multi line text', done => { + const translation = 'multiline string translated'; + createTranslationMock('multiline string', translation); + + const vm = new Vue({ el, template: ` <span> - {{ n__('%d day', '%d days', 1) }} + {{ __(\` + multiline + string + \`) }} </span> `, }).$mount(); Vue.nextTick(() => { - expect( - comp.$el.textContent.trim(), - ).toBe('1 day'); + expect(trimText(vm.$el.textContent)).toBe(translation); done(); }); }); - it('translate plural text with multiple count', (done) => { - const comp = new Vue({ + it('translate pluralized multi line text', done => { + const translation = 'multiline string plural'; + + createTranslationMock('multiline string', 'multiline string singular', translation); + + const vm = new Vue({ el, template: ` <span> - {{ n__('%d day', '%d days', 2) }} + {{ n__( + \` + multiline + string + \`, + \` + multiline + strings + \`, + 2 + ) }} </span> `, }).$mount(); Vue.nextTick(() => { - expect( - comp.$el.textContent.trim(), - ).toBe('2 days'); + expect(trimText(vm.$el.textContent)).toBe(translation); done(); }); }); - it('translate plural without replacing any text', (done) => { - const comp = new Vue({ + it('translate pluralized multi line text with context', done => { + const translation = 'multiline string with context'; + + createTranslationMock('Context| multiline string', translation); + + const vm = new Vue({ el, template: ` <span> - {{ n__('day', 'days', 2) }} + {{ s__( + \` + Context| + multiline + string + \` + ) }} </span> `, }).$mount(); Vue.nextTick(() => { - expect( - comp.$el.textContent.trim(), - ).toBe('days'); + expect(trimText(vm.$el.textContent)).toBe(translation); done(); }); |