salix-front/test/cypress/components/ui/VnAvatar.spec.js

import VnAvatar from 'src/components/ui/VnAvatar.vue'; // Ajusta la ruta según tu estructura de proyecto

describe('VnAvatar', () => {
    const mountComponent = (opt = {}) => {
        cy.createWrapper(VnAvatar, {
            props: {
                ...opt,
            },
            global: {
                mocks: {
                    useSession: () => ({
                        getTokenMultimedia: () => 'test-token',
                    }),
                    useColor: () => '#535353',
                    getCssVar: () => '#FFFFFF',
                },
            },
        });
    };

    it('renders with default props', () => {
        mountComponent();
        cy.get('.q-avatar').should('exist');
        cy.get('.q-img').should('exist');
        cy.get('.q-avatar').should('have.attr', 'title', 'System');
    });

    it('displays uppercase title if provided', () => {
        mountComponent({ title: 'Test Title' });
        cy.get('.q-avatar').should('have.attr', 'title', 'TEST TITLE');
    });

    it('uses default title when title prop is not provided', () => {
        mountComponent();
        cy.get('.q-avatar').should('have.attr', 'title', 'System');
    });

    it('shows first letter of title when image fails to load', () => {
        mountComponent({ title: 'Test' });
        cy.get('.q-img').should('exist');
        cy.get('.q-img').invoke('trigger', 'error');
        cy.get('.q-avatar').contains('T');
    });

    it('applies background color from color prop', () => {
        mountComponent({ color: 'red' });
        cy.get('.q-avatar')
            .should('have.attr', 'style')
            .and('include', 'background-color: red;');
    });

    it.only('applies background color from useColor when color prop is not provided', () => {
        mountComponent({ title: 'Test' });
        cy.get('.q-avatar')
            .should('have.attr', 'style')
            .and('include', 'background-color: #000000;');
    });

    it('displays description slot if provided', () => {
        mountComponent({ description: 'Test Description' });
        cy.get('.description').should('exist').and('contain', 'Test Description');
    });
});