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

import { Notify } from 'quasar';
import FormModel from 'src/components/FormModel.vue';
// import useNotify from 'src/composables/useNotify';
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, // Use Cypress spy function
        };
        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');
        });
    });
    /*
    it('should display the confirmation dialog on route leave with unsaved changes', () => {
        // Simulate form change
        cy.get('#formModel').then((form) => {
            form[0].__vue__.formData.name = 'Changed';
        });

        // Attempt to navigate away
        cy.get('.q-dialog').should('be.visible');
        cy.get('.q-dialog .q-dialog__title').should(
            'contain',
            'globals.unsavedPopup.title'
        );
    });

    it('should call save method on form submit', async () => {
        const saveSpy = cy.spy(formModel.value, 'save');
        await formModel.value.$refs.myForm.trigger('submit');
        expect(saveSpy).to.have.been.called;
    });

    it('should reset the form data', async () => {
        formModel.value.formData.name = 'Changed';
        await formModel.value.reset();
        expect(formModel.value.formData.name).toBe('Test');
    });

    it('should show loading indicator when saving', async () => {
        formModel.value.isLoading = true;
        await nextTick();
        expect(wrapper.findComponent({ name: 'QInnerLoading' }).props('showing')).toBe(true);
    });

    it('should render form slot content', () => {
        expect(wrapper.find('input').exists()).toBe(true);
    });

    it('should update form data through slot inputs', async () => {
        const nameInput = wrapper.find('input[type="text"]');
        const ageInput = wrapper.find('input[type="number"]');

        await nameInput.setValue('Updated Name');
        await ageInput.setValue(25);

        expect(formModel.value.formData.name).toBe('Updated Name');
        expect(formModel.value.formData.age).toBe(25);
    });

    it('should render moreActions slot content', () => {
        expect(wrapper.find('button').exists()).toBe(true);
    });

    it('should call custom action on button click', async () => {
        const customActionSpy = cy.spy(formModel.value, 'customAction');
        await wrapper.find('button').trigger('click');
        expect(customActionSpy).to.have.been.called;
    });*/
});