fix: normalised luxon countdown

Author: JesperDramsch

static/js/countdown-simple.js

@@ -50,7 +50,7 @@
 
             // Calculate time difference
             const now = DateTime.now();
-            const diff = deadline.diff(now, ['days', 'hours', 'minutes', 'seconds']);
+            const diff = deadline.diff(now);
 
             if (diff.toMillis() <= 0) {
                 // Deadline has passed
@@ -59,11 +59,13 @@
                     : 'Deadline passed';
                 el.classList.add('deadline-passed');
             } else {
-                // Format and display countdown
-                const days = Math.floor(diff.days);
-                const hours = Math.floor(diff.hours);
-                const minutes = Math.floor(diff.minutes);
-                const seconds = Math.floor(diff.seconds);
+                // Format and display countdown - get normalized components using shiftTo
+                const normalized = diff.shiftTo('days', 'hours', 'minutes', 'seconds');
+                const components = normalized.toObject();
+                const days = Math.floor(components.days || 0);
+                const hours = Math.floor(components.hours || 0);
+                const minutes = Math.floor(components.minutes || 0);
+                const seconds = Math.floor(components.seconds || 0);
 
                 if (el.classList.contains('countdown-small')) {
                     // Compact format for small countdown

tests/frontend/unit/countdown-simple.test.js

@@ -77,16 +77,19 @@ describe('Countdown Timer System', () => {
   describe('Countdown Display Formats', () => {
     beforeEach(() => {
       // Mock Luxon DateTime more specifically for these tests
-      const createMockDateTime = (days, hours, minutes, seconds) => ({
-        invalid: false,
-        diff: jest.fn(() => ({
-          days,
-          hours,
-          minutes,
-          seconds,
-          toMillis: () => (days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds) * 1000
-        }))
-      });
+      const createMockDateTime = (days, hours, minutes, seconds) => {
+        const totalMillis = (days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds) * 1000;
+        return {
+          invalid: false,
+          diff: jest.fn(() => ({
+            toMillis: () => totalMillis,
+            // shiftTo method returns normalized components
+            shiftTo: jest.fn((...units) => ({
+              toObject: () => ({ days, hours, minutes, seconds })
+            }))
+          }))
+        };
+      };
 
       window.luxon = {
         DateTime: {

tests/frontend/utils/mockHelpers.js

@@ -249,39 +249,34 @@ function mockPageVisibility(isVisible = true) {
  */
 function mockLuxonDateTime() {
   if (!window.luxon) {
+    // Create a helper to generate proper Duration mocks
+    const createDurationMock = (days, hours, minutes, seconds) => {
+      const totalMillis = (days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds) * 1000;
+      return {
+        // Total milliseconds
+        toMillis: () => totalMillis,
+        // shiftTo method returns normalized components
+        shiftTo: jest.fn((...units) => ({
+          toObject: () => ({ days, hours, minutes, seconds })
+        }))
+      };
+    };
+
     // Simple mock if Luxon not loaded
     window.luxon = {
       DateTime: {
         now: jest.fn(() => ({
           toISO: () => new Date().toISOString(),
           toMillis: () => Date.now(),
-          diff: jest.fn(() => ({
-            days: 7,
-            hours: 12,
-            minutes: 30,
-            seconds: 45,
-            toMillis: () => 7 * 24 * 60 * 60 * 1000
-          }))
+          diff: jest.fn(() => createDurationMock(7, 12, 30, 45))
         })),
         fromSQL: jest.fn((str) => ({
           invalid: false,
-          diff: jest.fn(() => ({
-            days: 7,
-            hours: 12,
-            minutes: 30,
-            seconds: 45,
-            toMillis: () => 7 * 24 * 60 * 60 * 1000
-          }))
+          diff: jest.fn(() => createDurationMock(7, 12, 30, 45))
         })),
         fromISO: jest.fn((str) => ({
           invalid: false,
-          diff: jest.fn(() => ({
-            days: 7,
-            hours: 12,
-            minutes: 30,
-            seconds: 45,
-            toMillis: () => 7 * 24 * 60 * 60 * 1000
-          }))
+          diff: jest.fn(() => createDurationMock(7, 12, 30, 45))
         }))
       }
     };