Merge branch 'js-translations' into 28433-internationalise-cycle-analytics-page

Conflicts:
	config/webpack.config.js

2 files changed, 93 insertions, 0 deletions

diff --git a/spec/javascripts/cycle_analytics/limit_warning_component_spec.js b/spec/javascripts/cycle_analytics/limit_warning_component_spec.js
index 50000c5a5f5..2fb9eb0ca85 100644
--- a/spec/javascripts/cycle_analytics/limit_warning_component_spec.js
+++ b/spec/javascripts/cycle_analytics/limit_warning_component_spec.js
@@ -1,6 +1,9 @@
 import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
 import limitWarningComp from '~/cycle_analytics/components/limit_warning_component';
 
+Vue.use(Translate);
+
 describe('Limit warning component', () => {
   let component;
   let LimitWarningComponent;
diff --git a/spec/javascripts/vue_shared/translate_spec.js b/spec/javascripts/vue_shared/translate_spec.js
new file mode 100644
index 00000000000..74bd4ff86b1
--- /dev/null
+++ b/spec/javascripts/vue_shared/translate_spec.js
@@ -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();
+    });
+  });
+});