import VnProgressModal from 'src/components/common/VnProgressModal.vue';

describe.skip('<VnProgressModal />', () => {
    const mountComponent = (opt) => {
        cy.createWrapper(VnProgressModal, opt);
    };

    it('should display progress and close button', () => {
        mountComponent({
            props: {
                progress: 0.5,
                showDialog: true,
                cancelled: false,
            },
        });
        // Verifica que el diálogo esté visible
        cy.get('.q-dialog').should('be.visible');

        // Verifica el texto de progreso en el componente
        cy.contains('50%');

        // Verifica que el botón de cerrar esté presente
        cy.get('.q-btn[icon="close"]').should('exist');
    });

    it('should emit close event when close button is clicked', () => {
        // Espía el evento de cierre
        const onClose = cy.spy().as('closeEvent');
        mountComponent({
            props: {
                progress: 0.5,
                showDialog: true,
            },
            listeners: {
                close: onClose,
            },
        });

        // Clic en el botón de cerrar
        cy.get('.q-btn[icon="close"]').click();

        // Asegúrate de que el evento se haya emitido
        cy.get('@closeEvent').should('have.been.calledOnce');
    });

    it('should display cancelled badge if cancelled prop is true', () => {
        // Montar el componente con `cancelled` en `true`
        mountComponent({
            props: {
                progress: 0.5,
                showDialog: true,
                cancelled: true,
            },
        });

        // Verifica que la etiqueta de cancelación esté visible
        cy.contains('Cancelado').should('be.visible');
    });

    it('should emit cancel event when cancel button is clicked', () => {
        // Espía el evento de cancelación
        const onCancel = cy.spy().as('cancelEvent');
        mountComponent({
            props: {
                progress: 0.5,
                showDialog: true,
                cancelled: false,
            },
            listeners: {
                cancel: onCancel,
            },
        });

        // Clic en el botón de cancelar
        cy.contains('Cancelar').click();

        // Asegúrate de que el evento se haya emitido
        cy.get('@cancelEvent').should('have.been.calledOnce');
    });

    it('should hide cancel button when progress is 100%', () => {
        // Montar el componente con `progress` en `1` (100%)
        mountComponent({
            props: {
                progress: 1,
                showDialog: true,
                cancelled: false,
            },
        });

        // Verificar que el botón de cancelar no esté presente
        cy.contains('Cancelar').should('not.exist');
    });
});