fix: mask money problem with last digit #2

rodrigofs · Jan 7, 2024 · b64c2d7 · b64c2d7
1 parent 1d3f533
commit b64c2d7
Show file tree

Hide file tree

Showing 14 changed files with 1,096 additions and 42 deletions.
diff --git a/.idea/filament-maskinput.iml b/.idea/filament-maskinput.iml
diff --git a/README.md b/README.md
@@ -51,12 +51,10 @@ php artisan vendor:publish --tag="config"
 - **money**
     - **Description**: Configures the input field for monetary values.
     - **Parameters**:
-        - `$precision` (int|null): Decimal precision.
-        - `$separator` (string|null): Decimal separator.
-        - `$delimiter` (string|null): Thousands delimiter.
-        - `$unit` (string|null): Currency unit prefix.
-        - `$suffixUnit` (string|null): Currency unit suffix.
-        - `$zeroCents` (bool|null): Enables or disables zero cents.
+        - `$decimalPrecision` (int|null): Decimal precision.
+        - `$decimalSeparator` (string|null): Decimal separator.
+        - `$thousandsSeparator` (string|null): Thousands delimiter.
+        - `$allowNegative` (bool|null): Allow negative.
 
 - **mask**
     - **Description**: Sets the mask pattern for the input.
@@ -74,6 +72,12 @@ php artisan vendor:publish --tag="config"
 ```php
 MaskInput::make('money')
 ->money();
+
+MaskInput::make('money')
+->money(decimalPrecision: 3, allowNegative: true);
+
+output: 1.234,56
+
 ```
 
 #### Dynamic Input
@@ -82,13 +86,33 @@ MaskInput::make('dynamic')
 ->mask(RawJs::make("['999.999.999-99', '99.999.999/9999-99']"))
 ->stripCharacters(['.','-', '/'])
 ->maxLength(14) // Acts as a trigger for mask switching
+
+output: 123.456.789-01 or 12.345.678/9012-34
 ```
 
 #### Pattern Input
 ```php
 MaskInput::make('pattern')
 ->mask('99999-999')
 ->stripCharacters(['-'])
