salix-front/test/cypress/support/component.js

import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-e2e-cypress';
import { createTestingPinia } from '@pinia/testing';
import { mount } from 'cypress/vue';
import { i18n } from 'src/boot/i18n';
import { Quasar } from 'quasar';
import { createPinia } from 'pinia';
const pinia = createTestingPinia({ createSpy: () => {}, stubActions: false });
import axios from 'axios';
installQuasarPlugin({ plugins: { Dialog, Notify } });
// setActivePinia(pinia);
// // Run this code before each *test*.
// beforeEach(() => {
//     // New Pinia
//     pinia = createPinia();
//     console.log(pinia);
//     // Set current Pinia instance
//     setActivePinia(pinia);
// });

// Crear un comando personalizado para montar componentes con Pinia
// Cypress.Commands.add('mountWithPinia', (component, options = {}) => {
//     const pinia = createPinia();
//     options.global = options.global || {};
//     options.global.plugins = [Quasar, createPinia()]; // Incluye Quasar y Pinia
//     return mount(component, options);
// });

// Registrar Quasar y sus componentes

setActivePinia(createPinia()); // Ensure Pinia is active
axios.defaults.baseURL = Cypress.env('baseUrl');
Cypress.Commands.add('mount', (component, options = {}) => {
    const pinia = createTestingPinia(options.piniaOptions);
    const components = options.global?.components || {};
    const router = createRouter({
        history: createWebHistory(),
        routes: [],
    });
    const defaultOptions = {
        global: {
            mocks: {
                t: (tKey) => tKey,
                $t: (tKey) => tKey,

                $axios: axios, // Añadir axios como un mock global
            },
            plugins: [
                Quasar,
                (app) => {
                    app.use(router);
                    app.use(i18n);
                    app.use(pinia);
                },
            ], // Añade Quasar y Pinia como plugins globales
        },
    };
    const mountOptions = Object.assign({}, defaultOptions, options);

    if (options.global) {
        mountOptions.global.plugins = defaultOptions.global.plugins;
    }

    return mount(component, mountOptions);

    // options.global.plugins.push({
    //     install(app) {
    //         app.use(i18n);
    //         app.use(router);
    //         // app.use(arrayDataStore);
    //     },
    // });
    // const wrapper = mount(component, mountOptions);
    // const { vm } = wrapper;
    // return wrapper;
});
function createWrapper(component, options = {}) {
    const defaultOptions = {
        global: {
            plugins: [
                Quasar,
                i18n,
                createTestingPinia({
                    createSpy: () => cy.spy(),
                }),
            ],
            stubs: [
                'router-link',
                'router-view',
                'vue-router',
                'vnPaginate',
                'useState',
                'arrayData',
                'arrayDataStore',
                'useArrayData',
                'useArrayDataStore',
                'useStateStore',
                'vue-i18n',
            ],
        },
        mocks: {
            t: (tKey) => tKey,
            $t: (tKey) => tKey,
        },
    };
    const arrayDataStore = useArrayDataStore();
    const mountOptions = Object.assign({}, defaultOptions);
    options.global = options?.global || {};
    options.global.plugins = options.global?.plugins || [];
    // options.global.plugins.push([Quasar, {}]);
    // options.global.plugins.push([i18n]);
    // options.global.plugins.push(createTestingPinia());
    if (options instanceof Object) {
        Object.assign(mountOptions, options);

        if (options.global) {
            mountOptions.global.plugins = defaultOptions.global.plugins;
        }
    }
    // create router if one is not provided
    if (!options.router) {
        options.router = createRouter({
            routes: [],
            history: createMemoryHistory(),
        });
    }
    mountOptions.global.plugins.push({
        install(app) {
            app.use(i18n);
            app.use(options.router);
            // app.use(arrayDataStore);
        },
    });

    const wrapper = mount(component, mountOptions);
    const vm = wrapper.vm;

    return wrapper;
}
// declare global {
//   namespace Cypress {
//     interface Chainable {
//       createWrapper: typeof createWrapper;
//     }
//   }
// }

Cypress.Commands.add('createWrapper', createWrapper);

Cypress.Commands.add('_vnMount', (component, options = {}) => {
    const globalConfig = {
        global: {
            plugins: [Quasar, i18n],
            mocks: { t: (key) => key },
        },
    };
    options.global = options.global || {};
    // options.global.stubs = options.global.stubs || {};
    // options.global.stubs.transition = false;
    // options.global.components = options.global.components || {};
    options.global.plugins = options.global.plugins || [];

    // Use store passed in from options, or initialize a new one
    // const { /* store = getStore(), */ ...mountOptions } = options;

    // Add plugins here
    options.global.plugins.push({
        install(app) {
            app.use(i18n);
        },
    });
    // Spy para capturar el evento onFetch

    // Agregar el spy a los atributos del componente
    const finalOptions = {
        ...globalConfig,
        ...options,
        attrs: {
            ...options.attrs,
        },
    };

    console.log(finalOptions);
    const cmp = mount(component, finalOptions);
    return cmp;
});
import 'quasar/dist/quasar.css';
import { createRouter } from 'vue-router';
import { createMemoryHistory } from 'vue-router';
import { setActivePinia } from 'pinia';
import { useArrayDataStore } from 'src/stores/useArrayDataStore';
import { createWebHistory } from 'vue-router';
import { Dialog } from 'quasar';
import { Notify } from 'quasar';
Cypress.Commands.add('vue', () => {
    return cy.wrap(Cypress.vueWrapper);
});
Cypress.Commands.add('_mount', (component, options) => {
    // Wrap any parent components needed
    // ie: return mount(<MyProvider>{component}</MyProvider>, options)
    options.global = options.global || {};
    options.global.plugins = options.global.plugins || [];
    options.global.plugins.push([Quasar, {}]);
    options.global.plugins.push([i18n]);

    return mount(component, options);
});

Cypress.Commands.add('login', (user) => {
    //cy.visit('/#/login');
    cy.request({
        method: 'POST',
        url: 'http://localhost:9000/api/accounts/login',

        body: {
            user: user,
            password: 'nightmare',
        },
    }).then((response) => {
        window.localStorage.setItem('token', response.body.token);
        cy.request({
            method: 'GET',
            url: 'http://localhost:9000/api/VnUsers/ShareToken',
            headers: {
                Authorization: window.localStorage.getItem('token'),
            },
        }).then(({ body }) => {
            window.localStorage.setItem('tokenMultimedia', body.multimediaToken.id);
        });
    });
});

// Define el comando personalizado
Cypress.Commands.add('stubUseArrayDataStore', (stubData = {}) => {
    const arrayDataStore = useArrayDataStore();
    if (arrayDataStore.get.restore) {
        arrayDataStore.get.restore();
    }
    cy.stub(arrayDataStore, 'get').returns(stubData).as('getStub');
});