[Enhancement] Group widget messages by date (#363)

* [Enhancement] Group widget messages by date

* Update DateSeparator snapshot

app/javascript/shared/components/DateSeparator.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="date--separator">
+    {{ date }}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    date: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~widget/assets/scss/variables';
+
+.date--separator {
+  font-size: $font-size-default;
+  color: $color-body;
+  height: 50px;
+  line-height: 50px;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+
+.date--separator::before,
+.date--separator::after {
+  background-color: $color-border;
+  content: '';
+  height: 1px;
+  position: absolute;
+  top: 24px;
+  width: calc((100% - 120px) / 2);
+}
+
+.date--separator::before {
+  left: 0;
+}
+
+.date--separator::after {
+  right: 0;
+}
+</style>

app/javascript/shared/components/specs/DateSeparator.spec.js

@@ -0,0 +1,14 @@
+import { mount } from '@vue/test-utils';
+import DateSeparator from '../DateSeparator';
+
+describe('Spinner', () => {
+  test('matches snapshot', () => {
+    const wrapper = mount(DateSeparator, {
+      propsData: {
+        date: 'Nov 18, 2019',
+      },
+    });
+    expect(wrapper.isVueInstance()).toBeTruthy();
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});

app/javascript/shared/components/specs/__snapshots__/DateSeparator.spec.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Spinner matches snapshot 1`] = `
+<div
+  class="date--separator"
+>
+  
+  Nov 18, 2019
+
+</div>
+`;

app/javascript/shared/helpers/DateHelper.js

@@ -0,0 +1,13 @@
+import moment from 'moment';
+
+class DateHelper {
+  constructor(date) {
+    this.date = moment(date * 1000);
+  }
+
+  format(dateFormat = 'MMM DD, YYYY') {
+    return this.date.format(dateFormat);
+  }
+}
+
+export default DateHelper;

app/javascript/shared/helpers/specs/DateHelper.sepc.js

@@ -0,0 +1,13 @@
+import DateSeparator from '../DateSeparator';
+
+describe('#DateSeparator', () => {
+  it('should format correctly without dateFormat', () => {
+    expect(new DateSeparator(1576340626).format()).toEqual('Dec 14, 2019');
+  });
+
+  it('should format correctly without dateFormat', () => {
+    expect(new DateSeparator(1576340626).format('DD-MM-YYYY')).toEqual(
+      '14-12-2019'
+    );
+  });
+});