Refactor class PrettyTime to util obj prettyTime.

app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js.es6

@@ -15,7 +15,7 @@
     ],
     methods: {
       abbreviateTime(timeStr) {
-        return gl.PrettyTime.abbreviateTime(timeStr);
+        return gl.utils.prettyTime.abbreviateTime(timeStr);
       },
     },
     template: `

app/assets/javascripts/issuable/time_tracking/components/comparison_pane.js.es6

@@ -2,7 +2,7 @@
 //= require lib/utils/pretty_time
 
 (() => {
-  const PrettyTime = gl.PrettyTime;
+  const prettyTime = gl.utils.prettyTime;
 
   Vue.component('time-tracking-comparison-pane', {
     name: 'time-tracking-comparison-pane',
@@ -15,10 +15,10 @@
     computed: {
       parsedRemaining() {
         const diffSeconds = this.timeEstimate - this.timeSpent;
-        return PrettyTime.parseSeconds(diffSeconds);
+        return prettyTime.parseSeconds(diffSeconds);
       },
       timeRemainingHumanReadable() {
-        return PrettyTime.stringifyTime(this.parsedRemaining);
+        return prettyTime.stringifyTime(this.parsedRemaining);
       },
       timeRemainingTooltip() {
         const prefix = this.timeRemainingMinutes < 0 ? 'Over by' : 'Time remaining:';
@@ -37,10 +37,10 @@
       },
       /* Parsed time values */
       parsedEstimate() {
-        return PrettyTime.parseSeconds(this.timeEstimate);
+        return prettyTime.parseSeconds(this.timeEstimate);
       },
       parsedSpent() {
-        return PrettyTime.parseSeconds(this.timeSpent);
+        return prettyTime.parseSeconds(this.timeSpent);
       },
     },
     template: `

app/assets/javascripts/lib/utils/pretty_time.js.es6

@@ -4,13 +4,13 @@
    * stringifyTime condensed or non-condensed, abbreviateTimelengths)
    * */
 
-  class PrettyTime {
-
+  const utils = window.gl.utils = gl.utils || {};
+  const prettyTime = utils.prettyTime = {
     /*
      * Accepts seconds and returns a timeObject { weeks: #, days: #, hours: #, minutes: # }
      * Seconds can be negative or positive, zero or non-zero.
     */
-    static parseSeconds(seconds) {
+    parseSeconds(seconds) {
       const DAYS_PER_WEEK = 5;
       const HOURS_PER_DAY = 8;
       const MINUTES_PER_HOUR = 60;
@@ -24,7 +24,7 @@
         minutes: 1,
       };
 
-      let unorderedMinutes = PrettyTime.secondsToMinutes(seconds);
+      let unorderedMinutes = prettyTime.secondsToMinutes(seconds);
 
       return _.mapObject(timePeriodConstraints, (minutesPerPeriod) => {
         const periodCount = Math.floor(unorderedMinutes / minutesPerPeriod);
@@ -33,35 +33,33 @@
 
         return periodCount;
       });
-    }
+    },
 
     /*
     * Accepts a timeObject and returns a condensed string representation of it
     * (e.g. '1w 2d 3h 1m' or '1h 30m'). Zero value units are not included.
     */
 
-    static stringifyTime(timeObject) {
+    stringifyTime(timeObject) {
       const reducedTime = _.reduce(timeObject, (memo, unitValue, unitName) => {
         const isNonZero = !!unitValue;
         return isNonZero ? `${memo} ${unitValue}${unitName.charAt(0)}` : memo;
       }, '').trim();
       return reducedTime.length ? reducedTime : '0m';
-    }
+    },
 
     /*
     * Accepts a time string of any size (e.g. '1w 2d 3h 5m' or '1w 2d') and returns
     *  the first non-zero unit/value pair.
     */
 
-    static abbreviateTime(timeStr) {
+    abbreviateTime(timeStr) {
       return timeStr.split(' ')
         .filter(unitStr => unitStr.charAt(0) !== '0')[0];
-    }
+    },
 
-    static secondsToMinutes(seconds) {
+    secondsToMinutes(seconds) {
       return Math.abs(seconds / 60);
-    }
-  }
-
-  gl.PrettyTime = PrettyTime;
+    },
+  };
 })(window.gl || (window.gl = {}));

