From a9241b17f570966055aae3634b94978c2f2dd1d9 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 6 Nov 2023 16:03:36 +0100
Subject: [PATCH] ref #5835 tests basicData and list

---
 .../InvoiceIn/Card/InvoiceInBasicData.vue     | 549 +++++++++---------
 .../integration/invoiceInBasicData.spec.js    |  24 +
 .../cypress/integration/invoiceInList.spec.js |   1 +
 .../InvoiceIn/InvoiceInBasicData.spec.js      |  46 ++
 4 files changed, 337 insertions(+), 283 deletions(-)
 create mode 100644 test/cypress/integration/invoiceInBasicData.spec.js
 create mode 100644 test/vitest/__tests__/pages/InvoiceIn/InvoiceInBasicData.spec.js

diff --git a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
index 3edfab0d6..3419492b7 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
@@ -85,10 +85,10 @@ async function setCreateDms() {
 
 async function edit() {
     try {
-        if (!dms.value.companyId) throw new Error(t(`The company can't be empty`));
-        if (!dms.value.warehouseId) throw new Error(t(`The warehouse can't be empty`));
-        if (!dms.value.dmsTypeId) throw new Error(t(`The DMS Type can't be empty`));
-        if (!dms.value.description) throw new Error(t(`The description can't be empty`));
+        if (!dms.value.companyId) throw Error(t(`The company can't be empty`));
+        if (!dms.value.warehouseId) throw Error(t(`The warehouse can't be empty`));
+        if (!dms.value.dmsTypeId) throw Error(t(`The DMS Type can't be empty`));
+        if (!dms.value.description) throw Error(t(`The description can't be empty`));
 
         const formData = new FormData();
 
@@ -111,7 +111,7 @@ async function edit() {
         });
     } catch (error) {
         quasar.notify({
-            message: t(`${error}`),
+            message: t(`${error.message}`),
             type: 'negative',
         });
     }
@@ -119,11 +119,11 @@ async function edit() {
 
 async function create() {
     try {
-        if (!dms.value.companyId) throw new Error(t(`The company can't be empty`));
-        if (!dms.value.warehouseId) throw new Error(t(`The warehouse can't be empty`));
-        if (!dms.value.dmsTypeId) throw new Error(t(`The DMS Type can't be empty`));
-        if (!dms.value.description) throw new Error(t(`The description can't be empty`));
-        if (!dms.value.files) throw new Error(t(`The files can't be empty`));
+        if (!dms.value.companyId) throw Error(t(`The company can't be empty`));
+        if (!dms.value.warehouseId) throw Error(t(`The warehouse can't be empty`));
+        if (!dms.value.dmsTypeId) throw Error(t(`The DMS Type can't be empty`));
+        if (!dms.value.description) throw Error(t(`The description can't be empty`));
+        if (!dms.value.files) throw Error(t(`The files can't be empty`));
 
         const formData = new FormData();
 
@@ -144,8 +144,9 @@ async function create() {
             type: 'positive',
         });
     } catch (error) {
+        console.log(error);
         quasar.notify({
-            message: t(`${error}`),
+            message: t(`${error.message}`),
             type: 'negative',
         });
     }
@@ -197,274 +198,257 @@ async function create() {
         @on-fetch="(data) => (userConfig = data)"
         auto-load
     />
-    <div class="column items-center">
-        <QCard>
-            <FormModel
-                v-if="invoiceIn"
-                :url="`InvoiceIns/${route.params.id}`"
-                model="invoiceIn"
-            >
-                <template #form="{ data }">
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <VnSelectFilter
-                                v-if="suppliersRef"
-                                :label="t('supplierFk')"
-                                v-model="data.supplierFk"
-                                :options="suppliers"
-                                option-value="id"
-                                option-label="nickname"
-                                @input-value="suppliersRef.fetch()"
-                            >
-                                <template #option="scope">
-                                    <QItem v-bind="scope.itemProps">
-                                        <QItemSection>
-                                            <QItemLabel>{{
-                                                `${scope.opt.id} - ${scope.opt.nickname}`
-                                            }}</QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                </template>
-                            </VnSelectFilter>
-                        </div>
-                        <div class="col">
-                            <QInput
-                                clearable
-                                clear-icon="close"
-                                :label="t('Supplier ref')"
-                                v-model="data.supplierRef"
+    <FormModel v-if="invoiceIn" :url="`InvoiceIns/${route.params.id}`" model="invoiceIn">
+        <template #form="{ data }">
+            <div class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        v-if="suppliersRef"
+                        :label="t('supplierFk')"
+                        v-model="data.supplierFk"
+                        :options="suppliers"
+                        option-value="id"
+                        option-label="nickname"
+                        :input-debounce="100"
+                        @input-value="suppliersRef.fetch()"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{
+                                        `${scope.opt.id} - ${scope.opt.nickname}`
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+                <div class="col">
+                    <QInput
+                        clearable
+                        clear-icon="close"
+                        :label="t('Supplier ref')"
+                        v-model="data.supplierRef"
+                    />
+                </div>
+            </div>
+            <div class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('Expedition date')"
+                        v-model="data.issued"
+                        mask="####-##-##"
+                    >
+                        <template #append>
+                            <QIcon name="event" class="cursor-pointer" fill-mask="_">
+                                <QPopupProxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <QDate v-model="data.issued">
+                                        <div class="row items-center justify-end">
+                                            <QBtn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </QDate>
+                                </QPopupProxy>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </div>
+                <div class="col">
+                    <QInput
+                        :label="t('Operation date')"
+                        v-model="data.operated"
+                        mask="####-##-##"
+                        fill-mask="_"
+                        autofocus
+                    >
+                        <template #append>
+                            <QIcon name="event" class="cursor-pointer">
+                                <QPopupProxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <QDate v-model="data.operated" mask="YYYY-MM-DD">
+                                        <div class="row items-center justify-end">
+                                            <QBtn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </QDate>
+                                </QPopupProxy>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </div>
+            </div>
+            <div class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('Undeductible VAT')"
+                        v-model="data.deductibleExpenseFk"
+                        clearable
+                        clear-icon="close"
+                    />
+                </div>
+                <div class="col">
+                    <QInput
+                        :label="t('Document')"
+                        v-model="data.dmsFk"
+                        clearable
+                        clear-icon="close"
+                        @update:model-value="checkFileExists(data.dmsFk)"
+                    >
+                        <template #prepend>
+                            <QBtn
+                                v-if="data.dmsFk"
+                                :class="{
+                                    'no-pointer-events': editDownloadDisabled,
+                                }"
+                                :disable="editDownloadDisabled"
+                                icon="cloud_download"
+                                :title="t('Download file')"
+                                padding="xs"
+                                round
+                                @click="downloadFile(data.dmsFk)"
                             />
-                        </div>
-                    </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QInput :label="t('Expedition date')" v-model="data.issued">
-                                <template #append>
-                                    <QIcon
-                                        name="event"
-                                        class="cursor-pointer"
-                                        mask="####-##-##"
-                                        fill-mask="_"
-                                    >
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="data.issued">
-                                                <div class="row items-center justify-end">
-                                                    <QBtn
-                                                        v-close-popup
-                                                        label="Close"
-                                                        color="primary"
-                                                        flat
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
-                        </div>
-                        <div class="col">
-                            <QInput
-                                :label="t('Operation date')"
-                                v-model="data.operated"
-                                mask="####-##-##"
-                                fill-mask="_"
-                                autofocus
+                        </template>
+                        <template #append>
+                            <QBtn
+                                :class="{
+                                    'no-pointer-events': editDownloadDisabled,
+                                }"
+                                :disable="editDownloadDisabled"
+                                v-if="data.dmsFk"
+                                icon="edit"
+                                round
+                                padding="xs"
+                                @click="setEditDms(data.dmsFk)"
                             >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate
-                                                v-model="data.operated"
-                                                mask="YYYY-MM-DD"
-                                            >
-                                                <div class="row items-center justify-end">
-                                                    <QBtn
-                                                        v-close-popup
-                                                        label="Close"
-                                                        color="primary"
-                                                        flat
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
-                        </div>
-                    </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QInput
-                                :label="t('Undeductible VAT')"
-                                v-model="data.deductibleExpenseFk"
-                                clearable
-                                clear-icon="close"
-                            />
-                        </div>
-                        <div class="col">
-                            <QInput
-                                :label="t('Document')"
-                                v-model="data.dmsFk"
-                                clearable
-                                clear-icon="close"
-                                @update:model-value="checkFileExists(data.dmsFk)"
+                                <QTooltip>{{ t('Edit document') }}</QTooltip>
+                            </QBtn>
+                            <QBtn
+                                v-else
+                                icon="add_circle"
+                                round
+                                padding="xs"
+                                @click="setCreateDms()"
                             >
-                                <template #prepend>
-                                    <QBtn
-                                        v-if="data.dmsFk"
-                                        :class="{
-                                            'no-pointer-events': editDownloadDisabled,
-                                        }"
-                                        :disable="editDownloadDisabled"
-                                        icon="cloud_download"
-                                        :title="t('Download file')"
-                                        padding="xs"
-                                        round
-                                        @click="downloadFile(data.dmsFk)"
-                                    />
-                                </template>
-                                <template #append>
-                                    <QBtn
-                                        :class="{
-                                            'no-pointer-events': editDownloadDisabled,
-                                        }"
-                                        :disable="editDownloadDisabled"
-                                        v-if="data.dmsFk"
-                                        icon="edit"
-                                        round
-                                        padding="xs"
-                                        @click="setEditDms(data.dmsFk)"
-                                    >
-                                        <QTooltip>{{ t('Edit document') }}</QTooltip>
-                                    </QBtn>
-                                    <QBtn
-                                        v-else
-                                        icon="add_circle"
-                                        round
-                                        padding="xs"
-                                        @click="setCreateDms()"
-                                    >
-                                        <QTooltip>{{ t('Create document') }}</QTooltip>
-                                    </QBtn>
-                                </template>
-                            </QInput>
-                        </div>
-                    </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QInput
-                                :label="t('Entry date')"
-                                v-model="data.bookEntried"
-                                clearable
-                                clear-icon="close"
-                                mask="####-##-##"
-                                fill-mask="_"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate
-                                                v-model="data.bookEntried"
-                                                mask="YYYY-MM-DD"
-                                            >
-                                                <div class="row items-center justify-end">
-                                                    <QBtn
-                                                        v-close-popup
-                                                        label="Close"
-                                                        color="primary"
-                                                        flat
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
-                        </div>
-                        <div class="col">
-                            <QInput
-                                :label="t('Accounted date')"
-                                v-model="data.booked"
-                                clearable
-                                clear-icon="close"
-                                mask="####-##-##"
-                                fill-mask="_"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate
-                                                v-model="data.booked"
-                                                mask="YYYY-MM-DD"
-                                            >
-                                                <div class="row items-center justify-end">
-                                                    <QBtn
-                                                        v-close-popup
-                                                        label="Close"
-                                                        color="primary"
-                                                        flat
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
-                        </div>
-                    </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <VnSelectFilter
-                                v-if="currenciesRef"
-                                :label="t('Currency')"
-                                v-model="data.currencyFk"
-                                :options="currencies"
-                                option-value="id"
-                                option-label="code"
-                                @input-value="currenciesRef.fetch()"
-                            />
-                        </div>
-                        <div class="col">
-                            <VnSelectFilter
-                                v-if="companiesRef"
-                                :label="t('Company')"
-                                v-model="data.companyFk"
-                                :options="companies"
-                                option-value="id"
-                                option-label="code"
-                                @input-value="companiesRef.fetch()"
-                            />
-                        </div>
-                    </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QCheckbox
-                                :label="t('invoiceIn.summary.booked')"
-                                v-model="data.isBooked"
-                            />
-                        </div>
-                        <div class="col"></div>
-                    </div>
-                </template>
-            </FormModel>
-        </QCard>
-    </div>
+                                <QTooltip>{{ t('Create document') }}</QTooltip>
+                            </QBtn>
+                        </template>
+                    </QInput>
+                </div>
+            </div>
+            <div class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('Entry date')"
+                        v-model="data.bookEntried"
+                        clearable
+                        clear-icon="close"
+                        mask="####-##-##"
+                        fill-mask="_"
+                    >
+                        <template #append>
+                            <QIcon name="event" class="cursor-pointer">
+                                <QPopupProxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <QDate v-model="data.bookEntried" mask="YYYY-MM-DD">
+                                        <div class="row items-center justify-end">
+                                            <QBtn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </QDate>
+                                </QPopupProxy>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </div>
+                <div class="col">
+                    <QInput
+                        :label="t('Accounted date')"
+                        v-model="data.booked"
+                        clearable
+                        clear-icon="close"
+                        mask="####-##-##"
+                        fill-mask="_"
+                    >
+                        <template #append>
+                            <QIcon name="event" class="cursor-pointer">
+                                <QPopupProxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <QDate v-model="data.booked" mask="YYYY-MM-DD">
+                                        <div class="row items-center justify-end">
+                                            <QBtn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </QDate>
+                                </QPopupProxy>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </div>
+            </div>
+            <div class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        v-if="currenciesRef"
+                        :label="t('Currency')"
+                        v-model="data.currencyFk"
+                        :options="currencies"
+                        option-value="id"
+                        option-label="code"
+                        @input-value="currenciesRef.fetch()"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        v-if="companiesRef"
+                        :label="t('Company')"
+                        v-model="data.companyFk"
+                        :options="companies"
+                        option-value="id"
+                        option-label="code"
+                        @input-value="companiesRef.fetch()"
+                    />
+                </div>
+            </div>
+            <div class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox
+                        :label="t('invoiceIn.summary.booked')"
+                        v-model="data.isBooked"
+                    />
+                </div>
+                <div class="col"></div>
+            </div>
+        </template>
+    </FormModel>
     <QDialog ref="editDmsRef">
         <QCard>
             <QCardSection class="q-pb-none">
