Feature/no ref/add new test code (#14)

* feat: add jest test package

* fix: fixbug sample code

* feat: prepare jest config

* chore: excule test file in tsconfig

* feat: update interface beforeInputHandler

* feat: update interface pasteHandler

* feat: add handler and test code

* feat: update main code support handler method

* feat: add test appMaskedInput dom simulation

* chore: update path version

Author: krozamdev

jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "node",
+  testMatch: ["**/*.test.ts"],
+  transform: {
+    "^.+\\.ts$": [
+      "ts-jest",
+      {
+        tsconfig: "tsconfig.test.json"
+      },
+    ],
+  },
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krozamdev/masked-password",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A lightweight and modern utility to mask input fields with password-like characters. This library is specifically designed to prevent password managers from automatically saving values, making it ideal for sensitive data handling. It also provides a method to retrieve the original value of the input. Fully compatible with JavaScript and TypeScript.",
   "keywords": [
     "input masking",
@@ -46,13 +46,20 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@types/jest": "^29.5.14",
     "@types/node": "^22.10.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "rollup": "^4.27.4",
     "rollup-plugin-terser": "^7.0.2",
     "terser": "^5.36.0",
+    "ts-jest": "^29.2.5",
     "typescript": "^5.7.2"
   },
   "scripts": {
-    "build": "tsc && rollup -c"
+    "build": "tsc && rollup -c",
+    "test": "jest"
   }
 }

samples/index.html

@@ -21,10 +21,10 @@ <h3>Original Value1 : </h3>
     <span id="original_value1"></span>
     <script>
       let show = false;
+      const inputElement = document.getElementById("passwordInput");
       const maskedInput = MaskedPassword.applyMaskedInput(inputElement, {
         character: "•",
       });
-      const inputElement = document.getElementById("passwordInput");
       const btnToggle = document.getElementById("btn_toggle");
       btnToggle.style.textDecoration = "line-through";
       document.getElementById("btn").addEventListener("click", function () {

src/applyMaskedInput.test.ts

@@ -0,0 +1,158 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { applyMaskedInput } from './index';
+import { fireEvent } from '@testing-library/dom';
+
+describe("index as applyMaskedInput", () => {
+
+    let inputElement: HTMLInputElement;
+
+    beforeEach(() => {
+        document.body.innerHTML = '<input type="text" id="test-input" />';
+        inputElement = document.getElementById("test-input") as HTMLInputElement;
+    });
+
+    it("should mask input value", () => {
+        const maskedInput = applyMaskedInput(inputElement, {character : "*"});
+
+        // simulate user typing hello
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "h" }));
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "e" }));
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "l" }));
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "l" }));
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "o" }));
+
+        expect(inputElement.value).toBe("*****");
+        expect(maskedInput.getOriginalValue()).toBe("hello");
+        expect(inputElement.selectionStart).toBe(5);
+    });
+    
+    it("should mask input value with the specified character", () => {
+        const maskedInput = applyMaskedInput(inputElement, {character : "*"});
+
+        // simulate user typing
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "h" }));
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "e" }));
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "l" }));
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "l" }));
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "o" }));
+        
+        // simulate user typing caret position 5
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "1" }));
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "2" }));
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "3" }));
+
+        expect(inputElement.value).toBe("********");
+        expect(maskedInput.getOriginalValue()).toBe("hello123");
+        expect(inputElement.selectionStart).toBe(8);
+    });
+    
+    it("should mask input value with selected character", () => {
+        const maskedInput = applyMaskedInput(inputElement, {character : "*"});
+
+        // simulate user typing
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "hello world" }));
+        
+        // simulate user typing caret position 5 and selected 5 chars
+        inputElement.setSelectionRange(5,11);
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "1" }));
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "2" }));
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "3" }));
+
+        expect(inputElement.value).toBe("********");
+        expect(maskedInput.getOriginalValue()).toBe("hello123");
+        expect(inputElement.selectionStart).toBe(8);
+    });
+    
+    it("should mask input value with delete character : backspace", () => {
+        const maskedInput = applyMaskedInput(inputElement, {character : "*"});
+
+        // simulate user typing
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "hello world" }));
+        
+        // simulate user typing caret position 10
+        inputElement.setSelectionRange(10,10);
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "deleteContentBackward" }));
+
+        expect(inputElement.value).toBe("**********");
+        expect(maskedInput.getOriginalValue()).toBe("hello word");
+        expect(inputElement.selectionStart).toBe(9);
+    });
+    
+    it("should mask input value with delete selected character : backspace", () => {
+        const maskedInput = applyMaskedInput(inputElement, {character : "*"});
+
+        // simulate user typing
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "hello world" }));
+        
+        // simulate user typing caret position 5
+        inputElement.setSelectionRange(5,10);
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "deleteContentBackward" }));
+
+        expect(inputElement.value).toBe("******");
+        expect(maskedInput.getOriginalValue()).toBe("hellod");
+        expect(inputElement.selectionStart).toBe(5);
+    });
+    
+    it("should mask input value with delete character : delete", () => {
+        const maskedInput = applyMaskedInput(inputElement, {character : "*"});
+
+        // simulate user typing
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "hello world" }));
+        
+        // simulate user typing caret position 10
+        inputElement.setSelectionRange(10,10);
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "deleteContentForward" }));
+
+        expect(inputElement.value).toBe("**********");
+        expect(maskedInput.getOriginalValue()).toBe("hello worl");
+        expect(inputElement.selectionStart).toBe(10);
+    });
+    
+    it("should mask input value with delete selected character : delete", () => {
+        const maskedInput = applyMaskedInput(inputElement, {character : "*"});
+
+        // simulate user typing
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "hello world" }));
+        
+        // simulate user typing caret position 5
+        inputElement.setSelectionRange(5,10);
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "deleteContentForward" }));
+
+        expect(inputElement.value).toBe("******");
+        expect(maskedInput.getOriginalValue()).toBe("hellod");
+        expect(inputElement.selectionStart).toBe(5);
+    });
+    
+    it("should mask input value with paste", () => {
+        const maskedInput = applyMaskedInput(inputElement, {character : "*"});
+
+        // create paste event with clipboard data
+        fireEvent.paste(inputElement, {
+            clipboardData: { getData: () => "test123" }
+        });
+
+        expect(inputElement.value).toBe("*******");
+        expect(maskedInput.getOriginalValue()).toBe("test123");
+        expect(inputElement.selectionStart).toBe(7);
+    });
+    
+    it("should mask input value with paste block character", () => {
+        const maskedInput = applyMaskedInput(inputElement, {character : "*"});
+
+        inputElement.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: "hello world" }));
+        inputElement.setSelectionRange(5,10);
+
+        // create paste event with clipboard data
+        fireEvent.paste(inputElement, {
+            clipboardData: { getData: () => "test123" }
+        });
+
+        expect(inputElement.value).toBe("*************");
+        expect(maskedInput.getOriginalValue()).toBe("hellotest123d");
+        expect(inputElement.selectionStart).toBe(12);
+    });
+
+});

