test(claim_photo): front and e2e

2023-02-22 14:55:29 +01:00 · 2023-02-22 14:55:29 +01:00 · fe84b21580
parent 5d657a74a4
commit fe84b21580
8 changed files with 203 additions and 50 deletions
--- a/cypress.config.js
+++ b/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',
--- a/src/components/common/SendEmailDialog.vue
+++ b/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>
-{
-    "en": {
-        "sendEmailNotification": "Send email notification",
-        "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"
-    }
-}
+    es:
+        Send email notification: Enviar notificación por correo,
+        The notification will be sent to the following address: La notificación se enviará a la siguiente dirección
 </i18n>
--- a/src/pages/Claim/Card/ClaimPhoto.vue
+++ b/src/pages/Claim/Card/ClaimPhoto.vue
@ -17,11 +17,13 @@ const session = useSession();
 const token = session.getToken();
 const quasar = useQuasar();

-const claimId = computed(function () {
-    return 1;
-});
+const claimId = computed(() => router.currentRoute.value.params.id);

-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": {
-        "message": "This file will be deleted"
-    }
-
-    "es": {
-        "message": "Este archivo va a ser borrado"
-    }
+    es:
+        This file will be deleted: Este archivo va a ser borrado
 </i18n>
--- a/test/cypress/fixtures/image.jpg
+++ b/test/cypress/fixtures/image.jpg
--- a/test/cypress/integration/claimPhoto.spec.js
+++ b/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');
+    });
+});
--- a/test/vitest/tests/pages/Claims/ClaimDescriptorMenu.spec.js
+++ b/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' })
+            );
        });
    });
 });
--- a/test/vitest/tests/pages/Claims/ClaimPhoto.spec.js
+++ b/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(axios, 'get').mockResolvedValue();
-            vi.spyOn(axios, 'post').mockResolvedValue();
+            vi.spyOn(vm.quasar, 'dialog');
+
+            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.objectContaining({ type: 'positive' })
-            // );
+            expect(axios).toHaveBeenCalledWith(
+                expect.objectContaining({ type: 'positive' })
+            );
+            expect(vm.quasar.notify).toHaveBeenCalledWith(
+                expect.objectContaining({ type: 'positive' })
+            );
        });
    });
 });
--- a/test/vitest/helper.js
+++ b/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],
        },
    };