Skip to content

Commit

Permalink
fix(kit): Number pads integer part with zero if user selects all an…
Browse files Browse the repository at this point in the history 
…d then types decimal separator (#1220)
  • Loading branch information
@nsbarsukov
nsbarsukov authored May 13, 2024
1 parent 2d2508c commit 8371e45
Show file tree
Hide file tree
Showing 3 changed files with 157 additions and 76 deletions.
58 changes: 30 additions & 28 deletions projects/demo-integrations/src/tests/kit/number/number-minus-sign.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,7 @@ import {

import {openNumberPage} from './utils';

describe('Properly using custom minus sign', () => {
const minuses: Array<{value: string; name: string}> = [
{
value: CHAR_HYPHEN,
name: 'hyphen',
},
{
value: CHAR_EN_DASH,
name: 'en-dash',
},
{
value: CHAR_EM_DASH,
name: 'em-dash',
},
];

const numbers = ['321', '2_432'];

describe('Number | minus sign', () => {
const pseudoMinuses: Array<{value: string; name: string}> = [
{value: CHAR_HYPHEN, name: 'hyphen'},
{value: CHAR_EN_DASH, name: 'en-dash'},
Expand All @@ -34,16 +17,35 @@ describe('Properly using custom minus sign', () => {
{value: CHAR_MINUS, name: 'unicode minus sign'},
];

minuses.forEach(minus => {
pseudoMinuses.forEach(pseudoMinus => {
numbers.forEach(number => {
it(`transforms ${pseudoMinus.name} into ${minus.name}`, () => {
openNumberPage(
`precision=Infinity&thousandSeparator=_&minusSign=${encodeURIComponent(minus.value)}`,
);
cy.get('@input')
.type(`${pseudoMinus.value}${number}`)
.should('have.value', `${minus.value}${number}`);
describe('can use hyphen, all kind of dashes and minus interchangeably', () => {
const minuses: Array<{value: string; name: string}> = [
{
value: CHAR_HYPHEN,
name: 'hyphen',
},
{
value: CHAR_EN_DASH,
name: 'en-dash',
},
{
value: CHAR_EM_DASH,
name: 'em-dash',
},
];

const numbers = ['321', '2_432'];

minuses.forEach(minus => {
pseudoMinuses.forEach(pseudoMinus => {
numbers.forEach(number => {
it(`transforms ${pseudoMinus.name} into ${minus.name}`, () => {
openNumberPage(
`precision=Infinity&thousandSeparator=_&minusSign=${encodeURIComponent(minus.value)}`,
);
cy.get('@input')
.type(`${pseudoMinus.value}${number}`)
.should('have.value', `${minus.value}${number}`);
});
});
});
});
Expand Down
162 changes: 119 additions & 43 deletions projects/demo-integrations/src/tests/kit/number/number-zero-integer-part.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,56 +2,132 @@ import {openNumberPage} from './utils';

describe('Number | Zero integer part', () => {
describe('User types decimal separator when input is empty (decimalSeparator="," && precision=2)', () => {
beforeEach(() => {
openNumberPage('thousandSeparator=_&decimalSeparator=,&precision=2');
});
describe('without prefix / postfix', () => {
beforeEach(() => {
openNumberPage('thousandSeparator=_&decimalSeparator=,&precision=2');
});

it('Empty input => Type "," (decimal separator) => value is equal "0,"', () => {
cy.get('@input')
.type(',')
.should('have.value', '0,')
.should('have.prop', 'selectionStart', '0,'.length)
.should('have.prop', 'selectionEnd', '0,'.length);
});
it('Empty input => Type "," (decimal separator) => value is equal "0,"', () => {
cy.get('@input')
.type(',')
.should('have.value', '0,')
.should('have.prop', 'selectionStart', '0,'.length)
.should('have.prop', 'selectionEnd', '0,'.length);
});

it('Input has only minus sign => Type "," (decimal separator) => value is equal "-0,|"', () => {
cy.get('@input')
.type('-,')
.should('have.value', '−0,')
.should('have.prop', 'selectionStart', '−0,'.length)
.should('have.prop', 'selectionEnd', '−0,'.length);
});
it('Input has only minus sign => Type "," (decimal separator) => value is equal "-0,|"', () => {
cy.get('@input')
.type('-,')
.should('have.value', '−0,')
.should('have.prop', 'selectionStart', '−0,'.length)
.should('have.prop', 'selectionEnd', '−0,'.length);
});

it('Empty input => Type "." (pseudo decimal separator) => value is equal "0,"', () => {
cy.get('@input')
.type('.')
.should('have.value', '0,')
.should('have.prop', 'selectionStart', '0,'.length)
.should('have.prop', 'selectionEnd', '0,'.length);
});
it('Empty input => Type "." (pseudo decimal separator) => value is equal "0,"', () => {
cy.get('@input')
.type('.')
.should('have.value', '0,')
.should('have.prop', 'selectionStart', '0,'.length)
.should('have.prop', 'selectionEnd', '0,'.length);
});

it('Input has only minus sign => Type "." (pseudo decimal separator) => value is equal "-0,|"', () => {
cy.get('@input')
.type('-.')
.should('have.value', '−0,')
.should('have.prop', 'selectionStart', '−0,'.length)
.should('have.prop', 'selectionEnd', '−0,'.length);
});
it('Input has only minus sign => Type "." (pseudo decimal separator) => value is equal "-0,|"', () => {
cy.get('@input')
.type('-.')
.should('have.value', '−0,')
.should('have.prop', 'selectionStart', '−0,'.length)
.should('have.prop', 'selectionEnd', '−0,'.length);
});

it('Empty input => Type "ю" (pseudo decimal separator) => value is equal "0,"', () => {
cy.get('@input')
.type('ю')
.should('have.value', '0,')
.should('have.prop', 'selectionStart', '0,'.length)
.should('have.prop', 'selectionEnd', '0,'.length);
it('Empty input => Type "ю" (pseudo decimal separator) => value is equal "0,"', () => {
cy.get('@input')
.type('ю')
.should('have.value', '0,')
.should('have.prop', 'selectionStart', '0,'.length)
.should('have.prop', 'selectionEnd', '0,'.length);
});

it('Empty input => Type "ю" (pseudo decimal separator) => value is equal "-0,"', () => {
cy.get('@input')
.type('-ю')
.should('have.value', '−0,')
.should('have.prop', 'selectionStart', '−0,'.length)
.should('have.prop', 'selectionEnd', '−0,'.length);
});

it('Textfield with any value => Select all => Type decimal separator => value is equal "0,"', () => {
cy.get('@input')
.type(',')
.should('have.value', '0,')
.type('{selectall}')
.type(',')
.should('have.value', '0,')
.should('have.prop', 'selectionStart', '0,'.length)
.should('have.prop', 'selectionEnd', '0,'.length);
});

it('Textfield with any value => Select all => Type "." (pseudo decimal separator) => value is equal "0,"', () => {
cy.get('@input')
.type('1,23')
.should('have.value', '1,23')
.type('{selectall}')
.type('.')
.should('have.value', '0,')
.should('have.prop', 'selectionStart', '0,'.length)
.should('have.prop', 'selectionEnd', '0,'.length);
});
});

it('Empty input => Type "ю" (pseudo decimal separator) => value is equal "-0,"', () => {
cy.get('@input')
.type('-ю')
.should('have.value', '−0,')
.should('have.prop', 'selectionStart', '−0,'.length)
.should('have.prop', 'selectionEnd', '−0,'.length);
describe('With prefix ($) & postfix (%)', () => {
beforeEach(() => {
openNumberPage(
'thousandSeparator=_&decimalSeparator=,&precision=2&prefix=$&postfix=kg',
);

cy.get('@input')
.focused()
.should('have.value', '$kg')
.should('have.prop', 'selectionStart', 1)
.should('have.prop', 'selectionEnd', 1);
});

it('Empty value (only prefix & postfix) => Type "," (decimal separator) => value is equal "0,"', () => {
cy.get('@input')
.type(',')
.should('have.value', '$0,kg')
.should('have.prop', 'selectionStart', '$0,'.length)
.should('have.prop', 'selectionEnd', '$0,'.length);
});

it('Empty value (only prefix & postfix) => Type "." (pseudo decimal separator) => value is equal "0,"', () => {
cy.get('@input')
.type('.')
.should('have.value', '$0,kg')
.should('have.prop', 'selectionStart', '$0,'.length)
.should('have.prop', 'selectionEnd', '$0,'.length);
});

it('Textfield with any value => Select all => Type decimal separator => value is equal "$0,kg"', () => {
cy.get('@input')
.type('1,23')
.should('have.value', '$1,23kg')
.type('{selectall}')
.type(',')
.should('have.value', '$0,kg')
.should('have.prop', 'selectionStart', '$0,'.length)
.should('have.prop', 'selectionEnd', '$0,'.length);
});

it('Textfield with any value => Select all => Type pseudo decimal separator => value is equal "$0,kg"', () => {
cy.get('@input')
.type('1,23')
.should('have.value', '$1,23kg')
.type('{selectall}')
.type('.')
.should('have.value', '$0,kg')
.should('have.prop', 'selectionStart', '$0,'.length)
.should('have.prop', 'selectionEnd', '$0,'.length);
});
});
});

Expand Down
13 changes: 8 additions & 5 deletions projects/kit/src/lib/masks/number/processors/not-empty-integer-part-preprocessor.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type {MaskitoPreprocessor} from '@maskito/core';

import {escapeRegExp, extractAffixes} from '../../../utils';
import {clamp, escapeRegExp, extractAffixes} from '../../../utils';

/**
* It pads integer part with zero if user types decimal separator (for empty input).
Expand All @@ -23,21 +23,24 @@ export function createNotEmptyIntegerPartPreprocessor({

return ({elementState, data}) => {
const {value, selection} = elementState;
const {cleanValue} = extractAffixes(value, {
const {cleanValue, extractedPrefix} = extractAffixes(value, {
prefix,
postfix,
});
const [from] = selection;
const [from, to] = selection;
const cleanFrom = clamp(from - extractedPrefix.length, 0, cleanValue.length);
const cleanTo = clamp(to - extractedPrefix.length, 0, cleanValue.length);

if (
precision <= 0 ||
cleanValue.includes(decimalSeparator) ||
cleanValue.slice(0, cleanFrom).includes(decimalSeparator) ||
cleanValue.slice(cleanTo).includes(decimalSeparator) ||
!data.match(startWithDecimalSepRegExp)
) {
return {elementState, data};
}

const digitsBeforeCursor = cleanValue.slice(0, from).match(/\d+/);
const digitsBeforeCursor = cleanValue.slice(0, cleanFrom).match(/\d+/);

return {
elementState,
Expand Down

0 comments on commit 8371e45

Please sign in to comment.