feat(utils): add utility for rounding to max decimals, use in formatDuration

Author: matejchalk

packages/plugin-lighthouse/src/lib/runner/details/__snapshots__/critical-request-chain.type.unit.test.ts.snap

@@ -47,7 +47,7 @@ exports[`parseCriticalRequestChainToAuditDetails > should convert chains to basi
         {
           "name": "https://www.gstatic.com/devrel-devsite/prod/ve761bca974e16662f27aa8810df6d144acde5bdbeeca0dfd50e25f86621eaa19/chrome/css/app.css",
           "values": {
-            "duration": "70.050 ms",
+            "duration": "70.05 ms",
             "transferSize": "133.58 kB",
           },
         },

packages/plugin-lighthouse/src/lib/runner/details/item-value.ts

@@ -5,6 +5,7 @@ import {
   formatBytes,
   formatDuration,
   html,
+  roundDecimals,
   truncateText,
   ui,
 } from '@code-pushup/utils';
@@ -72,17 +73,14 @@ export function formatTableItemPropertyValue(
       return html.link(url);
     case 'timespanMs':
     case 'ms':
-      return formatDuration(Number(parsedItemValue));
+      return formatDuration(Number(parsedItemValue), 3);
     case 'node':
       return parseNodeValue(itemValue as Details.NodeValue);
     case 'source-location':
       return truncateText(String(parsedItemValue), 200);
     case 'numeric':
       const num = Number(parsedItemValue);
-      if (num.toFixed(3).toString().endsWith('.000')) {
-        return String(num);
-      }
-      return String(num.toFixed(3));
+      return roundDecimals(num, 3).toString();
     case 'text':
       return truncateText(String(parsedItemValue), 500);
     case 'multi': // @TODO

packages/plugin-lighthouse/src/lib/runner/details/item-value.unit.test.ts

@@ -260,13 +260,13 @@ describe('formatTableItemPropertyValue', () => {
         { type: 'numeric', value: 2142 },
         'timespanMs',
       ),
-    ).toBe('2.14 s');
+    ).toBe('2.142 s');
   });
 
   it('should format value based on itemValueFormat "ms"', () => {
     expect(
       formatTableItemPropertyValue({ type: 'numeric', value: 2142 }, 'ms'),
-    ).toBe('2.14 s');
+    ).toBe('2.142 s');
   });
 
   it('should format value based on itemValueFormat "node"', () => {
@@ -318,7 +318,7 @@ describe('formatTableItemPropertyValue', () => {
         { type: 'numeric', value: 42.1 } as Details.ItemValue,
         'numeric',
       ),
-    ).toBe('42.100');
+    ).toBe('42.1');
   });
 
   it('should format value based on itemValueFormat "numeric" as int if float has only 0 post comma', () => {

packages/utils/src/index.ts

@@ -53,6 +53,7 @@ export {
   formatDuration,
   pluralize,
   pluralizeToken,
+  roundDecimals,
   slugify,
   truncateDescription,
   truncateIssueMessage,

packages/utils/src/lib/formatting.ts

@@ -4,6 +4,11 @@ import {
   MAX_TITLE_LENGTH,
 } from '@code-pushup/models';
 
+export function roundDecimals(value: number, maxDecimals: number) {
+  const multiplier = Math.pow(10, maxDecimals);
+  return Math.round(value * multiplier) / multiplier;
+}
+
 export function slugify(text: string): string {
   return text
     .trim()
@@ -40,20 +45,18 @@ export function formatBytes(bytes: number, decimals = 2) {
 
   const i = Math.floor(Math.log(positiveBytes) / Math.log(k));
 
-  return `${Number.parseFloat((positiveBytes / Math.pow(k, i)).toFixed(dm))} ${
-    sizes[i]
-  }`;
+  return `${roundDecimals(positiveBytes / Math.pow(k, i), dm)} ${sizes[i]}`;
 }
 
 export function pluralizeToken(token: string, times: number): string {
   return `${times} ${Math.abs(times) === 1 ? token : pluralize(token)}`;
 }
 
-export function formatDuration(duration: number, granularity = 0): string {
-  if (duration < 1000) {
-    return `${granularity ? duration.toFixed(granularity) : duration} ms`;
+export function formatDuration(ms: number, maxDecimals: number = 2): string {
+  if (ms < 1000) {
+    return `${roundDecimals(ms, maxDecimals)} ms`;
   }
-  return `${(duration / 1000).toFixed(2)} s`;
+  return `${roundDecimals(ms / 1000, maxDecimals)} s`;
 }
 
 export function formatDate(date: Date): string {

packages/utils/src/lib/formatting.unit.test.ts

@@ -5,10 +5,39 @@ import {
   formatDuration,
   pluralize,
   pluralizeToken,
+  roundDecimals,
   slugify,
   truncateText,
 } from './formatting.js';
 
+describe('roundDecimals', () => {
+  it('should remove extra decimals', () => {
+    expect(roundDecimals(1.2345, 2)).toBe(1.23);
+  });
+
+  it('should round last decimal', () => {
+    expect(roundDecimals(123.456, 2)).toBe(123.46);
+  });
+
+  it('should return number to prevent unnecessary trailing 0s in decimals', () => {
+    const result = roundDecimals(42.500001, 3);
+    expect(result).toBeTypeOf('number');
+    expect(result.toString()).toBe('42.5');
+    expect(result.toString()).not.toBe('42.50');
+  });
+
+  it('should leave integers unchanged', () => {
+    const value = 42;
+    const result = roundDecimals(value, 3);
+    expect(result).toBe(value);
+    expect(result.toString()).toBe('42');
+  });
+
+  it('should round to integer if max decimals set to 0', () => {
+    expect(roundDecimals(100.5, 0)).toBe(101);
+  });
+});
+
 describe('slugify', () => {
   it.each([
     ['Largest Contentful Paint', 'largest-contentful-paint'],
@@ -76,16 +105,14 @@ describe('formatDuration', () => {
   it.each([
     [-1, '-1 ms'],
     [0, '0 ms'],
-    [1, '1 ms'],
-    [2, '2 ms'],
-    [1200, '1.20 s'],
-  ])('should log correctly formatted duration for %s', (ms, displayValue) => {
+    [23, '23 ms'],
+    [891, '891 ms'],
+    [1200, '1.2 s'],
+    [56789, '56.79 s'],
+    [60_000, '60 s'],
+  ])('should format duration of %s milliseconds as %s', (ms, displayValue) => {
     expect(formatDuration(ms)).toBe(displayValue);
   });
-
-  it('should log formatted duration with 1 digit after the decimal point', () => {
-    expect(formatDuration(120.255_555, 1)).toBe('120.3 ms');
-  });
 });
 
 describe('formatDate', () => {

packages/utils/src/lib/reports/__snapshots__/generate-md-report.unit.test.ts.snap

@@ -11,7 +11,7 @@ Report was created by [Code PushUp](https://github.com/code-pushup/cli#readme) o
 
 | Commit                                                       | Version  | Duration | Plugins | Categories | Audits |
 | :----------------------------------------------------------- | :------: | -------: | :-----: | :--------: | :----: |
-| ci: update action (535b8e9e557336618a764f3fa45609d224a62837) | \`v1.0.0\` |   4.20 s |    1    |     3      |   3    |
+| ci: update action (535b8e9e557336618a764f3fa45609d224a62837) | \`v1.0.0\` |    4.2 s |    1    |     3      |   3    |
 "
 `;
 

packages/utils/src/lib/reports/generate-md-report.unit.test.ts

@@ -601,7 +601,7 @@ describe('aboutSection', () => {
     expect(md).toContainMarkdownTableRow([
       'ci: update action (535b8e9e557336618a764f3fa45609d224a62837)',
       '`v1.0.0`',
-      '4.20 s',
+      '4.2 s',
       '1',
       '3',
       '3',