Ensure that GlSingleStat animates

This commit ensures that the GlSingleStat component
is only mounted once for VSA and MR analytics in order
to allow the component to listen for changes and
animate accordingly.

Changelog: fixed

app/assets/javascripts/cycle_analytics/components/value_stream_metrics.vue

@@ -91,24 +91,20 @@ export default {
 </script>
 <template>
   <div class="gl-display-flex gl-flex-wrap" data-testid="vsa-time-metrics">
-    <div v-if="isLoading" class="gl-h-auto gl-py-3 gl-pr-9 gl-my-6">
-      <gl-skeleton-loading />
+    <gl-skeleton-loading v-if="isLoading" class="gl-h-auto gl-py-3 gl-pr-9 gl-my-6" />
+    <div v-for="metric in metrics" v-show="!isLoading" :key="metric.key" class="gl-my-6 gl-pr-9">
+      <gl-single-stat
+        :id="metric.key"
+        :value="`${metric.value}`"
+        :title="metric.label"
+        :unit="metric.unit || ''"
+        :should-animate="true"
+        :animation-decimal-places="1"
+        :class="{ 'gl-hover-cursor-pointer': hasLinks(metric.links) }"
+        tabindex="0"
+        @click="clickHandler(metric)"
+      />
+      <metric-popover :metric="metric" :target="metric.key" />
     </div>
-    <template v-else>
-      <div v-for="metric in metrics" :key="metric.key" class="gl-my-6 gl-pr-9">
-        <gl-single-stat
-          :id="metric.key"
-          :value="`${metric.value}`"
-          :title="metric.label"
-          :unit="metric.unit || ''"
-          :should-animate="true"
-          :animation-decimal-places="1"
-          :class="{ 'gl-hover-cursor-pointer': hasLinks(metric.links) }"
-          tabindex="0"
-          @click="clickHandler(metric)"
-        />
-        <metric-popover :metric="metric" :target="metric.key" />
-      </div>
-    </template>
   </div>
 </template>

ee/app/assets/javascripts/analytics/merge_request_analytics/components/throughput_stats.vue

@@ -28,7 +28,7 @@ export default {
     <div v-for="stat in stats" :key="stat.title">
       <gl-skeleton-loader v-if="isLoading" :height="$options.loaderHeight" />
       <gl-single-stat
-        v-else
+        v-show="!isLoading"
         :value="stat.value"
         :title="stat.title"
         :unit="stat.unit"

ee/spec/frontend/analytics/merge_request_analytics/components/throughput_stats_spec.js

@@ -16,17 +16,27 @@ describe('ThroughputStats', () => {
     });
   };
 
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
   describe('default behaviour', () => {
     beforeEach(() => {
       wrapper = createWrapper();
     });
 
     it('displays a GlSingleStat component for each stat entry', () => {
-      expect(wrapper.findAll(GlSingleStat)).toHaveLength(stats.length);
+      const components = wrapper.findAllComponents(GlSingleStat);
+
+      expect(components).toHaveLength(stats.length);
+
+      stats.forEach((stat, index) => {
+        expect(components.at(index).isVisible()).toBe(true);
+      });
     });
 
     it('passes the GlSingleStat the correct props', () => {
-      const component = wrapper.findAll(GlSingleStat).at(0);
+      const component = wrapper.findAllComponents(GlSingleStat).at(0);
       const { title, unit, value } = stats[0];
 
       expect(component.props('title')).toBe(title);
@@ -35,7 +45,7 @@ describe('ThroughputStats', () => {
     });
 
     it('does not display any GlSkeletonLoader components', () => {
-      expect(wrapper.findAll(GlSkeletonLoader)).toHaveLength(0);
+      expect(wrapper.findAllComponents(GlSkeletonLoader)).toHaveLength(0);
     });
   });
 
@@ -45,11 +55,17 @@ describe('ThroughputStats', () => {
     });
 
     it('displays a GlSkeletonLoader component for each stat entry', () => {
-      expect(wrapper.findAll(GlSkeletonLoader)).toHaveLength(stats.length);
+      expect(wrapper.findAllComponents(GlSkeletonLoader)).toHaveLength(stats.length);
     });
 
-    it('does not display any GlSingleStat components', () => {
-      expect(wrapper.findAll(GlSingleStat)).toHaveLength(0);
+    it('hides all GlSingleStat components', () => {
+      const components = wrapper.findAllComponents(GlSingleStat);
+
+      expect(components).toHaveLength(stats.length);
+
+      stats.forEach((stat, index) => {
+        expect(components.at(index).isVisible()).toBe(false);
+      });
     });
   });
 });

spec/frontend/cycle_analytics/value_stream_metrics_spec.js

@@ -46,7 +46,6 @@ describe('ValueStreamMetrics', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('with successful requests', () => {
@@ -58,7 +57,23 @@ describe('ValueStreamMetrics', () => {
     it('will display a loader with pending requests', async () => {
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.find(GlSkeletonLoading).exists()).toBe(true);
+      expect(wrapper.findComponent(GlSkeletonLoading).exists()).toBe(true);
+    });
+
+    it('renders hidden GlSingleStat components for each metric', async () => {
+      await waitForPromises();
+
+      wrapper.setData({ isLoading: true });
+
+      await wrapper.vm.$nextTick();
+
+      const components = findMetrics();
+
+      expect(components).toHaveLength(metricsData.length);
+
+      metricsData.forEach((metric, index) => {
+        expect(components.at(index).isVisible()).toBe(false);
+      });
     });
 
     describe('with data loaded', () => {
@@ -80,6 +95,7 @@ describe('ValueStreamMetrics', () => {
         it(`renders a single stat component for "${title}" with value and unit`, () => {
           const metric = findMetrics().at(index);
           expect(metric.props()).toMatchObject({ value, title, unit: unit ?? '' });
+          expect(metric.isVisible()).toBe(true);
         });
 
         it(`${