Fix timer button rolling over after 24h (#13148)

* Fix timer button rolling over after 24h

* Use padStart function.

---------

Co-authored-by: Dombi Attila <[email protected]>

frontend/src/app/features/work-packages/components/wp-timer-button/time-formatter.helper.ts

@@ -1,9 +1,21 @@
 import * as moment from 'moment/moment';
 
+function paddedNumber(input:number):string {
+  return input.toString().padStart(2, '0');
+}
+
 export function formatElapsedTime(startTime:string):string {
   const start = moment(startTime);
   const now = moment();
-  const offset = moment(now).diff(start);
+  const duration = now.diff(start, 'seconds');
+
+  const hours = Math.floor(duration / 3600);
+  const minutes = Math.floor((duration - (hours * 3600)) / 60);
+  const seconds = duration - (hours * 3600) - (minutes * 60);
 
-  return moment.utc(offset).format('HH:mm:ss');
+  return [
+    paddedNumber(hours),
+    paddedNumber(minutes),
+    paddedNumber(seconds),
+  ].join(':');
 }

modules/costs/spec/features/timer_spec.rb

@@ -130,6 +130,20 @@
 
     it_behaves_like 'allows time tracking'
 
+    context 'when an old timer exists' do
+      let!(:active_timer) do
+        Timecop.travel(2.days.ago) do
+          create(:time_entry, project:, work_package: work_package_a, user:, ongoing: true)
+        end
+      end
+
+      it 'correctly shows active timers > 24 hours' do
+        wp_view_a.visit!
+        timer_button.expect_visible
+        timer_button.expect_time /48:0\d:\d+/
+      end
+    end
+
     it 'correctly handles timers in multiple tabs' do
       wp_view_a.visit!
       timer_button.expect_visible

spec/support/components/work_packages/timer_button.rb

@@ -41,6 +41,10 @@ def expect_inactive
         expect(page).to have_selector('[data-qa-selector="timer-inactive"]', wait: 10)
       end
 
+      def expect_time(text)
+        expect(page).to have_selector('[data-qa-selector="timer-active"]', wait: 10, text:)
+      end
+
       def expect_visible(visible: true)
         if visible
           expect(page).to have_selector('op-wp-timer-button')