5673-claim-development & crudModel #71
|
|
@ -261,10 +261,6 @@ function isEmpty(obj) {
|
|||
}
|
||||
</script>
|
||||
<template>
|
||||
<QBanner v-if="hasChanges" class="text-white bg-warning">
|
||||
<QIcon name="warning" size="md" class="q-mr-md" />
|
||||
<span>{{ t('globals.changesToSave') }}</span>
|
||||
</QBanner>
|
||||
<VnPaginate
|
||||
@submit="onSubmit"
|
||||
@reset="reset"
|
||||
|
|
@ -286,12 +282,13 @@ function isEmpty(obj) {
|
|||
</VnPaginate>
|
||||
<SkeletonTable v-if="!formData" />
|
||||
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
|
||||
<QBtnGroup push flat class="q-gutter-x-sm">
|
||||
<QBtnGroup push class="q-gutter-x-sm">
|
||||
<slot name="moreActions" />
|
||||
<QBtn
|
||||
:label="tMobile('globals.remove')"
|
||||
color="primary"
|
||||
icon="delete"
|
||||
flat
|
||||
@click="remove(selected)"
|
||||
:disable="!selected?.length"
|
||||
:title="t('globals.remove')"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { ref, toRefs } from 'vue';
|
||||
import { ref, toRefs, computed } from 'vue';
|
||||
const emit = defineEmits(['update:modelValue', 'update:options']);
|
||||
|
||||
const $props = defineProps({
|
||||
|
|
@ -16,10 +16,9 @@ const $props = defineProps({
|
|||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const myOptions = computed(() => $props.options);
|
||||
const updateValue = (newValue) => emit('update:modelValue', newValue);
|
||||
const { modelValue, optionLabel, options } = toRefs($props);
|
||||
const myOptions = ref(JSON.parse(JSON.stringify(options.value)));
|
||||
const myOptionsOriginal = ref(JSON.parse(JSON.stringify(options.value)));
|
||||
|
||||
const filter = (val, options) => {
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@ async function onLoad(...params) {
|
|||
</QCard>
|
||||
</div>
|
||||
</div>
|
||||
<QInfiniteScroll v-if="store.data" @load="onLoad" :offset="offset">
|
||||
<QInfiniteScroll v-if="store.data" @load="onLoad" :offset="offset" class="full-width">
|
||||
<slot name="body" :rows="store.data"></slot>
|
||||
<div v-if="isLoading" class="info-row q-pa-md text-center">
|
||||
<QSpinner color="orange" size="md" />
|
||||
|
|
|
|||
|
|
@ -121,67 +121,65 @@ const columns = computed(() => [
|
|||
auto-load
|
||||
/>
|
||||
<div class="column items-center">
|
||||
<div class="list">
|
||||
<CrudModel
|
||||
data-key="ClaimDevelopments"
|
||||
url="ClaimDevelopments"
|
||||
model="claimDevelopment"
|
||||
:filter="developmentsFilter"
|
||||
ref="claimDevelopmentForm"
|
||||
:data-required="{ claimFk: route.params.id }"
|
||||
v-model:selected="selected"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
row-key="$index"
|
||||
selection="multiple"
|
||||
hide-pagination
|
||||
v-model:selected="selected"
|
||||
:grid="$q.screen.lt.md"
|
||||
>
|
||||
<template #body-cell="{ row, col }">
|
||||
<QTd auto-width>
|
||||
<VnSelectFilter
|
||||
:label="col.label"
|
||||
v-model="row[col.model]"
|
||||
:options="col.options"
|
||||
:option-value="col.optionValue"
|
||||
:option-label="col.optionLabel"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #item="props">
|
||||
<div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
|
||||
<QCard bordered flat>
|
||||
<QCardSection>
|
||||
<QCheckbox v-model="props.selected" dense />
|
||||
</QCardSection>
|
||||
<QSeparator />
|
||||
<QList dense>
|
||||
<QItem v-for="col in props.cols" :key="col.name">
|
||||
<QItemSection>
|
||||
<VnSelectFilter
|
||||
:label="col.label"
|
||||
v-model="props.row[col.model]"
|
||||
:options="col.options"
|
||||
:option-value="col.optionValue"
|
||||
:option-label="col.optionLabel"
|
||||
dense
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QList>
|
||||
</QCard>
|
||||
</div>
|
||||
</template>
|
||||
</QTable>
|
||||
</template>
|
||||
</CrudModel>
|
||||
</div>
|
||||
<CrudModel
|
||||
data-key="ClaimDevelopments"
|
||||
url="ClaimDevelopments"
|
||||
model="claimDevelopment"
|
||||
:filter="developmentsFilter"
|
||||
ref="claimDevelopmentForm"
|
||||
:data-required="{ claimFk: route.params.id }"
|
||||
v-model:selected="selected"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
row-key="$index"
|
||||
selection="multiple"
|
||||
hide-pagination
|
||||
v-model:selected="selected"
|
||||
:grid="$q.screen.lt.md"
|
||||
>
|
||||
<template #body-cell="{ row, col }">
|
||||
<QTd auto-width>
|
||||
<VnSelectFilter
|
||||
:label="col.label"
|
||||
v-model="row[col.model]"
|
||||
:options="col.options"
|
||||
:option-value="col.optionValue"
|
||||
:option-label="col.optionLabel"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #item="props">
|
||||
<div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
|
||||
<QCard bordered flat>
|
||||
<QCardSection>
|
||||
<QCheckbox v-model="props.selected" dense />
|
||||
</QCardSection>
|
||||
<QSeparator />
|
||||
<QList dense>
|
||||
<QItem v-for="col in props.cols" :key="col.name">
|
||||
<QItemSection>
|
||||
<VnSelectFilter
|
||||
:label="col.label"
|
||||
v-model="props.row[col.model]"
|
||||
:options="col.options"
|
||||
:option-value="col.optionValue"
|
||||
:option-label="col.optionLabel"
|
||||
dense
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QList>
|
||||
</QCard>
|
||||
</div>
|
||||
</template>
|
||||
</QTable>
|
||||
</template>
|
||||
</CrudModel>
|
||||
</div>
|
||||
<QPageSticky position="bottom-right" :offset="[25, 25]">
|
||||
<QBtn fab color="primary" icon="add" @click="claimDevelopmentForm.insert()" />
|
||||
|
|
@ -192,6 +190,9 @@ const columns = computed(() => [
|
|||
.grid-style-transition {
|
||||
transition: transform 0.28s, background-color 0.28s;
|
||||
}
|
||||
.maxwidth {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
/// <reference types="cypress" />
|
||||
describe('ClaimDevelopment', () => {
|
||||
const claimId = 1;
|
||||
const firstLineReason = 'tbody > :nth-child(1) > :nth-child(2)';
|
||||
const thirdRow = 'tbody > :nth-child(3)';
|
||||
|
||||
beforeEach(() => {
|
||||
cy.viewport(1920, 1080);
|
||||
|
|
@ -9,58 +11,46 @@ describe('ClaimDevelopment', () => {
|
|||
});
|
||||
|
||||
it('should reset line', () => {
|
||||
cy.get('tbody > :nth-child(1) > :nth-child(2)').click();
|
||||
cy.selectOption('Novato');
|
||||
cy.get('[title="Reset"]').click();
|
||||
cy.get(
|
||||
':nth-child(1) > :nth-child(2) > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native > span'
|
||||
).should('have.text', 'Prisas');
|
||||
cy.selectOption(firstLineReason, 'Novato');
|
||||
cy.resetCard();
|
||||
cy.getValue(firstLineReason).should('have.text', 'Prisas');
|
||||
});
|
||||
|
||||
it('should edit line', () => {
|
||||
cy.get('tbody > :nth-child(1) > :nth-child(2)').click();
|
||||
cy.selectOption('Novato');
|
||||
cy.get('[title="Save"]').click();
|
||||
cy.selectOption(firstLineReason, 'Novato');
|
||||
cy.saveCard();
|
||||
|
||||
cy.visit(`/#/claim/${claimId}/development`);
|
||||
cy.get(
|
||||
':nth-child(1) > :nth-child(2) > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native > span'
|
||||
).should('have.text', 'Novato');
|
||||
cy.reload();
|
||||
cy.getValue(firstLineReason).should('have.text', 'Novato');
|
||||
|
||||
//Restart data
|
||||
cy.get('tbody > :nth-child(1) > :nth-child(2)');
|
||||
cy.selectOption('Prisas');
|
||||
cy.get('[title="Save"]').click();
|
||||
cy.selectOption(firstLineReason, 'Prisas');
|
||||
cy.saveCard();
|
||||
});
|
||||
|
||||
it('should add new line', () => {
|
||||
//check third if row exist
|
||||
cy.get('.q-page-sticky > div > .q-btn').click();
|
||||
cy.get('tbody > :nth-child(3)').should('exist');
|
||||
it('should add and remove new line', () => {
|
||||
//add row
|
||||
cy.addCard();
|
||||
cy.get(thirdRow).should('exist');
|
||||
|
||||
//fill in data
|
||||
const rowData = ['', '', ''];
|
||||
cy.fillTableRow(3, rowData);
|
||||
const rowData = [false, 'Novato', 'Roces', 'Compradores', 'employeeNick', 'Tour'];
|
||||
cy.fillRow(thirdRow, rowData);
|
||||
cy.saveCard();
|
||||
cy.validateRow(thirdRow, rowData);
|
||||
|
||||
cy.reload();
|
||||
cy.validateRow(thirdRow, rowData);
|
||||
|
||||
//remove row
|
||||
cy.fillRow(thirdRow, [true]);
|
||||
cy.removeCard();
|
||||
cy.clickConfirm();
|
||||
cy.get(thirdRow).should('not.exist');
|
||||
|
||||
cy.reload();
|
||||
cy.get(thirdRow).should('not.exist');
|
||||
});
|
||||
|
||||
// it('should remove last line', () => {
|
||||
// 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 third and fourth file', () => {
|
||||
// cy.get(
|
||||
// '.multimediaParent > :nth-child(3) > .q-btn > .q-btn__content > .q-icon'
|
||||
|
|
|
|||
|
|
@ -41,70 +41,90 @@ Cypress.Commands.add('login', (user) => {
|
|||
});
|
||||
});
|
||||
|
||||
Cypress.Commands.add('selectOption', (option) => {
|
||||
//cy.visit('/#/login');
|
||||
cy.get('.q-item__label').then(() => {
|
||||
cy.contains('.q-item__label', option).click();
|
||||
Cypress.Commands.add('waitForElement', (element) => {
|
||||
|
|
||||
cy.get(element, { timeout: 2000 }).should('be.visible');
|
||||
});
|
||||
|
||||
Cypress.Commands.add('getValue', (selector) => {
|
||||
cy.get(selector).then(($el) => {
|
||||
if ($el.find('.q-checkbox__inner').length > 0) {
|
||||
return cy.get(selector + '.q-checkbox__inner');
|
||||
}
|
||||
// Si es un QSelect
|
||||
else if ($el.find('.q-select__dropdown-icon').length) {
|
||||
return cy.get(
|
||||
selector +
|
||||
'> .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native > span'
|
||||
);
|
||||
} else {
|
||||
// Puedes añadir un log o lanzar un error si el elemento no es reconocido
|
||||
cy.log('Elemento no soportado');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Cypress.Commands.add('fillRow', (row, options) => {
|
||||
// //cy.visit('/#/login');
|
||||
// for (let [i, option] of options.entries()) {
|
||||
// i++;
|
||||
// console.log(i);
|
||||
// const selector = `tbody > :nth-child(${row}) > :nth-child(${i})`;
|
||||
// if (cy.get(selector).should('have.class', 'q-select'))
|
||||
// cy.selectOption(selector, option);
|
||||
// }
|
||||
// });
|
||||
Cypress.Commands.add('fillTableRow', (rowNumber, data) => {
|
||||
// Obtener todas las filas de la tabla
|
||||
cy.get('table tbody tr').eq(rowNumber).as('currentRow');
|
||||
// Fill Inputs
|
||||
Cypress.Commands.add('selectOption', (selector, option) => {
|
||||
cy.get(selector).find('.q-select__dropdown-icon').click();
|
||||
cy.get('.q-menu .q-item').contains(option).click();
|
||||
});
|
||||
|
||||
Cypress.Commands.add('checkOption', (selector) => {
|
||||
cy.wrap(selector).find('.q-checkbox__inner').click();
|
||||
});
|
||||
|
||||
// Global buttons
|
||||
Cypress.Commands.add('saveCard', () => {
|
||||
cy.get('[title="Save"]').click();
|
||||
cy.get('[title="Save"]').should('have.class', 'disabled');
|
||||
});
|
||||
Cypress.Commands.add('resetCard', () => {
|
||||
cy.get('[title="Reset"]').click();
|
||||
});
|
||||
Cypress.Commands.add('removeCard', () => {
|
||||
cy.get('[title="Remove"]').click();
|
||||
});
|
||||
Cypress.Commands.add('addCard', () => {
|
||||
cy.waitForElement('tbody');
|
||||
cy.get('.q-page-sticky > div > .q-btn').click();
|
||||
});
|
||||
Cypress.Commands.add('clickConfirm', () => {
|
||||
cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
|
||||
});
|
||||
|
||||
Cypress.Commands.add('fillRow', (rowSelector, data) => {
|
||||
// Usar el selector proporcionado para obtener la fila deseada
|
||||
cy.waitForElement('tbody');
|
||||
cy.get(rowSelector).as('currentRow');
|
||||
|
||||
// Iterar sobre cada dato en el array 'data'
|
||||
data.forEach((value, index) => {
|
||||
// Basándonos en el índice, encontramos la celda correspondiente y verificamos el tipo de input
|
||||
if (value === null) return;
|
||||
cy.get('@currentRow')
|
||||
.find('td')
|
||||
.eq(index)
|
||||
.find('input')
|
||||
.invoke('attr', 'type')
|
||||
.then((type) => {
|
||||
switch (type) {
|
||||
case 'text':
|
||||
cy.get('@currentRow')
|
||||
.find('td')
|
||||
.eq(index)
|
||||
.find('input[type="text"]')
|
||||
.clear()
|
||||
.type(value);
|
||||
break;
|
||||
|
||||
case 'checkbox':
|
||||
if (value) {
|
||||
// Puede adaptar esto según cómo represente los valores booleanos en su array 'data'
|
||||
cy.get('@currentRow')
|
||||
.find('td')
|
||||
.eq(index)
|
||||
.find('input[type="checkbox"]')
|
||||
.check();
|
||||
} else {
|
||||
cy.get('@currentRow')
|
||||
.find('td')
|
||||
.eq(index)
|
||||
.find('input[type="checkbox"]')
|
||||
.uncheck();
|
||||
}
|
||||
break;
|
||||
|
||||
// ... Puede agregar más casos para otros tipos de inputs según sea necesario
|
||||
|
||||
default:
|
||||
// Manejar cualquier otro tipo de input o agregar lógica de error aquí si es necesario
|
||||
break;
|
||||
.then((td) => {
|
||||
if (td.find('.q-select__dropdown-icon').length) {
|
||||
cy.selectOption(td, value);
|
||||
}
|
||||
if (td.find('.q-checkbox__inner').length && value) {
|
||||
cy.checkOption(td);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Cypress.Commands.add('validateRow', (rowSelector, expectedValues) => {
|
||||
cy.waitForElement('tbody');
|
||||
cy.get(rowSelector).within(() => {
|
||||
for (const [index, value] of expectedValues.entries()) {
|
||||
cy.log('CHECKING ', index, value);
|
||||
if (typeof value == 'boolean') {
|
||||
const prefix = value ? '' : 'not.';
|
||||
cy.getValue(`:nth-child(${index + 1})`).should(`${prefix}be.checked`);
|
||||
continue;
|
||||
}
|
||||
cy.getValue(`:nth-child(${index + 1})`).should('have.text', value);
|
||||
}
|
||||
});
|
||||
});
|
||||
// registerCommands();
|
||||
|
|
|
|||
Loading…
Reference in New Issue
He fet tots estos comandos per a facilitar el fer els e2e i te funcions com getValue que ja te mira que tipo de componente es i teu trau.
Soles els he adaptat per als QSelects i QCheckbox que era el cas que necesitava si me para adaptar mes componentes ja se me fea mes jaleo pq no els gaste realment en un e2e