src/handlers/beforeInputHandler.test.ts

@@ -0,0 +1,81 @@
+import { beforeInputHandler } from "./beforeInputHandler";
+
+
+describe("beforeInputHandler", () => {
+
+    it("should insert a character at the correct position", () => {
+        const result = beforeInputHandler({
+            inputType : "insertText",
+            originalValue : "abc",
+            caretPosition : 1,
+            addedChar : "x"
+        });
+        expect(result.newOriginalValue).toBe("axbc");
+        expect(result.newCaretPosition).toBe(2);
+    });
+
+    it("should handle backspace correctly", () => {
+        const result = beforeInputHandler({
+            inputType : "deleteContentBackward",
+            originalValue : "abc",
+            caretPosition : 2
+        });
+        expect(result.newOriginalValue).toBe("ac");
+        expect(result.newCaretPosition).toBe(1);
+    });
+    
+    it("should handle backspace with selection correctly", () => {
+        const result = beforeInputHandler({
+            inputType : "deleteContentBackward",
+            originalValue : "abcdefghij",
+            caretPosition : 2,
+            selectionLength : 4
+        });
+        expect(result.newOriginalValue).toBe("abghij");
+        expect(result.newCaretPosition).toBe(2);
+    });
+
+    it("should handle forward delete correctly", () => {
+        const result = beforeInputHandler({
+            inputType : "deleteContentForward",
+            originalValue : "abc",
+            caretPosition : 1
+        });
+        expect(result.newOriginalValue).toBe("ac");
+        expect(result.newCaretPosition).toBe(1);
+    });
+    
+    it("should handle forward delete with selection first caret position correctly", () => {
+        const result = beforeInputHandler({
+            inputType : "deleteContentForward",
+            originalValue : "abcdefghijkl",
+            caretPosition : 0,
+            selectionLength : 5
+        });
+        expect(result.newOriginalValue).toBe("fghijkl");
+        expect(result.newCaretPosition).toBe(0);
+    });
+    
+    it("should handle forward delete with selection middle caret position correctly", () => {
+        const result = beforeInputHandler({
+            inputType : "deleteContentForward",
+            originalValue : "abcdefghijkl",
+            caretPosition : 4,
+            selectionLength : 5
+        });
+        expect(result.newOriginalValue).toBe("abcdjkl");
+        expect(result.newCaretPosition).toBe(4);
+    });
+
+    it("should handle selection replacement", () => {
+        const result = beforeInputHandler({
+            inputType : "insertText",
+            originalValue : "abcdef",
+            caretPosition : 2,
+            selectionLength : 3,
+            addedChar : "x"
+        });
+        expect(result.newOriginalValue).toBe("abxf");
+        expect(result.newCaretPosition).toBe(3);
+    });
+});

