From ec40ef9351f879be6447805c70a048418ddd9d69 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 21 Nov 2024 10:49:19 -0300
Subject: [PATCH] feat: refs #8163 add VnInput insert functionality and e2e
 test

---
 src/components/common/VnInput.vue             | 33 ++++++++++++++++++-
 .../Supplier/Card/SupplierFiscalData.vue      |  1 +
 .../integration/vnComponent/vnInput.spec.js   | 25 ++++++++++++++
 test/cypress/support/commands.js              |  4 +++
 4 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 test/cypress/integration/vnComponent/vnInput.spec.js

diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 7979b6d6e..69291c311 100644
--- a/src/components/common/VnInput.vue
+++ b/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"
diff --git a/src/pages/Supplier/Card/SupplierFiscalData.vue b/src/pages/Supplier/Card/SupplierFiscalData.vue
index 547842960..7d07b900f 100644
--- a/src/pages/Supplier/Card/SupplierFiscalData.vue
+++ b/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')"
diff --git a/test/cypress/integration/vnComponent/vnInput.spec.js b/test/cypress/integration/vnComponent/vnInput.spec.js
new file mode 100644
index 000000000..2928d4a05
--- /dev/null
+++ b/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');
+    });
+});
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index afe3561a0..b8c1d3988 100755
--- a/test/cypress/support/commands.js
+++ b/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}"]`);
+});