From c365682e3c032ee3969edcd5b4af627108786fc0 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 24 Aug 2023 15:05:31 +0200
Subject: [PATCH] refs #5673 fix: crudModel and finish e2e

---
 src/components/CrudModel.vue                  |  5 ++-
 src/components/FormModel.vue                  |  8 +++--
 src/components/common/VnSelectFilter.vue      | 15 ++++++--
 src/components/ui/VnPaginate.vue              |  1 +
 src/composables/useValidator.js               | 21 +++++------
 src/pages/Claim/Card/ClaimLines.vue           |  2 +-
 .../integration/claimDevelopment.spec.js      | 14 --------
 .../components/common/CrudModel.spec.js       | 35 ++++++++++---------
 .../__tests__/pages/Claims/ClaimLines.spec.js |  3 ++
 9 files changed, 53 insertions(+), 51 deletions(-)

diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index 13e8ca3e3..17b21b0e6 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -98,8 +98,7 @@ async function fetch(data) {
 }
 
 function reset() {
-    state.set($props.model, originalData.value);
-    watch(formData.value, () => (hasChanges.value = true));
+    fetch(originalData.value);
     hasChanges.value = false;
 }
 // eslint-disable-next-line vue/no-dupe-keys
@@ -317,7 +316,7 @@ function isEmpty(obj) {
     </Teleport>
     <QInnerLoading
         :showing="isLoading"
-        :label="t('globals.pleaseWait')"
+        :label="t && t('globals.pleaseWait')"
         color="primary"
     />
 </template>
diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 28a3759b8..540c37d01 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -89,7 +89,11 @@ async function save() {
 
 function reset() {
     state.set($props.model, originalData.value);
+    originalData.value = JSON.parse(JSON.stringify(originalData.value));
+
     watch(formData.value, () => (hasChanges.value = true));
+
+    emit('onFetch', state.get($props.model));
     hasChanges.value = false;
 }
 // eslint-disable-next-line vue/no-dupe-keys
@@ -123,7 +127,7 @@ watch(formUrl, async () => {
     </QForm>
     <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
         <div v-if="$props.defaultActions">
-            <QBtnGoup push class="q-gutter-x-sm">
+            <QBtnGroup push class="q-gutter-x-sm">
                 <slot name="moreActions" />
                 <QBtn
                     :label="tMobile('globals.reset')"
@@ -142,7 +146,7 @@ watch(formUrl, async () => {
                     :disable="!hasChanges"
                     :title="t('globals.save')"
                 />
-            </QBtnGoup>
+            </QBtnGroup>
         </div>
     </Teleport>
     <SkeletonForm v-if="!formData" />
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 2fc8ce4ad..95150cadc 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, toRefs, computed } from 'vue';
+import { ref, toRefs, watch } from 'vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 
 const $props = defineProps({
@@ -16,10 +16,15 @@ const $props = defineProps({
         default: '',
     },
 });
-const myOptions = computed(() => $props.options);
 const updateValue = (newValue) => emit('update:modelValue', newValue);
 const { modelValue, optionLabel, options } = toRefs($props);
-const myOptionsOriginal = ref(JSON.parse(JSON.stringify(options.value)));
+const myOptions = ref([]);
+const myOptionsOriginal = ref([]);
+function setOptions(data) {
+    myOptions.value = JSON.parse(JSON.stringify(data));
+    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+}
+setOptions(options.value);
 
 const filter = (val, options) => {
     const search = val.toLowerCase();
@@ -41,6 +46,10 @@ const filterHandler = (val, update) => {
         myOptions.value = filter(val, myOptionsOriginal.value);
     });
 };
+
+watch(options, (newValue) => {
+    setOptions(newValue);
+});
 </script>
 
 <template>
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index d84e8f1af..ebc7d5973 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -53,6 +53,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['onFetch', 'onPaginate']);
+defineExpose({ fetch });
 const isLoading = ref(false);
 const pagination = ref({
     sortBy: props.order,
diff --git a/src/composables/useValidator.js b/src/composables/useValidator.js
index ef2dcbd90..bc48332a2 100644
--- a/src/composables/useValidator.js
+++ b/src/composables/useValidator.js
@@ -3,15 +3,13 @@ import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import validator from 'validator';
 
-
 const models = ref(null);
 
 export function useValidator() {
     if (!models.value) fetch();
 
     function fetch() {
-        axios.get('Schemas/ModelInfo')
-            .then(response => models.value = response.data)
+        axios.get('Schemas/ModelInfo').then((response) => (models.value = response.data));
     }
 
     function validate(propertyRule) {
@@ -38,19 +36,18 @@ export function useValidator() {
 
     const { t } = useI18n();
     const validations = function (validation) {
-
         return {
             presence: (value) => {
                 let message = `Value can't be empty`;
                 if (validation.message)
-                    message = t(validation.message) || validation.message
+                    message = t(validation.message) || validation.message;
 
-                return !validator.isEmpty(value ? String(value) : '') || message
+                return !validator.isEmpty(value ? String(value) : '') || message;
             },
             length: (value) => {
                 const options = {
                     min: validation.min || validation.is,
-                    max: validation.max || validation.is
+                    max: validation.max || validation.is,
                 };
 
                 value = String(value);
@@ -69,14 +66,14 @@ export function useValidator() {
             },
             numericality: (value) => {
                 if (validation.int)
-                    return validator.isInt(value) || 'Value should be integer'
-                return validator.isNumeric(value) || 'Value should be a number'
+                    return validator.isInt(value) || 'Value should be integer';
+                return validator.isNumeric(value) || 'Value should be a number';
             },
-            custom: (value) => validation.bindedFunction(value) || 'Invalid value'
+            custom: (value) => validation.bindedFunction(value) || 'Invalid value',
         };
     };
 
     return {
-        validate
+        validate,
     };
-}
\ No newline at end of file
+}
diff --git a/src/pages/Claim/Card/ClaimLines.vue b/src/pages/Claim/Card/ClaimLines.vue
index ecd56df49..f2814458b 100644
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@@ -8,7 +8,6 @@ import { useArrayData } from 'composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 import CrudModel from 'components/CrudModel.vue';
 import FetchData from 'components/FetchData.vue';
-import VnConfirm from 'components/ui/VnConfirm.vue';
 
 import { toDate, toCurrency, toPercentage } from 'filters/index';
 import VnDiscount from 'components/common/vnDiscount.vue';
@@ -17,6 +16,7 @@ import ClaimLinesImport from './ClaimLinesImport.vue';
 const quasar = useQuasar();
 const route = useRoute();
 const { t } = useI18n();
+console.log(t);
 const stateStore = useStateStore();
 const arrayData = useArrayData('ClaimLines');
 const store = arrayData.store;
diff --git a/test/cypress/integration/claimDevelopment.spec.js b/test/cypress/integration/claimDevelopment.spec.js
index 8a882d0e6..77ce2bb45 100755
--- a/test/cypress/integration/claimDevelopment.spec.js
+++ b/test/cypress/integration/claimDevelopment.spec.js
@@ -50,18 +50,4 @@ describe('ClaimDevelopment', () => {
         cy.reload();
         cy.get(thirdRow).should('not.exist');
     });
-
-    // it('should remove third and fourth file', () => {
-    //     cy.get(
-    //         '.multimediaParent > :nth-child(3) > .q-btn > .q-btn__content > .q-icon'
-    //     ).click();
-    //     cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
-    //     cy.get('.q-notification__message').should('have.text', 'Data deleted');
-
-    //     cy.get(
-    //         '.multimediaParent > :nth-child(3) > .q-btn > .q-btn__content > .q-icon'
-    //     ).click();
-    //     cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
-    //     cy.get('.q-notification__message').should('have.text', 'Data deleted');
-    // });
 });
diff --git a/test/vitest/__tests__/components/common/CrudModel.spec.js b/test/vitest/__tests__/components/common/CrudModel.spec.js
index 518c3ad60..9c000e48d 100644
--- a/test/vitest/__tests__/components/common/CrudModel.spec.js
+++ b/test/vitest/__tests__/components/common/CrudModel.spec.js
@@ -1,15 +1,23 @@
 import { createWrapper, axios } from 'app/test/vitest/helper';
 import CrudModel from 'components/CrudModel.vue';
 import { vi, afterEach, beforeAll, beforeEach, describe, expect, it } from 'vitest';
+import { onMounted, ref } from 'vue';
 
 describe.only('CrudModel', () => {
     let vm;
     beforeAll(() => {
         vm = createWrapper(CrudModel, {
             global: {
-                stubs: ['vnPaginate', 'useState', 'arrayData', 'useStateStore'],
+                stubs: [
+                    'vnPaginate',
+                    'useState',
+                    'arrayData',
+                    'useStateStore',
+                    'useValidator',
+                ],
                 mocks: {
                     fetch: vi.fn(),
+                    validate: vi.fn(),
                 },
             },
             propsData: {
@@ -19,7 +27,6 @@ describe.only('CrudModel', () => {
                     autoLoad: true,
                 },
                 dataKey: 'crudModelKey',
-                model: 'crudModel',
                 url: 'crudModelUrl',
             },
             attrs: {
@@ -37,20 +44,16 @@ describe.only('CrudModel', () => {
 
     describe('insert()', () => {
         it('should new element in list with index 0 if formData not has data', () => {
-            vi.mock('src/composables/useValidator', () => ({
-                default: () => {},
-                fetch: () => {
-                    vi.fn();
-                },
-            }));
-            vi.spyOn(axios, 'get').mockResolvedValue({
-                data: [
-                    { id: 1, name: 'Tony Stark' },
-                    { id: 2, name: 'Jessica Jones' },
-                    { id: 3, name: 'Bruce Wayne' },
-                ],
-            });
-            vm.state.set('crudModel', []);
+            // vi.spyOn(axios, 'get').mockResolvedValue({
+            //     data: [
+            //         { id: 1, name: 'Tony Stark' },
+            //         { id: 2, name: 'Jessica Jones' },
+            //         { id: 3, name: 'Bruce Wayne' },
+            //     ],
+            // });
+            // vm.state.set('crudModel', []);
+            vm.formData = ref([]);
+
             vm.insert();
 
             expect(vm.formData.length).toEqual(1);
diff --git a/test/vitest/__tests__/pages/Claims/ClaimLines.spec.js b/test/vitest/__tests__/pages/Claims/ClaimLines.spec.js
index 6dd6b89e6..e846eebf0 100644
--- a/test/vitest/__tests__/pages/Claims/ClaimLines.spec.js
+++ b/test/vitest/__tests__/pages/Claims/ClaimLines.spec.js
@@ -14,6 +14,9 @@ describe('ClaimLines', () => {
                 },
             },
         }).vm;
+        vi.mock('src/composables/useValidator', () => ({
+            fetch: () => vi.fn(),
+        }));
     });
 
     beforeEach(() => {