From 73740822a35c72d579eb62f9170211500a483290 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 24 Mar 2025 13:18:41 +0100
Subject: [PATCH] test: refs #7356 update ticket tracking components and remove
unused TicketCreateTracking.vue
---
src/pages/Claim/Card/ClaimSummaryAction.vue | 4 +-
.../Ticket/Card/TicketCreateTracking.vue | 59 --------
src/pages/Ticket/Card/TicketTracking.vue | 135 +++++++++---------
.../Worker/Card/WorkerDescriptorProxy.vue | 2 +-
.../integration/ticket/ticketTracking.spec.js | 19 ++-
.../vnComponent/vnSelect.commands.js | 3 +
.../vnComponent/vnTable.commands.js | 3 +
test/cypress/support/commands.js | 5 +
8 files changed, 96 insertions(+), 134 deletions(-)
delete mode 100644 src/pages/Ticket/Card/TicketCreateTracking.vue
create mode 100644 test/cypress/integration/vnComponent/vnSelect.commands.js
create mode 100644 test/cypress/integration/vnComponent/vnTable.commands.js
diff --git a/src/pages/Claim/Card/ClaimSummaryAction.vue b/src/pages/Claim/Card/ClaimSummaryAction.vue
index 577ac2a65..be3b9e896 100644
--- a/src/pages/Claim/Card/ClaimSummaryAction.vue
+++ b/src/pages/Claim/Card/ClaimSummaryAction.vue
@@ -88,13 +88,13 @@ const columns = [
auto-load
>
<template #column-itemFk="{ row }">
- <span class="link">
+ <span class="link" @click.stop>
{{ row.itemFk }}
<ItemDescriptorProxy :id="row.itemFk" />
</span>
</template>
<template #column-ticketFk="{ row }">
- <span class="link">
+ <span class="link" @click.stop>
{{ row.ticketFk }}
<TicketDescriptorProxy :id="row.ticketFk" />
</span>
diff --git a/src/pages/Ticket/Card/TicketCreateTracking.vue b/src/pages/Ticket/Card/TicketCreateTracking.vue
deleted file mode 100644
index 5c1e916f2..000000000
--- a/src/pages/Ticket/Card/TicketCreateTracking.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-
-import FormModelPopup from 'components/FormModelPopup.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
-
-import { useState } from 'src/composables/useState';
-import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
-
-const emit = defineEmits(['onRequestCreated']);
-
-const route = useRoute();
-const { t } = useI18n();
-const state = useState();
-const user = state.getUser();
-const stateFetchDataRef = ref(null);
-const statesOptions = ref([]);
-
-const onStateFkChange = (formData) => (formData.userFk = user.value.id);
-</script>
-<template>
- <FetchData
- ref="stateFetchDataRef"
- url="States"
- auto-load
- @on-fetch="(data) => (statesOptions = data)"
- />
- <FormModelPopup
- :title="t('Create tracking')"
- url-create="Tickets/state"
- model="CreateTicketTracking"
- :form-initial-data="{ ticketFk: route.params.id }"
- @on-data-saved="() => emit('onRequestCreated')"
- >
- <template #form-inputs="{ data }">
- <VnRow>
- <VnSelect
- v-model="data.stateFk"
- :label="t('ticketList.state')"
- :options="statesOptions"
- @update:model-value="onStateFkChange(data)"
- hide-selected
- option-label="name"
- option-value="id"
- />
- <VnSelectWorker v-model="data.userFk" :fields="['id', 'name']" />
- </VnRow>
- </template>
- </FormModelPopup>
-</template>
-
-<i18n>
- es:
- Create tracking: Crear estado
-</i18n>
diff --git a/src/pages/Ticket/Card/TicketTracking.vue b/src/pages/Ticket/Card/TicketTracking.vue
index 00610de44..4cfc49290 100644
--- a/src/pages/Ticket/Card/TicketTracking.vue
+++ b/src/pages/Ticket/Card/TicketTracking.vue
@@ -1,27 +1,31 @@
<script setup>
-import { ref, computed, watch, reactive } from 'vue';
+import { ref, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-import TicketCreateTracking from './TicketCreateTracking.vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
+import { useState } from 'src/composables/useState';
import { toDateTimeFormat } from 'src/filters/date.js';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+const state = useState();
+
+const user = state.getUser();
const route = useRoute();
const { t } = useI18n();
-const createTrackingDialogRef = ref(null);
-const paginateRef = ref(null);
-
-watch(
- () => route.params.id,
- async (val) => {
- paginateFilter.where.ticketFk = val;
- paginateRef.value.fetch();
- },
-);
+const tableRef = ref(null);
+// watch(
+// () => route.params.id,
+// async (val) => {
+// paginateFilter.where.ticketFk = val;
+// paginateRef.value.fetch();
+// },
+// );
+const onStateFkChange = (formData) => (formData.userFk = user.value.id);
const paginateFilter = reactive({
include: [
{
@@ -50,81 +54,74 @@ const paginateFilter = reactive({
},
});
-const columns = computed(() => [
+const columns = [
{
label: t('ticketList.state'),
name: 'state',
field: 'state',
align: 'left',
- format: (val) => val.name,
+ format: (row) => row.state?.name,
},
{
label: t('expedition.worker'),
name: 'worker',
align: 'left',
+ field: 'user',
},
{
label: t('expedition.created'),
name: 'created',
field: 'created',
align: 'left',
- format: (val) => toDateTimeFormat(val),
+ format: (row) => toDateTimeFormat(row.created),
},
-]);
-
-const openCreateModal = () => createTrackingDialogRef.value.show();
+];
</script>
<template>
- <QPage class="column items-center q-pa-md">
- <VnPaginate
- ref="paginateRef"
- data-key="TicketTracking"
- :user-filter="paginateFilter"
- search-url="table"
- url="TicketTrackings"
- auto-load
- order="created DESC"
- :limit="0"
- >
- <template #body="{ rows }">
- <QTable
- :rows="rows"
- :columns="columns"
- row-key="id"
- :pagination="{ rowsPerPage: 0 }"
- class="full-width q-mt-md"
- :no-data-label="t('globals.noResults')"
- >
- <template #body-cell-worker="{ row }">
- <QTd>
- <QBtn flat class="link" @click.stop>
- {{ row.user?.name }}
- <WorkerDescriptorProxy :id="row.user?.worker?.id" />
- </QBtn>
- </QTd>
- </template>
- </QTable>
- </template>
- </VnPaginate>
- <QDialog
- ref="createTrackingDialogRef"
- transition-show="scale"
- transition-hide="scale"
- >
- <TicketCreateTracking @on-request-created="paginateRef.fetch()" />
- </QDialog>
- <QPageSticky :offset="[20, 20]">
- <QBtn
- @click="openCreateModal()"
- color="primary"
- fab
- icon="add"
- v-shortcut="'+'"
+ <VnTable
+ ref="tableRef"
+ :right-search="false"
+ :column-search="false"
+ :disable-option="{ card: true, table: true }"
+ :search-url="false"
+ :columns="columns"
+ data-key="TicketTracking"
+ :user-filter="paginateFilter"
+ url="TicketTrackings"
+ auto-load
+ order="created DESC"
+ :limit="0"
+ :without-header="true"
+ :create="{
+ urlCreate: 'Tickets/state',
+ title: t('Create tracking'),
+ onDataSaved: () => tableRef.reload(),
+ formInitialData: {
+ ticketFk: route.params.id,
+ },
+ }"
+ >
+ <template #more-create-dialog="{ data }">
+ <VnSelect
+ url="States"
+ v-model="data.stateFk"
+ :label="t('ticketList.state')"
+ auto-load
+ @update:model-value="onStateFkChange(data)"
+ hide-selected
/>
- <QTooltip class="text-no-wrap">
- {{ t('tracking.addState') }}
- </QTooltip>
- </QPageSticky>
- </QPage>
+ <VnSelectWorker v-model="data.userFk" :fields="['id', 'name']" />
+ </template>
+ <template #column-worker="{ row }">
+ <span class="link" @click.stop>
+ {{ row.user.name }}
+ <WorkerDescriptorProxy :id="row.user?.worker?.id" />
+ </span>
+ </template>
+ </VnTable>
</template>
+<i18n>
+ es:
+ Create tracking: Crear estado
+</i18n>
diff --git a/src/pages/Worker/Card/WorkerDescriptorProxy.vue b/src/pages/Worker/Card/WorkerDescriptorProxy.vue
index 5f71abbea..baa9aa571 100644
--- a/src/pages/Worker/Card/WorkerDescriptorProxy.vue
+++ b/src/pages/Worker/Card/WorkerDescriptorProxy.vue
@@ -11,7 +11,7 @@ const $props = defineProps({
</script>
<template>
- <QPopupProxy>
+ <QPopupProxy data-cy="WorkerDescriptor">
<WorkerDescriptor
v-if="$props.id"
:id="$props.id"
diff --git a/test/cypress/integration/ticket/ticketTracking.spec.js b/test/cypress/integration/ticket/ticketTracking.spec.js
index 1f54af5b1..53bf6704e 100644
--- a/test/cypress/integration/ticket/ticketTracking.spec.js
+++ b/test/cypress/integration/ticket/ticketTracking.spec.js
@@ -1,12 +1,25 @@
/// <reference types="cypress" />
-describe('TicketRequest', () => {
+describe('Ticket tracking', () => {
beforeEach(() => {
cy.login('developer');
cy.viewport(1920, 1080);
- cy.visit('/#/ticket/31/request');
+ cy.visit('/#/ticket/31/tracking');
});
- it('Should load layout', () => {
+ it('Add new tracking', () => {
cy.get('.q-page').should('be.visible');
+
+ cy.firstRow('worker').find('span').should('have.class', 'link').click();
+ cy.dataCy('WorkerDescriptor').should('exist');
+ cy.get('[data-cy="vnTableCreateBtn"] > .q-btn__content > .q-icon').click();
+ cy.selectOption('.q-field--float [data-cy="State_select"]', 'OK').click();
+ cy.get('[data-cy="FormModelPopup_save"] > .q-btn__content > .block').click();
+ cy.get(
+ ':last-child > [data-col-field="state"] > [data-cy="vnTableCell_state"]',
+ ).should('have.text', 'OK');
+ cy.get(':last-child > [data-col-field="worker"]').should(
+ 'have.text',
+ 'developer ',
+ );
});
});
diff --git a/test/cypress/integration/vnComponent/vnSelect.commands.js b/test/cypress/integration/vnComponent/vnSelect.commands.js
new file mode 100644
index 000000000..017b6e7ea
--- /dev/null
+++ b/test/cypress/integration/vnComponent/vnSelect.commands.js
@@ -0,0 +1,3 @@
+Cypress.Commands.add('clickOption', (index = 1) =>
+ cy.get(`.q-menu :nth-child(${index}) >.q-item__section`).click(),
+);
diff --git a/test/cypress/integration/vnComponent/vnTable.commands.js b/test/cypress/integration/vnComponent/vnTable.commands.js
new file mode 100644
index 000000000..15cbf6f9a
--- /dev/null
+++ b/test/cypress/integration/vnComponent/vnTable.commands.js
@@ -0,0 +1,3 @@
+Cypress.Commands.add('firstRow', (field, index = 1) =>
+ cy.get(`:nth-child(${index}) > [data-col-field="${field}"]`),
+);
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index 7f5203547..7ed6ef238 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -29,7 +29,12 @@
// import { registerCommands } from '@quasar/quasar-app-extension-testing-e2e-cypress';
import moment from 'moment';
import waitUntil from './waitUntil';
+// Importar dinámicamente todos los archivos con el sufijo .commands.js dentro de la carpeta src/test/cypress/integration
+const requireCommands = require.context('../integration', true, /\.commands\.js$/);
+// Iterar sobre cada archivo y requerirlo
+requireCommands.keys().forEach(requireCommands);
+// Common comma
Cypress.Commands.add('waitUntil', { prevSubject: 'optional' }, waitUntil);
Cypress.Commands.add('resetDB', () => {