test: refs #8162 ticket list e2e tests

src/components/VnTable/VnTable.vue

@@ -737,6 +737,7 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
             fab
             icon="add"
             shortcut="+"
+            data-testid="vnTableCreateBtn"
         />
         <QTooltip self="top right">
             {{ createForm?.title }}

src/components/ui/VnSearchbar.vue

@@ -130,6 +130,7 @@ async function search() {
                 dense
                 standout
                 autofocus
+                data-testid="vnSearchBar"
             >
                 <template #prepend>
                     <QIcon

src/pages/Ticket/Card/TicketDescriptor.vue

@@ -174,7 +174,7 @@ function ticketFilter(ticket) {
                     <QTooltip>{{ t('Client Frozen') }}</QTooltip>
                 </QIcon>
                 <QIcon
-                    v-if="entity.problem.includes('hasRisk')"
+                    v-if="entity?.problem?.includes('hasRisk')"
                     name="vn:risk"
                     size="xs"
                     color="primary"

src/pages/Ticket/Card/TicketSummary.vue

@@ -99,6 +99,7 @@ function toTicketUrl(section) {
         ref="summaryRef"
         :url="`Tickets/${entityId}/summary`"
         data-key="TicketSummary"
+        data-testid="ticketSummary"
     >
         <template #header-left>
             <VnToSummary

src/pages/Ticket/TicketList.vue

@@ -457,6 +457,7 @@ function setReference(data) {
         data-key="Ticket"
         :label="t('Search ticket')"
         :info="t('You can search by ticket id or alias')"
+        data-testid="ticketListSearchBar"
     />
     <RightMenu>
         <template #right-panel>
@@ -484,6 +485,7 @@ function setReference(data) {
             'row-key': 'id',
             selection: 'multiple',
         }"
+        data-testid="ticketListTable"
     >
         <template #column-statusIcons="{ row }">
             <div class="q-gutter-x-xs">

test/cypress/integration/ticket/ticketList.spec.js

@@ -0,0 +1,54 @@
+/// <reference types="cypress" />
+describe('Ticket descriptor', () => {
+    const firstRow = 'tbody > :nth-child(1)';
+
+    beforeEach(() => {
+        cy.login('developer');
+        cy.viewport(1920, 1080);
+        cy.visit('/#/ticket/list');
+    });
+
+    const searchResults = (search) => {
+        cy.dataCy('vnSearchBar').find('input').focus();
+        if (search) cy.dataCy('vnSearchBar').find('input').type(search);
+        cy.dataCy('vnSearchBar').find('input').type('{enter}');
+        cy.dataCy('ticketListTable').should('exist');
+        cy.get(firstRow).should('exist');
+    };
+
+    it('should search results', () => {
+        cy.dataCy('ticketListTable').should('not.exist');
+        cy.get('.q-field__control').should('exist');
+        searchResults();
+    });
+
+    it('should open ticket sales', () => {
+        searchResults();
+        cy.window().then((win) => {
+            cy.stub(win, 'open').as('windowOpen');
+        });
+        cy.get(firstRow).find('.q-btn:first').click();
+        cy.get('@windowOpen').should('be.calledWithMatch', /\/ticket\/\d+\/sale/);
+    });
+
+    it('should open ticket summary', () => {
+        searchResults();
+        cy.get(firstRow).find('.q-btn:last').click();
+        cy.dataCy('ticketSummary').should('exist');
+    });
+
+    it('Client list create new client', () => {
+        cy.dataCy('vnTableCreateBtn').should('exist');
+        cy.dataCy('vnTableCreateBtn').click();
+        const data = {
+            Customer: { val: 1, type: 'select' },
+            Warehouse: { val: 'Warehouse One', type: 'select' },
+            Address: { val: 'employee: employeeLane, CENTRAL CITY', type: 'select' },
+            Landed: { val: '01-01-2024', type: 'date' },
+        };
+        cy.fillInForm(data);
+        cy.get('.q-mt-lg > .q-btn--standard').click();
+        cy.checkNotification('Data created');
+        cy.url().should('match', /\/ticket\/\d+\/summary/);
+    });
+});

test/cypress/support/commands.js

@@ -311,3 +311,7 @@ Cypress.Commands.add('checkValueSelectForm', (id, search) => {
 Cypress.Commands.add('searchByLabel', (label, value) => {
     cy.get(`[label="${label}"] > .q-field > .q-field__inner`).type(`${value}{enter}`);
 });
+
+Cypress.Commands.add('dataCy', (dataTestId, attr = 'data-testid') => {
+    return cy.get(`[${attr}="${dataTestId}"]`);
+});