Created a plural filter
Added tests for the filter [ci skip]
This commit is contained in:
parent
a3506a2287
commit
7d16537cac
|
@ -11,7 +11,7 @@ export default {
|
|||
aria-hidden="true"
|
||||
title="Limited to showing 50 events at most"
|
||||
data-placement="top"></i>
|
||||
{{ 'Showing 50 events' | translate }}
|
||||
{{ 'Showing %d event' | translate-plural('Showing %d events', 50) }}
|
||||
</span>
|
||||
`,
|
||||
};
|
||||
|
|
|
@ -12,9 +12,9 @@ global.cycleAnalytics.TotalTimeComponent = Vue.extend({
|
|||
template: `
|
||||
<span class="total-time">
|
||||
<template v-if="Object.keys(time).length">
|
||||
<template v-if="time.days">{{ time.days }} <span>{{ time.days === 1 ? 'day' : 'days' | translate }}</span></template>
|
||||
<template v-if="time.days">{{ time.days }} <span>{{ 'day' | translate-plural('days', time.days) }}</span></template>
|
||||
<template v-if="time.hours">{{ time.hours }} <span v-translate>hr</span></template>
|
||||
<template v-if="time.mins && !time.days">{{ time.mins }} <span v-translate>mins</span></template>
|
||||
<template v-if="time.mins && !time.days">{{ time.mins }} <span>{{ 'min' | translate-plural('mins', time.mins) }}</span></template>
|
||||
<template v-if="time.seconds && Object.keys(time).length === 1 || time.seconds === 0">{{ time.seconds }} <span>s</span></template>
|
||||
</template>
|
||||
<template v-else>
|
||||
|
|
|
@ -3,6 +3,9 @@ import locale from '../locale';
|
|||
export default (Vue) => {
|
||||
Vue.filter('translate', text => locale.gettext(text));
|
||||
|
||||
Vue.filter('translate-plural', (text, pluralText, count) =>
|
||||
locale.ngettext(text, pluralText, count).replace(/%d/g, count));
|
||||
|
||||
Vue.directive('translate', {
|
||||
bind(el) {
|
||||
const $el = el;
|
||||
|
|
|
@ -0,0 +1,90 @@
|
|||
import Vue from 'vue';
|
||||
import Translate from '~/vue_shared/translate';
|
||||
|
||||
Vue.use(Translate);
|
||||
|
||||
describe('Vue translate filter', () => {
|
||||
let el;
|
||||
|
||||
beforeEach(() => {
|
||||
el = document.createElement('div');
|
||||
|
||||
document.body.appendChild(el);
|
||||
});
|
||||
|
||||
it('translate single text', (done) => {
|
||||
const comp = new Vue({
|
||||
el,
|
||||
template: `
|
||||
<span>
|
||||
{{ 'testing' | translate }}
|
||||
</span>
|
||||
`,
|
||||
}).$mount();
|
||||
|
||||
Vue.nextTick(() => {
|
||||
expect(
|
||||
comp.$el.textContent.trim(),
|
||||
).toBe('testing');
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('translate plural text with single count', (done) => {
|
||||
const comp = new Vue({
|
||||
el,
|
||||
template: `
|
||||
<span>
|
||||
{{ '%d day' | translate-plural('%d days', 1) }}
|
||||
</span>
|
||||
`,
|
||||
}).$mount();
|
||||
|
||||
Vue.nextTick(() => {
|
||||
expect(
|
||||
comp.$el.textContent.trim(),
|
||||
).toBe('1 day');
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('translate plural text with multiple count', (done) => {
|
||||
const comp = new Vue({
|
||||
el,
|
||||
template: `
|
||||
<span>
|
||||
{{ '%d day' | translate-plural('%d days', 2) }}
|
||||
</span>
|
||||
`,
|
||||
}).$mount();
|
||||
|
||||
Vue.nextTick(() => {
|
||||
expect(
|
||||
comp.$el.textContent.trim(),
|
||||
).toBe('2 days');
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('translate plural without replacing any text', (done) => {
|
||||
const comp = new Vue({
|
||||
el,
|
||||
template: `
|
||||
<span>
|
||||
{{ 'day' | translate-plural('days', 2) }}
|
||||
</span>
|
||||
`,
|
||||
}).$mount();
|
||||
|
||||
Vue.nextTick(() => {
|
||||
expect(
|
||||
comp.$el.textContent.trim(),
|
||||
).toBe('days');
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue