/// <reference types="cypress" />
import VnJsonValue from 'src/components/common/VnJsonValue.vue';

describe('<VnJsonValue />', () => {
    const mountComponent = (value) => {
        cy.createWrapper(VnJsonValue, { props: { value } });
    };

    it('renders null value correctly', () => {
        mountComponent(null);
        cy.get('span').should('have.class', 'json-null').and('contain', '∅');
    });

    it('renders number value correctly', () => {
        mountComponent(123.456);
        cy.get('span').should('have.class', 'json-number').and('contain', '123.456');
    });

    it('renders boolean value correctly', () => {
        mountComponent(true);
        cy.get('span').should('have.class', 'json-true').and('contain', '✓');

        mountComponent(false);
        cy.get('span').should('have.class', 'json-false').and('contain', '✗');
    });

    it('renders string value correctly', () => {
        mountComponent('Hello, World!');
        cy.get('span')
            .should('have.class', 'json-string')
            .and('contain', 'Hello, World!');
    });

    it('renders truncated string value correctly', () => {
        const longString = 'a'.repeat(513);
        mountComponent(longString);
        cy.get('span')
            .should('have.class', 'json-string')
            .and('contain', 'a'.repeat(512) + '...');
    });

    it('renders date value correctly', () => {
        const date = new Date('2023-01-01T00:00:00Z');
        mountComponent(date);
        cy.get('span').should('have.class', 'json-object').and('contain', '2023-01-01');
    });

    it('renders object value correctly', () => {
        const obj = { key: 'value' };
        mountComponent(obj);
        cy.get('span')
            .should('have.class', 'json-object')
            .and('contain', '[object Object]');
    });
});