src/handlers/beforeInputHandler.ts

@@ -0,0 +1,73 @@
+import { beforeInputHandlerConfig, beforeInputHandlerInterface } from "../interfaces/main";
+
+export const beforeInputHandler = (
+    {
+        originalValue,
+        inputType,
+        caretPosition,
+        selectionLength = 0,
+        addedChar = ""
+    }: beforeInputHandlerConfig
+) : beforeInputHandlerInterface => {
+    
+    let newOriginalValue = originalValue;
+
+    if (inputType === "insertText") {
+        // handle insertion of new character
+        if (selectionLength > 0) {
+            // replace selected text
+            newOriginalValue =
+                originalValue.slice(0, caretPosition) +
+                addedChar +
+                originalValue.slice(caretPosition + selectionLength);
+        } else {
+            // insert new character at caret position
+            newOriginalValue =
+                originalValue.slice(0, caretPosition) +
+                addedChar +
+                originalValue.slice(caretPosition);
+        }
+    } else if (inputType === "deleteContentBackward") {
+        // handle deletion backward (Backspace)
+        if (selectionLength > 0) {
+            // remove selected text
+            newOriginalValue =
+                originalValue.slice(0, caretPosition) +
+                originalValue.slice(caretPosition + selectionLength);
+        } else if (caretPosition > 0) {
+            // delete character before caret
+            newOriginalValue =
+                originalValue.slice(0, caretPosition - 1) +
+                originalValue.slice(caretPosition);
+        }
+    } else if (inputType === "deleteContentForward") {
+        // handle deletion forward (Delete)
+        if (selectionLength > 0) {
+            // remove selected text
+            newOriginalValue =
+                originalValue.slice(0, caretPosition) +
+                originalValue.slice(caretPosition + selectionLength);
+        } else if (caretPosition < originalValue.length) {
+            // delete character after caret
+            newOriginalValue =
+                originalValue.slice(0, caretPosition) +
+                originalValue.slice(caretPosition + 1);
+        }
+    }
+
+    // adjust caret position
+    let newCaretPosition = caretPosition;
+
+    if (inputType === "insertText") {
+        newCaretPosition = caretPosition + 1;
+    } else if (inputType === "deleteContentBackward") {
+        newCaretPosition = selectionLength > 0 ? caretPosition : caretPosition - 1;
+    } else if (inputType === "deleteContentForward") {
+        newCaretPosition = caretPosition;
+    }
+
+    // ensure the caret stays within valid bounds
+    newCaretPosition = Math.max(0, Math.min(newCaretPosition, newOriginalValue.length));
+
+    return { newOriginalValue, newCaretPosition };
+};

src/handlers/pasteHandler.test.ts

@@ -0,0 +1,26 @@
+import { pasteHandler } from './pasteHandler';
+
+describe("pasteHandler", () => {
+
+    it("should paste a character at the correct position", () => {
+        const result = pasteHandler({
+            originalValue : "abcdfghij",
+            caretPosition : 2,
+            pastedText : "123"
+        });
+        expect(result.newOriginalValue).toBe("ab123cdfghij");
+        expect(result.newCaretPosition).toBe(5);
+    });
+    
+    it("should paste a character at the correct position with selection", () => {
+        const result = pasteHandler({
+            originalValue : "abcdfghij",
+            caretPosition : 2,
+            pastedText : "123",
+            selectionLength : 4
+        });
+        expect(result.newOriginalValue).toBe("ab123hij");
+        expect(result.newCaretPosition).toBe(5);
+    });
+
+});