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

import FetchData from 'src/components/FetchData.vue';

describe.only('<FetchData />', () => {
    const mockApiResponse = { results: [{ id: 1, name: 'Test' }] };
    it('TODO: boilerplate', () => {
        // see: https://on.cypress.io/mounting-vue
        let _wrapper = null;
        const onFetchSpy = cy.spy().as('onFetchSpy');
        cy.createWrapper(FetchData, {
            props: {
                autoLoad: true,
                url: 'http://localhost:9000/api/Schemas/modelinfo',
            },
            emits: { onFetch: onFetchSpy },
        });
        cy.get('@onFetchSpy').should('have.been.called');
        // Intercepta la petición de axios para simular una respuesta
        // cy.intercept('http://localhost:9000/api/Schemas/modelinfo', {
        //     statusCode: 200,
        //     body: mockApiResponse,
        // }).as('dataFetched'); // Alias para poder esperar en el test

        // Verifica que la petición fue realizada automáticamente y la data es correcta
        // cy.wait('@dataFetched').then(({ request, response }) => {
        //     expect(response.body).to.deep.equal(mockApiResponse); // Verifica la respuesta
        // });
        // debugger;

        // Verifica que el evento onFetch fue emitido con los datos correctos
    });
    xit('TODO: boilerplate2', () => {
        // see: https://on.cypress.io/mounting-vue
        cy.createWrapper(FetchData, {
            props: {
                autoLoad: false,
                url: '/api/test-url', // La URL que va a usar en el fetch
            },
        });
        // Intercepta la petición de axios para simular una respuesta
        cy.intercept('GET', '**/api/test-url', {
            statusCode: 200,
            body: mockApiResponse,
        }).as('fetchData'); // Alias para poder esperar en el test
        // Verifica que no se hizo ninguna petición al montar el componente
        cy.get('@fetchDataManual').should('not.exist');

        // Llama manualmente al método fetch desde el componente expuesto
        cy.window().then((win) => {
            win.$vm.fetch(); // Llama al método fetch
        });

        // Verifica que la petición se ejecutó manualmente y la data es correcta
        cy.wait('@fetchDataManual').then(({ request, response }) => {
            expect(response.body).to.deep.equal(mockApiResponse);
        });

        // Verifica que el evento onFetch fue emitido con los datos correctos
        cy.wrap(Cypress.vueWrapper.emitted('onFetch')[0][0]).should(
            'deep.equal',
            mockApiResponse
        );
    });
});