Implement unit-tests and setup a CI (GH-6)

Author: ArtyomVancyan

.github/workflows/tests.yml

@@ -0,0 +1,41 @@
+name: tests
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  tests:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [ 16.x, 18.x, 20.x ]
+        react-version: [ rc16, rc17, rc18 ]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Python
+        uses: actions/setup-python@v2
+
+      - name: Install Tox
+        run: |
+          pip install --upgrade pip
+          pip install tox tox-gh-actions
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run Tox Jest
+        run: tox -e ${{ matrix.react-version }}

README.md

@@ -4,7 +4,7 @@
 [![React](https://img.shields.io/badge/react-%E2%89%A516-blue)](https://www.npmjs.com/package/react-phone-hooks)
 [![types](https://img.shields.io/npm/types/react-phone-hooks)](https://www.npmjs.com/package/react-phone-hooks)
 [![License](https://img.shields.io/npm/l/react-phone-hooks)](https://github.com/typesnippet/react-phone-hooks/blob/master/LICENSE)
-[![Tests](https://github.com/pysnippet/react-phone-hooks/actions/workflows/tests.yml/badge.svg)](https://github.com/pysnippet/react-phone-hooks/actions/workflows/tests.yml)
+[![Tests](https://github.com/typesnippet/react-phone-hooks/actions/workflows/tests.yml/badge.svg)](https://github.com/typesnippet/react-phone-hooks/actions/workflows/tests.yml)
 
 This comprehensive toolkit features custom hooks and utility functions tailored for phone number formatting, parsing,
 and validation. It supports international standards, making it suitable for phone number processing applications across
@@ -18,4 +18,4 @@ list. Be proud of what you build!
 
 ## License
 
-Copyright (C) 2023 Artyom Vancyan. [MIT](https://github.com/pysnippet/react-phone-hooks/blob/master/LICENSE)
+Copyright (C) 2023 Artyom Vancyan. [MIT](https://github.com/typesnippet/react-phone-hooks/blob/master/LICENSE)

development/src/phone-hooks/index.ts

@@ -27,6 +27,7 @@ export const getRawValue = (value: PhoneNumber | string) => {
 }
 
 export const displayFormat = (value: string) => {
+	/** Returns the formatted value that can be displayed as an actual input value */
 	return value.replace(/[.\s\D]+$/, "").replace(/(\(\d+)$/, "$1)");
 }
 
@@ -35,6 +36,11 @@ export const cleanInput = (input: any, pattern: string) => {
 	return Array.from(pattern, c => input[0] === c || slots.has(c) ? input.shift() || c : c);
 }
 
+export const getFormattedNumber = (rawValue: any, pattern: string) => {
+	/** Returns the reformatted input value based on the given pattern */
+	return displayFormat(cleanInput(rawValue, pattern.replaceAll(/\d/g, ".")).join(""));
+}
+
 export const checkValidity = (metadata: PhoneNumber, strict: boolean = false) => {
 	/** Checks if both the area code and phone number match the validation pattern */
 	const pattern = (validations as any)[metadata.isoCode as keyof typeof validations][Number(strict)];
@@ -134,11 +140,11 @@ export const usePhone = ({
 			i = clean(target.value.slice(0, i)).findIndex(c => slots.has(c));
 			return i < 0 ? prev[prev.length - 1] : backRef.current ? prev[i - 1] || first : i;
 		});
-		target.value = displayFormat(clean(target.value).join(""));
+		target.value = getFormattedNumber(target.value, pattern);
 		target.setSelectionRange(i, j);
 		backRef.current = false;
 		setValue(target.value);
-	}, [clean, first, prev])
+	}, [clean, first, pattern, prev])
 
 	return {
 		clean,

jestconfig.json

@@ -0,0 +1,14 @@
+{
+  "transform": {
+    "^.+\\.tsx?$": "ts-jest"
+  },
+  "testRegex": "/tests/.*\\.test\\.(tsx?)$",
+  "moduleFileExtensions": [
+    "ts",
+    "js",
+    "tsx",
+    "json",
+    "node"
+  ],
+  "testEnvironment": "jsdom"
+}

package.json

@@ -59,14 +59,20 @@
     "rename": "bash -c 'for file in *.js; do mv $file \"${file%.js}.$0.js\"; done'",
     "build": "tsc --module commonjs && npm run rename -- cjs && tsc --declaration",
     "prebuild": "rm -r metadata stylesheet.json index* types* styles* || true",
-    "postbuild": "cp resources/stylesheet.json stylesheet.json"
+    "postbuild": "cp resources/stylesheet.json stylesheet.json",
+    "test": "jest --config jestconfig.json"
   },
   "license": "MIT",
   "peerDependencies": {
     "react": ">=16"
   },
   "devDependencies": {
+    "@testing-library/react": "^14.1.2",
+    "@types/jest": "^29.5.7",
     "@types/react": "^18.2.34",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.1.1",
     "tslib": "^2.6.2",
     "tsx": "^3.12.10",
     "typescript": "^5.2.2"