spec/javascripts/issuable_time_tracker_spec.js.es6

@@ -59,7 +59,6 @@ function initTimeTrackingComponent(opts) {
 
           it('should show the "Comparison" pane when timeEstimate and time_spent are truthy', function(done) {
             Vue.nextTick(() => {
-            debugger;
               const $comparisonPane = this.timeTracker.$el.querySelector('.time-tracking-comparison-pane');
               expect(this.timeTracker.showComparisonState).toBe(true);
               done();
@@ -67,11 +66,14 @@ function initTimeTrackingComponent(opts) {
           });
 
           describe('Remaining meter', function() {
-            it('should display the remaining meter with the correct width', function() {
+            it('should display the remaining meter with the correct width', function(done) {
+              Vue.nextTick(() => {
                 const meterWidth = this.timeTracker.$el.querySelector('.time-tracking-comparison-pane .meter-fill').style.width;
                 const correctWidth = '5%';
 
                 expect(meterWidth).toBe(correctWidth);
+                done();
+              })
             });
 
             it('should display the remaining meter with the correct background color when within estimate', function(done) {
@@ -102,7 +104,6 @@ function initTimeTrackingComponent(opts) {
           it('should display the human readable version of time estimated', function(done) {
             Vue.nextTick(() => {
               const estimateText = this.timeTracker.$el.querySelector('.time-tracking-estimate-only-pane').innerText;
-              debugger;
               const correctText = 'Estimated: 2h 46m';
 
               expect(estimateText).toBe(correctText);

spec/javascripts/pretty_time_spec.js.es6

 //= require lib/utils/pretty_time
 
 (() => {
-  const PrettyTime = gl.PrettyTime;
+  const prettyTime = gl.utils.prettyTime;
 
-  describe('PrettyTime methods', function () {
+  describe('prettyTime methods', function () {
     describe('parseSeconds', function () {
       it('should correctly parse a negative value', function () {
-        const parser = PrettyTime.parseSeconds;
+        const parser = prettyTime.parseSeconds;
 
         const zeroSeconds = parser(-1000);
 
@@ -17,7 +17,7 @@
       });
 
       it('should correctly parse a zero value', function () {
-        const parser = PrettyTime.parseSeconds;
+        const parser = prettyTime.parseSeconds;
 
         const zeroSeconds = parser(0);
 
@@ -28,7 +28,7 @@
       });
 
       it('should correctly parse a small non-zero second values', function () {
-        const parser = PrettyTime.parseSeconds;
+        const parser = prettyTime.parseSeconds;
 
         const subOneMinute = parser(10);
 
@@ -53,7 +53,7 @@
       });
 
       it('should correctly parse large second values', function () {
-        const parser = PrettyTime.parseSeconds;
+        const parser = prettyTime.parseSeconds;
 
         const aboveOneHour = parser(4800);
 
@@ -87,7 +87,7 @@
           minutes: 20,
         };
 
-        const timeString = PrettyTime.stringifyTime(timeObject);
+        const timeString = prettyTime.stringifyTime(timeObject);
 
         expect(timeString).toBe('1w 4d 7h 20m');
       });
@@ -100,7 +100,7 @@
           minutes: 20,
         };
 
-        const timeString = PrettyTime.stringifyTime(timeObject);
+        const timeString = prettyTime.stringifyTime(timeObject);
 
         expect(timeString).toBe('4d 20m');
       });
@@ -113,7 +113,7 @@
           minutes: 0,
         };
 
-        const timeString = PrettyTime.stringifyTime(timeObject);
+        const timeString = prettyTime.stringifyTime(timeObject);
 
         expect(timeString).toBe('0m');
       });
@@ -122,12 +122,12 @@
     describe('abbreviateTime', function () {
       it('should abbreviate stringified times for weeks', function () {
         const fullTimeString = '1w 3d 4h 5m';
-        expect(PrettyTime.abbreviateTime(fullTimeString)).toBe('1w');
+        expect(prettyTime.abbreviateTime(fullTimeString)).toBe('1w');
       });
 
       it('should abbreviate stringified times for non-weeks', function () {
         const fullTimeString = '0w 3d 4h 5m';
-        expect(PrettyTime.abbreviateTime(fullTimeString)).toBe('3d');
+        expect(prettyTime.abbreviateTime(fullTimeString)).toBe('3d');
       });
     });
   });