Merge pull request #8 from atlassian/issue/add-formatDurationByOptions

Fix implementation to use fallback if DurationFormat is not available

Author: zac1st1k

src/index.test.ts

@@ -401,7 +401,7 @@ describe("date-time", () => {
         new Date(2000, 0, 1, 0, 0, 0, 2),
         "en-GB"
       )
-    ).toStrictEqual("");
+    ).toStrictEqual("0 seconds");
   });
 
   test("should format duration by locale", () => {
@@ -434,13 +434,139 @@ describe("date-time", () => {
     ).toStrictEqual("-1 day");
   });
 
-  test("should format duration by options", () => {
-    const startDate = new Date("2024-01-01T00:00:00Z");
-    const endDate = new Date("2024-01-01T01:02:03Z");
-    const options: Intl.DurationFormatOptions = { style: "narrow" };
+    describe('formatDurationByOptions', () => {
+        const baseDate = new Date('2024-01-01T00:00:00Z');
+        const laterDate = new Date('2024-01-02T01:02:03Z');
+        
+        test('with long style', () => {
+            const options: Intl.DurationFormatOptions = { 
+                style: 'long',
+            }
+          expect(dateTime.formatDurationByOptions(options, baseDate, laterDate)).toBe('1 day, 1 hour, 2 minutes, 3 seconds');
+        });
 
-    expect(dateTime.formatDurationByOptions(options, startDate, endDate)).toBe(
-      "1h 2m 3s"
-    );
-  });
+        test('with long style, 0 duration', () => {
+            let options: Intl.DurationFormatOptions = { 
+                style: 'long',
+            }
+            expect(dateTime.formatDurationByOptions(options, baseDate, baseDate, 'en-US')).toBe('0 seconds');
+            options = {
+                style: 'narrow',
+            }
+            expect(dateTime.formatDurationByOptions(options, baseDate, baseDate, 'en-US')).toBe('0s');
+            options = {
+              style: 'narrow',
+              minutesDisplay: 'always',
+            } as Intl.DurationFormatOptions;
+            expect(dateTime.formatDurationByOptions(options, baseDate, baseDate, 'en-US')).toBe('0m');
+        });
+      
+        test('with different style', () => {
+            const options: Intl.DurationFormatOptions = {
+                style: 'narrow',
+            };
+            expect(dateTime.formatDurationByOptions(options, baseDate, laterDate)).toBe('1d 1h 2m 3s');
+        });
+
+        test('with US locale', () => {
+            const options: Intl.DurationFormatOptions = {
+                style: 'narrow',
+            }
+            expect(dateTime.formatDurationByOptions(options, baseDate, laterDate, 'en-US')).toBe('1d 1h 2m 3s');
+        });
+
+        test('with CN locale', () => {
+            const options: Intl.DurationFormatOptions = {
+                style: 'narrow',
+            }
+            expect(dateTime.formatDurationByOptions(options, baseDate, laterDate, 'zh-CN')).toBe('1天1小时2分钟3秒');
+        });
+
+        test('with JP locale', () => {
+            // Japanese locale needs to display unit as long, as narrow is wrong, returns english, we override to long in the implementation
+            const options: Intl.DurationFormatOptions = {
+                style: 'narrow',
+            }
+            expect(dateTime.formatDurationByOptions(options, baseDate, laterDate, 'ja-JP')).toBe('1日1時間2分3秒');
+        });
+
+        test('with KR locale', () => {
+            const options: Intl.DurationFormatOptions = {
+                style: 'narrow',
+            }
+            expect(dateTime.formatDurationByOptions(options, baseDate, laterDate, 'ko-KR')).toBe('1일1시간2분3초');
+        });
+
+        test('with DE locale', () => {
+            const options: Intl.DurationFormatOptions = {
+                style: 'narrow',
+            }
+            expect(dateTime.formatDurationByOptions(options, baseDate, laterDate, 'de-DE')).toBe('1 T, 1 Std., 2 Min. und 3 Sek.');
+        });
+
+      });
+      describe('formatDurationByOptions fallback', () => {
+        const originalDurationFormat = Intl.DurationFormat;
+        
+        beforeEach(() => {
+          // Mock DurationFormat as undefined using TypeScript type assertions
+          (Intl as any).DurationFormat = undefined;
+        });
+        
+        afterEach(() => {
+          // Restore the original implementation
+          (Intl as any).DurationFormat = originalDurationFormat;
+        });
+
+        const baseDate = new Date('2024-01-01T00:00:00Z');
+        const laterDate = new Date('2024-01-02T01:02:03Z');
+        
+        test('with default options', () => {
+          const options: Intl.DurationFormatOptions = { 
+            style: 'long',
+          };
+          
+          // This should use the fallback implementation
+          const result = dateTime.formatDurationByOptions(options, baseDate, laterDate);
+          expect(result).toStrictEqual('1 day 1 hour 2 minutes 3 seconds');
+          expect(result).toBeDefined();
+          // Add more specific expectations based on your fallback implementation
+        });
+
+        test('throws error with null options', () => {
+            expect(() => {
+                // @ts-ignore - Deliberately testing invalid input
+                dateTime.formatDurationByOptions(null, baseDate, laterDate);
+            }).toThrow('Please use formatDuration instead');
+        });
+
+        test('with US locale', () => {
+            let options: Intl.DurationFormatOptions = {
+                style: 'long',
+            }
+            expect(dateTime.formatDurationByOptions(options, baseDate, laterDate, 'en-US')).toStrictEqual('1 day 1 hour 2 minutes 3 seconds');
+            options.style = 'narrow';
+            expect(dateTime.formatDurationByOptions(options, baseDate, laterDate, 'en-US')).toStrictEqual('1d 1h 2m 3s');
+        });
+
+        test('with CN locale', () => {
+            let options: Intl.DurationFormatOptions = {
+                style: 'long',
+            }
+            expect(dateTime.formatDurationByOptions(options, baseDate, laterDate, 'zh-CN')).toStrictEqual('1天1小时2分钟3秒钟');
+            options.style = 'narrow';
+            expect(dateTime.formatDurationByOptions(options, baseDate, laterDate, 'zh-CN')).toStrictEqual('1天1小时2分钟3秒');
+        });
+
+        test('with JP locale', () => {
+            // For Japanese locale, narrow is wrong, returns english, so we override to long in the fallback implementation
+            let options: Intl.DurationFormatOptions = {
+                style: 'long',
+            }
+            expect(dateTime.formatDurationByOptions(options, baseDate, laterDate, 'ja-JP')).toStrictEqual('1日1時間2分3秒');
+            options.style = 'narrow';
+            expect(dateTime.formatDurationByOptions(options, baseDate, laterDate, 'ja-JP')).toStrictEqual('1日1時間2分3秒');
+        });
+        
+      })
 });

