1 files changed, 50 insertions, 30 deletions

diff --git a/spec/frontend/cycle_analytics/value_stream_metrics_spec.js b/spec/frontend/cycle_analytics/value_stream_metrics_spec.js
index 082db2cc312..7a539b262fc 100644
--- a/spec/frontend/cycle_analytics/value_stream_metrics_spec.js
+++ b/spec/frontend/cycle_analytics/value_stream_metrics_spec.js
@@ -1,20 +1,22 @@
 import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
-import { GlSingleStat } from '@gitlab/ui/dist/charts';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import metricsData from 'test_fixtures/projects/analytics/value_stream_analytics/summary.json';
 import waitForPromises from 'helpers/wait_for_promises';
+import ValueStreamMetrics from '~/analytics/shared/components/value_stream_metrics.vue';
 import { METRIC_TYPE_SUMMARY } from '~/api/analytics_api';
-import ValueStreamMetrics from '~/cycle_analytics/components/value_stream_metrics.vue';
+import { METRICS_POPOVER_CONTENT } from '~/analytics/shared/constants';
+import { prepareTimeMetricsData } from '~/analytics/shared/utils';
+import MetricTile from '~/analytics/shared/components/metric_tile.vue';
 import createFlash from '~/flash';
-import { redirectTo } from '~/lib/utils/url_utility';
 import { group } from './mock_data';
 
 jest.mock('~/flash');
-jest.mock('~/lib/utils/url_utility');
 
 describe('ValueStreamMetrics', () => {
   let wrapper;
   let mockGetValueStreamSummaryMetrics;
+  let mockFilterFn;
 
   const { full_path: requestPath } = group;
   const fakeReqName = 'Mock metrics';
@@ -24,17 +26,18 @@ describe('ValueStreamMetrics', () => {
     name: fakeReqName,
   });
 
-  const createComponent = ({ requestParams = {} } = {}) => {
+  const createComponent = (props = {}) => {
     return shallowMount(ValueStreamMetrics, {
       propsData: {
         requestPath,
-        requestParams,
+        requestParams: {},
         requests: [metricsRequestFactory()],
+        ...props,
       },
     });
   };
 
-  const findMetrics = () => wrapper.findAllComponents(GlSingleStat);
+  const findMetrics = () => wrapper.findAllComponents(MetricTile);
 
   const expectToHaveRequest = (fields) => {
     expect(mockGetValueStreamSummaryMetrics).toHaveBeenCalledWith({
@@ -55,19 +58,19 @@ describe('ValueStreamMetrics', () => {
     });
 
     it('will display a loader with pending requests', async () => {
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.findComponent(GlSkeletonLoading).exists()).toBe(true);
     });
 
-    it('renders hidden GlSingleStat components for each metric', async () => {
+    it('renders hidden MetricTile components for each metric', async () => {
       await waitForPromises();
 
       // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ isLoading: true });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const components = findMetrics();
 
@@ -88,35 +91,52 @@ describe('ValueStreamMetrics', () => {
       });
 
       describe.each`
-        index | value                   | title                   | unit                   | clickable
-        ${0}  | ${metricsData[0].value} | ${metricsData[0].title} | ${metricsData[0].unit} | ${false}
-        ${1}  | ${metricsData[1].value} | ${metricsData[1].title} | ${metricsData[1].unit} | ${false}
-        ${2}  | ${metricsData[2].value} | ${metricsData[2].title} | ${metricsData[2].unit} | ${false}
-        ${3}  | ${metricsData[3].value} | ${metricsData[3].title} | ${metricsData[3].unit} | ${true}
-      `('metric tiles', ({ index, value, title, unit, clickable }) => {
-        it(`renders a single stat component for "${title}" with value and unit`, () => {
+        index | identifier                   | value                   | label
+        ${0}  | ${metricsData[0].identifier} | ${metricsData[0].value} | ${metricsData[0].title}
+        ${1}  | ${metricsData[1].identifier} | ${metricsData[1].value} | ${metricsData[1].title}
+        ${2}  | ${metricsData[2].identifier} | ${metricsData[2].value} | ${metricsData[2].title}
+        ${3}  | ${metricsData[3].identifier} | ${metricsData[3].value} | ${metricsData[3].title}
+      `('metric tiles', ({ identifier, index, value, label }) => {
+        it(`renders a metric tile component for "${label}"`, () => {
           const metric = findMetrics().at(index);
-          expect(metric.props()).toMatchObject({ value, title, unit: unit ?? '' });
+          expect(metric.props('metric')).toMatchObject({ identifier, value, label });
           expect(metric.isVisible()).toBe(true);
         });
-
-        it(`${
-          clickable ? 'redirects' : "doesn't redirect"
-        } when the user clicks the "${title}" metric`, () => {
-          const metric = findMetrics().at(index);
-          metric.vm.$emit('click');
-          if (clickable) {
-            expect(redirectTo).toHaveBeenCalledWith(metricsData[index].links[0].url);
-          } else {
-            expect(redirectTo).not.toHaveBeenCalled();
-          }
-        });
       });
 
       it('will not display a loading icon', () => {
         expect(wrapper.find(GlSkeletonLoading).exists()).toBe(false);
       });
 
+      describe('filterFn', () => {
+        const transferedMetricsData = prepareTimeMetricsData(metricsData, METRICS_POPOVER_CONTENT);
+
+        it('with a filter function, will call the function with the metrics data', async () => {
+          const filteredData = [
+            { identifier: 'issues', value: '3', title: 'New Issues', description: 'foo' },
+          ];
+          mockFilterFn = jest.fn(() => filteredData);
+
+          wrapper = createComponent({
+            filterFn: mockFilterFn,
+          });
+
+          await waitForPromises();
+
+          expect(mockFilterFn).toHaveBeenCalledWith(transferedMetricsData);
+          expect(wrapper.vm.metrics).toEqual(filteredData);
+        });
+
+        it('without a filter function, it will only update the metrics', async () => {
+          wrapper = createComponent();
+
+          await waitForPromises();
+
+          expect(mockFilterFn).not.toHaveBeenCalled();
+          expect(wrapper.vm.metrics).toEqual(transferedMetricsData);
+        });
+      });
+
       describe('with additional params', () => {
         beforeEach(async () => {
           wrapper = createComponent({