test(claim_photo): fix front and e2e

src/pages/Claim/Card/ClaimCard.vue

@@ -11,6 +11,20 @@ const state = useState();
             <claim-descriptor />
             <q-separator />
             <left-menu source="card" />
+            <q-separator />
+            <q-list>
+                <q-item
+                    active-class="text-primary"
+                    href="http://localhost:5000/#!/claim/1/detail"
+                    clickable
+                    v-ripple
+                >
+                    <q-item-section avatar>
+                        <q-icon name="disabled_by_default" />
+                    </q-item-section>
+                    <q-item-section> Detalles </q-item-section>
+                </q-item>
+            </q-list>
         </q-scroll-area>
     </q-drawer>
     <q-page-container>
@@ -18,4 +32,4 @@ const state = useState();
             <router-view></router-view>
         </q-page>
     </q-page-container>
-</template>
+</template>

src/pages/Claim/Card/ClaimPhoto.vue

@@ -25,6 +25,10 @@ const claimDms = ref([
     },
 ]);
 const client = ref({});
+
+const inputFile = ref();
+const files = ref({});
+
 const claimDmsRef = ref();
 const dmsType = ref({});
 const config = ref({});
@@ -96,20 +100,11 @@ function setClaimDms(data) {
     client.value = data.client;
 }
 
-async function uploadFile() {
-    const element = document.createElement('input');
-    element.setAttribute('type', 'file');
-    element.setAttribute('multiple', true);
-    element.click();
-
-    element.addEventListener('change', () => {
-        create(element.files).then(() => claimDmsRef.value.fetch());
-    });
-}
-
-async function create(files) {
+async function create() {
     const formData = new FormData();
-    for (let i = 0; i < files.length; i++) formData.append(files[i].name, files[i]);
+    const inputFiles = files.value;
+    for (let i = 0; i < inputFiles.length; i++)
+        formData.append(inputFiles[i].name, inputFiles[i]);
 
     const query = `claims/${claimId.value}/uploadFile`;
 
@@ -127,10 +122,7 @@ async function create(files) {
         }).toUpperCase(),
     };
 
