diff --git a/test/cypress/components/FetchData.spec.js b/test/cypress/components/FetchData.spec.js index efc7a49cb4..c0819f30ec 100644 --- a/test/cypress/components/FetchData.spec.js +++ b/test/cypress/components/FetchData.spec.js @@ -1,8 +1,63 @@ import FetchData from 'src/components/FetchData.vue'; -describe.skip('', () => { +describe.only('', () => { + const mockApiResponse = { results: [{ id: 1, name: 'Test' }] }; it('TODO: boilerplate', () => { // see: https://on.cypress.io/mounting-vue - cy.createWrapper(FetchData); + 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 + ); }); });