feat: Display trends in report metrics (#4144)

app/javascript/dashboard/mixins/specs/reportMixin.spec.js

@@ -0,0 +1,41 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import reportMixin from '../reportMixin';
+import reportFixtures from './reportMixinFixtures';
+import Vuex from 'vuex';
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('reportMixin', () => {
+  let getters;
+  let store;
+  beforeEach(() => {
+    getters = {
+      getAccountSummary: () => reportFixtures.summary,
+    };
+    store = new Vuex.Store({ getters });
+  });
+
+  it('display the metric', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [reportMixin],
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.displayMetric('conversations_count')).toEqual(5);
+    expect(wrapper.vm.displayMetric('avg_first_response_time')).toEqual(
+      '3 Min'
+    );
+  });
+
+  it('calculate the trend', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [reportMixin],
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.calculateTrend('conversations_count')).toEqual(25);
+    expect(wrapper.vm.calculateTrend('resolutions_count')).toEqual(0);
+  });
+});

app/javascript/dashboard/mixins/specs/reportMixinFixtures.js

@@ -0,0 +1,18 @@
+export default {
+  summary: {
+    avg_first_response_time: '198.6666666666667',
+    avg_resolution_time: '208.3333333333333',
+    conversations_count: 5,
+    incoming_messages_count: 5,
+    outgoing_messages_count: 3,
+    previous: {
+      avg_first_response_time: '89.0',
+      avg_resolution_time: '145.0',
+      conversations_count: 4,
+      incoming_messages_count: 5,
+      outgoing_messages_count: 4,
+      resolutions_count: 0,
+    },
+    resolutions_count: 3,
+  },
+};