Create pn helper function inside utils folder

The function pn() is being defined a few times in different components. This commit is the first of two commits to solve this issue.

This commit only creates the function inside the utils folder.

Jest is also being introduced for unit tests.

frontend/package.json

@@ -5,6 +5,7 @@
   "main": "index.js",
   "scripts": {
     "dev": "webpack --mode development --watch",
+    "test": "jest",
     "build": "webpack --mode production"
   },
   "keywords": [],
@@ -15,6 +16,7 @@
     "@babel/preset-env": "^7.16.7",
     "@babel/preset-react": "^7.16.7",
     "babel-loader": "^8.2.3",
+    "jest": "^27.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "webpack": "^5.65.0",

frontend/src/utils/prettyNumbers.js

@@ -0,0 +1,11 @@
+export const pn = (value) => {
+  if (value === null) {
+    return;
+  }
+
+  let parts = value.toString().split(".");
+
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+
+  return parts.join(".");
+};

frontend/src/utils/prettyNumbers.test.js

@@ -0,0 +1,25 @@
+import { pn } from "./prettyNumbers";
+
+describe("prettyNumbers", () => {
+  test("pn()", () => {
+    [
+      {input: null, output: undefined},
+      {input: 0, output: "0"},
+      {input: 1, output: "1"},
+      {input: 2, output: "2"},
+      {input: 10, output: "10"},
+      {input: 11, output: "11"},
+      {input: 11.0, output: "11"},
+      {input: 12.0, output: "12"},
+      {input: 100.50, output: "100.5"},
+      {input: 224.56, output: "224.56"},
+      {input: 1567, output: "1,567"},
+      {input: 15678, output: "15,678"},
+      {input: 2984.99, output: "2,984.99"},
+      {input: 100000.00, output: "100,000"},
+    ].forEach((it) => {
+      const response = pn(it.input);
+      expect(response).toBe(it.output);
+    });
+  });
+})