refactor: refs #8441 add data-cy attributes for summary buttons and improve tests for vehicle invoice

src/components/ui/CardDescriptor.vue

@@ -180,6 +180,7 @@ const toModule = computed(() => {
                     color="white"
                     class="link"
                     v-if="summary"
+                    data-cy="openSummaryBtn"
                 >
                     <QTooltip>
                         {{ t('components.smartCard.openSummary') }}
@@ -194,6 +195,7 @@ const toModule = computed(() => {
                         icon="launch"
                         round
                         size="md"
+                        data-cy="goToSummaryBtn"
                     >
                         <QTooltip>
                             {{ t('components.cardDescriptor.summary') }}

src/components/ui/CardSummary.vue

@@ -81,6 +81,7 @@ async function fetch() {
                                 name: `${moduleName ?? route.meta.moduleName}Summary`,
                                 params: { id: entityId || entity.id },
                             }"
+                            data-cy="goToSummaryBtn"
                         >
                             <QIcon name="open_in_new" color="white" size="sm" />
                         </router-link>

src/pages/Route/Vehicle/Card/VehicleInvoiceIn.vue

@@ -95,9 +95,10 @@ async function unassignInvoice(id) {
         :data-key="dataKey"
         :url="`vehicles/${route.params.id}/getInvoices`"
         :columns="columns"
+        search-url="vehicleInvoiceIns"
         :order="['issued DESC', 'supplierRef ASC']"
         :create="{
-            urlCreate: 'VehicleInvoiceIns/assignInvoice',
+            urlCreate: 'VehicleInvoiceIns',
             title: t('vehicle.ticket.assignInvoice'),
             formInitialData: {
                 vehicleFk: parseInt(route.params.id, 10),
@@ -128,14 +129,6 @@ async function unassignInvoice(id) {
                 option-label="supplierRef"
                 :required="true"
             >
-                <template #option="scope">
-                    <QItem v-bind="scope.itemProps">
-                        <QItemSection>
-                            <QItemLabel>{{ scope.opt?.supplierRef }}</QItemLabel>
-                            <QItemLabel caption>{{ `#${scope.opt?.id}` }}</QItemLabel>
-                        </QItemSection>
-                    </QItem>
-                </template>
             </VnSelect>
             <VnInputNumber
                 :label="t('invoiceIn.list.amount')"

test/cypress/integration/route/vehicle/vehicleInvoiceIn.spec.js

@@ -1,19 +1,23 @@
+const { get } = require('cypress/types/lodash');
+
 describe('Vehicle Invoice In', () => {
+    const getSelector = (colField) =>
+        `tr:first-child > [data-col-field="${colField}"] > .no-padding > .link`;
     const selectors = {
-        firstRowSupplier: 'tr:first-child > .expand > .no-padding > .link',
+        firstRowSupplier: getSelector('supplierFk'),
-        firstRowInvoice:
+        firstRowInvoice: getSelector('supplierRef'),
-            ':nth-child(1) > [data-col-field="supplierRef"] > .no-padding > .link',
+        descriptorTitle: '.descriptor .title',
-        descriptorTitle:
+        summaryTitle: '.summaryHeader',
-            '.q-menu > .descriptor > .body > .q-list > .q-item__label--header > .title > span',
+        descriptorOpenSummaryBtn: '.descriptor [data-cy="openSummaryBtn"]',
-        descriptorPopupGoToSummaryBtn:
+        descriptorGoToSummaryBtn: '.descriptor [data-cy="goToSummaryBtn"]',
-            '.header > :nth-child(2) > .q-btn__content > .q-icon',
+        SummaryGoToSummaryBtn: '.summaryHeader [data-cy="goToSummaryBtn"]',
-        summaryTitle: '.summaryHeader > :nth-child(2)',
-        summaryPopUpGoToSummaryBtn: '.header > .q-icon',
         unassignBtn: 'tableAction-0',
     };
 
-    const supplier = 'PLANTS SL';
+    const data = {
-    const invoice = '1234';
+        supplier: 'PLANTS SL',
+        invoice: '1234',
+    };
 
     beforeEach(() => {
         cy.viewport(1920, 1080);
@@ -48,40 +52,36 @@ describe('Vehicle Invoice In', () => {
     describe('Supplier pop-ups', () => {
         it('Should redirect to the supplier summary from the supplier descriptor pop-up', () => {
             cy.get(selectors.firstRowSupplier).click();
-            cy.get(selectors.descriptorTitle).should('contain', supplier);
+            cy.containContent(selectors.descriptorTitle, data.supplier);
-            cy.get(
+            cy.get(selectors.descriptorGoToSummaryBtn).click();
-                '[href="#/supplier/1/summary"] > .q-btn > .q-btn__content > .q-icon',
+            cy.containContent(selectors.summaryTitle, data.supplier);
-            ).click();
-            cy.get(selectors.summaryTitle).should('contain', supplier);
         });
 
         it('Should redirect to the supplier summary from summary pop-up from the supplier descriptor pop-up', () => {
             cy.get(selectors.firstRowSupplier).click();
-            cy.get(selectors.descriptorTitle).should('contain', supplier);
+            cy.containContent(selectors.descriptorTitle, data.supplier);
-            cy.get(selectors.descriptorPopupGoToSummaryBtn).click();
+            cy.get(selectors.descriptorOpenSummaryBtn).click();
-            cy.get(selectors.summaryTitle).should('contain', supplier);
+            cy.containContent(selectors.summaryTitle, data.supplier);
-            cy.get(selectors.summaryPopUpGoToSummaryBtn).click();
+            cy.get(selectors.SummaryGoToSummaryBtn).click();
-            cy.get(selectors.summaryTitle).should('contain', supplier);
+            cy.containContent(selectors.summaryTitle, data.supplier);
         });
     });
 
     describe('Invoice pop-ups', () => {
         it('Should redirect to the invoiceIn summary from the invoice descriptor pop-up', () => {
             cy.get(selectors.firstRowInvoice).click();
-            cy.get(selectors.descriptorTitle).should('have.text', invoice);
+            cy.containContent(selectors.descriptorTitle, data.invoice);
-            cy.get(
+            cy.get(selectors.descriptorGoToSummaryBtn).click();
-                '[href="#/invoice-in/1/summary"] > .q-btn > .q-btn__content > .q-icon',
+            cy.containContent(selectors.summaryTitle, data.supplier);
-            ).click();
-            cy.get(selectors.summaryTitle).should('contain', supplier);
         });
 
         it('Should redirect to the invoiceIn summary from summary pop-up from the invoice descriptor pop-up', () => {
             cy.get(selectors.firstRowInvoice).click();
-            cy.get(selectors.descriptorTitle).should('have.text', invoice);
+            cy.containContent(selectors.descriptorTitle, data.invoice);
-            cy.get(selectors.descriptorPopupGoToSummaryBtn).click();
+            cy.get(selectors.descriptorOpenSummaryBtn).click();
-            cy.get(selectors.summaryTitle).should('contain', supplier);
+            cy.containContent(selectors.summaryTitle, data.supplier);
-            cy.get(selectors.summaryPopUpGoToSummaryBtn).click();
+            cy.get(selectors.SummaryGoToSummaryBtn).click();
-            cy.get(selectors.summaryTitle).should('contain', supplier);
+            cy.containContent(selectors.summaryTitle, data.supplier);
         });
     });
 });

test/cypress/support/commands.js

@@ -317,6 +317,14 @@ Cypress.Commands.add('validateContent', (selector, expectedValue) => {
     cy.get(selector).should('have.text', expectedValue);
 });
 
+Cypress.Commands.add('containContent', (selector, expectedValue) => {
+    cy.get(selector)
+        .invoke('text')
+        .then((text) => {
+            expect(text).to.include(expectedValue);
+        });
+});
+
 Cypress.Commands.add('openActionDescriptor', (opt) => {
     cy.openActionsDescriptor();
     const listItem = '[role="menu"] .q-list .q-item';