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

refs #5673 test(CrudModel): front and e2e

This commit is contained in:
Alex Moreno 2023-08-21 15:14:19 +02:00
parent 6c8329ec53
commit 98552bcd9e
11 changed files with 218 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@ -64,7 +64,7 @@ module.exports = {
},
overrides: [
{
files: ['test/cypress/**/*.spec.{js,ts}'],
files: ['test/cypress/**/*.*'],
extends: [
// Add Cypress-specific lint rules, globals and Cypress plugin
// See https://github.com/cypress-io/eslint-plugin-cypress#rules

5
cypress/fixtures/example.json Normal file
View File

@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}

25
cypress/support/commands.js Normal file
View File

@ -0,0 +1,25 @@
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

4
src/components/CrudModel.vue
View File

@ -285,8 +285,8 @@ function isEmpty(obj) {
</template>
</VnPaginate>
<SkeletonTable v-if="!formData" />
<Teleport to="#st-actions" v-if="stateStore.isSubToolbarShown()">
<QBtnGroup push class="q-gutter-x-sm">
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
<QBtnGroup push flat class="q-gutter-x-sm">
<slot name="moreActions" />
<QBtn
:label="tMobile('globals.remove')"

7
src/components/FormModel.vue
View File

@ -65,7 +65,7 @@ async function fetch() {
});
state.set($props.model, data);
originalData.value = Object.assign({}, data);
originalData.value = data && JSON.parse(JSON.stringify(data));
watch(formData.value, () => (hasChanges.value = true));
@ -82,13 +82,14 @@ async function save() {
isLoading.value = true;
await axios.patch($props.urlUpdate || $props.url, formData.value);
originalData.value = formData.value;
originalData.value = JSON.parse(JSON.stringify(formData.value));
hasChanges.value = false;
isLoading.value = false;
}
function reset() {
state.set($props.model, originalData.value);
watch(formData.value, () => (hasChanges.value = true));
hasChanges.value = false;
}
// eslint-disable-next-line vue/no-dupe-keys
@ -120,7 +121,7 @@ watch(formUrl, async () => {
<QForm v-if="formData" @submit="save" @reset="reset" class="q-pa-md">
<slot name="form" :data="formData" :validate="validate" :filter="filter"></slot>
</QForm>
<Teleport to="#st-actions" v-if="stateStore.isSubToolbarShown()">
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
<div v-if="$props.defaultActions">
<QBtnGoup push class="q-gutter-x-sm">
<slot name="moreActions" />

15
src/pages/Claim/Card/ClaimCard.vue
View File

@ -29,7 +29,6 @@ const claimSections = [
let salixUrl;
onMounted(async () => {
salixUrl = await getUrl(`claim/${entityId.value}`);
stateStore.setSubtoolbar();
});
</script>
<template>
@ -65,13 +64,13 @@ onMounted(async () => {
</QScrollArea>
</QDrawer>
<QPageContainer>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<QPage class="q-pa-md">
<RouterView></RouterView>
<QPage>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<div class="q-pa-md"><RouterView></RouterView></div>
</QPage>
</QPageContainer>
</template>

11
src/stores/useStateStore.js
View File

@ -5,7 +5,6 @@ export const useStateStore = defineStore('stateStore', () => {
const isMounted = ref(false);
const leftDrawer = ref(false);
const rightDrawer = ref(false);
const subToolbar = ref(false);
function toggleLeftDrawer() {
leftDrawer.value = !leftDrawer.value;
@ -19,10 +18,6 @@ export const useStateStore = defineStore('stateStore', () => {
isMounted.value = true;
}
function setSubtoolbar() {
subToolbar.value = true;
}
function isHeaderMounted() {
return isMounted.value;
}
@ -36,7 +31,10 @@ export const useStateStore = defineStore('stateStore', () => {
}
function isSubToolbarShown() {
return subToolbar.value;
return (
!!document.querySelector('#st-data') &&
!!document.querySelector('#st-actions')
);
}
return {
@ -48,7 +46,6 @@ export const useStateStore = defineStore('stateStore', () => {
toggleRightDrawer,
isLeftDrawerShown,
isRightDrawerShown,
setSubtoolbar,
isSubToolbarShown,
};
});

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

@ -1,55 +1,77 @@
/// <reference types="cypress" />
describe('ClaimPhoto', () => {
describe('ClaimDevelopment', () => {
const claimId = 1;
beforeEach(() => {
const claimId = 1;
cy.viewport(1920, 1080);
cy.login('developer');
cy.visit(`/#/claim/${claimId}/photos`);
cy.visit(`/#/claim/${claimId}/development`);
});
it('should add new file', () => {
cy.get('label > .q-btn').click();
cy.get('label > .q-btn input').selectFile('test/cypress/fixtures/image.jpg', {
force: true,
});
cy.get('.q-notification__message').should('have.text', 'Data saved');
});
it('should add new file with drag and drop', () => {
cy.get('.container').selectFile('test/cypress/fixtures/image.jpg', {
action: 'drag-drop',
});
cy.get('.q-notification__message').should('have.text', 'Data saved');
});
it('should open first image dialog change to second and close', () => {
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) > .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'
);
':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');
});
it('should remove third and fourth file', () => {
cy.get(
'.multimediaParent > :nth-child(3) > .q-btn > .q-btn__content > .q-icon'
).click();
cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
cy.get('.q-notification__message').should('have.text', 'Data deleted');
it('should edit line', () => {
cy.get('tbody > :nth-child(1) > :nth-child(2)').click();
cy.selectOption('Novato');
cy.get('[title="Save"]').click();
cy.visit(`/#/claim/${claimId}/development`);
cy.get(
'.multimediaParent > :nth-child(3) > .q-btn > .q-btn__content > .q-icon'
).click();
cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
cy.get('.q-notification__message').should('have.text', 'Data deleted');
':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');
//Restart data
cy.get('tbody > :nth-child(1) > :nth-child(2)');
cy.selectOption('Prisas');
cy.get('[title="Save"]').click();
});
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');
//fill in data
const rowData = ['', '', ''];
cy.fillTableRow(3, rowData);
});
// 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'
// ).click();
// cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
// cy.get('.q-notification__message').should('have.text', 'Data deleted');
// cy.get(
// '.multimediaParent > :nth-child(3) > .q-btn > .q-btn__content > .q-icon'
// ).click();
// cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
// cy.get('.q-notification__message').should('have.text', 'Data deleted');
// });
});

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

@ -40,4 +40,71 @@ Cypress.Commands.add('login', (user) => {
window.localStorage.setItem('token', response.body.token);
});
});
Cypress.Commands.add('selectOption', (option) => {
//cy.visit('/#/login');
cy.get('.q-item__label').then(() => {
cy.contains('.q-item__label', option).click();
});
});
// 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();
} 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;
}
});
});
});
// registerCommands();

