salix-front/test/cypress/components/FormModel.spec.js

import { Notify } from 'quasar';
import FormModel from 'src/components/FormModel.vue';
import { useState } from 'src/composables/useState';
import { useStateStore } from 'src/stores/useStateStore';

describe('<FormModel />', () => {
    let piniaOptions = null;
    let saveSpy, notifySpy, component, wrapper;
    beforeEach(() => {
        piniaOptions = {
            stubActions: false,
            createSpy: cy.spy,
        };
        const state = useState();
        const stateStore = useStateStore();
        cy.stub(stateStore, 'isSubToolbarShown').returns(true).as('isSubToolbarShown');
        state.set('testModel', { name: 'Test', age: 30 });
        const props = {
            url: '',
            model: 'testModel',
            filter: {},
            urlUpdate: '',
            urlCreate: '/api/test/create',
            defaultActions: true,
            defaultButtons: {},
            autoLoad: false,
            formInitialData: {},
            observeFormChanges: true,
            mapper: null,
            clearStoreOnUnmount: true,
            saveFn: null,
            goTo: '',
            reload: false,
            defaultTrim: true,
        };
        cy.mount(FormModel, {
            piniaOptions,
            props,
            slots: {
                form: `<template #form="{ data, validate, filter }">
                        <input data-cy="name" v-model="data.name" label="name" />
                        <input data-cy="age" v-model="data.age" label="age" type="number" />
                        <button type="submit">Save</button>
                        </template>`,
                moreActions: `<template #moreActions>
                                <button @click="customAction">Custom Action</button>
                              </template>`,
            },
        }).then(({ component: cmp, wrapper: wpr }) => {
            component = cmp;
            wrapper = wpr;
            saveSpy = cy.spy(component, 'save').as('saveSpy');
            notifySpy = cy.spy(Notify, 'create').as('notifySpy');
        });
    });
    it('should mount the component', () => {
        cy.get('#formModel').should('exist');
    });

    it('should call the save method when the save button is clicked without changes', () => {
        cy.get('#formModel').should('exist');
        cy.get('button').contains('Save').click();
        cy.get('@saveSpy').should('not.have.been.called');
        cy.get('@notifySpy').should((spy) => {
            expect(spy).to.have.been.calledWith({
                message: 'No changes to save',
                type: 'negative',
                icon: 'error',
            });
        });
    });
    it('should call the save method when the save button is clicked with changes', () => {
        cy.get('#formModel').should('exist');
        cy.get('[data-cy="name"]').type('John Doe');
        cy.get('button').contains('Save').click();
        cy.get('@saveSpy').should('not.have.been.called');
        cy.get('@notifySpy').should((spy) => {
            const [args] = spy.getCall(0)?.args || [];
            expect(args.type).to.equal('negative');
            expect(args.icon).to.equal('error');
            expect(args.message).not.to.equal('No changes to save');
        });
    });
});