Use explicit optional locale arg in math functions, rework tests accordingly (#2155)

use an explicit locale arg in math functions, rework tests accordingly

Author: david-crespo

app/util/math.spec.ts

@@ -5,16 +5,9 @@
  *
  * Copyright Oxide Computer Company
  */
-import { afterAll, beforeAll, describe, expect, it } from 'vitest'
-
-import {
-  displayBigNum,
-  nearest10,
-  percentage,
-  round,
-  splitDecimal,
-  toEngNotation,
-} from './math'
+import { describe, expect, it } from 'vitest'
+
+import { displayBigNum, nearest10, percentage, round, splitDecimal } from './math'
 import { GiB } from './units'
 
 function roundTest() {
@@ -119,15 +112,6 @@ describe('with default locale', () => {
 })
 
 describe('with de-DE locale', () => {
-  const originalLanguage = global.navigator.language
-
-  beforeAll(() => {
-    Object.defineProperty(global.navigator, 'language', {
-      value: 'de-DE',
-      writable: true,
-    })
-  })
-
   it.each([
     [0.23, ['0', ',23']],
     [0.236, ['0', ',24']],
@@ -150,17 +134,14 @@ describe('with de-DE locale', () => {
     [-50.2, ['-50', ',2']], // should correctly not round down to -51
     [1000.5, ['1.000', ',5']], // test localeString grouping
   ])('splitDecimal %d -> %s', (input, output) => {
-    expect(splitDecimal(input)).toEqual(output)
+    expect(splitDecimal(input, 'de-DE')).toEqual(output)
   })
 
-  // rounding must work the same irrespective of locale
-  it('round', roundTest)
-
   it.each([
     [0n, ['0', false]],
     [1n, ['1', false]],
     [155n, ['155', false]],
-    [999999n, ['999,999', false]],
+    [999999n, ['999.999', false]],
     [1000000n, ['1 Mio.', true]],
     [1234567n, ['1,2 Mio.', true]],
     [9999999n, ['10 Mio.', true]], // note non-breaking space
@@ -169,14 +150,7 @@ describe('with de-DE locale', () => {
     [1293859032098219, ['1,3e15', true]],
     [23094304823948203952304920342n, ['23,1e27', true]],
   ])('displayBigNum %d -> %s', (input, output) => {
-    expect(displayBigNum(input)).toEqual(output)
-  })
-
-  afterAll(() => {
-    Object.defineProperty(global.navigator, 'language', {
-      value: originalLanguage,
-      writable: true,
-    })
+    expect(displayBigNum(input, 'de-DE')).toEqual(output)
   })
 })
 
@@ -195,8 +169,8 @@ it.each([
   ['en-CA'],
   ['en-IN'],
   ['ko-KR'],
-])('toEngNotation dots %s', (locale) => {
-  expect(toEngNotation(n, locale)).toEqual('23.1e27')
+])('displayBigNum dots %s', (locale) => {
+  expect(displayBigNum(n, locale)).toEqual(['23.1e27', true])
 })
 
 it.each([
@@ -212,8 +186,8 @@ it.each([
   ['tr-TR'],
   ['pt-PT'],
   // ['ar-SA'], // saudi arabia, arabic script
-])('toEngNotation commas %s', (locale) => {
-  expect(toEngNotation(n, locale)).toEqual('23,1e27')
+])('displayBigNum commas %s', (locale) => {
+  expect(displayBigNum(n, locale)).toEqual(['23,1e27', true])
 })
 
 it.each([

app/util/math.ts

@@ -16,8 +16,8 @@ import { splitOnceBy } from './array'
  * minus sign, group separators [comma in en-US], and of course actual number
  * groups). Those will get joined and the decimal part will be the empty string.
  */
-export function splitDecimal(value: number): [string, string] {
-  const nf = Intl.NumberFormat(navigator.language, { maximumFractionDigits: 2 })
+export function splitDecimal(value: number, locale?: string): [string, string] {
+  const nf = Intl.NumberFormat(locale, { maximumFractionDigits: 2 })
   const parts = nf.formatToParts(value)
 
   const [wholeParts, decimalParts] = splitOnceBy(parts, (p) => p.type === 'decimal')
@@ -58,9 +58,7 @@ export function round(num: number, digits: number) {
   return Number(nf.format(num))
 }
 
-// a separate function because I wanted to test it with a bunch of locales
-// to make sure the toLowerCase thing is ok
-export const toEngNotation = (num: number | bigint, locale = navigator.language) =>
+const toEngNotation = (num: number | bigint, locale?: string) =>
   Intl.NumberFormat(locale, { notation: 'engineering', maximumFractionDigits: 1 })
     .format(num)
     .toLowerCase()
@@ -72,8 +70,12 @@ export const toEngNotation = (num: number | bigint, locale = navigator.language)
  *
  * Boolean represents whether the number was abbreviated.
  */
-export function displayBigNum(num: bigint | number): [string, boolean] {
-  const compact = Intl.NumberFormat(navigator.language, {
+export function displayBigNum(
+  num: bigint | number,
+  /** Argument here for testing purposes. Leave undefined in app code! */
+  locale?: string
+): [string, boolean] {
+  const compact = Intl.NumberFormat(locale, {
     notation: 'compact',
     maximumFractionDigits: 1,
   })
@@ -83,8 +85,8 @@ export function displayBigNum(num: bigint | number): [string, boolean] {
   const result = abbreviated
     ? num < 1e15 // this the threshold where compact stops using nice letters. see tests
       ? compact.format(num)
-      : toEngNotation(num)
-    : num.toLocaleString()
+      : toEngNotation(num, locale)
+    : num.toLocaleString(locale)
 
   return [result, abbreviated]
 }

test/e2e/ip-pools.e2e.ts

@@ -33,6 +33,24 @@ test('IP pool list', async ({ page }) => {
   })
 })
 
+test.describe('german locale', () => {
+  test.use({ locale: 'de-DE' })
+
+  test('IP pools list renders bignum with correct locale', async ({ page }) => {
+    await page.goto('/system/networking/ip-pools')
+    const table = page.getByRole('table')
+    await expectRowVisible(table, {
+      name: 'ip-pool-4',
+      Utilization: 'v4' + '0 / 207' + 'v6' + '0 / 18,4e18',
+    })
+  })
+
+  test('IP pool CapacityBar renders bignum with correct locale', async ({ page }) => {
+    await page.goto('/system/networking/ip-pools/ip-pool-4')
+    await expect(page.getByText('Capacity18,4e18')).toBeVisible()
+  })
+})
+
 test('IP pool silo list', async ({ page }) => {
   await page.goto('/system/networking/ip-pools')