wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

refs #5673 fix: front, e2e, fix: VnSelectFilter

This commit is contained in:
Alex Moreno 2023-08-23 15:09:03 +02:00
parent 50ae75ac17
commit 169e4863b2
6 changed files with 172 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/CrudModel.vue
View File

@ -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')"

5
src/components/common/VnSelectFilter.vue
View File

@ -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) => {

2
src/components/ui/VnPaginate.vue
View File

@ -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" />

5
src/pages/Claim/Card/ClaimDevelopment.vue
View File

@ -121,7 +121,6 @@ const columns = computed(() => [
auto-load
/>
<div class="column items-center">
<div class="list">
<CrudModel
data-key="ClaimDevelopments"
url="ClaimDevelopments"
@ -182,7 +181,6 @@ const columns = computed(() => [
</template>
</CrudModel>
</div>
</div>
<QPageSticky position="bottom-right" :offset="[25, 25]">
<QBtn fab color="primary" icon="add" @click="claimDevelopmentForm.insert()" />
</QPageSticky>
@ -192,6 +190,9 @@ const columns = computed(() => [
.grid-style-transition {
transition: transform 0.28s, background-color 0.28s;
}
.maxwidth {
width: 100%;
}
</style>
<i18n>

72
test/cypress/integration/claimDevelopment.spec.js
View File

@ -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'

130
test/cypress/support/commands.js
View File

@ -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('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');
// 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
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();
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');
}
});
});
// 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');
data.forEach((value, index) => {
if (value === null) return;
cy.get('@currentRow')
.find('td')
.eq(index)
.find('input[type="checkbox"]')
.uncheck();
.then((td) => {
if (td.find('.q-select__dropdown-icon').length) {
cy.selectOption(td, value);
}
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;
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();