Merge pull request #70 from satyam-seth/unit-test-input-element-compo…

…nent Unit test input element component
satyam-seth · Dec 10, 2023 · a7936f2 · a7936f2
2 parents fe29d91 + 623c160
commit a7936f2
Show file tree

Hide file tree

Showing 5 changed files with 645 additions and 17 deletions.
diff --git a/dist/js/bundle.js b/dist/js/bundle.js
diff --git a/dist/js/maps/bundle.js.map b/dist/js/maps/bundle.js.map
diff --git a/src/ts/components/forms/inputs.ts b/src/ts/components/forms/inputs.ts
@@ -23,7 +23,7 @@ export default class InputElement {
    * input element skeleton
    *
    */
-  private get skeleton(): HTMLInputElement {
+  get skeleton(): HTMLInputElement {
     const input = document.createElement('input');
     input.id = this.id;
     input.className = 'input-element';
@@ -119,6 +119,15 @@ export default class InputElement {
     this.querySelector.selectionEnd = position;
   }
 
+  /**
+   *
+   * Focus input element
+   *
+   */
+  focus() {
+    this.querySelector.focus();
+  }
+
   /**
    *
    * To check whether the input element is focused or not
@@ -148,15 +157,6 @@ export default class InputElement {
     this.querySelector.value = value;
   }
 
-  /**
-   *
-   * Focus input element
-   *
-   */
-  focus() {
-    this.querySelector.focus();
-  }
-
   /**
    *
    * Insert a value at the caret position
@@ -256,15 +256,16 @@ export default class InputElement {
    */
   validation() {
     // prepare updated state
+    const { value } = this;
     const caretPositionBeforeRemoveUnwantedChars = this.selectionStartPosition;
-    const updatedValueAfterRemoveUnwantedChars = this.value.replace(
+    const updatedValueAfterRemoveUnwantedChars = value.replace(
       /[^0-9+*#]/g,
       ''
     );
     const updatedCaretPosition =
       caretPositionBeforeRemoveUnwantedChars +
       updatedValueAfterRemoveUnwantedChars.length -
-      this.value.length;
+      value.length;
 
     // update state
     this.value = updatedValueAfterRemoveUnwantedChars;
@@ -276,7 +277,7 @@ export default class InputElement {
    * `input` event handler
    *
    */
-  private inputEventHandler() {
+  inputEventHandler() {
     // Remove unwanted symbols and allow only digits, +, *, and #
     this.validation();
 

diff --git a/tests/components/buttons.ts b/tests/components/buttons.ts
@@ -324,7 +324,7 @@ describe('Test Dialpad Button', () => {
     const button = new DialpadButton(validConfig);
 
     // Create spy for skeleton getter
-    const skeletonGetterSpy = sinon.spy(button, 'skeleton', ['get']);
+    const skeletonSpy = sinon.spy(button, 'skeleton', ['get']);
 
     // Create spy for appendChild method
     const appendChildSpy = sinon.spy(document.body, 'appendChild');
@@ -333,7 +333,7 @@ describe('Test Dialpad Button', () => {
     button.build(document.body);
 
     // Assert that the skeleton getter was accessed
-    expect(skeletonGetterSpy.get.calledOnce).to.be.true;
+    expect(skeletonSpy.get.calledOnce).to.be.true;
 
     // Assert that the parentElement appendChild was called once with the correct argument
     expect(appendChildSpy.calledOnceWith(sinon.match.instanceOf(HTMLElement)))