From a7354a054eafbebecf996d4948e8289c104db63b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Wed, 10 Apr 2019 18:39:15 +0200
Subject: [PATCH] Fix test, remove vue-filter `relativeDateTime`

cc @Tirokk @ulfgebhardt @appinteractive

This is a perfect example why I insist on writing tests. While debugging
@Tirokk and I discovered several design flaws and plugins that depend on
each other. The solution to all of this is not to use vue-filters plugin
at all! Vue-filters depends on Vuex, i18n, vuex-i18n, nuxt-modules and so
on.

This is just bad, bad, bad code. Start writing tests. Now.

We should start to refactor vue-filters and use components instead.
---
 .../components/RelativeDateTime/index.spec.js | 40 ++++++++++++++++---
 webapp/components/RelativeDateTime/index.vue  | 15 ++++++-
 webapp/plugins/vue-filters.js                 |  6 ---
 3 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/webapp/components/RelativeDateTime/index.spec.js b/webapp/components/RelativeDateTime/index.spec.js
index 89c0e40fb..923dcbee6 100644
--- a/webapp/components/RelativeDateTime/index.spec.js
+++ b/webapp/components/RelativeDateTime/index.spec.js
@@ -1,24 +1,52 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
 import RelativeDateTime from './index.vue'
 
-import Filters from '../../plugins/vue-filters.js'
 const localVue = createLocalVue()
-localVue.use(Filters)
 
 describe('RelativeDateTime', () => {
   let wrapper
+  let mocks
+  let locale
 
   beforeEach(() => {
-    wrapper = shallowMount(RelativeDateTime, {
+    mocks = {
+      $i18n: {
+        locale: () => locale
+      }
+    }
+  })
+
+  let Wrapper = () => {
+    return shallowMount(RelativeDateTime, {
+      mocks,
       localVue,
       propsData: {
         dateTime: new Date()
       }
     })
-  })
+  }
 
   it('renders', () => {
-    console.log(wrapper.html())
-    expect(wrapper.is('span')).toBe(true)
+    expect(Wrapper().is('span')).toBe(true)
+  })
+
+  describe("locale == 'en'", () => {
+    beforeEach(() => {
+      locale = 'en'
+    })
+
+    it('translates', () => {
+      expect(Wrapper().text()).toContain('today at')
+    })
+  })
+
+  describe("locale == 'de'", () => {
+    beforeEach(() => {
+      locale = 'de'
+    })
+
+    it('translates', () => {
+      expect(Wrapper().text()).toContain('heute um')
+    })
   })
 })
diff --git a/webapp/components/RelativeDateTime/index.vue b/webapp/components/RelativeDateTime/index.vue
index b3d20a909..469b26a4c 100644
--- a/webapp/components/RelativeDateTime/index.vue
+++ b/webapp/components/RelativeDateTime/index.vue
@@ -3,6 +3,18 @@
 </template>
 
 <script>
+import formatRelative from 'date-fns/formatRelative'
+import { enUS, de, nl, fr, pt, es, pl } from 'date-fns/locale'
+const locales = {
+  en: enUS,
+  de,
+  nl,
+  fr,
+  es,
+  pt,
+  pl
+}
+
 export default {
   name: 'HcRelativeDateTime',
   props: {
@@ -13,7 +25,8 @@ export default {
   },
   computed: {
     relativeDateTime() {
-      return this.$filters.relativeDateTime(this.dateTime)
+      let locale = locales[this.$i18n.locale() || 'en']
+      return formatRelative(new Date(this.dateTime), new Date(), { locale })
     }
   }
 }
diff --git a/webapp/plugins/vue-filters.js b/webapp/plugins/vue-filters.js
index 948de9c3f..93fa1f50b 100644
--- a/webapp/plugins/vue-filters.js
+++ b/webapp/plugins/vue-filters.js
@@ -34,12 +34,6 @@ export default ({ app }) => {
         locale: getLocalizedFormat()
       })
     },
-    relativeDateTime: value => {
-      if (!value) return ''
-      return formatRelative(new Date(value), new Date(), {
-        locale: getLocalizedFormat()
-      })
-    },
     number: (
       value,
       precision = 2,