-    await axios({
-        method: 'POST',
-        url: query,
-        data: formData,
+    await axios.post(query, formData, {
         params: dms,
     });
 
@@ -139,11 +131,14 @@ async function create(files) {
         type: 'positive',
         icon: 'check',
     });
+    console.log(claimDmsRef);
+    claimDmsRef.value.fetch();
 }
 
 function onDrop($data) {
     dragFile.value = false;
-    create($data.dataTransfer.files).then(() => claimDmsRef.value.fetch());
+    files.value = $data.dataTransfer.files;
+    create();
 }
 
 function onDrag() {
@@ -190,7 +185,7 @@ function onDrag() {
         <div
             class="text-center text-grey q-mt-md cursor-pointer"
             v-if="!claimDms?.length && !dragFile"
-            @click="uploadFile()"
+            @click="inputFile.nativeEl.click()"
         >
             <q-icon size="xl" name="image"></q-icon>
             <q-icon size="xl" name="movie"></q-icon>
@@ -245,16 +240,36 @@ function onDrag() {
 
     <teleport-slot v-if="!quasar.platform.is.mobile" to="#header-actions">
         <div class="row q-gutter-x-sm">
-            <q-btn @click="uploadFile()" icon="add" color="primary" dense rounded>
-                <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
-            </q-btn>
+            <label for="fileInput">
+                <q-btn
+                    @click="inputFile.nativeEl.click()"
+                    icon="add"
+                    color="primary"
+                    dense
+                    rounded
+                >
+                    <q-input
+                        ref="inputFile"
+                        type="file"
+                        style="display: none"
+                        multiple
+                        v-model="files"
+                        @update:model-value="create()"
+                    />
+                    <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
+                </q-btn>
+            </label>
             <q-separator vertical />
         </div>
     </teleport-slot>
 
     <teleport-slot to=".q-footer">
         <q-tabs align="justify" inline-label narrow-indicator>
-            <q-tab @click="uploadFile()" icon="add_circle" :label="t('globals.add')" />
+            <q-tab
+                @click="inputFile.nativeEl.click()"
+                icon="add_circle"
+                :label="t('globals.add')"
+            />
         </q-tabs>
     </teleport-slot>
 

test/cypress/integration/claimPhoto.spec.js

@@ -3,13 +3,14 @@ describe('ClaimPhoto', () => {
     beforeEach(() => {
         const claimId = 1;
         cy.viewport(1280, 720);
-        cy.login('developer');
-        cy.visit(`/#/claim/${claimId}/photos`);
+        cy.login('developer').then(() => {
+            cy.visit(`/#/claim/${claimId}/photos`);
+        });
     });
 
-    xit('should add new file', () => {
-        cy.get('.q-gutter-x-sm > .q-btn > .q-btn__content > .q-icon').click();
-        cy.get('.container').selectFile('test/cypress/fixtures/image.jpg', {
+    it('should add new file', () => {
+        cy.get('label > .q-btn').click();
+        cy.get('label > .q-btn input').selectFile('test/cypress/fixtures/image.jpg', {
             force: true,
         });
         cy.get('.q-notification__message').should('have.text', 'Data saved');

test/vitest/__tests__/pages/Claims/ClaimPhoto.spec.js

@@ -1,9 +1,6 @@
 import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
-import { ref } from 'vue';
-import { mount } from '@vue/test-utils';
 import { createWrapper, axios } from 'app/test/vitest/helper';
 import ClaimPhoto from 'pages/Claim/Card/ClaimPhoto.vue';
-import * as FormData from 'form-data';
 
 describe('ClaimPhoto', () => {
     let vm;
@@ -27,6 +24,7 @@ describe('ClaimPhoto', () => {
                 stubs: ['FetchData', 'TeleportSlot'],
                 mocks: {
                     claimDms: [{ dmsFk: 1 }],
+                    claimDmsRef: { hola: 'hola' },
                 },
             },
         }).vm;
@@ -43,6 +41,9 @@ describe('ClaimPhoto', () => {
 
             await vm.deleteDms(0);
 
+            expect(axios.post).toHaveBeenCalledWith(
+                `ClaimDms/${claimMock.claimDms[0].dmsFk}/removeFile`
+            );
             expect(vm.quasar.notify).toHaveBeenCalledWith(
                 expect.objectContaining({ type: 'positive' })
             );
@@ -86,15 +87,17 @@ describe('ClaimPhoto', () => {
         });
     });
 
-    describe.skip('create()', () => {
+    describe('create()', () => {
         it('should upload file and call quasar notify', async () => {
             const files = [{ name: 'firstFile' }];
+
+            vi.mock('claimDmsRef', {});
             vi.spyOn(axios, 'post').mockResolvedValue({ data: true });
             vi.spyOn(vm.quasar, 'notify');
 
             await vm.create(files);
 
-            expect(axios).toHaveBeenCalledWith(
+            expect(axios.post).toHaveBeenCalledWith(
                 expect.objectContaining({ type: 'positive' })
             );
             expect(vm.quasar.notify).toHaveBeenCalledWith(

test/vitest/helper.js

@@ -30,36 +30,36 @@ vi.mock('vue-router', () => ({
     }),
 }));
 
-// class FormDataMock {
-//     append() {
-//         vi.fn();
-//     }
-//     delete() {
-//         vi.fn();
-//     }
-//     get() {
-//         vi.fn();
-//     }
-//     getAll() {
-//         vi.fn();
-//     }
-//     has() {
-//         vi.fn();
-//     }
-//     set() {
-//         vi.fn();
-//     }
-//     forEach() {
-//         vi.fn();
-//     }
-// }
+class FormDataMock {
+    append() {
+        vi.fn();
+    }
+    delete() {
+        vi.fn();
+    }
+    get() {
+        vi.fn();
+    }
+    getAll() {
+        vi.fn();
+    }
+    has() {
+        vi.fn();
+    }
+    set() {
+        vi.fn();
+    }
+    forEach() {
+        vi.fn();
+    }
+}
+global.FormData = FormDataMock;
 
 export function createWrapper(component, options) {
     const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false });
 
     const defaultOptions = {
         global: {
-            // FormData: FormDataMock,
             plugins: [i18n, pinia],
         },
     };