#332 rounding down of passed percentage

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Fixed
 - Make keyword spacing look right ([#376](https://github.com/cucumber/react-components/pull/376))
 - Fix issue with hook steps not being rendered ([#379](https://github.com/cucumber/react-components/pull/379))
+- Rounding down of percent passed and adding one decimal place ([#380](https://github.com/cucumber/react-components/pull/380))
 
 ### Changed
 - Inherit font-size instead of setting at 14px ([#377](https://github.com/cucumber/react-components/pull/377))

src/formatStatusRate.spec.ts

@@ -4,11 +4,14 @@ import { formatStatusRate } from './formatStatusRate.js'
 
 describe('formatStatusRate', () => {
   const examples: [passed: number, total: number, percentage: string][] = [
-    [13, 45, '29%'],
-    [5, 45, '11%'],
+    [13, 45, '28.8%'],
+    [5, 45, '11.1%'],
     [45, 45, '100%'],
     [0, 45, '0%'],
     [0, 0, '0%'],
+    [999, 1000, '99.9%'],
+    [99999, 100000, '99.9%'],
+    [9999999, 10000000, '99.9%'],
   ]
 
   for (const [passed, total, percentage] of examples) {

src/formatStatusRate.ts

@@ -1,5 +1,9 @@
 export function formatStatusRate(passed: number, total: number) {
+  const percentPassed = total > 0 ? passed / total : 0
+  const roundedDown = Math.floor(percentPassed * 1000) / 1000
+
   return new Intl.NumberFormat(undefined, {
     style: 'percent',
-  }).format(total > 0 ? passed / total : 0)
+    maximumFractionDigits: 1,
+  }).format(roundedDown)
 }