feat(kit): unskipped tests and fixed issues

taiga-family · Jan 17, 2024 · 545c5c9 · 545c5c9
1 parent 60bb758
commit 545c5c9
Show file tree

Hide file tree

Showing 18 changed files with 290 additions and 107 deletions.
diff --git a/...o-integrations/src/tests/component-testing/number-postfix/number-postfix-with-point.cy.ts b/...o-integrations/src/tests/component-testing/number-postfix/number-postfix-with-point.cy.ts
@@ -35,8 +35,7 @@ describe('Number | postfix with point', () => {
                     .should('have.prop', 'selectionEnd', 2);
             });
 
-            // TODO https://github.com/taiga-family/maskito/issues/703
-            it.skip('Empty => Type 0.42 => 0.42 lbs.', () => {
+            it('Empty => Type 0.42 => 0.42 lbs.', () => {
                 cy.mount(TestInput, {componentProperties: {maskitoOptions}});
                 cy.get('input')
                     .type('0')
@@ -52,8 +51,7 @@ describe('Number | postfix with point', () => {
             });
         });
 
-        // TODO https://github.com/taiga-family/maskito/issues/703
-        describe.skip('Complex: maskitoCaretGuard + maskitoAddOnFocusPlugin + maskitoRemoveOnBlurPlugin', () => {
+        describe('Complex: maskitoCaretGuard + maskitoAddOnFocusPlugin + maskitoRemoveOnBlurPlugin', () => {
             const postfix = ' lbs.';
             const numberOptions = maskitoNumberOptionsGenerator({
                 postfix,

diff --git a/projects/kit/src/lib/masks/number/number-mask.ts b/projects/kit/src/lib/masks/number/number-mask.ts
@@ -29,6 +29,7 @@ import {
     createThousandSeparatorPostprocessor,
     createZeroPrecisionPreprocessor,
 } from './processors';
+import {createAffixesFilterPreprocessor} from './processors/affixes-filter-preprocessor';
 import {generateMaskExpression, validateDecimalPseudoSeparators} from './utils';
 
 export function maskitoNumberOptionsGenerator({
@@ -79,7 +80,10 @@ export function maskitoNumberOptionsGenerator({
                 decimalSeparator,
                 decimalPseudoSeparators: validatedDecimalPseudoSeparators,
                 pseudoMinuses,
+                prefix,
+                postfix,
             }),
+            createAffixesFilterPreprocessor({prefix, postfix}),
             createFullWidthToHalfWidthPreprocessor(),
             createPseudoCharactersPreprocessor({
                 validCharacter: CHAR_MINUS,
@@ -99,15 +103,20 @@ export function maskitoNumberOptionsGenerator({
                 decimalZeroPadding,
                 thousandSeparator,
             }),
-            createZeroPrecisionPreprocessor(precision, decimalSeparator),
+            createZeroPrecisionPreprocessor({
+                precision,
+                decimalSeparator,
+                prefix,
+                postfix,
+            }),
             createRepeatedDecimalSeparatorPreprocessor({
                 decimalSeparator,
                 prefix,
                 postfix,
             }),
         ],
         postprocessors: [
-            createMinMaxPostprocessor({decimalSeparator, min, max, prefix, postfix}),
+            createMinMaxPostprocessor({decimalSeparator, min, max}),
             maskitoPrefixPostprocessorGenerator(prefix),
             maskitoPostfixPostprocessorGenerator(postfix),
             createThousandSeparatorPostprocessor({
@@ -136,7 +145,7 @@ export function maskitoNumberOptionsGenerator({
                 prefix,
                 postfix,
             }),
-            createMinMaxPlugin({min, max, decimalSeparator, prefix, postfix}),
+            createMinMaxPlugin({min, max, decimalSeparator}),
         ],
         overwriteMode: decimalZeroPadding
             ? ({value, selection: [from]}) =>

diff --git a/projects/kit/src/lib/masks/number/plugins/leading-zeroes-validation.plugin.ts b/projects/kit/src/lib/masks/number/plugins/leading-zeroes-validation.plugin.ts
@@ -2,7 +2,7 @@ import {MaskitoPlugin, maskitoUpdateElement} from '@maskito/core';
 
 import {maskitoEventHandler} from '../../../plugins';
 import {createLeadingZeroesValidationPostprocessor} from '../processors';
-import {extractPrefixAndPostfix} from '../utils/extract-prefix-and-postfix';
+import {extractAffixes} from '../utils/extract-affixes';
 
 const DUMMY_SELECTION = [0, 0] as const;
 
@@ -22,20 +22,20 @@ export function createLeadingZeroesValidationPlugin({
     prefix: string;
     postfix: string;
 }): MaskitoPlugin {
-    const dropRepeatedLeadingZeroes = createLeadingZeroesValidationPostprocessor(
+    const dropRepeatedLeadingZeroes = createLeadingZeroesValidationPostprocessor({
         decimalSeparator,
         thousandSeparator,
-    );
+        prefix,
+        postfix,
+    });
 
     return maskitoEventHandler(
         'blur',
         element => {
-            const {cleanValue, extractedPostfix, extractedPrefix} =
-                extractPrefixAndPostfix({
-                    value: element.value,
-                    prefix,
-                    postfix,
-                });
+            const {cleanValue, extractedPostfix, extractedPrefix} = extractAffixes(
+                element.value,
+                {prefix, postfix},
+            );
 
             const newValue =
                 extractedPrefix +

diff --git a/projects/kit/src/lib/masks/number/plugins/min-max.plugin.ts b/projects/kit/src/lib/masks/number/plugins/min-max.plugin.ts
@@ -12,24 +12,15 @@ export function createMinMaxPlugin({
     min,
     max,
     decimalSeparator,
-    prefix,
-    postfix,
 }: {
     min: number;
     max: number;
     decimalSeparator: string;
-    prefix: string;
-    postfix: string;
 }): MaskitoPlugin {
     return maskitoEventHandler(
         'blur',
         (element, options) => {
-            const parsedNumber = maskitoParseNumber(
-                element.value,
-                decimalSeparator,
-                prefix,
-                postfix,
-            );
+            const parsedNumber = maskitoParseNumber(element.value, decimalSeparator);
             const clampedNumber = clamp(parsedNumber, min, max);
 
             if (!Number.isNaN(parsedNumber) && parsedNumber !== clampedNumber) {

diff --git a/projects/kit/src/lib/masks/number/plugins/not-empty-integer.plugin.ts b/projects/kit/src/lib/masks/number/plugins/not-empty-integer.plugin.ts
@@ -2,7 +2,7 @@ import {MaskitoPlugin, maskitoUpdateElement} from '@maskito/core';
 
 import {maskitoEventHandler} from '../../../plugins';
 import {escapeRegExp} from '../../../utils';
-import {extractPrefixAndPostfix} from '../utils/extract-prefix-and-postfix';
+import {extractAffixes} from '../utils/extract-affixes';
 
 /**
  * It pads EMPTY integer part with zero if decimal parts exists.
@@ -21,12 +21,10 @@ export function createNotEmptyIntegerPlugin({
     return maskitoEventHandler(
         'blur',
         element => {
-            const {cleanValue, extractedPostfix, extractedPrefix} =
-                extractPrefixAndPostfix({
-                    value: element.value,
-                    prefix,
-                    postfix,
-                });
+            const {cleanValue, extractedPostfix, extractedPrefix} = extractAffixes(
+                element.value,
+                {prefix, postfix},
+            );
             const newValue =
                 extractedPrefix +
                 cleanValue.replace(

diff --git a/projects/kit/src/lib/masks/number/processors/affixes-filter-preprocessor.ts b/projects/kit/src/lib/masks/number/processors/affixes-filter-preprocessor.ts
@@ -0,0 +1,28 @@
+import {MaskitoPreprocessor} from '@maskito/core';
+
+import {extractAffixes} from '../utils/extract-affixes';
+
+/**
+ * It drops prefix and postfix from data
+ * Needed for case, when prefix or postfix contain decimalSeparator, to ignore it in resulting number
+ * @example User pastes '{prefix}123.45{postfix}' => 123.45
+ */
+export function createAffixesFilterPreprocessor({
+    prefix,
+    postfix,
+}: {
+    prefix: string;
+    postfix: string;
+}): MaskitoPreprocessor {
+    return ({elementState, data}) => {
+        const {cleanValue: cleanData} = extractAffixes(data, {
+            prefix,
+            postfix,
+        });
+
+        return {
+            elementState,
+            data: cleanData,
+        };
+    };
+}
diff --git a/projects/kit/src/lib/masks/number/processors/decimal-zero-padding-postprocessor.ts b/projects/kit/src/lib/masks/number/processors/decimal-zero-padding-postprocessor.ts
@@ -2,7 +2,7 @@ import {MaskitoPostprocessor} from '@maskito/core';
 
 import {identity} from '../../../utils';
 import {maskitoParseNumber} from '../utils';
-import {extractPrefixAndPostfix} from '../utils/extract-prefix-and-postfix';
+import {extractAffixes} from '../utils/extract-affixes';
 
 /**
  * If `decimalZeroPadding` is `true`, it pads decimal part with zeroes
@@ -27,17 +27,12 @@ export function createDecimalZeroPaddingPostprocessor({
     }
 
     return ({value, selection}) => {
-        const {cleanValue, extractedPrefix, extractedPostfix} = extractPrefixAndPostfix({
-            value,
+        const {cleanValue, extractedPrefix, extractedPostfix} = extractAffixes(value, {
             prefix,
             postfix,
         });
 
-        if (
-            Number.isNaN(
-                maskitoParseNumber(cleanValue, decimalSeparator, prefix, postfix),
-            )
-        ) {
+        if (Number.isNaN(maskitoParseNumber(cleanValue, decimalSeparator))) {
             return {value, selection};
         }
 

diff --git a/projects/kit/src/lib/masks/number/processors/initialization-only-preprocessor.ts b/projects/kit/src/lib/masks/number/processors/initialization-only-preprocessor.ts
@@ -1,6 +1,7 @@
 import {MaskitoPreprocessor, maskitoTransform} from '@maskito/core';
 
 import {generateMaskExpression} from '../utils';
+import {extractAffixes} from '../utils/extract-affixes';
 
 /**
  * This preprocessor works only once at initialization phase (when `new Maskito(...)` is executed).
@@ -16,10 +17,14 @@ export function createInitializationOnlyPreprocessor({
     decimalSeparator,
     decimalPseudoSeparators,
     pseudoMinuses,
+    prefix,
+    postfix,
 }: {
     decimalSeparator: string;
     decimalPseudoSeparators: readonly string[];
     pseudoMinuses: readonly string[];
+    prefix: string;
+    postfix: string;
 }): MaskitoPreprocessor {
     let isInitializationPhase = true;
     const cleanNumberMask = generateMaskExpression({
@@ -40,10 +45,18 @@ export function createInitializationOnlyPreprocessor({
 
         isInitializationPhase = false;
 
+        const {cleanValue} = extractAffixes(elementState.value, {prefix, postfix});
+
         return {
-            elementState: maskitoTransform(elementState, {
-                mask: cleanNumberMask,
-            }),
+            elementState: maskitoTransform(
+                {
+                    ...elementState,
+                    value: cleanValue,
+                },
+                {
+                    mask: cleanNumberMask,
+                },
+            ),
             data,
         };
     };

diff --git a/projects/kit/src/lib/masks/number/processors/leading-zeroes-validation-postprocessor.ts b/projects/kit/src/lib/masks/number/processors/leading-zeroes-validation-postprocessor.ts
@@ -1,6 +1,7 @@
 import {MaskitoPostprocessor} from '@maskito/core';
 
 import {escapeRegExp} from '../../../utils';
+import {extractAffixes} from '../utils/extract-affixes';
 
 /**
  * It removes repeated leading zeroes for integer part.
@@ -9,10 +10,17 @@ import {escapeRegExp} from '../../../utils';
  * @example User types "000000" => 0|
  * @example 0| => User types "5" => 5|
  */
-export function createLeadingZeroesValidationPostprocessor(
-    decimalSeparator: string,
-    thousandSeparator: string,
-): MaskitoPostprocessor {
+export function createLeadingZeroesValidationPostprocessor({
+    decimalSeparator,
+    thousandSeparator,
+    prefix,
+    postfix,
+}: {
+    decimalSeparator: string;
+    thousandSeparator: string;
+    prefix: string;
+    postfix: string;
+}): MaskitoPostprocessor {
     const trimLeadingZeroes = (value: string): string => {
         const escapedThousandSeparator = escapeRegExp(thousandSeparator);
 
@@ -42,8 +50,13 @@ export function createLeadingZeroesValidationPostprocessor(
 
     return ({value, selection}) => {
         const [from, to] = selection;
-        const hasDecimalSeparator = value.includes(decimalSeparator);
-        const [integerPart, decimalPart = ''] = value.split(decimalSeparator);
+        const {cleanValue, extractedPrefix, extractedPostfix} = extractAffixes(value, {
+            prefix,
+            postfix,
+        });
+
+        const hasDecimalSeparator = cleanValue.includes(decimalSeparator);
+        const [integerPart, decimalPart = ''] = cleanValue.split(decimalSeparator);
         const zeroTrimmedIntegerPart = trimLeadingZeroes(integerPart);
 
         if (integerPart === zeroTrimmedIntegerPart) {
@@ -55,9 +68,11 @@ export function createLeadingZeroesValidationPostprocessor(
 
         return {
             value:
+                extractedPrefix +
                 zeroTrimmedIntegerPart +
                 (hasDecimalSeparator ? decimalSeparator : '') +
-                decimalPart,
+                decimalPart +
+                extractedPostfix,
             selection: [Math.max(newFrom, 0), Math.max(newTo, 0)],
         };
     };

diff --git a/projects/kit/src/lib/masks/number/processors/min-max-postprocessor.ts b/projects/kit/src/lib/masks/number/processors/min-max-postprocessor.ts
@@ -11,17 +11,13 @@ export function createMinMaxPostprocessor({
     min,
     max,
     decimalSeparator,
-    prefix,
-    postfix,
 }: {
     min: number;
     max: number;
     decimalSeparator: string;
-    prefix: string;
-    postfix: string;
 }): MaskitoPostprocessor {
     return ({value, selection}) => {
-        const parsedNumber = maskitoParseNumber(value, decimalSeparator, prefix, postfix);
+        const parsedNumber = maskitoParseNumber(value, decimalSeparator);
         const limitedValue =
             /**
              * We cannot limit lower bound if user enters positive number.

diff --git a/projects/kit/src/lib/masks/number/processors/pseudo-character-preprocessor.ts b/projects/kit/src/lib/masks/number/processors/pseudo-character-preprocessor.ts
@@ -1,6 +1,6 @@
 import {MaskitoPreprocessor} from '@maskito/core';
 
-import {extractPrefixAndPostfix} from '../utils/extract-prefix-and-postfix';
+import {extractAffixes} from '../utils/extract-affixes';
 
 /**
  * It replaces pseudo characters with valid one.
@@ -23,8 +23,7 @@ export function createPseudoCharactersPreprocessor({
     return ({elementState, data}) => {
         const {value, selection} = elementState;
 
-        const {cleanValue, extractedPostfix, extractedPrefix} = extractPrefixAndPostfix({
-            value,
+        const {cleanValue, extractedPostfix, extractedPrefix} = extractAffixes(value, {
             prefix,
             postfix,
         });

diff --git a/projects/kit/src/lib/masks/number/processors/repeated-decimal-separator-preprocessor.ts b/projects/kit/src/lib/masks/number/processors/repeated-decimal-separator-preprocessor.ts
@@ -1,7 +1,7 @@
 import {MaskitoPreprocessor} from '@maskito/core';
 
 import {escapeRegExp} from '../../../utils';
-import {extractPrefixAndPostfix} from '../utils/extract-prefix-and-postfix';
+import {extractAffixes} from '../utils/extract-affixes';
 
 /**
  * It rejects new typed decimal separator if it already exists in text field.
@@ -19,9 +19,10 @@ export function createRepeatedDecimalSeparatorPreprocessor({
 }): MaskitoPreprocessor {
     return ({elementState, data}) => {
         const {value, selection} = elementState;
+
         const [from, to] = selection;
 
-        const {cleanValue} = extractPrefixAndPostfix({value, prefix, postfix});
+        const {cleanValue} = extractAffixes(value, {prefix, postfix});
 
         return {
             elementState,

diff --git a/...kit/src/lib/masks/number/processors/tests/leading-zeroes-validation-postprocessor.spec.ts b/...kit/src/lib/masks/number/processors/tests/leading-zeroes-validation-postprocessor.spec.ts
@@ -1,7 +1,12 @@
 import {createLeadingZeroesValidationPostprocessor} from '../leading-zeroes-validation-postprocessor';
 
 describe('createLeadingZeroesValidationPostprocessor', () => {
-    const processor = createLeadingZeroesValidationPostprocessor(',', '');
+    const processor = createLeadingZeroesValidationPostprocessor({
+        decimalSeparator: ',',
+        thousandSeparator: '',
+        prefix: '',
+        postfix: '',
+    });
     const DUMMY_INITIAL_STATE = {value: '', selection: [0, 0]} as const;
 
     const process = (