fix percentage render (#906)

* fix percentage render

* add tests

.changes/fix-percentage-rendering.md

@@ -0,0 +1,5 @@
+---
+"web": patch
+---
+
+Fix rendering of percentages that we don't lose a decimal place and mis-render any percentages"

src/store/utils/dineroUtils.test.ts

@@ -0,0 +1,61 @@
+import { test, expect } from '@playwright/experimental-ct-react17';
+
+import { toHumanInterest } from './dineroUtils';
+
+test.describe(`toHumaan`, () => {
+  test.describe('toHumanInterest', () => {
+    test(`leading zero on only decimals`, () => {
+      const humanInterest = toHumanInterest({
+        amount: 100,
+        scale: -5,
+        trailingSymbol: '%'
+      });
+      expect(humanInterest).toBe('0.1%');
+    });
+
+    test(`no dot on 10s`, () => {
+      const humanInterest = toHumanInterest({
+        amount: 10000,
+        scale: -5,
+        trailingSymbol: '%'
+      });
+      expect(humanInterest).toBe('10%');
+    });
+
+    test(`no dot on whole number`, () => {
+      const humanInterest = toHumanInterest({
+        amount: 28000,
+        scale: -5,
+        trailingSymbol: '%'
+      });
+      expect(humanInterest).toBe('28%');
+    });
+
+    test(`no dot on single whole number`, () => {
+      const humanInterest = toHumanInterest({
+        amount: 1000,
+        scale: -5,
+        trailingSymbol: '%'
+      });
+      expect(humanInterest).toBe('1%');
+    });
+
+    test(`works with larger decimals`, () => {
+      const humanInterest = toHumanInterest({
+        amount: 875,
+        scale: -5,
+        trailingSymbol: '%'
+      });
+      expect(humanInterest).toBe('0.875%');
+    });
+
+    test(`works with whole + decimals`, () => {
+      const humanInterest = toHumanInterest({
+        amount: 87567,
+        scale: -6,
+        trailingSymbol: '%'
+      });
+      expect(humanInterest).toBe('8.7567%');
+    });
+  });
+});

src/store/utils/dineroUtils.ts

@@ -90,20 +90,25 @@ export const toHumanInterest = ({
 }) => {
   if (amount === 0) return `${leadingSymbol}0${trailingSymbol}`;
   const stringifiedArray = amount.toString().split('');
+  // so we don't splice out for percentages
+  if (trailingSymbol === '%') stringifiedArray.push('0', '0');
   // apply operations backwards
   stringifiedArray.reverse();
-  stringifiedArray.splice(-scale - 2, 0, '.');
+  // percentage conversion happens with zero push above
+  stringifiedArray.splice(-scale, 0, '.');
 
   // remove trailing zeros
   let trailingZeros = 0;
   for (let v of stringifiedArray) {
-    if (v === '0' || v === '.') {
+    if (v === '0') {
       trailingZeros++;
     } else {
+      if (v === '.') trailingZeros++;
       break;
     }
   }
   const finalStringArray = stringifiedArray.slice(trailingZeros).reverse();
+  // handles > 0 but < 1, adds leading zero
   if (finalStringArray[0] === '.') finalStringArray.splice(0, 0, '0');
 
   // add symbols to final string