Refactor specs to match current guidelines

Replace done callbacks with async/await, update
to use finders instead of classes and add a
createComponent method

app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue

@@ -96,7 +96,12 @@ export default {
 </script>
 
 <template>
-  <div v-gl-tooltip:body.viewport.left :title="tooltipText" class="sidebar-collapsed-icon">
+  <div
+    v-gl-tooltip:body.viewport.left
+    :title="tooltipText"
+    data-testid="collapsedState"
+    class="sidebar-collapsed-icon"
+  >
     <gl-icon name="timer" />
     <div class="time-tracking-collapsed-summary">
       <div :class="divClass">

app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue

@@ -70,14 +70,19 @@ export default {
 </script>
 
 <template>
-  <div class="time-tracking-comparison-pane">
+  <div data-testid="timeTrackingComparisonPane">
     <div
       v-gl-tooltip
+      data-testid="compareMeter"
       :title="timeRemainingTooltip"
       :class="timeRemainingStatusClass"
       class="compare-meter"
     >
-      <gl-progress-bar :value="timeRemainingPercent" :variant="progressBarVariant" />
+      <gl-progress-bar
+        data-testid="timeRemainingProgress"
+        :value="timeRemainingPercent"
+        :variant="progressBarVariant"
+      />
       <div class="compare-display-container">
         <div class="compare-display float-left">
           <span class="compare-label">{{ s__('TimeTracking|Spent') }}</span>

app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.vue

@@ -11,7 +11,8 @@ export default {
 </script>
 
 <template>
-  <div class="time-tracking-estimate-only-pane">
-    <span class="bold"> {{ s__('TimeTracking|Estimated:') }} </span> {{ timeEstimateHumanReadable }}
+  <div data-testid="estimateOnlyPane">
+    <span class="gl-font-weight-bold">{{ s__('TimeTracking|Estimated:') }} </span
+    >{{ timeEstimateHumanReadable }}
   </div>
 </template>

app/assets/javascripts/sidebar/components/time_tracking/help_state.vue

@@ -34,7 +34,7 @@ export default {
 </script>
 
 <template>
-  <div class="time-tracking-help-state">
+  <div data-testid="helpPane" class="time-tracking-help-state">
     <div class="time-tracking-info">
       <h4>{{ __('Track time with quick actions') }}</h4>
       <p>{{ __('Quick actions can be used in the issues description and comment boxes.') }}</p>

app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.vue

@@ -5,7 +5,7 @@ export default {
 </script>
 
 <template>
-  <div class="time-tracking-no-tracking-pane">
-    <span class="no-value"> {{ __('No estimate or time spent') }} </span>
+  <div data-testid="noTrackingPane">
+    <span class="no-value">{{ __('No estimate or time spent') }}</span>
   </div>
 </template>

app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue

@@ -15,7 +15,7 @@ export default {
       return sprintf(
         s__('TimeTracking|%{startTag}Spent: %{endTag}%{timeSpentHumanReadable}'),
         {
-          startTag: '<span class="bold">',
+          startTag: '<span class="gl-font-weight-bold">',
           endTag: '</span>',
           timeSpentHumanReadable: this.timeSpentHumanReadable,
         },
@@ -27,5 +27,5 @@ export default {
 </script>
 
 <template>
-  <div class="time-tracking-spend-only-pane" v-html="timeSpent"></div>
+  <div data-testid="spentOnlyPane" v-html="timeSpent"></div>
 </template>

app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue

@@ -105,11 +105,17 @@ export default {
     />
     <div class="title hide-collapsed">
       {{ __('Time tracking') }}
-      <div v-if="!showHelpState" class="help-button float-right" @click="toggleHelpState(true)">
+      <div
+        v-if="!showHelpState"
+        data-testid="helpButton"
+        class="help-button float-right"
+        @click="toggleHelpState(true)"
+      >
         <gl-icon name="question-o" />
       </div>
       <div
-        v-if="showHelpState"
+        v-else
+        data-testid="closeHelpButton"
         class="close-help-button float-right"
         @click="toggleHelpState(false)"
       >

spec/features/milestone_spec.rb

@@ -76,7 +76,7 @@ RSpec.describe 'Milestone' do
 
       wait_for_requests
 
-      page.within('.time-tracking-no-tracking-pane') do
+      page.within('[data-testid="noTrackingPane"]') do
         expect(page).to have_content 'No estimate or time spent'
       end
     end
@@ -94,7 +94,7 @@ RSpec.describe 'Milestone' do
 
       wait_for_requests
 
-      page.within('.time-tracking-spend-only-pane') do
+      page.within('[data-testid="spentOnlyPane"]') do
         expect(page).to have_content 'Spent: 3h'
       end
     end

spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js

-import Vue from 'vue';
-
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { createMockDirective } from 'helpers/vue_mock_directive';
+import { mount } from '@vue/test-utils';
 import TimeTracker from '~/sidebar/components/time_tracking/time_tracker.vue';
 
 describe('Issuable Time Tracker', () => {
-  let initialData;
-  let vm;
-
-  const initTimeTrackingComponent = ({
-    timeEstimate,
-    timeSpent,
-    timeEstimateHumanReadable,
-    timeSpentHumanReadable,
-    limitToHours,
-  }) => {
-    setFixtures(`
-    <div>
-      <div id="mock-container"></div>
-    </div>
-  `);
-
-    initialData = {
-      timeEstimate,
-      timeSpent,
-      humanTimeEstimate: timeEstimateHumanReadable,
-      humanTimeSpent: timeSpentHumanReadable,
-      limitToHours: Boolean(limitToHours),
-      rootPath: '/',
-    };
-
-    const TimeTrackingComponent = Vue.extend({
-      ...TimeTracker,
-      components: {
-        ...TimeTracker.components,
-        transition: {
-          // disable animations
-          render(h) {
-            return h('div', this.$slots.default);
-          },
-        },
-      },
-    });
-    vm = mountComponent(TimeTrackingComponent, initialData, '#mock-container');
+  let wrapper;
+
+  const findByTestId = testId => wrapper.find(`[data-testid=${testId}]`);
+  const findComparisonMeter = () => findByTestId('compareMeter').attributes('title');
+  const findCollapsedState = () => findByTestId('collapsedState');
+  const findTimeRemainingProgress = () => findByTestId('timeRemainingProgress');
+
+  const defaultProps = {
+    timeEstimate: 10_000, // 2h 46m
+    timeSpent: 5_000, // 1h 23m
+    humanTimeEstimate: '2h 46m',
+    humanTimeSpent: '1h 23m',
+    limitToHours: false,
+    rootPath: '/',
   };
 
+  const mountComponent = ({ props = {} } = {}) =>
+    mount(TimeTracker, {
+      propsData: { ...defaultProps, ...props },
+      directives: { GlTooltip: createMockDirective() },
+    });
+
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('Initialization', () => {
     beforeEach(() => {
-      initTimeTrackingComponent({
-        timeEstimate: 10000, // 2h 46m
-        timeSpent: 5000, // 1h 23m
-        timeEstimateHumanReadable: '2h 46m',
-        timeSpentHumanReadable: '1h 23m',
-      });
+      wrapper = mountComponent();
     });
 
     it('should return something defined', () => {
-      expect(vm).toBeDefined();
+      expect(wrapper).toBeDefined();
     });
 
-    it('should correctly set timeEstimate', done => {
-      Vue.nextTick(() => {
-        expect(vm.timeEstimate).toBe(initialData.timeEstimate);
-        done();
-      });
+    it('should correctly render timeEstimate', () => {
+      expect(findByTestId('timeTrackingComparisonPane').html()).toContain(
+        defaultProps.humanTimeEstimate,
+      );
     });
 
-    it('should correctly set time_spent', done => {
-      Vue.nextTick(() => {
-        expect(vm.timeSpent).toBe(initialData.timeSpent);
-        done();
-      });
+    it('should correctly render time_spent', () => {
+      expect(findByTestId('timeTrackingComparisonPane').html()).toContain(
+        defaultProps.humanTimeSpent,
+      );
     });
   });
 
-  describe('Content Display', () => {
-    describe('Panes', () => {
-      describe('Comparison pane', () => {
-        beforeEach(() => {
-          initTimeTrackingComponent({
-            timeEstimate: 100000, // 1d 3h
-            timeSpent: 5000, // 1h 23m
-            timeEstimateHumanReadable: '1d 3h',
-            timeSpentHumanReadable: '1h 23m',
-          });
+  describe('Content panes', () => {
+    describe('Comparison pane', () => {
+      beforeEach(() => {
+        wrapper = mountComponent({
+          props: {
+            timeEstimate: 100_000, // 1d 3h
+            timeSpent: 5_000, // 1h 23m
+            humanTimeEstimate: '1d 3h',
+            humanTimeSpent: '1h 23m',
+          },
         });
+      });
 
-        it('should show the "Comparison" pane when timeEstimate and time_spent are truthy', done => {
-          Vue.nextTick(() => {
-            expect(vm.showComparisonState).toBe(true);
-            const $comparisonPane = vm.$el.querySelector('.time-tracking-comparison-pane');
-
-            expect($comparisonPane).toBeVisible();
-            done();
-          });
-        });
+      it('should show the "Comparison" pane when timeEstimate and time_spent are truthy', () => {
+        const pane = findByTestId('timeTrackingComparisonPane');
+        expect(pane.exists()).toBe(true);
+        expect(pane.isVisible()).toBe(true);
+      });
 
-        it('should show full times when the sidebar is collapsed', done => {
-          Vue.nextTick(() => {
-            const timeTrackingText = vm.$el.querySelector('.time-tracking-collapsed-summary span')
-              .textContent;
+      it('should show full times when the sidebar is collapsed', () => {
+        expect(findCollapsedState().text()).toBe('1h 23m / 1d 3h');
+      });
 
-            expect(timeTrackingText.trim()).toBe('1h 23m / 1d 3h');
-            done();
-          });
+      describe('Remaining meter', () => {
+        it('should display the remaining meter with the correct width', () => {
+          expect(findTimeRemainingProgress().attributes('value')).toBe('5');
         });
 
-        describe('Remaining meter', () => {
-          it('should display the remaining meter with the correct width', done => {
-            Vue.nextTick(() => {
-              expect(
-                vm.$el.querySelector('.time-tracking-comparison-pane .progress[value="5"]'),
-              ).not.toBeNull();
-              done();
-            });
-          });
+        it('should display the remaining meter with the correct background color when within estimate', () => {
+          expect(findTimeRemainingProgress().attributes('variant')).toBe('primary');
+        });
 
-          it('should display the remaining meter with the correct background color when within estimate', done => {
-            Vue.nextTick(() => {
-              expect(
-                vm.$el.querySelector('.time-tracking-comparison-pane .progress[variant="primary"]'),
-              ).not.toBeNull();
-              done();
-            });
+        it('should display the remaining meter with the correct background color when over estimate', () => {
+          wrapper = mountComponent({
+            props: {
+              timeEstimate: 10_000, // 2h 46m
+              timeSpent: 20_000_000, // 231 days
+            },
           });
 
-          it('should display the remaining meter with the correct background color when over estimate', done => {
-            vm.timeEstimate = 10000; // 2h 46m
-            vm.timeSpent = 20000000; // 231 days
-            Vue.nextTick(() => {
-              expect(
-                vm.$el.querySelector('.time-tracking-comparison-pane .progress[variant="danger"]'),
-              ).not.toBeNull();
-              done();
-            });
-          });
+          expect(findTimeRemainingProgress().attributes('variant')).toBe('danger');
         });
       });
+    });
 
-      describe('Comparison pane when limitToHours is true', () => {
-        beforeEach(() => {
-          initTimeTrackingComponent({
-            timeEstimate: 100000, // 1d 3h
-            timeSpent: 5000, // 1h 23m
-            timeEstimateHumanReadable: '',
-            timeSpentHumanReadable: '',
+    describe('Comparison pane when limitToHours is true', () => {
+      beforeEach(async () => {
+        wrapper = mountComponent({
+          props: {
+            timeEstimate: 100_000, // 1d 3h
             limitToHours: true,
-          });
+          },
         });
+      });
 
-        it('should show the correct tooltip text', done => {
-          Vue.nextTick(() => {
-            expect(vm.showComparisonState).toBe(true);
-            const $title = vm.$el.querySelector('.time-tracking-content .compare-meter').title;
+      it('should show the correct tooltip text', async () => {
+        expect(findByTestId('timeTrackingComparisonPane').exists()).toBe(true);
+        await wrapper.vm.$nextTick();
 
-            expect($title).toBe('Time remaining: 26h 23m');
-            done();
-          });
-        });
+        expect(findComparisonMeter()).toBe('Time remaining: 26h 23m');
       });
+    });
 
-      describe('Estimate only pane', () => {
-        beforeEach(() => {
-          initTimeTrackingComponent({
-            timeEstimate: 10000, // 2h 46m
+    describe('Estimate only pane', () => {
+      beforeEach(async () => {
+        wrapper = mountComponent({
+          props: {
+            timeEstimate: 10_000, // 2h 46m
             timeSpent: 0,
             timeEstimateHumanReadable: '2h 46m',
             timeSpentHumanReadable: '',
-          });
+          },
         });
+        await wrapper.vm.$nextTick();
+      });
 
-        it('should display the human readable version of time estimated', done => {
-          Vue.nextTick(() => {
-            const estimateText = vm.$el.querySelector('.time-tracking-estimate-only-pane')
-              .textContent;
-            const correctText = 'Estimated:  2h 46m';
-
-            expect(estimateText.trim()).toBe(correctText);
-            done();
-          });
-        });
+      it('should display the human readable version of time estimated', () => {
+        const estimateText = findByTestId('estimateOnlyPane').text();
+        expect(estimateText.trim()).toBe('Estimated: 2h 46m');
       });
+    });
 
-      describe('Spent only pane', () => {
-        beforeEach(() => {
-          initTimeTrackingComponent({
+    describe('Spent only pane', () => {
+      beforeEach(() => {
+        wrapper = mountComponent({
+          props: {
             timeEstimate: 0,
-            timeSpent: 5000, // 1h 23m
+            timeSpent: 5_000, // 1h 23m
             timeEstimateHumanReadable: '2h 46m',
             timeSpentHumanReadable: '1h 23m',
-          });
+          },
         });
+      });
 
-        it('should display the human readable version of time spent', done => {
-          Vue.nextTick(() => {
-            const spentText = vm.$el.querySelector('.time-tracking-spend-only-pane').textContent;
-            const correctText = 'Spent: 1h 23m';
-
-            expect(spentText).toBe(correctText);
-            done();
-          });
-        });
+      it('should display the human readable version of time spent', () => {
+        const spentText = findByTestId('spentOnlyPane').text();
+        expect(spentText.trim()).toBe('Spent: 1h 23m');
       });
+    });
 
-      describe('No time tracking pane', () => {
-        beforeEach(() => {
-          initTimeTrackingComponent({
+    describe('No time tracking pane', () => {
+      beforeEach(() => {
+        wrapper = mountComponent({
+          props: {
             timeEstimate: 0,
             timeSpent: 0,
             timeEstimateHumanReadable: '',
             timeSpentHumanReadable: '',
-          });
+          },
         });
+      });
 
-        it('should only show the "No time tracking" pane when both timeEstimate and time_spent are falsey', done => {
-          Vue.nextTick(() => {
-            const $noTrackingPane = vm.$el.querySelector('.time-tracking-no-tracking-pane');
-            const noTrackingText = $noTrackingPane.textContent;
-            const correctText = 'No estimate or time spent';
-
-            expect(vm.showNoTimeTrackingState).toBe(true);
-            expect($noTrackingPane).toBeVisible();
-            expect(noTrackingText.trim()).toBe(correctText);
-            done();
-          });
-        });
+      it('should only show the "No time tracking" pane when both timeEstimate and time_spent are falsey', () => {
+        const pane = findByTestId('noTrackingPane');
+        const correctText = 'No estimate or time spent';
+        expect(pane.exists()).toBe(true);
+        expect(pane.text().trim()).toBe(correctText);
       });
+    });
 
-      describe('Help pane', () => {
-        const helpButton = () => vm.$el.querySelector('.help-button');
-        const closeHelpButton = () => vm.$el.querySelector('.close-help-button');
-        const helpPane = () => vm.$el.querySelector('.time-tracking-help-state');
+    describe('Help pane', () => {
+      const findHelpButton = () => findByTestId('helpButton');
+      const findCloseHelpButton = () => findByTestId('closeHelpButton');
 
-        beforeEach(() => {
-          initTimeTrackingComponent({ timeEstimate: 0, timeSpent: 0 });
+      beforeEach(async () => {
+        wrapper = mountComponent({ props: { timeEstimate: 0, timeSpent: 0 } });
+        await wrapper.vm.$nextTick();
+      });
 
-          return vm.$nextTick();
-        });
+      it('should not show the "Help" pane by default', () => {
+        expect(findByTestId('helpPane').exists()).toBe(false);
+      });
 
-        it('should not show the "Help" pane by default', () => {
-          expect(vm.showHelpState).toBe(false);
-          expect(helpPane()).toBeNull();
-        });
+      it('should show the "Help" pane when help button is clicked', async () => {
+        findHelpButton().trigger('click');
 
-        it('should show the "Help" pane when help button is clicked', () => {
-          helpButton().click();
+        await wrapper.vm.$nextTick();
 
-          return vm.$nextTick().then(() => {
-            expect(vm.showHelpState).toBe(true);
+        expect(findByTestId('helpPane').exists()).toBe(true);
+      });
 
-            // let animations run
-            jest.advanceTimersByTime(500);
+      it('should not show the "Help" pane when help button is clicked and then closed', async () => {
+        findHelpButton().trigger('click');
+        await wrapper.vm.$nextTick();
 
-            expect(helpPane()).toBeVisible();
-          });
-        });
+        expect(findByTestId('helpPane').classes('help-state-toggle-enter')).toBe(true);
+        expect(findByTestId('helpPane').classes('help-state-toggle-leave')).toBe(false);
 
-        it('should not show the "Help" pane when help button is clicked and then closed', done => {
-          helpButton().click();
-
-          Vue.nextTick()
-            .then(() => closeHelpButton().click())
-            .then(() => Vue.nextTick())
-            .then(() => {
-              expect(vm.showHelpState).toBe(false);
-              expect(helpPane()).toBeNull();
-            })
-            .then(done)
-            .catch(done.fail);
-        });
+        findCloseHelpButton().trigger('click');
+        await wrapper.vm.$nextTick();
+
+        expect(findByTestId('helpPane').classes('help-state-toggle-leave')).toBe(true);
+        expect(findByTestId('helpPane').classes('help-state-toggle-enter')).toBe(false);
       });
     });
   });

spec/support/shared_examples/quick_actions/issuable/time_tracking_quick_action_shared_examples.rb

@@ -13,7 +13,7 @@ RSpec.shared_examples 'issuable time tracker' do |issuable_type|
   end
 
   it 'renders the sidebar component empty state' do
-    page.within '.time-tracking-no-tracking-pane' do
+    page.within '[data-testid="noTrackingPane"]' do
       expect(page).to have_content 'No estimate or time spent'
     end
   end
@@ -22,7 +22,7 @@ RSpec.shared_examples 'issuable time tracker' do |issuable_type|
     submit_time('/estimate 3w 1d 1h')
 
     wait_for_requests
-    page.within '.time-tracking-estimate-only-pane' do
+    page.within '[data-testid="estimateOnlyPane"]' do
       expect(page).to have_content '3w 1d 1h'
     end
   end
@@ -31,7 +31,7 @@ RSpec.shared_examples 'issuable time tracker' do |issuable_type|
     submit_time('/spend 3w 1d 1h')
 
     wait_for_requests
-    page.within '.time-tracking-spend-only-pane' do
+    page.within '[data-testid="spentOnlyPane"]' do
       expect(page).to have_content '3w 1d 1h'
     end
   end
@@ -41,7 +41,7 @@ RSpec.shared_examples 'issuable time tracker' do |issuable_type|
     submit_time('/spend 3w 1d 1h')
 
     wait_for_requests
-    page.within '.time-tracking-comparison-pane' do
+    page.within '[data-testid="timeTrackingComparisonPane"]' do
       expect(page).to have_content '3w 1d 1h'
     end
   end