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

describe('<VnTitle />', () => {
    it('renders text with link', () => {
        cy.vnMount(VnTitle, {
            props: {
                url: 'https://example.com',
                text: 'Example Link',
            },
        });
        cy.get('a').should('exist');
        cy.get('a').should('have.attr', 'href', 'https://example.com');
        cy.get('a').should('contain.text', 'Example Link');
    });
    it('renders text without link', () => {
        cy.vnMount(VnTitle, {
            props: {
                text: 'No Link',
            },
        });
        cy.get('a').should('exist');
        cy.get('a').should('not.have.attr', 'href');
        cy.get('a').should('contain.text', 'No Link');
    });

    it('applies correct classes based on url prop', () => {
        cy.vnMount(VnTitle, {
            props: {
                url: 'https://example.com',
            },
        });
        cy.get('a').should('have.class', 'link');

        cy.vnMount(VnTitle, {
            props: {},
        });
        cy.get('a').should('have.class', 'color-vn-text');
    });

    it('displays icon when url is provided', () => {
        cy.vnMount(VnTitle, {
            props: {
                url: 'https://example.com',
            },
        });
        cy.get('.q-icon').should('exist');
    });

    it('does not display icon when url is not provided', () => {
        cy.vnMount(VnTitle, {
            props: {},
        });
        cy.get('.q-icon').should('not.exist');
    });

    it('applies correct cursor style based on url prop', () => {
        cy.vnMount(VnTitle, {
            props: {
                url: 'https://example.com',
            },
        });
        cy.get('.header-link').should('have.css', 'cursor', 'pointer');

        cy.vnMount(VnTitle, {
            props: {},
        });
        cy.get('.header-link').should('have.css', 'cursor', 'default');
    });
    it('renders default icon when no icon prop is provided', () => {
        cy.vnMount(VnTitle, {
            props: {
                url: 'https://example.com',
            },
        });
        cy.get('i').should('contain.text', 'open_in_new');
    });

    it('renders custom icon when icon prop is provided', () => {
        cy.vnMount(VnTitle, {
            props: {
                url: 'https://example.com',
                icon: 'custom_icon',
            },
        });
        cy.get('i').should('contain.text', 'custom_icon');
    });
});