salix-front/test/cypress/components/common/VnSmsDialog.spec.js

/* eslint-disable cypress/unsafe-to-chain-command */
/* eslint-disable cypress/no-assigning-return-values */
import VnSmsDialog from 'src/components/common/VnSmsDialog.vue';

describe.skip('<VnSmsDialog />', () => {
    const defaultProps = {
        phone: '123456789',
        subject: 'Test Subject',
        template: 'pendingPayment',
        locale: 'es',
        promise: cy.stub().resolves(),
    };

    const mountComponent = (opt) => {
        cy.mount(VnSmsDialog, {
            props: defaultProps,
            ...opt,
        });
    };

    it('renders dialog with all elements', () => {
        mountComponent();
        cy.get('.text-h6').should('contain', 'Send SMS');
        cy.get('.q-select').should('exist');
        cy.get('input[type="text"]').should('have.length', 2);
        cy.get('textarea').should('exist');
    });

    it('shows character counter and updates color based on length', () => {
        mountComponent();
        const longMessage = 'a'.repeat(150);
        cy.get('textarea').clear().type(longMessage);
        cy.get('.q-chip').should('have.class', 'bg-warning');
        cy.get('.q-chip').should('contain', '150/160');

        const maxMessage = 'a'.repeat(160);
        cy.get('textarea').clear().type(maxMessage);
        cy.get('.q-chip').should('have.class', 'bg-negative');
    });

    it('updates message when changing language', () => {
        mountComponent();
        const initialMessage = cy.get('textarea').invoke('val');
        cy.get('.q-select').click();
        cy.get('.q-item').contains('English').click();
        cy.get('textarea').invoke('val').should('not.equal', initialMessage);
    });

    it('handles SMS sending', () => {
        const promiseSpy = cy.spy(defaultProps.promise);
        mountComponent({
            props: { ...defaultProps, promise: promiseSpy },
        });

        cy.get('button').contains('confirm').click();
        cy.wrap(promiseSpy).should('have.been.calledOnce');
        cy.get('button').contains('confirm').should('have.class', 'loading');
    });

    it('clears message with clear icon', () => {
        mountComponent();
        cy.get('textarea').type('Test message');
        cy.get('.q-icon').contains('close').click();
        cy.get('textarea').should('have.value', '');
    });

    it('shows tooltip on info icon hover', () => {
        mountComponent();
        cy.get('.q-icon').contains('info').trigger('mouseover');
        cy.get('.q-tooltip').should('be.visible');
    });

    it('validates message length', () => {
        mountComponent();
        const tooLongMessage = 'a'.repeat(161);
        cy.get('textarea').type(tooLongMessage);
        cy.get('.q-field').should('have.class', 'q-field--error');
    });
});