src/index.ts

@@ -179,26 +179,78 @@ export function formatDurationByOptions(options: Intl.DurationFormatOptions, fro
         throw new Error('Please use formatDuration instead');
     }
 
-    const diffInMs = to.getTime() - from.getTime();
-    const diffInSeconds = Math.floor(diffInMs / 1000);
-
-    const days = Math.floor(diffInSeconds / (24 * 60 * 60));
-    const hours = Math.floor((diffInSeconds % (24 * 60 * 60)) / (60 * 60));
-    const minutes = Math.floor((diffInSeconds % (60 * 60)) / 60);
-    const seconds = diffInSeconds % 60;
-
-    const duration = {
-        days,
-        hours,
-        minutes,
-        seconds
-    };
+    // Legacy implementation
+    const getNumberFormat = (unit: string, number: number | bigint) => {
+        return new Intl.NumberFormat(locale, {
+            style: "unit",
+            unit,
+            unitDisplay: options.style === 'long' ? 'long' : 'narrow'
+        }).format(number);
+    }
+
+    const milliseconds = to.getTime() - from.getTime();
+
+    const isCJKLocale = locale.startsWith('zh') || locale.startsWith('ja') || locale.startsWith('ko');
+    // Japanese locale needs to display unit as long, as narrow is wrong, returns english
+    // "narrow" returns english on Chrome 134.0.6998.166 and Firefox 136.0.4, remove this once fixed
+    if (locale === 'ja-JP') {
+        options.style = 'long';
+    }
+
+    const dayInMs = 24 * 60 * 60 * 1000;
+    const hourInMs = 60 * 60 * 1000;
+    const minuteInMs = 60 * 1000;
+    const secondInMs = 1000;
+   
 
-    const formatter = new Intl.DurationFormat(locale, options);
+    const days = Math.floor(milliseconds / dayInMs);
+    const hours = Math.floor((milliseconds - days * dayInMs) / hourInMs);
+    const minutes = Math.floor((milliseconds - days * dayInMs - hours * hourInMs) / minuteInMs);
+    const seconds = Math.floor((milliseconds - days * dayInMs - hours * hourInMs - minutes * minuteInMs) / secondInMs);
 
-    if (locale.startsWith('zh') || locale.startsWith('ja') || locale.startsWith('ko')) {
-        return formatter.format(duration).replace(/\s+/g, '');
+    // Feature detection for Intl.DurationFormat, not supported in older browsers
+    if ('DurationFormat' in Intl) {
+        try {
+            const duration = {
+                days,
+                hours,
+                minutes,
+                seconds
+            };
+            let durationString = new Intl.DurationFormat(locale, options).format(duration);
+            if (durationString === '') {
+                // Use legacy implementation if Intl.DurationFormat returns empty string (duration less than 1 second)
+                durationString = getNumberFormat('second', seconds);
+            }
+            if (isCJKLocale) {
+                durationString = durationString.normalize('NFD').replace(/\s+/g, '');
+            }
+            return durationString;
+        } catch (error) {
+            console.warn('Intl.DurationFormat failed, falling back to custom implementation', error);
+            // Fall through to legacy implementation
+        }
+    }
+
+    const parts = [];
+    
+    if (days) {
+        parts.push(getNumberFormat('day', days));
     }
+    if (hours) {
+        parts.push(getNumberFormat('hour', hours));
+    }
+    if (minutes) {
+        parts.push(getNumberFormat('minute', minutes));
+    } 
+    parts.push(getNumberFormat('second', seconds));
+
+    // Normalize and replace spaces
+    let result = parts.join(' ').normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/\s+/g, ' ');
 
-    return formatter.format(duration);
+    if (isCJKLocale) {
+        return result.replace(/\s+/g, '');
+    }
+    
+    return result;
 }

src/test-dates.json

@@ -158,6 +158,6 @@
     "pattern": "yyyy. mm. dd.",
     "numericDate": "2004. 8. 3.",
     "cldrDate": "2004. 8. 3.",
-    "duration": "1일1시간1분1초"
+    "duration": "1일1시간1분1초"
   }
 ]