Create 'time_ago_auto' shared component

2 files changed, 106 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/time_ago_auto.vue b/app/assets/javascripts/vue_shared/components/time_ago_auto.vue
new file mode 100644
index 00000000000..5c351908b05
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/time_ago_auto.vue
@@ -0,0 +1,58 @@
+<script>
+import tooltip from '../directives/tooltip';
+import timeAgoMixin from '../mixins/timeago';
+
+const defaultTicker = new EventTarget();
+setInterval(() => {
+  defaultTicker.dispatchEvent(new Event('tick'));
+}, 5000);
+
+export default {
+  directives: { tooltip },
+  mixins: [timeAgoMixin],
+  props: {
+    time: {
+      type: [String, Date],
+      required: false,
+      default: '',
+    },
+    ticker: {
+      type: EventTarget,
+      required: false,
+      default: () => defaultTicker,
+    },
+  },
+  data() {
+    return {
+      timeText: '',
+      onTick: () => { this.update(); },
+    };
+  },
+  mounted() {
+    this.update();
+    this.ticker.addEventListener('tick', this.onTick);
+  },
+  beforeDestroy() {
+    this.ticker.removeEventListener('tick', this.onTick);
+  },
+  methods: {
+    update() {
+      if (this.time) {
+        this.timeText = this.timeFormated(this.time);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <time
+    v-tooltip
+    :datetime="time"
+    :title="tooltipTitle(time)"
+    data-placement="top"
+    data-container="body"
+  >
+    {{ timeText }}
+  </time>
+</template>
diff --git a/spec/javascripts/vue_shared/components/time_ago_auto_spec.js b/spec/javascripts/vue_shared/components/time_ago_auto_spec.js
new file mode 100644
index 00000000000..35e84b8bfa3
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/time_ago_auto_spec.js
@@ -0,0 +1,48 @@
+import Vue from 'vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import TimeagoAuto from '~/vue_shared/components/time_ago_auto.vue';
+
+function sendTick(ticker) {
+  ticker.dispatchEvent(new Event('tick'));
+}
+
+describe('vue_shared TimeagoAuto component', () => {
+  const TEST_TIME = new Date('2018-07-25T08:00:00Z');
+  let ticker;
+  let vm;
+
+  beforeEach(() => {
+    ticker = new EventTarget();
+    vm = mountComponent(Vue.extend(TimeagoAuto), {
+      time: TEST_TIME,
+      ticker,
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('calls update on every tick', () => {
+    const updateSpy = spyOn(vm, 'update');
+
+    sendTick(ticker);
+    sendTick(ticker);
+    sendTick(ticker);
+
+    expect(updateSpy).toHaveBeenCalledTimes(3);
+  });
+
+  it('updates timeText on update', done => {
+    const fakeTimeText = 'Lorem Ipsum Dolar Sit Amit';
+    const timeFormattedSpy = spyOn(vm, 'timeFormated').and.returnValue(fakeTimeText);
+
+    vm.update();
+
+    Vue.nextTick(() => {
+      expect(timeFormattedSpy).toHaveBeenCalledTimes(1);
+      expect(vm.$el).toHaveText(fakeTimeText);
+      done();
+    });
+  });
+});