Refactored RelativeDateTime

Removed timeouts for the sake of simplicity

webapp/components/RelativeDateTime/index.spec.js

@@ -1,15 +1,24 @@
-import { shallowMount } from '@vue/test-utils'
+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
 
   beforeEach(() => {
-    wrapper = shallowMount(RelativeDateTime, {})
+    wrapper = shallowMount(RelativeDateTime, {
+      localVue,
+      propsData: {
+        dateTime: new Date()
+      }
+    })
   })
 
   it('renders', () => {
     console.log(wrapper.html())
-    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.is('span')).toBe(true)
   })
 })

webapp/components/RelativeDateTime/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <span :title="absoluteTime">{{ relativeDateTime }}</span>
+  <span>{{ relativeDateTime }}</span>
 </template>
 
 <script>
@@ -11,54 +11,9 @@ export default {
       required: true
     }
   },
-  data() {
-    return {
-      relativeDateTime: null,
-      interval: 15000,
-      timeout: null,
-      absoluteTime: null
-    }
-  },
-  watch: {
-    locale() {
-      this.calcRelativeDateTime()
-    },
-    dateTime(dateTime) {
-      this.calcRelativeDateTime()
-    }
-  },
-  created() {
-    this.calcRelativeDateTime()
-  },
-  mounted() {
-    this.calcRelativeDateTime()
-  },
-  destroyed() {
-    clearTimeout(this.timeout)
-  },
-  methods: {
-    calcRelativeDateTime() {
-      // Reset Timer
-      clearTimeout(this.timeout)
-
-      // Calculate Relative Date
-      this.relativeDateTime = this.$filters.relativeDateTime(this.dateTime)
-
-      // TODO It is unclear what exactly this does and how to archive it
-      /*if (
-        this.relativeDateTime ===
-        t
-          .add(this.interval, 'milliseconds')
-          .utc()
-          .fromNow()
-      ) {
-        this.interval += 15000
-      }*/
-
-      // Recalculate Timer
-      this.timeout = setTimeout(() => {
-        this.calcRelativeDateTime()
-      }, this.interval)
+  computed: {
+    relativeDateTime() {
+      return this.$filters.relativeDateTime(this.dateTime)
     }
   }
 }