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

import { createTestingPinia } from '@pinia/testing';
import axios from 'axios';
import { setActivePinia } from 'pinia';
import { createPinia } from 'pinia';
import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
import { useArrayData } from 'src/composables/useArrayData';
import { useArrayDataStore } from 'src/stores/useArrayDataStore';

import { useRouter } from 'vue-router';
// import vueRouter from 'vue-router';
describe('<CreateBankEntityForm />', () => {
    const mockApiResponse = { results: [{ id: 1, name: 'Test' }] };
    // const arrayDataStore = useArrayDataStore();
    const mockStoreData = { filter: {}, userFilter: {}, userParams: {}, url: 'mockUrl' };
    let store, arrayData;
    before(() => {
        cy.login('developer');
        // cy.stub(arrayDataStore, 'get').callsFake(() => 'asd');

        // cy.stub(arrayDataStore, 'get')
        //     .callsFake((e, fn) => (e = fn))
        //     .as('update');
        // const arrayData = useArrayData('ArrayData', { url: 'mockUrl' });

        // cy.stub(arrayData).callsFake(() => ({
        //     userParams: {},
        //     userFilter: {},
        //     order: {},
        //     searchUrl: 'searchUrl',
        // }));
        // cy.stub(vueRouter).callsFake(() => ({
        //     push: () => {},
        //     replace: () => {},
        //     currentRoute: {
        //         value: {
        //             params: {
        //                 id: 1,
        //             },
        //             meta: { moduleName: 'mockName' },
        //             matched: [{ path: 'mockName/list' }],
        //         },
        //     },
        // }));
        Cypress.config('defaultCommandTimeout', 500);

        // const spy = cy.spy();
        // createTestingPinia({
        //     createSpy: () => spy,
        // });

        // // one way:
        // store = useArrayDataStore();

        // // another way with the same error:
        // useArrayDataStore(
        //     createTestingPinia({
        //         createSpy: () => spy,
        //         initialState: {
        //             state: { ArrayData: cy.spy() },
        //         },
        //     })
        // );

        // cy.stub(useArrayDataStore, 'get').callsFake(() => cy.spy());
        // cy.stub(useArrayData, 'get').callsFake(() => store);
        // arrayData = useArrayData('ArrayData', { url: 'mockUrl' });
    });
    beforeEach(() => {
        // cy._mount(CreateBankEntityForm, {
        //     global: {
        //         plugins: [store],
        //     },
        // });
        // Stub del método get del store
        // cy.spy(useRouter(), 'replace');
        // cy.spy(useRouter(), 'push');
    });

    it('should intercept axios.get for a specific route', () => {
        // Configura Pinia y la store
        const pinia = createPinia();
        setActivePinia(pinia);
        const arrayDataStore = useArrayDataStore();
        cy.stub(arrayDataStore, 'get').returns(mockStoreData).as('getStub');

        cy.stub(arrayData, 'arrayDataStore').callsFake(() => store);
        cy.createWrapper(CreateBankEntityForm);
        // Obtén la instancia de la store de Pinia
        // const store = useArrayDataStore();
        // Asegúrate de que el método `set` esté disponible
        // Usar cy.stub() para espiar la función set y personalizar su comportamiento
        // cy.stub(store, 'set').callsFake(() => {
        //     console.log('store.set fue llamado');
        //     // Simular que set se ejecuta correctamente
        //     store.get('key').data = 'Fake Data';
        // });
        // expect(store.set).to.be.a('function');
        // store.set('key'); // Inicializar el estado con `set`
        // store.get('key').data = 'Test Data'; // Simular que tenemos datos
        // // Simula que agregamos usuarios a la store
        // store.setUsers([
        //     { id: 1, name: 'John Doe' },
        //     { id: 2, name: 'Jane Doe' },
        // ]);
    });
    xit('should intercept axios.get for a specific route', () => {
        // Intercepta la llamada a axios.get para una ruta específica
        cy.stub(axios, 'get')
            .callsFake((url, params) => {
                if (url === 'Countries') {
                    return Promise.resolve({ data: mockApiResponse });
                }
                // Si la URL no coincide, llama al método original
                return axios.get.wrappedMethod(url, params);
            })
            .as('axiosStub');

        const onFetchSpy = cy.spy().as('onFetchSpy');
        // Configura Pinia y la store
        const pinia = createPinia();
        setActivePinia(pinia);
        const arrayDataStore = useArrayDataStore();
        cy.stub(arrayDataStore, 'get').returns(mockStoreData).as('getStub');
        cy.createWrapper(CreateBankEntityForm, {
            props: {
                showEntityField: true,
            },
            attrs: {
                onFetch: onFetchSpy,
            },
        });

        cy.get('@axiosStub').should((spy) => {
            expect(spy).to.have.been.calledWith('Countries');
        });

        cy.get('@onFetchSpy').should((spy) => {
            expect(spy).to.have.been.calledWith(mockApiResponse);
        });

        // Verifica que los datos emitidos por el hijo son manejados por el padre
        // cy.get('p').should('contain', 'Datos recibidos:');  // Verifica que los datos se muestran en el DOM
        // cy.get('p').should('contain', 'Test');  // Verifica que el contenido de los datos es correcto
    });
});