import { describe, it, expect } from 'vitest';
import VnJsonValue from 'src/components/common/VnJsonValue.vue';
import { createWrapper } from 'app/test/vitest/helper';

const buildComponent = (props) => {
    return createWrapper(VnJsonValue, {
        props,
    }).wrapper;
};

describe('VnJsonValue', () => {
    it('renders null value correctly', async () => {
        const wrapper = buildComponent({ value: null });
        const span = wrapper.find('span');
        expect(span.text()).toBe('∅');
        expect(span.classes()).toContain('json-null');
    });

    it('renders boolean true correctly', async () => {
        const wrapper = buildComponent({ value: true });
        const span = wrapper.find('span');
        expect(span.text()).toBe('✓');
        expect(span.classes()).toContain('json-true');
    });

    it('renders boolean false correctly', async () => {
        const wrapper = buildComponent({ value: false });
        const span = wrapper.find('span');
        expect(span.text()).toBe('✗');
        expect(span.classes()).toContain('json-false');
    });

    it('renders a short string correctly', async () => {
        const wrapper = buildComponent({ value: 'Hello' });
        const span = wrapper.find('span');
        expect(span.text()).toBe('Hello');
        expect(span.classes()).toContain('json-string');
    });

    it('renders a long string correctly with ellipsis', async () => {
        const longString = 'a'.repeat(600);
        const wrapper = buildComponent({ value: longString });
        const span = wrapper.find('span');
        expect(span.text()).toContain('...');
        expect(span.text().length).toBeLessThanOrEqual(515);
        expect(span.attributes('title')).toBe(longString);
        expect(span.classes()).toContain('json-string');
    });

    it('renders a number correctly', async () => {
        const wrapper = buildComponent({ value: 123.4567 });
        const span = wrapper.find('span');
        expect(span.text()).toBe('123.457');
        expect(span.classes()).toContain('json-number');
    });

    it('renders an integer correctly', async () => {
        const wrapper = buildComponent({ value: 42 });
        const span = wrapper.find('span');
        expect(span.text()).toBe('42');
        expect(span.classes()).toContain('json-number');
    });

    it('renders a date correctly', async () => {
        const date = new Date('2023-01-01');
        const wrapper = buildComponent({ value: date });
        const span = wrapper.find('span');
        expect(span.text()).toBe('2023-01-01');
        expect(span.classes()).toContain('json-object');
    });

    it('renders an object correctly', async () => {
        const obj = { key: 'value' };
        const wrapper = buildComponent({ value: obj });
        const span = wrapper.find('span');
        expect(span.text()).toBe(obj.toString());
        expect(span.classes()).toContain('json-object');
    });

    it('renders an array correctly', async () => {
        const arr = [1, 2, 3];
        const wrapper = buildComponent({ value: arr });
        const span = wrapper.find('span');
        expect(span.text()).toBe(arr.toString());
        expect(span.classes()).toContain('json-object');
    });

    it('updates value when prop changes', async () => {
        const wrapper = buildComponent({ value: true });
        await wrapper.setProps({ value: 123 });
        const span = wrapper.find('span');
        expect(span.text()).toBe('123');
        expect(span.classes()).toContain('json-number');
    });
});