fix(kit): Number should trim redundant thousand separators (#267)

taiga-family · Apr 25, 2023 · 100b793 · 100b793
1 parent 3d3747f
commit 100b793
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 8 deletions.
diff --git a/projects/demo-integrations/cypress/tests/kit/number/number-prefix-postfix.cy.ts b/projects/demo-integrations/cypress/tests/kit/number/number-prefix-postfix.cy.ts
@@ -46,18 +46,16 @@ describe('Number | Prefix & Postfix', () => {
                 .should('have.prop', 'selectionEnd', '$100'.length);
         });
 
-        // TODO: BUG!
-        // https://github.com/Tinkoff/maskito/issues/263
-        it.skip('$|1_234 per day => Del => $|234 per day', () => {
+        it('$|1_234 per day => Del => $|234 per day', () => {
             cy.get('@input')
                 .type('1234')
                 .should('have.value', '$1_234 per day')
                 .should('have.prop', 'selectionStart', '$1_234'.length)
                 .should('have.prop', 'selectionEnd', '$1_234'.length)
                 .type('{moveToStart}{rightArrow}{del}')
                 .should('have.value', '$234 per day')
-                .should('have.prop', 'selectionStart', '$234'.length)
-                .should('have.prop', 'selectionEnd', '$234'.length);
+                .should('have.prop', 'selectionStart', 1)
+                .should('have.prop', 'selectionEnd', 1);
         });
 
         it('$1_2|34 per day => Del => $|234 per day', () => {

diff --git a/projects/demo-integrations/cypress/tests/kit/number/number-thousand-separator.cy.ts b/projects/demo-integrations/cypress/tests/kit/number/number-thousand-separator.cy.ts
@@ -122,6 +122,19 @@ describe('Number | thousandSeparator', () => {
                 .should('have.prop', 'selectionStart', '100'.length)
                 .should('have.prop', 'selectionEnd', '100'.length);
         });
+
+        it('1|-234-567 => Backspace => 234-567', () => {
+            cy.get('@input')
+                .type('1234567')
+                .type('{moveToStart}{rightArrow}')
+                .should('have.value', '1-234-567')
+                .should('have.prop', 'selectionStart', 1)
+                .should('have.prop', 'selectionEnd', 1)
+                .type('{backspace}')
+                .should('have.value', '234-567')
+                .should('have.prop', 'selectionStart', 0)
+                .should('have.prop', 'selectionEnd', 0);
+        });
     });
 
     it('allows to set empty string as thousand separator', () => {

diff --git a/projects/demo-integrations/cypress/tests/kit/number/number-zero-integer-part.cy.ts b/projects/demo-integrations/cypress/tests/kit/number/number-zero-integer-part.cy.ts
@@ -57,7 +57,7 @@ describe('Number | Zero integer part', () => {
         });
     });
 
-    describe('value cannot start with many digits', () => {
+    describe('value cannot start with many leading zeroes', () => {
         it('precision = 2 & positive number', () => {
             openNumberPage('precision=2');
 
@@ -87,6 +87,21 @@ describe('Number | Zero integer part', () => {
                 .should('have.prop', 'selectionStart', '0'.length)
                 .should('have.prop', 'selectionEnd', '0'.length);
         });
+
+        // TODO: BUG!
+        // https://github.com/Tinkoff/maskito/issues/266
+        it.skip('1|-000-000 => Backspace => 0', () => {
+            openNumberPage('thousandSeparator=_&precision=2');
+
+            cy.get('@input')
+                .type('1000000')
+                .should('have.value', '1_000_000')
+                .type('{moveToStart}{rightArrow}')
+                .type('{backspace}')
+                .should('have.value', '0')
+                .should('have.prop', 'selectionStart', 0)
+                .should('have.prop', 'selectionEnd', 0);
+        });
     });
 
     it('remove leading zeroes when decimal separator is removed (positive number)', () => {

diff --git a/projects/kit/src/lib/masks/number/processors/thousand-separator-postprocessor.ts b/projects/kit/src/lib/masks/number/processors/thousand-separator-postprocessor.ts
@@ -37,7 +37,9 @@ export function createThousandSeparatorPostprocessor({
         const [integerPartPostfix = ''] = integerPart.match(postfixReg) || [];
         const processedIntegerPart = Array.from(cleanIntegerPart).reduceRight(
             (formattedValuePart, char, i) => {
+                const isLeadingThousandSeparator = !i && char === thousandSeparator;
                 const isPositionForSeparator =
+                    !isLeadingThousandSeparator &&
                     formattedValuePart.length &&
                     (formattedValuePart.length + 1) % 4 === 0;
 
@@ -46,11 +48,11 @@ export function createThousandSeparatorPostprocessor({
                 }
 
                 if (char === thousandSeparator && !isPositionForSeparator) {
-                    if (i <= initialFrom) {
+                    if (i && i <= initialFrom) {
                         from--;
                     }
 
-                    if (i <= initialTo) {
+                    if (i && i <= initialTo) {
                         to--;
                     }