Skip to content

Commit

Permalink
fix(core): incorrect behavior of overwriteMode = replace if selecti…
Browse files Browse the repository at this point in the history
…on contains several characters
  • Loading branch information
nsbarsukov committed Sep 24, 2024
1 parent bcaf965 commit bf65383
Show file tree
Hide file tree
Showing 2 changed files with 156 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ export function applyOverwriteMode(
return {
value,
selection:
computedMode === 'replace' ? [from, from + newCharacters.length] : [from, to],
computedMode === 'replace'
? [from, Math.max(from + newCharacters.length, to)]
: [from, to],
};
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
import type {MaskitoOptions} from '@maskito/core';

import {BROWSER_SUPPORTS_REAL_EVENTS} from '../../../support/constants';
import {TestInput} from '../utils';

describe('overwriteMode = replace', () => {
const digitsOnlyMask: MaskitoOptions = {
mask: /^\d+$/gi,
overwriteMode: 'replace',
};

describe('selection contains several characters', () => {
beforeEach(() => {
cy.mount(TestInput, {
componentProperties: {
maskitoOptions: digitsOnlyMask,
},
});
});

it('12|34| => Press 0 => 120', BROWSER_SUPPORTS_REAL_EVENTS, () => {
cy.get('input')
.type('1234')
.should('have.value', '1234')
.realPress(['Shift', ...new Array('34'.length).fill('ArrowLeft')]);

cy.get('input').type('0').should('have.value', '120');
});

it('1|23|4 => Press 0 => 104', BROWSER_SUPPORTS_REAL_EVENTS, () => {
cy.get('input')
.type('1234')
.should('have.value', '1234')
.realPress([
'ArrowLeft',
'Shift',
...new Array('23'.length).fill('ArrowLeft'),
]);

cy.get('input').type('0').should('have.value', '104');
});

it('1234 => select all => Press 0 => 0', () => {
cy.get('input')
.type('1234')
.should('have.value', '1234')
.type('{selectall}')
.type('0')
.should('have.value', '0');
});

it('1|23|4 => Backspace => 14', BROWSER_SUPPORTS_REAL_EVENTS, () => {
cy.get('input')
.type('1234')
.should('have.value', '1234')
.realPress([
'ArrowLeft',
'Shift',
...new Array('23'.length).fill('ArrowLeft'),
]);

cy.get('input').type('{backspace}').should('have.value', '14');
});

it('1|23|4 => Delete => 14', BROWSER_SUPPORTS_REAL_EVENTS, () => {
cy.get('input')
.type('1234')
.should('have.value', '1234')
.realPress([
'ArrowLeft',
'Shift',
...new Array('23'.length).fill('ArrowLeft'),
]);

cy.get('input').type('{del}').should('have.value', '14');
});
});

describe('selectionStart === selectionEnd', () => {
beforeEach(() => {
cy.mount(TestInput, {
componentProperties: {
maskitoOptions: digitsOnlyMask,
},
});
});

it('|123 => Press 0 => 0|23', () => {
cy.get('input')
.type('123')
.should('have.value', '123')
.type('{moveToStart}')
.type('0')
.should('have.value', '023')
.should('have.a.prop', 'selectionStart', 1)
.should('have.a.prop', 'selectionEnd', 1);
});

it('1|23 => Press 0 => 10|3', () => {
cy.get('input')
.type('123')
.should('have.value', '123')
.type('{moveToStart}{rightArrow}')
.type('0')
.should('have.value', '103')
.should('have.a.prop', 'selectionStart', 2)
.should('have.a.prop', 'selectionEnd', 2);
});

it('12|3 => Press 0 => 120|', () => {
cy.get('input')
.type('123')
.should('have.value', '123')
.type('{moveToEnd}{leftArrow}')
.type('0')
.should('have.value', '120')
.should('have.a.prop', 'selectionStart', 3)
.should('have.a.prop', 'selectionEnd', 3);
});

it('123| => Press 4 => 1234|', () => {
cy.get('input')
.type('123')
.should('have.value', '123')
.type('4')
.should('have.value', '1234')
.should('have.a.prop', 'selectionStart', 4)
.should('have.a.prop', 'selectionEnd', 4);
});

it('12|3 => Press Backspace => 1|3', () => {
cy.get('input')
.type('123')
.should('have.value', '123')
.type('{moveToEnd}{leftArrow}')
.type('{backspace}')
.should('have.value', '13')
.should('have.a.prop', 'selectionStart', 1)
.should('have.a.prop', 'selectionEnd', 1);
});

it('1|23 => Press Delete => 1|3', () => {
cy.get('input')
.type('123')
.should('have.value', '123')
.type('{moveToStart}{rightArrow}')
.type('{del}')
.should('have.value', '13')
.should('have.a.prop', 'selectionStart', 1)
.should('have.a.prop', 'selectionEnd', 1);
});
});
});

0 comments on commit bf65383

Please sign in to comment.