+
+output: 12345-678
+```
+
+```php
+MaskInput::make('pattern')
+->mask('SS.SS.SSSSS.S.S.SSSSSS')
+->stripCharacters(['.'])
+
+output: 9B.GR.D08X0.4.G.117974
+```
+
+```php
+MaskInput::make('pattern')
+->mask('AAA-9999')
+->stripCharacters(['-'])
+
+output: ABC-1234
 ```
 
 ## Testing

diff --git a/config/filament-maskinput.php b/config/filament-maskinput.php
@@ -1,10 +1,8 @@
 <?php
 
 return [
-    'precision' => 2,
-    'separator' => ',',
-    'delimiter' => '.',
-    'unit' => 'R$',
-    'suffixUnit' => null,
-    'zeroCents' => false,
+    'allowNegative' => false,
+    'decimalPrecision' => 2,
+    'thousandsSeparator' => '.',
+    'decimalSeparator' => ',',
 ];
diff --git a/dist/filament-maskinput.js b/dist/filament-maskinput.js
diff --git a/jasmine.json b/jasmine.json
@@ -0,0 +1,13 @@
+{
+    "spec_dir": "resources/js/tests",
+    "spec_files": [
+        "**/*[sS]pec.?(m)js"
+    ],
+    "helpers": [
+        "resources/js/tests/helpers/**/*.?(m)js"
+    ],
+    "env": {
+        "stopSpecOnExpectationFailure": false,
+        "random": false
+    }
+}
diff --git a/package.json b/package.json
@@ -6,10 +6,13 @@
     "author": "Rodrigo Fernandes <[email protected]>",
     "license": "MIT",
     "scripts": {
-        "build:scripts": "node bin/build.js"
+        "build:scripts": "node bin/build.js",
+        "test": "jasmine --config=jasmine.json --require=resources/js/tests/helpers/domjs.js"
     },
     "devDependencies": {
         "esbuild": "^0.19.10",
-        "vanilla-masker": "^1.2.0"
-    }
+        "jasmine": "^5.1.0",
+        "jsdom": "^23.2.0"
+    },
+    "dependencies": {}
 }
diff --git a/resources/js/Component/maskinput.js b/resources/js/Component/maskinput.js
@@ -1,4 +1,6 @@
-import VMasker from 'vanilla-masker';
+
+import VMasker from '../vendor/vanilla-masker';
+
 
 export default (elementId) => {
     const inputElement = document.getElementById(elementId);

diff --git a/resources/js/tests/helpers/domjs.js b/resources/js/tests/helpers/domjs.js
@@ -0,0 +1,10 @@
+import { JSDOM } from 'jsdom'
+
+const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
+
+
+global.document = dom.window.document;
+global.window = dom.window;
+global.KeyboardEvent = window.KeyboardEvent;
+global.Event = window.Event;
+
diff --git a/resources/js/tests/money_spec.js b/resources/js/tests/money_spec.js
@@ -0,0 +1,93 @@
+import VMasker from '../vendor/vanilla-masker/index.js'
+
+describe("VanillaMasker.maskMoney", function() {
+
+  it('throws error: "VanillaMasker: There is no element to bind." when element is undefined', function() {
+    expect(function() {
+      VMasker(undefined).maskMoney();
+    }).toThrow(new Error('VanillaMasker: There is no element to bind.'));
+  });
+
+  it('throws error: "VanillaMasker: There is no element to bind." when element is null', function() {
+    expect(function() {
+      VMasker(null).maskMoney();
+    }).toThrow(new Error('VanillaMasker: There is no element to bind.'));
+  });
+
+  it('throws error: "VanillaMasker: There is no element to bind." when element is blank', function() {
+    expect(function() {
+      VMasker("").maskMoney();
+    }).toThrow(new Error('VanillaMasker: There is no element to bind.'));
+  });
+
+  it('does not throw error when element is empty array', function() {
+    expect(function() {
+      VMasker([]).maskMoney();
+    }).not.toThrow();
+  });
+
+});
+
+describe("VanillaMasker.toMoney", function() {
+
+  it('returns the default money', function() {
+    expect(VMasker.toMoney('100000000,00')).toEqual('100000000,00');
+  });
+
+  it('returns 0,00 money when number is 0', function() {
+    expect(VMasker.toMoney('0')).toEqual('0');
+  });
+
+  it('returns 0,01 money when number is 1', function() {
+    expect(VMasker.toMoney('0,01')).toEqual('0,01');
+  });
+
+  it('returns 0,10 default money number is 10', function() {
+    expect(VMasker.toMoney('0,10')).toEqual('0,10');
+  });
+
+  it('returns 1.000 money when precision is 0', function() {
+    expect(VMasker.toMoney(1000, {decimalPrecision: 0})).toEqual('1.000');
+  });
+
+  it('returns 100,000,000,00 when delimiter is ","', function() {
+    expect(VMasker.toMoney('100000000,00', {decimalSeparator: ',', thousandsSeparator: '.'})).toEqual('100000000,00');
+  });
+
+  it('returns 100.000.000.00 when separator is "."', function() {
+    expect(VMasker.toMoney( '100000000.00', {decimalSeparator: '.', thousandsSeparator:','})).toEqual('100000000.00');
+  });
+
+  it('returns 100.000.000 is true', function() {
+    expect(VMasker.toMoney(100000000)).toEqual('100.000.000');
+  });
+
+  it('returns -3,75 when showSignal is true and given a float value', function() {
+    expect(VMasker.toMoney(-375, {allowNegative: true})).toEqual('-375');
+  });
+
+  it('returns 3,75 when showSignal is false and given a float value', function() {
+    expect(VMasker.toMoney(-375, {allowNegative: false})).toEqual('375');
+  });
+
+  it('returns -3,75 when allowNegative is true and given a string value', function() {
+    expect(VMasker.toMoney('-3,75', {allowNegative: true})).toEqual('-3,75');
+  });
+
+  it('returns 12,000 when value is 12,000 and precision is 3', function() {
+    expect(VMasker.toMoney('12,000', {decimalPrecision: 3})).toEqual('12,000');
+  });
+
+  it('returns 123,0000 when value is 123,0000 and precision is 4', function() {
+    expect(VMasker.toMoney('123,0000', {decimalPrecision: 4})).toEqual('123,0000');
+  });
+
+  it('returns 123,00000 when value is 123,00000 and precision is 5', function() {
+    expect(VMasker.toMoney('123,00000', {decimalPrecision: 5})).toEqual('123,00000');
+  });
+
+  it('parses proper precision location from strings', function() {
+    expect(VMasker.toMoney('1,20', {decimalPrecision: 2})).toEqual('1,20');
+  });
+
+});
diff --git a/resources/js/tests/number_spec.js b/resources/js/tests/number_spec.js
@@ -0,0 +1,49 @@
+import VMasker from '../vendor/vanilla-masker/index.js'
+
+describe("VanillaMasker.maskNumber", function() {
+
+  it('throws error: "VanillaMasker: There is no element to bind." when element is undefined', function() {
+    expect(function() {
+      VMasker(undefined).maskNumber();
+    }).toThrow(new Error('VanillaMasker: There is no element to bind.'));
+  });
+
+  it('throws error: "VanillaMasker: There is no element to bind." when element is null', function() {
+    expect(function() {
+      VMasker(null).maskNumber();
+    }).toThrow(new Error('VanillaMasker: There is no element to bind.'));
+  });
+
+  it('throws error: "VanillaMasker: There is no element to bind." when element is blank', function() {
+    expect(function() {
+      VMasker("").maskNumber();
+    }).toThrow(new Error('VanillaMasker: There is no element to bind.'));
+  });
+
+  it('does not throw error when element is empty array', function() {
+    expect(function() {
+      VMasker([]).maskNumber();
+    }).not.toThrow();
+  });
+
+});
+
+describe("VanillaMasker.toNumber", function() {
+
+  it('returns 1000 number when input is 1000', function() {
+    expect(VMasker.toNumber(1000)).toEqual('1000');
+  });
+
+  it('returns 100000 number when input is 1a0b0c000', function() {
+    expect(VMasker.toNumber('1a0b0c000')).toEqual('100000');
+  });
+
+  it('returns 10 number when input is 1-0', function() {
+    expect(VMasker.toNumber('1-0')).toEqual('10');
+  });
+
+  it('returns -10 number when input is -10', function() {
+    expect(VMasker.toNumber('-10')).toEqual('-10');
+  });
+
+});