feat: refs #8163 add VnInput insert functionality and e2e test

src/components/common/VnInput.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, useAttrs } from 'vue';
+import { computed, ref, useAttrs, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRequired } from 'src/composables/useRequired';
 
@@ -78,6 +78,36 @@ const mixinRules = [
         }
     },
 ];
+
+const insertMode = ref(false);
+
+const handleKeydown = (e) => {
+    if (e.key === 'Insert') {
+        insertMode.value = !insertMode.value;
+    }
+    if (insertMode.value && e.key !== 'Insert') {
+        handleInsertMode(e);
+    }
+};
+
+const handleInsertMode = (e) => {
+    e.preventDefault();
+    const input = e.target;
+    const cursorPos = input.selectionStart;
+
+    const newValue = Number(e.key);
+    if (newValue && !isNaN(newValue)) {
+        const currentValue = value.value;
+        value.value =
+            currentValue.substring(0, cursorPos) +
+            newValue +
+            currentValue.substring(cursorPos + 1);
+
+        nextTick(() => {
+            input.setSelectionRange(cursorPos + 1, cursorPos + 1);
+        });
+    }
+};
 </script>
 
 <template>
@@ -89,6 +119,7 @@ const mixinRules = [
             :type="$attrs.type"
             :class="{ required: isRequired }"
             @keyup.enter="emit('keyup.enter')"
+            @keydown="handleKeydown"
             :clearable="false"
             :rules="mixinRules"
             :lazy-rules="true"

src/pages/Supplier/Card/SupplierFiscalData.vue

@@ -104,6 +104,7 @@ function handleLocation(data, location) {
                     v-model="data.account"
                     :label="t('supplier.fiscalData.account')"
                     clearable
+                    data-cy="supplierFiscalDataAccount"
                 />
                 <VnSelect
                     :label="t('supplier.fiscalData.sageTaxTypeFk')"

test/cypress/integration/vnComponent/vnInput.spec.js

@@ -0,0 +1,25 @@
+describe('VnInput Component', () => {
+    beforeEach(() => {
+        cy.login('developer');
+        cy.viewport(1920, 1080);
+    });
+
+    it('should replace character at cursor position in insert mode', () => {
+        cy.visit('/#/supplier/1/fiscal-data');
+
+        // Simula escribir en el input
+        cy.dataCy('supplierFiscalDataAccount').find('input').clear();
+        cy.dataCy('supplierFiscalDataAccount').find('input').type('0123456789');
+        // Activa el modo de inserción
+        cy.dataCy('supplierFiscalDataAccount')
+            .find('input')
+            .trigger('keydown', { key: 'Insert' });
+        // 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
+        cy.dataCy('supplierFiscalDataAccount').find('input').type('999');
+        cy.dataCy('supplierFiscalDataAccount')
+            .find('input')
+            .should('have.value', '9993456789');
+    });
+});

test/cypress/support/commands.js

@@ -310,3 +310,7 @@ Cypress.Commands.add('checkValueSelectForm', (id, search) => {
 Cypress.Commands.add('searchByLabel', (label, value) => {
     cy.get(`[label="${label}"] > .q-field > .q-field__inner`).type(`${value}{enter}`);
 });
+
+Cypress.Commands.add('dataCy', (dataTestId, attr = 'data-cy') => {
+    return cy.get(`[${attr}="${dataTestId}"]`);
+});