Some code cleanup, add jest coverage and begin using it for utility functions

Author: DaneEveritt

.eslintrc.yml

@@ -25,6 +25,7 @@ extends:
   - "standard"
   - "plugin:react/recommended"
   - "plugin:@typescript-eslint/recommended"
+  - "plugin:jest-dom/recommended"
 rules:
   quotes:
     - warn

babel.config.js

@@ -1,14 +1,6 @@
-module.exports = {
-    presets: [
-        '@babel/typescript',
-        ['@babel/env', {
-            modules: false,
-            useBuiltIns: 'entry',
-            corejs: 3,
-        }],
-        '@babel/react',
-    ],
-    plugins: [
+module.exports = function (api) {
+    let targets = {};
+    const plugins = [
         'babel-plugin-macros',
         'styled-components',
         'react-hot-loader/babel',
@@ -19,5 +11,24 @@ module.exports = {
         '@babel/proposal-optional-chaining',
         '@babel/proposal-nullish-coalescing-operator',
         '@babel/syntax-dynamic-import',
-    ],
+    ];
+
+    if (api.env('test')) {
+        targets = { node: 'current' };
+        plugins.push('@babel/transform-modules-commonjs');
+    }
+
+    return {
+        plugins,
+        presets: [
+            '@babel/typescript',
+            ['@babel/env', {
+                modules: false,
+                useBuiltIns: 'entry',
+                corejs: 3,
+                targets,
+            }],
+            '@babel/react',
+        ]
+    };
 };

jest.config.js

@@ -0,0 +1,28 @@
+const { pathsToModuleNameMapper } = require('ts-jest');
+const { compilerOptions } = require('./tsconfig');
+
+/** @type {import('ts-jest').InitialOptionsTsJest} */
+module.exports = {
+    preset: 'ts-jest',
+    globals: {
+        'ts-jest': {
+            isolatedModules: true,
+        },
+    },
+    moduleFileExtensions: ['js', 'ts', 'tsx', 'd.ts', 'json', 'node'],
+    moduleNameMapper: {
+        '\\.(jpe?g|png|gif|svg)$': '<rootDir>/resources/scripts/__mocks__/file.ts',
+        '\\.(s?css|less)$': 'identity-obj-proxy',
+        ...pathsToModuleNameMapper(compilerOptions.paths, {
+            prefix: '<rootDir>/',
+        }),
+    },
+    setupFilesAfterEnv: [
+        '<rootDir>/resources/scripts/setup-tests.ts',
+    ],
+    transform: {
+        '.*\\.[t|j]sx$': 'babel-jest',
+        '.*\\.ts$': 'ts-jest',
+    },
+    testPathIgnorePatterns: ['/node_modules/'],
+};

package.json

@@ -60,16 +60,22 @@
         "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
         "@babel/plugin-proposal-optional-chaining": "^7.12.1",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-transform-modules-commonjs": "^7.18.2",
         "@babel/plugin-transform-react-jsx": "^7.12.1",
         "@babel/plugin-transform-runtime": "^7.12.1",
         "@babel/preset-env": "^7.12.1",
         "@babel/preset-react": "^7.12.1",
         "@babel/preset-typescript": "^7.12.1",
         "@babel/runtime": "^7.12.1",
+        "@testing-library/dom": "^8.14.0",
+        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/react": "12.1.5",
+        "@testing-library/user-event": "^14.2.1",
         "@types/chart.js": "^2.8.5",
         "@types/codemirror": "^0.0.98",
         "@types/debounce": "^1.2.0",
         "@types/events": "^3.0.0",
+        "@types/jest": "^28.1.3",
         "@types/node": "^14.11.10",
         "@types/qrcode.react": "^1.0.1",
         "@types/query-string": "^6.3.0",
@@ -88,18 +94,22 @@
         "@typescript-eslint/eslint-plugin": "^4.25.0",
         "@typescript-eslint/parser": "^4.25.0",
         "autoprefixer": "^10.4.7",
+        "babel-jest": "^28.1.1",
         "babel-loader": "^8.2.5",
         "babel-plugin-styled-components": "^2.0.7",
         "cross-env": "^7.0.2",
         "css-loader": "^5.2.7",
         "eslint": "^7.27.0",
         "eslint-config-standard": "^16.0.3",
         "eslint-plugin-import": "^2.23.3",
+        "eslint-plugin-jest-dom": "^4.0.2",
         "eslint-plugin-node": "^11.1.0",
         "eslint-plugin-promise": "^5.1.0",
         "eslint-plugin-react": "^7.23.2",
         "eslint-plugin-react-hooks": "^4.2.0",
         "fork-ts-checker-webpack-plugin": "^6.2.10",
+        "identity-obj-proxy": "^3.0.0",
+        "jest": "^28.1.1",
         "postcss": "^8.4.14",
         "postcss-import": "^14.1.0",
         "postcss-loader": "^4.0.0",
@@ -111,6 +121,7 @@
         "svg-url-loader": "^7.1.1",
         "terser-webpack-plugin": "^4.2.3",
         "ts-essentials": "^9.1.2",
+        "ts-jest": "^28.0.5",
         "twin.macro": "^2.8.2",
         "typescript": "^4.7.3",
         "webpack": "^4.43.0",
@@ -122,6 +133,7 @@
     },
     "scripts": {
         "clean": "cd public/assets && find . \\( -name \"*.js\" -o -name \"*.map\" \\) -type f -delete",
+        "test": "jest",
         "lint": "eslint ./resources/scripts/**/*.{ts,tsx} --ext .ts,.tsx",
         "watch": "cross-env NODE_ENV=development ./node_modules/.bin/webpack --watch --progress",
         "build": "cross-env NODE_ENV=development ./node_modules/.bin/webpack --progress",

resources/scripts/__mocks__/file.ts

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

resources/scripts/components/dashboard/ServerRow.tsx

@@ -4,7 +4,7 @@ import { faEthernet, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome
 import { Link } from 'react-router-dom';
 import { Server } from '@/api/server/getServer';
 import getServerResourceUsage, { ServerPowerState, ServerStats } from '@/api/server/getServerResourceUsage';
-import { bytesToHuman, formatIp, megabytesToHuman } from '@/helpers';
+import { bytesToString, ip, mbToBytes } from '@/lib/formatters';
 import tw from 'twin.macro';
 import GreyRowBox from '@/components/elements/GreyRowBox';
 import Spinner from '@/components/elements/Spinner';
@@ -74,8 +74,8 @@ export default ({ server, className }: { server: Server; className?: string }) =
         alarms.disk = server.limits.disk === 0 ? false : isAlarmState(stats.diskUsageInBytes, server.limits.disk);
     }
 
-    const diskLimit = server.limits.disk !== 0 ? megabytesToHuman(server.limits.disk) : 'Unlimited';
-    const memoryLimit = server.limits.memory !== 0 ? megabytesToHuman(server.limits.memory) : 'Unlimited';
+    const diskLimit = server.limits.disk !== 0 ? bytesToString(mbToBytes(server.limits.disk)) : 'Unlimited';
+    const memoryLimit = server.limits.memory !== 0 ? bytesToString(mbToBytes(server.limits.memory)) : 'Unlimited';
     const cpuLimit = server.limits.cpu !== 0 ? server.limits.cpu + ' %' : 'Unlimited';
 
     return (
@@ -98,7 +98,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
                         {
                             server.allocations.filter(alloc => alloc.isDefault).map(allocation => (
                                 <React.Fragment key={allocation.ip + allocation.port.toString()}>
-                                    {allocation.alias || formatIp(allocation.ip)}:{allocation.port}
+                                    {allocation.alias || ip(allocation.ip)}:{allocation.port}
                                 </React.Fragment>
                             ))
                         }
@@ -146,7 +146,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
                             <div css={tw`flex justify-center`}>
                                 <Icon icon={faMemory} $alarm={alarms.memory}/>
                                 <IconDescription $alarm={alarms.memory}>
-                                    {bytesToHuman(stats.memoryUsageInBytes)}
+                                    {bytesToString(stats.memoryUsageInBytes)}
                                 </IconDescription>
                             </div>
                             <p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {memoryLimit}</p>
@@ -155,7 +155,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
                             <div css={tw`flex justify-center`}>
                                 <Icon icon={faHdd} $alarm={alarms.disk}/>
                                 <IconDescription $alarm={alarms.disk}>
-                                    {bytesToHuman(stats.diskUsageInBytes)}
+                                    {bytesToString(stats.diskUsageInBytes)}
                                 </IconDescription>
                             </div>
                             <p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {diskLimit}</p>

resources/scripts/components/dashboard/search/SearchModal.tsx

@@ -13,7 +13,8 @@ import { Link } from 'react-router-dom';
 import styled from 'styled-components/macro';
 import tw from 'twin.macro';
 import Input from '@/components/elements/Input';
-import { formatIp } from '@/helpers';
+import { ip } from '@/lib/formatters';
+
 type Props = RequiredModalProps;
 
 interface Values {
@@ -109,7 +110,7 @@ export default ({ ...props }: Props) => {
                                         <p css={tw`mt-1 text-xs text-neutral-400`}>
                                             {
                                                 server.allocations.filter(alloc => alloc.isDefault).map(allocation => (
-                                                    <span key={allocation.ip + allocation.port.toString()}>{allocation.alias || formatIp(allocation.ip)}:{allocation.port}</span>
+                                                    <span key={allocation.ip + allocation.port.toString()}>{allocation.alias || ip(allocation.ip)}:{allocation.port}</span>
                                                 ))
                                             }
                                         </p>

resources/scripts/components/elements/InputError.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormikErrors, FormikTouched } from 'formik';
 import tw from 'twin.macro';
-import { capitalize } from '@/helpers';
+import { capitalize } from '@/lib/strings';
 
 interface Props {
     errors: FormikErrors<any>;

resources/scripts/components/elements/activity/ActivityLogEntry.tsx

@@ -8,7 +8,7 @@ import ActivityLogMetaButton from '@/components/elements/activity/ActivityLogMet
 import { TerminalIcon } from '@heroicons/react/solid';
 import classNames from 'classnames';
 import style from './style.module.css';
-import { isObject } from '@/helpers';
+import { isObject } from '@/lib/objects';
 import Avatar from '@/components/Avatar';
 import useLocationHash from '@/plugins/useLocationHash';
 

resources/scripts/components/server/backups/BackupRow.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArchive, faEllipsisH, faLock } from '@fortawesome/free-solid-svg-icons';
 import { format, formatDistanceToNow } from 'date-fns';
 import Spinner from '@/components/elements/Spinner';
-import { bytesToHuman } from '@/helpers';
+import { bytesToString } from '@/lib/formatters';
 import Can from '@/components/elements/Can';
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
 import BackupContextMenu from '@/components/server/backups/BackupContextMenu';
@@ -64,7 +64,7 @@ export default ({ backup, className }: Props) => {
                             {backup.name}
                         </p>
                         {(backup.completedAt !== null && backup.isSuccessful) &&
-                        <span css={tw`ml-3 text-neutral-300 text-xs font-extralight hidden sm:inline`}>{bytesToHuman(backup.bytes)}</span>
+                        <span css={tw`ml-3 text-neutral-300 text-xs font-extralight hidden sm:inline`}>{bytesToString(backup.bytes)}</span>
                         }
                     </div>
                     <p css={tw`mt-1 md:mt-0 text-xs text-neutral-400 font-mono truncate`}>