Merge branch 'vs-migrate-total-time-to-vtu' into 'master'

Migrate cycle_analytics/total_time to VTU

See merge request gitlab-org/gitlab!57163

spec/frontend/cycle_analytics/total_time_component_spec.js

-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import component from '~/cycle_analytics/components/total_time_component.vue';
+import { shallowMount } from '@vue/test-utils';
+import TotalTime from '~/cycle_analytics/components/total_time_component.vue';
 
 describe('Total time component', () => {
-  let vm;
-  let Component;
+  let wrapper;
 
-  beforeEach(() => {
-    Component = Vue.extend(component);
-  });
+  const createComponent = (propsData) => {
+    wrapper = shallowMount(TotalTime, {
+      propsData,
+    });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('With data', () => {
     it('should render information for days and hours', () => {
-      vm = mountComponent(Component, {
+      createComponent({
         time: {
           days: 3,
           hours: 4,
         },
       });
 
-      expect(vm.$el.textContent.trim().replace(/\s\s+/g, ' ')).toEqual('3 days 4 hrs');
+      expect(wrapper.text()).toMatchInterpolatedText('3 days 4 hrs');
     });
 
     it('should render information for hours and minutes', () => {
-      vm = mountComponent(Component, {
+      createComponent({
         time: {
           hours: 4,
           mins: 35,
         },
       });
 
-      expect(vm.$el.textContent.trim().replace(/\s\s+/g, ' ')).toEqual('4 hrs 35 mins');
+      expect(wrapper.text()).toMatchInterpolatedText('4 hrs 35 mins');
     });
 
     it('should render information for seconds', () => {
-      vm = mountComponent(Component, {
+      createComponent({
         time: {
           seconds: 45,
         },
       });
 
-      expect(vm.$el.textContent.trim().replace(/\s\s+/g, ' ')).toEqual('45 s');
+      expect(wrapper.text()).toMatchInterpolatedText('45 s');
     });
   });
 
   describe('Without data', () => {
     it('should render no information', () => {
-      vm = mountComponent(Component);
+      createComponent();
 
-      expect(vm.$el.textContent.trim()).toEqual('--');
+      expect(wrapper.text()).toBe('--');
     });
   });
 });