test(claim_photo): front and e2e

cypress.config.js

@@ -2,7 +2,7 @@ const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
     e2e: {
-        baseUrl: 'http://localhost:8080/',
+        baseUrl: 'http://localhost:9000/',
         fixturesFolder: 'test/cypress/fixtures',
         screenshotsFolder: 'test/cypress/screenshots',
         supportFile: 'test/cypress/support/index.js',

src/components/common/SendEmailDialog.vue

@@ -34,19 +34,26 @@ async function confirm() {
     <q-dialog ref="dialogRef" persistent>
         <q-card class="q-pa-sm">
             <q-card-section class="row items-center q-pb-none">
-                <span class="text-h6 text-grey">{{ t('sendEmailNotification') }}</span>
+                <span class="text-h6 text-grey">{{
+                    t('Send email notification: Send email notification')
+                }}</span>
                 <q-space />
                 <q-btn icon="close" flat round dense v-close-popup />
             </q-card-section>
             <q-card-section class="row items-center">
-                {{ t('notifyAddress') }}
+                {{ t('The notification will be sent to the following address') }}
             </q-card-section>
             <q-card-section class="q-pt-none">
                 <q-input dense v-model="address" rounded outlined autofocus />
             </q-card-section>
             <q-card-actions align="right">
                 <q-btn :label="t('globals.cancel')" color="primary" flat v-close-popup />
-                <q-btn :label="t('globals.confirm')" color="primary" :loading="isLoading" @click="confirm" />
+                <q-btn
+                    :label="t('globals.confirm')"
+                    color="primary"
+                    :loading="isLoading"
+                    @click="confirm"
+                />
             </q-card-actions>
         </q-card>
     </q-dialog>
@@ -59,14 +66,7 @@ async function confirm() {
 </style>
 
 <i18n>
-{
+    es:
-    "en": {
+        Send email notification: Enviar notificación por correo,
-        "sendEmailNotification": "Send email notification",
+        The notification will be sent to the following address: La notificación se enviará a la siguiente dirección
-        "notifyAddress": "The notification will be sent to the following address"
-    },
-    "es": {
-        "sendEmailNotification": "Enviar notificación por correo",
-        "notifyAddress": "La notificación se enviará a la siguiente dirección"
-    }
-}
 </i18n>

src/pages/Claim/Card/ClaimPhoto.vue

@@ -17,11 +17,13 @@ const session = useSession();
 const token = session.getToken();
 const quasar = useQuasar();
 
-const claimId = computed(function () {
+const claimId = computed(() => router.currentRoute.value.params.id);
-    return 1;
-});
 
-const claimDms = ref([]);
+const claimDms = ref([
+    {
+        dmsFk: 1,
+    },
+]);
 const client = ref({});
 const claimDmsRef = ref();
 const dmsType = ref({});
@@ -52,13 +54,11 @@ const claimDmsFilter = ref({
 });
 
 const multimediaDialog = ref();
-const multimediaMaximizedDialog = ref();
 const multimediaSlide = ref();
 
 function openDialog(dmsId) {
     multimediaSlide.value = dmsId;
     multimediaDialog.value = true;
-    multimediaMaximizedDialog.value = false;
 }
 
 function viewDeleteDms(dmsId) {
@@ -66,7 +66,7 @@ function viewDeleteDms(dmsId) {
         .dialog({
             component: VnConfirm,
             componentProps: {
-                message: t('message'),
+                message: t('This file will be deleted'),
                 icon: 'delete',
             },
         })
@@ -75,16 +75,19 @@ function viewDeleteDms(dmsId) {
 
 async function deleteDms(index) {
     const dmsId = claimDms.value[index].dmsFk;
-    // await axios.post(`ClaimDms/${dmsId}/removeFile`);
+    await axios.post(`ClaimDms/${dmsId}/removeFile`);
+
+    claimDms.value.splice(index, 1);
     quasar.notify({
         message: t('globals.dataDeleted'),
         type: 'positive',
         icon: 'delete',
     });
-    claimDms.value.splice(index, 1);
 }
 
 function setClaimDms(data) {
+    if (!data) return;
+
     claimDms.value = data.claimDms.map((media) => {
         media.isVideo = media.dms.contentType == 'video/mp4';
         media.url = `${window.location.origin}/api/Claims/${media.dmsFk}/downloadFile?access_token=${token}`;
@@ -94,7 +97,6 @@ function setClaimDms(data) {
 }
 
 async function uploadFile() {
-    claimDmsRef.value.fetch();
     const element = document.createElement('input');
     element.setAttribute('type', 'file');
     element.setAttribute('multiple', true);
@@ -182,7 +184,7 @@ function onDrag() {
         >
             <q-icon size="xl" name="file_download" />
             <h5>
-                <!-- {{ t('claim.photo.dragDrop') }} -->
+                {{ t('claim.photo.dragDrop') }}
             </h5>
         </div>
         <div
@@ -193,7 +195,7 @@ function onDrag() {
             <q-icon size="xl" name="image"></q-icon>
             <q-icon size="xl" name="movie"></q-icon>
             <h5>
-                <!-- {{ t('claim.photo.noData') }} -->
+                {{ t('claim.photo.noData') }}
             </h5>
         </div>
         <div class="multimediaParent bg-transparent" v-if="claimDms?.length && !dragFile">
@@ -241,20 +243,20 @@ function onDrag() {
         </div>
     </div>
 
-    <!-- <teleport-slot v-if="!quasar.platform.is.mobile" to="#header-actions">
+    <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>
             <q-separator vertical />
         </div>
-    </teleport-slot> -->
+    </teleport-slot>
 
-    <!-- <teleport-slot to=".q-footer">
+    <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-tabs>
-    </teleport-slot> -->
+    </teleport-slot>
 
     <!-- MULTIMEDIA DIALOG START-->
     <q-dialog
@@ -343,11 +345,6 @@ function onDrag() {
 </style>
 
 <i18n>
-    "en": {
+    es:
-        "message": "This file will be deleted"
+        This file will be deleted: Este archivo va a ser borrado
-    }
-
-    "es": {
-        "message": "Este archivo va a ser borrado"
-    }
 </i18n>

test/cypress/integration/claimPhoto.spec.js

@@ -0,0 +1,50 @@
+/// <reference types="cypress" />
+describe('ClaimPhoto', () => {
+    beforeEach(() => {
+        const claimId = 1;
+        cy.viewport(1280, 720);
+        cy.login('developer');
+        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', {
+            force: true,
+        });
+        cy.get('.q-notification__message').should('have.text', 'Data saved');
+    });
+
+    it('should add new file with drag and drop', () => {
+        cy.get('.container').selectFile('test/cypress/fixtures/image.jpg', {
+            action: 'drag-drop',
+        });
+        cy.get('.q-notification__message').should('have.text', 'Data saved');
+    });
+
+    it('should open first image dialog change to second and close', () => {
+        cy.get(
+            ':nth-child(1) > .q-card > .q-img > .q-img__container > .q-img__image'
+        ).click();
+        cy.get('.q-carousel__slide > .q-img > .q-img__container > .q-img__image').should(
+            'be.visible'
+        );
+
+        cy.get('.q-carousel__control > .q-btn > .q-btn__content > .q-icon').click();
+
+        cy.get(
+            '.q-dialog__inner > .q-toolbar > .q-btn > .q-btn__content > .q-icon'
+        ).click();
+        cy.get('.q-carousel__slide > .q-img > .q-img__container > .q-img__image').should(
+            'not.be.visible'
+        );
+    });
+
+    it('should remove first file', () => {
+        cy.get(
+            '.multimediaParent > :nth-child(1) > .q-btn > .q-btn__content > .q-icon'
+        ).click();
+        cy.get('.q-btn--standard > .q-btn__content > .block').click();
+        cy.get('.q-notification__message').should('have.text', 'Data deleted');
+    });
+});

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

@@ -25,7 +25,9 @@ describe('ClaimDescriptorMenu', () => {
 
             await vm.deleteClaim();
 
-            expect(vm.quasar.notify).toHaveBeenCalledWith(expect.objectContaining({ type: 'positive' }));
+            expect(vm.quasar.notify).toHaveBeenCalledWith(
+                expect.objectContaining({ type: 'positive' })
+            );
         });
     });
 });

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

@@ -1,32 +1,105 @@
 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;
-    beforeAll(() => {
-        vm = createWrapper(ClaimPhoto).vm;
 
-        //setup: () => { claimDms: ref([])
+    const claimMock = {
+        claimDms: [
+            {
+                dmsFk: 1,
+                dms: {
+                    contentType: 'contentType',
+                },
+            },
+        ],
+        client: {
+            id: '1',
+        },
+    };
+    beforeAll(() => {
+        vm = createWrapper(ClaimPhoto, {
+            global: {
+                stubs: ['FetchData', 'TeleportSlot'],
+                mocks: {
+                    claimDms: [{ dmsFk: 1 }],
+                },
+            },
+        }).vm;
     });
 
     afterEach(() => {
-        //vi.clearAllMocks();
+        vi.clearAllMocks();
+    });
+
+    describe('deleteDms()', () => {
+        it('should delete dms and call quasar notify', async () => {
+            vi.spyOn(axios, 'post').mockResolvedValue({ data: true });
+            vi.spyOn(vm.quasar, 'notify');
+
+            await vm.deleteDms(0);
+
+            expect(vm.quasar.notify).toHaveBeenCalledWith(
+                expect.objectContaining({ type: 'positive' })
+            );
+            expect(vm.claimDms).toEqual([]);
+        });
     });
 
     describe('viewDeleteDms()', () => {
         it('should call quasar dialog', async () => {
-            console.log(vm.quasar);
+            vi.spyOn(vm.quasar, 'dialog');
-            vi.spyOn(axios, 'get').mockResolvedValue();
+
-            vi.spyOn(axios, 'post').mockResolvedValue();
+            await vm.viewDeleteDms(1);
+
+            expect(vm.quasar.dialog).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    componentProps: {
+                        message: 'This file will be deleted',
+                        icon: 'delete',
+                    },
+                })
+            );
+        });
+    });
+
+    describe('setClaimDms()', () => {
+        it('should assign claimDms and client from data', async () => {
+            await vm.setClaimDms(claimMock);
+
+            expect(vm.claimDms).toEqual([
+                {
+                    dmsFk: 1,
+                    dms: {
+                        contentType: 'contentType',
+                    },
+                    isVideo: false,
+                    url: '///api/Claims/1/downloadFile?access_token=',
+                },
+            ]);
+
+            expect(vm.client).toEqual(claimMock.client);
+        });
+    });
+
+    describe.skip('create()', () => {
+        it('should upload file and call quasar notify', async () => {
+            const files = [{ name: 'firstFile' }];
+            vi.spyOn(axios, 'post').mockResolvedValue({ data: true });
             vi.spyOn(vm.quasar, 'notify');
 
-            // await vm.viewDeleteDms();
+            await vm.create(files);
 
-            // expect(vm.quasar.notify).toHaveBeenCalledWith(
+            expect(axios).toHaveBeenCalledWith(
-            //     expect.objectContaining({ type: 'positive' })
+                expect.objectContaining({ type: 'positive' })
-            // );
+            );
+            expect(vm.quasar.notify).toHaveBeenCalledWith(
+                expect.objectContaining({ type: 'positive' })
+            );
         });
     });
 });

test/vitest/helper.js

@@ -17,18 +17,49 @@ const mockPush = vi.fn();
 vi.mock('vue-router', () => ({
     useRouter: () => ({
         push: mockPush,
-        currentRoute: { value: 'myCurrentRoute' },
+        currentRoute: {
+            value: {
+                params: {
+                    id: 1,
+                },
+            },
+        },
     }),
     useRoute: () => ({
         matched: [],
     }),
 }));
 
+// class FormDataMock {
+//     append() {
+//         vi.fn();
+//     }
+//     delete() {
+//         vi.fn();
+//     }
+//     get() {
+//         vi.fn();
+//     }
+//     getAll() {
+//         vi.fn();
+//     }
+//     has() {
+//         vi.fn();
+//     }
+//     set() {
+//         vi.fn();
+//     }
+//     forEach() {
+//         vi.fn();
+//     }
+// }
+
 export function createWrapper(component, options) {
     const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false });
 
     const defaultOptions = {
         global: {
+            // FormData: FormDataMock,
             plugins: [i18n, pinia],
         },
     };