40
test/vitest/__tests__/components/common/CrudModel.spec.js
View File

@ -1,13 +1,16 @@
import { createWrapper } from 'app/test/vitest/helper';
import { createWrapper, axios } from 'app/test/vitest/helper';
import CrudModel from 'components/CrudModel.vue';
import { vi, afterEach, beforeAll, describe, expect, it } from 'vitest';
import { vi, afterEach, beforeAll, beforeEach, describe, expect, it } from 'vitest';
describe.only('CrudModel', () => {
let vm;
beforeAll(() => {
vm = createWrapper(CrudModel, {
global: {
stubs: ['VnPaginate', 'useState'],
stubs: ['vnPaginate', 'useState', 'arrayData', 'useStateStore'],
mocks: {
fetch: vi.fn(),
},
},
propsData: {
dataRequired: {
@ -15,6 +18,15 @@ describe.only('CrudModel', () => {
name: 'name',
autoLoad: true,
},
dataKey: 'crudModelKey',
model: 'crudModel',
url: 'crudModelUrl',
},
attrs: {
url: 'crudModelUrl',
dataKey: 'CustomerList',
order: 'id DESC',
limit: 3,
},
}).vm;
});
@ -24,12 +36,26 @@ describe.only('CrudModel', () => {
});
describe('insert()', () => {
it('should new element in list', () => {
it('should new element in list with index 0 if formData not has data', () => {
vi.mock('src/composables/useValidator', () => ({
default: () => {},
fetch: () => {
vi.fn();
},
}));
vi.spyOn(axios, 'get').mockResolvedValue({
data: [
{ id: 1, name: 'Tony Stark' },
{ id: 2, name: 'Jessica Jones' },
{ id: 3, name: 'Bruce Wayne' },
],
});
vm.state.set('crudModel', []);
vm.insert();
expect(vm.message).toEqual(
`A minimum amount of 50€ (VAT excluded) is required for your order ${orderId} of ${shipped} to receive it without additional shipping costs.`
);
expect(vm.formData.length).toEqual(1);
expect(vm.formData[0].id).toEqual(1);
expect(vm.formData[0].$index).toEqual(0);
});
});
});

5
test/vitest/helper.js
View File

@ -64,6 +64,10 @@ export function createWrapper(component, options) {
global: {
plugins: [i18n, pinia],
},
mocks: {
t: (tKey) => tKey,
$t: (tKey) => tKey,
},
};
const mountOptions = Object.assign({}, defaultOptions);
@ -75,6 +79,7 @@ export function createWrapper(component, options) {
mountOptions.global.plugins = defaultOptions.global.plugins;
}
}
console.log(mountOptions);
const wrapper = mount(component, mountOptions);
const vm = wrapper.vm;