@@ -691,13 +675,12 @@ async function create() {
     </QDialog>
 </template>
 <style lang="scss" scoped>
-.column {
-    .q-card {
-        width: 100%;
-        max-width: 60em;
-    }
-}
 @media (max-width: $breakpoint-xs) {
+    .column {
+        .row:not(:last-child) {
+            flex-direction: column;
+        }
+    }
     .q-dialog {
         .q-card {
             &__section:not(:first-child) {
@@ -714,7 +697,7 @@ async function create() {
         supplierFk: Supplier
     es:
         supplierFk: Proveedor
-        Supplier Ref: Ref. proveedor
+        Supplier ref: Ref. proveedor
         Expedition date: Fecha expedición
         Operation date: Fecha operación
         Undeductible VAT: Iva no deducible
diff --git a/test/cypress/integration/invoiceInBasicData.spec.js b/test/cypress/integration/invoiceInBasicData.spec.js
new file mode 100644
index 000000000..e95fb0161
--- /dev/null
+++ b/test/cypress/integration/invoiceInBasicData.spec.js
@@ -0,0 +1,24 @@
+/// <reference types="cypress" />
+describe('InvoiceInBasicData', () => {
+    const selects = '.q-form .q-select';
+    const appendBtns = 'label button';
+    const saveBtn = '.q-btn-group > .q-btn--standard > .q-btn__content > .q-icon';
+
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit(`/#/invoice-in/1/basic-data`);
+    });
+
+    it('should edit the provideer and supplier ref', () => {
+        cy.get(selects).eq(0).click();
+        cy.get(selects).eq(0).type('Bros');
+        cy.get(selects).eq(0).type('{enter}');
+
+        cy.get(appendBtns).eq(0).click();
+        cy.get('input').eq(2).type(4739);
+        cy.get(saveBtn).click();
+
+        cy.get(`${selects} input`).eq(0).invoke('val').should('eq', 'Bros nick');
+        cy.get('input').eq(2).invoke('val').should('eq', 4739);
+    });
+});
diff --git a/test/cypress/integration/invoiceInList.spec.js b/test/cypress/integration/invoiceInList.spec.js
index 20b8403a3..98e5a96a1 100644
--- a/test/cypress/integration/invoiceInList.spec.js
+++ b/test/cypress/integration/invoiceInList.spec.js
@@ -23,5 +23,6 @@ describe('InvoiceInList', () => {
     it('should open the details', () => {
         cy.get(firstDetailBtn).click();
         cy.get(summaryHeaders).eq(1).contains('Basic Data');
+        cy.get(summaryHeaders).eq(5).contains('Vat');
     });
 });
diff --git a/test/vitest/__tests__/pages/InvoiceIn/InvoiceInBasicData.spec.js b/test/vitest/__tests__/pages/InvoiceIn/InvoiceInBasicData.spec.js
new file mode 100644
index 000000000..f8daa99cd
--- /dev/null
+++ b/test/vitest/__tests__/pages/InvoiceIn/InvoiceInBasicData.spec.js
@@ -0,0 +1,46 @@
+import { vi, describe, expect, it, beforeAll } from 'vitest';
+import { createWrapper, axios } from 'app/test/vitest/helper';
+import InvoiceInBasicData from 'src/pages/InvoiceIn/Card/InvoiceInBasicData.vue';
+
+describe('InvoiceInBasicData', () => {
+    let vm;
+
+    beforeAll(() => {
+        vm = createWrapper(InvoiceInBasicData, {
+            global: {
+                stubs: [],
+                mocks: {
+                    fetch: vi.fn(),
+                },
+            },
+        }).vm;
+    });
+
+    it('should throw an error when data is empty', async () => {
+        vi.spyOn(axios, 'post').mockResolvedValue({ data: [] });
+        vi.spyOn(vm.quasar, 'notify');
+
+        await vm.edit();
+
+        expect(vm.quasar.notify).toHaveBeenCalledWith(
+            expect.objectContaining({
+                message: `The company can't be empty`,
+                type: 'negative',
+            })
+        );
+    });
+
+    it('should throw an error when data is empty', async () => {
+        vi.spyOn(axios, 'post').mockResolvedValue({ data: [] });
+        vi.spyOn(vm.quasar, 'notify');
+
+        await vm.create();
+
+        expect(vm.quasar.notify).toHaveBeenCalledWith(
+            expect.objectContaining({
+                message: `The company can't be empty`,
+                type: 'negative',
+            })
+        );
+    });
+});