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 { createPinia, setActivePinia } from 'pinia';
import axios from 'axios';
import 'quasar/dist/quasar.css';
import { createRouter, createMemoryHistory } from 'vue-router';
import { useArrayDataStore } from 'src/stores/useArrayDataStore';
import { createWebHistory } from 'vue-router';
import { Quasar, Dialog, Notify, Dark } from 'quasar';

installQuasarPlugin({ plugins: { Dialog, Notify, Dark } });
setActivePinia(createPinia());
axios.defaults.baseURL = Cypress.env('baseUrl');

Cypress.Commands.add('mount', (component, options = {}) => {
    const pinia = createTestingPinia(options.piniaOptions);
    const router = createRouter({
        history: createWebHistory(),
        routes: [],
    });
    const defaultOptions = {
        global: {
            mocks: {
                t: (tKey) => tKey,
                $t: (tKey) => tKey,

                $axios: axios,
            },
            plugins: [
                Quasar,
                (app) => {
                    app.use(router);
                    app.use(i18n);
                    app.use(pinia);
                },
            ],
        },
    };
    const mountOptions = Object.assign({}, defaultOptions, options);

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

    return mount(component, mountOptions);
});
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 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;
        }
    }
    if (!options.router) {
        options.router = createRouter({
            routes: [],
            history: createMemoryHistory(),
        });
    }
    mountOptions.global.plugins.push({
        install(app) {
            app.use(i18n);
            app.use(options.router);
        },
    });
    const wrapper = mount(component, mountOptions);

    return wrapper;
}
Cypress.on('uncaught:exception', (err, runnable) => {
    // returning false here prevents Cypress from
    // failing the test
    return false;
});
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 || [];

    options.global.plugins.push({
        install(app) {
            app.use(i18n);
        },
    });

    const finalOptions = {
        ...globalConfig,
        ...options,
        attrs: {
            ...options.attrs,
        },
    };

    console.log(finalOptions);
    const cmp = mount(component, finalOptions);
    return cmp;
});

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.request({
        method: 'POST',
        url: 'api/accounts/login',
        body: {
            user: user,
            password: 'nightmare',
        },
    }).then((response) => {
        window.localStorage.setItem('token', response.body.token);
        cy.request({
            method: 'GET',
            url: 'api/VnUsers/ShareToken',
            headers: {
                Authorization: window.localStorage.getItem('token'),
            },
        }).then(({ body }) => {
            window.localStorage.setItem('tokenMultimedia', body.multimediaToken.id);
        });
    });
});

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