Commit 7d16537c authored by Phil Hughes's avatar Phil Hughes

Created a plural filter

Added tests for the filter

[ci skip]
parent a3506a22
...@@ -11,7 +11,7 @@ export default { ...@@ -11,7 +11,7 @@ export default {
aria-hidden="true" aria-hidden="true"
title="Limited to showing 50 events at most" title="Limited to showing 50 events at most"
data-placement="top"></i> data-placement="top"></i>
{{ 'Showing 50 events' | translate }} {{ 'Showing %d event' | translate-plural('Showing %d events', 50) }}
</span> </span>
`, `,
}; };
...@@ -12,9 +12,9 @@ global.cycleAnalytics.TotalTimeComponent = Vue.extend({ ...@@ -12,9 +12,9 @@ global.cycleAnalytics.TotalTimeComponent = Vue.extend({
template: ` template: `
<span class="total-time"> <span class="total-time">
<template v-if="Object.keys(time).length"> <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.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 v-if="time.seconds && Object.keys(time).length === 1 || time.seconds === 0">{{ time.seconds }} <span>s</span></template>
</template> </template>
<template v-else> <template v-else>
......
...@@ -3,6 +3,9 @@ import locale from '../locale'; ...@@ -3,6 +3,9 @@ import locale from '../locale';
export default (Vue) => { export default (Vue) => {
Vue.filter('translate', text => locale.gettext(text)); 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', { Vue.directive('translate', {
bind(el) { bind(el) {
const $el = el; const $el = el;
......
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();
});
});
});
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