1 files changed, 24 insertions, 37 deletions

diff --git a/spec/frontend/cycle_analytics/total_time_component_spec.js b/spec/frontend/cycle_analytics/total_time_component_spec.js
index e831bc311ed..9003c0330c0 100644
--- a/spec/frontend/cycle_analytics/total_time_component_spec.js
+++ b/spec/frontend/cycle_analytics/total_time_component_spec.js
@@ -1,11 +1,11 @@
-import { shallowMount } from '@vue/test-utils';
-import TotalTime from '~/cycle_analytics/components/total_time_component.vue';
+import { mount } from '@vue/test-utils';
+import TotalTimeComponent from '~/cycle_analytics/components/total_time_component.vue';
 
-describe('Total time component', () => {
-  let wrapper;
+describe('TotalTimeComponent', () => {
+  let wrapper = null;
 
   const createComponent = (propsData) => {
-    wrapper = shallowMount(TotalTime, {
+    return mount(TotalTimeComponent, {
       propsData,
     });
   };
@@ -14,45 +14,32 @@ describe('Total time component', () => {
     wrapper.destroy();
   });
 
-  describe('With data', () => {
-    it('should render information for days and hours', () => {
-      createComponent({
-        time: {
-          days: 3,
-          hours: 4,
-        },
+  describe('with a valid time object', () => {
+    it.each`
+      time
+      ${{ seconds: 35 }}
+      ${{ mins: 47, seconds: 3 }}
+      ${{ days: 3, mins: 47, seconds: 3 }}
+      ${{ hours: 23, mins: 10 }}
+      ${{ hours: 7, mins: 20, seconds: 10 }}
+    `('with $time', ({ time }) => {
+      wrapper = createComponent({
+        time,
       });
 
-      expect(wrapper.text()).toMatchInterpolatedText('3 days 4 hrs');
-    });
-
-    it('should render information for hours and minutes', () => {
-      createComponent({
-        time: {
-          hours: 4,
-          mins: 35,
-        },
-      });
-
-      expect(wrapper.text()).toMatchInterpolatedText('4 hrs 35 mins');
+      expect(wrapper.html()).toMatchSnapshot();
     });
+  });
 
-    it('should render information for seconds', () => {
-      createComponent({
-        time: {
-          seconds: 45,
-        },
+  describe('with a blank object', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        time: {},
       });
-
-      expect(wrapper.text()).toMatchInterpolatedText('45 s');
     });
-  });
-
-  describe('Without data', () => {
-    it('should render no information', () => {
-      createComponent();
 
-      expect(wrapper.text()).toBe('--');
+    it('should render --', () => {
+      expect(wrapper.html()).toMatchSnapshot();
     });
   });
 });