wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

feat: refs #8163 add max length and more tests

This commit is contained in:
William Buezas 2024-11-22 10:55:11 -03:00
parent aae475bf4c
commit be1cd824d8
2 changed files with 44 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/common/VnInput.vue
View File

@ -38,6 +38,10 @@ const $props = defineProps({
type: Boolean,
default: false,
},
maxlength: {
type: Number,
default: null,
},
});
const vnInputRef = ref(null);
@ -90,6 +94,8 @@ const handleKeydown = (e) => {
if (e.key === 'Backspace') return;
if ($props.insertable && e.key.match(/[0-9]/)) {
handleInsertMode(e);
} else {
e.preventDefault();
}
};
@ -100,17 +106,25 @@ const handleInsertMode = (e) => {
let currentValue = value.value;
if (!currentValue) currentValue = e.key;
const newValue = Number(e.key);
if (newValue && !isNaN(newValue)) {
value.value =
currentValue.substring(0, cursorPos) +
newValue +
currentValue.substring(cursorPos + 1);
const newValue = e.key;
nextTick(() => {
input.setSelectionRange(cursorPos + 1, cursorPos + 1);
});
if (
!newValue ||
($props.maxlength &&
currentValue.length >= $props.maxlength &&
cursorPos == $props.maxlength)
) {
return;
}
value.value =
currentValue.substring(0, cursorPos) +
newValue +
currentValue.substring(cursorPos + 1);
nextTick(() => {
input.setSelectionRange(cursorPos + 1, cursorPos + 1);
});
};
</script>

21
test/cypress/integration/vnComponent/vnInput.spec.js
View File

@ -18,4 +18,25 @@ describe('VnInput Component', () => {
.find('input')
.should('have.value', '9990000001');
});
it('should replace character at cursor position in insert mode', () => {
// Simula escribir en el input
cy.dataCy('supplierFiscalDataAccount').find('input').clear();
cy.dataCy('supplierFiscalDataAccount').find('input').type('4100000001');
// Coloca el cursor en la posición 0
cy.dataCy('supplierFiscalDataAccount').find('input').type('{movetostart}');
// Escribe un número y verifica que se reemplace correctamente en la posicion incial
cy.dataCy('supplierFiscalDataAccount').find('input').type('999');
cy.dataCy('supplierFiscalDataAccount')
.find('input')
.should('have.value', '9990000001');
});
it('should respect maxlength prop', () => {
cy.dataCy('supplierFiscalDataAccount').find('input').clear();
cy.dataCy('supplierFiscalDataAccount').find('input').type('123456789012345');
cy.dataCy('supplierFiscalDataAccount')
.find('input')
.should('have.value', '1234567890'); // asumiendo que maxlength es 10
});
});