test/cypress/components/FetchData.spec.js

@@ -1,8 +1,63 @@
 import FetchData from 'src/components/FetchData.vue';
 
-describe.skip('<FetchData />', () => {
+describe.only('<FetchData />', () => {
+    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
+        );
     });
 });